/* eslint-disable */
/* Nova Materia Ceramics — Website UI Components */

const { useState, useMemo } = React;

// ---------- Header ----------
const Header = ({ active, onNav, sampleCount = 0 }) => {
  const links = [
    { id: 'home', label: 'Inicio' },
    { id: 'catalog', label: 'Catálogo' },
    { id: 'brands', label: 'Marcas' },
    { id: 'pros', label: 'Profesionales' },
    { id: 'client', label: 'Clientes' },
    { id: 'contact', label: 'Contacto' },
  ];
  const navLink = (l) => (
    <a key={l.id}
       className={'nm-nav-link' + (active === l.id ? ' active' : '')}
       onClick={() => onNav(l.id)}>
      {l.label}
    </a>
  );
  return (
    <header className={'nm-header' + (active === 'home' ? ' nm-header-home' : '')}>
      <div className="nm-header-main">
        <a className="nm-logo" onClick={() => onNav('home')} aria-label="Nova Materia Ceramics · Inicio">
          <img src={window.__resources.logoHorizontal} alt="Nova Materia Ceramics" className="nm-logo-img" />
        </a>
        <nav className="nm-nav" aria-label="Navegación principal">
          {links.map(navLink)}
        </nav>
        <div className="nm-header-actions">
          <span className="nm-lang">ES · IT</span>
          <button className="nm-btn nm-btn-primary nm-btn-samples" onClick={() => onNav('sample')}>
            <span className="nm-samples-full">Pedir muestras para mi proyecto</span><span className="nm-samples-short">Muestras</span> {sampleCount > 0 && <span className="nm-sample-badge">{sampleCount}</span>}
            <span className="nm-arrow">→</span>
          </button>
        </div>
      </div>
      <nav className="nm-mobile-nav" aria-label="Navegación móvil">
        {links.map(navLink)}
      </nav>
    </header>
  );
};

// ---------- Footer ----------
const Footer = ({ onNav }) => (
  <footer className="nm-footer">
    <div className="nm-footer-grid">
      <div>
        <a className="nm-logo nm-logo-sm">
          <img src={window.__resources.logoHorizontal} alt="Nova Materia Ceramics" className="nm-logo-img nm-logo-img-footer" />
        </a>
        <p className="nm-footer-pitch">
          Distribución profesional de porcelánico<br/>
          italiano de alto nivel. Barcelona y provincia.
        </p>
        <div className="nm-footer-social">
          <a href="https://www.instagram.com/novamateriaceramics" target="_blank" rel="noopener noreferrer" className="nm-footer-social-link" aria-label="Instagram">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="5"/>
              <circle cx="12" cy="12" r="5"/>
              <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/>
            </svg>
          </a>
          <a href="https://www.tiktok.com/@novamateriaceramics" target="_blank" rel="noopener noreferrer" className="nm-footer-social-link" aria-label="TikTok">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M16.6 5.82C15.56 4.94 14.88 3.62 14.75 2.15A.75.75 0 0 0 14 1.5h-2.5a.75.75 0 0 0-.75.75v13.5a2.75 2.75 0 1 1-2.06-2.66.75.75 0 0 0 .81-.75V9.75a.75.75 0 0 0-.87-.75 6.25 6.25 0 1 0 5.37 6.25V9.87a7.25 7.25 0 0 0 4.25 1.38.75.75 0 0 0 .75-.75V8a.75.75 0 0 0-.75-.75 4.25 4.25 0 0 1-2.59-1.43z"/>
            </svg>
          </a>
          <a href="https://www.facebook.com/novamateriaceramics" target="_blank" rel="noopener noreferrer" className="nm-footer-social-link" aria-label="Facebook">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.25 10.44 22v-7.03H7.9v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.77-3.91 1.09 0 2.23.2 2.23.2v2.46h-1.25c-1.24 0-1.63.77-1.63 1.56v1.87h2.77l-.44 2.91h-2.33V22C18.34 21.25 22 17.08 22 12.06z"/>
            </svg>
          </a>
        </div>
      </div>
      <div>
        <h4 className="nm-footer-title"><a onClick={() => onNav('catalog')}>Catálogo</a></h4>
        <ul className="nm-footer-list">
          <li><a onClick={() => onNav('catalog', { catalogPreset: { group: 'Tipo', item: 'Pavimento' } })}>Pavimentos</a></li>
          <li><a onClick={() => onNav('catalog', { catalogPreset: { group: 'Tipo', item: 'Revestimiento' } })}>Revestimientos</a></li>
          <li><a onClick={() => onNav('catalog', { catalogPreset: { group: 'Formato', item: '120×278 cm' } })}>Gran formato</a></li>
          <li><a onClick={() => onNav('catalog', { catalogPreset: { query: 'Mosaico' } })}>Mosaicos</a></li>
        </ul>
      </div>
      <div>
        <h4 className="nm-footer-title"><a onClick={() => onNav('brands')}>Marcas</a></h4>
        <ul className="nm-footer-list">
          <li><a onClick={() => onNav('brands', { brandId: 'emil' })}>Emil</a></li>
          <li><a onClick={() => onNav('brands', { brandId: 'ergon' })}>Ergon</a></li>
          <li><a onClick={() => onNav('brands', { brandId: 'provenza' })}>Provenza</a></li>
          <li><a onClick={() => onNav('brands', { brandId: 'keope' })}>Keope</a></li>
        </ul>
      </div>
      <div>
        <h4 className="nm-footer-title">Contacto</h4>
        <ul className="nm-footer-list">
          <li><a href="tel:+34691519814">+34 691 519 814</a></li>
          <li><a href="mailto:novamateriaceramics@gmail.com">novamateriaceramics@gmail.com</a></li>
          <li><a onClick={() => onNav('client')}>Área clientes</a></li>
          <li>Barcelona, España</li>
        </ul>
      </div>
    </div>
    <div className="nm-footer-meta">
      <span>© 2026 Nova Materia Ceramics</span>
      <span>·</span>
      <span>Distribuidor B2B</span>
      <span>·</span>
      <a onClick={() => onNav('legal')}>Aviso legal</a>
      <span>·</span>
      <a onClick={() => onNav('privacy')}>Privacidad</a>
      <span>·</span>
      <a href="/recursos-porcelanico-italiano.html">Guías porcelánico</a>
    </div>
  </footer>
);



// ---------- Legal pages ----------
const LegalPage = ({ onNav, type }) => {
  const isPrivacy = type === 'privacy';
  return (
    <section className="nm-legal-page">
      <div className="nm-container nm-container-narrow">
        <button className="nm-legal-back" onClick={() => onNav('home')}>← Volver al inicio</button>
        <span className="nm-eyebrow">Información legal</span>
        <h1 className="nm-legal-h1">{isPrivacy ? 'Política de privacidad' : 'Aviso legal'}</h1>
        {isPrivacy ? (
          <div className="nm-legal-content">
            <p>En Nova Materia Ceramics tratamos los datos que nos facilitas únicamente para responder a tus solicitudes profesionales, gestionar muestras, información comercial, presupuestos y comunicaciones relacionadas con porcelánico italiano.</p>
            <h2>Responsable</h2>
            <p>Nova Materia Ceramics · Barcelona, España · novamateriaceramics@gmail.com · +34 691 519 814.</p>
            <h2>Datos tratados</h2>
            <p>Nombre, teléfono, email, perfil profesional, zona, datos del proyecto y cualquier información que incluyas voluntariamente en formularios o comunicaciones.</p>
            <h2>Finalidad</h2>
            <p>Atender solicitudes, preparar propuestas, enviar información de producto, gestionar muestras y mantener relación comercial B2B.</p>
            <h2>Conservación y derechos</h2>
            <p>Conservaremos los datos mientras exista relación comercial o interés profesional. Puedes solicitar acceso, rectificación o eliminación escribiendo a novamateriaceramics@gmail.com.</p>
          </div>
        ) : (
          <div className="nm-legal-content">
            <p>Esta web pertenece a Nova Materia Ceramics, distribución profesional de porcelánico italiano para proyectos de alto nivel en Barcelona y provincia.</p>
            <h2>Contacto</h2>
            <p>Nova Materia Ceramics · Barcelona, España · novamateriaceramics@gmail.com · +34 691 519 814.</p>
            <h2>Uso de la web</h2>
            <p>El contenido de esta página tiene carácter informativo y comercial B2B. Las imágenes, colecciones, disponibilidad, formatos y acabados pueden variar según fabricante, stock y condiciones de suministro.</p>
            <h2>Propiedad intelectual</h2>
            <p>Los textos, diseño y estructura de la web pertenecen a Nova Materia Ceramics. Las marcas y productos mostrados pertenecen a sus respectivos fabricantes.</p>
            <h2>Responsabilidad</h2>
            <p>Nova Materia Ceramics trabaja para mantener la información actualizada, pero la confirmación final de ficha técnica, disponibilidad, plazos y condiciones debe validarse antes de cada pedido.</p>
          </div>
        )}
      </div>
    </section>
  );
};

// ---------- Eyebrow + section ----------
const Eyebrow = ({ children }) => (
  <span className="nm-eyebrow">{children}</span>
);

const Section = ({ eyebrow, children, dark, narrow, padded = true, className = '' }) => (
  <section className={'nm-section' + (dark ? ' nm-section-dark' : '') + (padded ? ' nm-section-padded' : '') + (className ? ' ' + className : '')}>
    <div className={'nm-container' + (narrow ? ' nm-container-narrow' : '')}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      {children}
    </div>
  </section>
);

// ---------- Hero ----------
const Hero = ({ onNav }) => (
  <section className="nm-hero nm-hero-cinematic">
    <div className="nm-hero-bg" style={{ backgroundImage: `url('../assets/hero-bg.webp')` }} />
    <div className="nm-hero-scrim" />
    <div className="nm-hero-frame" aria-hidden="true" />
    <div className="nm-container nm-hero-inner">
      <Eyebrow>Porcelánico italiano · Barcelona</Eyebrow>
      <h1 className="nm-hero-h1">
        Diseña espacios<br/>
        que se <em>sienten</em> antes<br/>
        de explicarse.
      </h1>
      <p className="nm-hero-lead">
        Pavimento y revestimiento porcelánico italiano para arquitectos,
        interioristas y reformistas que trabajan reformas de alto valor.
      </p>
      <div className="nm-hero-actions">
        <button className="nm-btn nm-btn-primary" onClick={() => onNav('sample')}>
          Pedir muestras <span className="nm-arrow">→</span>
        </button>
        <button className="nm-btn nm-btn-ghost" onClick={() => onNav('catalog')}>
          Ver materiales
        </button>
      </div>
    </div>
    <button className="nm-hero-scroll" type="button" onClick={() => onNav('catalog')}>
      <span>Explorar</span>
      <span>↓</span>
    </button>
  </section>
);

// ---------- Brand bar (top strip) ----------
const BrandBar = () => {
  const brands = ['Emil', 'Ergon', 'Provenza', 'Keope'];
  return (
    <div className="nm-brandbar">
      <div className="nm-container nm-brandbar-inner">
        <div className="nm-brandbar-list">
          {brands.map(b => (
            <span key={b} className="nm-brandbar-item">{b}</span>
          ))}
        </div>
        <span className="nm-brandbar-meta">Distribución directa · Made in Italy</span>
      </div>
    </div>
  );
};

// ---------- Brand directory (Emilgroup paraguas + Keope) ----------
const BrandDirectory = ({ onNav }) => {
  const groups = [
    {
      group: 'Emilgroup',
      tagline: 'Grupo italiano · Casalgrande, Italia',
      brands: [
        { name: 'Emil', desc: 'Mármoles, piedras, efectos minerales. Gama editorial.' },
        { name: 'Ergon', desc: 'Cementos, cottos, piedras técnicas. Foco residencial y comercial.' },
        { name: 'Provenza', desc: 'Diseño contemporáneo, formatos grandes, paleta neutra.' },
      ],
    },
    {
      group: 'Keope',
      tagline: 'Grupo independiente · Casalgrande, Italia',
      brands: [
        { name: 'Keope', desc: 'Especialistas en porcelánico técnico. Pavimentos R10/R11, exterior y comercial.' },
      ],
    },
  ];
  return (
    <Section eyebrow="Marcas que distribuimos">
      <div className="nm-section-head">
        <h2 className="nm-section-h2">Italianos. <em>Directos.</em></h2>
        <a className="nm-link" onClick={() => onNav('catalog')}>Ver catálogo completo →</a>
      </div>
      <div className="nm-branddir">
        {groups.map(g => (
          <div key={g.group} className="nm-branddir-group">
            <div className="nm-branddir-head">
              <h3 className="nm-branddir-title">{g.group}</h3>
              <span className="nm-branddir-tag">{g.tagline}</span>
            </div>
            <ul className="nm-branddir-list">
              {g.brands.map(b => (
                <li key={b.name} className="nm-branddir-item">
                  <span className="nm-branddir-name">{b.name}</span>
                  <p className="nm-branddir-desc">{b.desc}</p>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </Section>
  );
};

// ---------- Sample tray (Material Bank-inspired) ----------
const SampleTray = ({ onNav }) => {
  const [selected, setSelected] = useState(new Set(['tele-di-marmo-revolution', 'cottocemento-rosso']));
  const toggle = (id) => {
    setSelected(s => {
      const next = new Set(s);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };
  const products = window.NM_PRODUCTS.slice(0, 6);
  return (
    <Section eyebrow={`Biblioteca de muestras · ${selected.size} en tu caja`}>
      <div className="nm-section-head">
        <h2 className="nm-section-h2">
          Pide hasta <em>5 muestras</em> gratis.
        </h2>
        <span className="nm-meta-line">Envío en 48–72 h · sin coste para profesionales</span>
      </div>
      <div className="nm-tray">
        <div className="nm-tray-grid">
          {products.map(p => {
            const on = selected.has(p.id);
            return (
              <button key={p.id} className={'nm-tray-item' + (on ? ' is-on' : '')} onClick={() => toggle(p.id)}>
                <div className="nm-tray-img" style={{ backgroundImage: `url('${p.img}')` }} loading="lazy">
                  <span className="nm-tray-mark">{on ? '✓' : '+'}</span>
                </div>
                <span className="nm-tray-brand">{p.brand}</span>
                <span className="nm-tray-name">{p.name} <em>{p.collection}</em></span>
                <span className="nm-tray-spec">{p.specs.join(' · ')}</span>
              </button>
            );
          })}
        </div>
        <aside className="nm-tray-box">
          <Eyebrow>Tu caja de muestras</Eyebrow>
          <p className="nm-tray-counter">
            <span className="nm-tray-counter-num">{selected.size}</span>
            <span className="nm-tray-counter-label">de 5 seleccionadas</span>
          </p>
          <ul className="nm-tray-list">
            {[...selected].map(id => {
              const p = window.NM_PRODUCTS.find(x => x.id === id);
              if (!p) return null;
              return (
                <li key={id} className="nm-tray-list-item">
                  <span>{p.name} <em>{p.collection}</em></span>
                  <button className="nm-tray-remove" onClick={() => toggle(id)} aria-label="Quitar">×</button>
                </li>
              );
            })}
            {selected.size === 0 && <li className="nm-tray-empty">Selecciona muestras de la izquierda</li>}
          </ul>
          <button className="nm-btn nm-btn-primary nm-btn-lg nm-btn-full" onClick={() => onNav('sample')}>
            Pedir {selected.size || ''} muestras <span className="nm-arrow">→</span>
          </button>
          <p className="nm-tray-fineprint">Solo profesionales del sector. Confirmamos en 24 h.</p>
        </aside>
      </div>
    </Section>
  );
};

// ---------- Value strip ----------
const ValueStrip = () => {
  const items = [
    ['01', 'Catálogo italiano', 'Acceso a Emil, Ergon, Provenza y Keope desde Barcelona.'],
    ['02', 'Muestras a tu estudio', 'Hasta 5 muestras gratis. Envío 48–72 h.'],
    ['03', 'Visita comercial', 'Te visitamos en tu tienda u obra. Sin compromiso.'],
    ['04', 'Condiciones de profesional', 'Margen, ficha técnica y partida confirmada antes del pedido.'],
  ];
  return (
    <section className="nm-valuestrip">
      <div className="nm-container nm-valuestrip-inner">
        {items.map(([n, t, d]) => (
          <div key={n} className="nm-valuestrip-item">
            <span className="nm-valuestrip-num">{n}</span>
            <h3 className="nm-valuestrip-t">{t}</h3>
            <p className="nm-valuestrip-d">{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

// ---------- Pro access card (zona privada teaser) ----------
const ProAccessCard = ({ onNav }) => (
  <Section dark eyebrow="Zona profesional · acceso por invitación">
    <div className="nm-proaccess">
      <div className="nm-proaccess-text">
        <h2 className="nm-section-h2">
          ¿Ya eres cliente? <em>Entra.</em>
        </h2>
        <p className="nm-proaccess-lead">
          Tiendas, estudios y reformistas con cuenta activa: últimas colecciones,
          novedades 2026, fichas técnicas y descargables — antes de que salgan a catálogo público.
        </p>
        <ul className="nm-proaccess-list">
          <li>Novedades y avances de colección</li>
          <li>Catálogos PDF y fichas técnicas</li>
          <li>Imágenes de producto en alta para tus propuestas</li>
          <li>Calendario de visitas y muestras</li>
        </ul>
        <div className="nm-proaccess-actions">
          <button className="nm-btn nm-btn-primary" onClick={() => onNav('login')}>
            Acceder <span className="nm-arrow">→</span>
          </button>
          <button className="nm-btn nm-btn-ghost" onClick={() => onNav('contact')}>
            Contactar para alta
          </button>
        </div>
      </div>
      <div className="nm-proaccess-loginmock">
        <div className="nm-proaccess-loginmock-head">
          <span className="nm-eyebrow" style={{ color: 'var(--cotto-300)' }}>nova materia · zona pro</span>
        </div>
        <div className="nm-proaccess-loginmock-field">
          <label>Email profesional</label>
          <div className="nm-proaccess-loginmock-input">contacto@estudio.es</div>
        </div>
        <div className="nm-proaccess-loginmock-field">
          <label>Contraseña</label>
          <div className="nm-proaccess-loginmock-input">••••••••••</div>
        </div>
        <div className="nm-proaccess-loginmock-btn">Entrar →</div>
        <div className="nm-proaccess-loginmock-meta">¿Sin cuenta? Solicita invitación</div>
      </div>
    </div>
  </Section>
);

// ---------- Product card ----------
const ProductCard = ({ p, onOpen }) => {
  const cardRef = React.useRef(null);
  const glareRef = React.useRef(null);
  const imgRef = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const card = cardRef.current;
    if (!card) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold: 0, rootMargin: '900px 0px 900px 0px' }
    );
    obs.observe(card);
    return () => obs.disconnect();
  }, []);

  const handleMove = (e) => {
    const card = cardRef.current;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    const rotateX = ((y - centerY) / centerY) * -6;
    const rotateY = ((x - centerX) / centerX) * 6;

    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;

    if (glareRef.current) {
      const gx = (x / rect.width) * 100;
      const gy = (y / rect.height) * 100;
      glareRef.current.style.background = `radial-gradient(circle at ${gx}% ${gy}%, rgba(255,255,255,0.15) 0%, transparent 50%)`;
    }
    if (imgRef.current) {
      const moveX = ((x - centerX) / centerX) * -8;
      const moveY = ((y - centerY) / centerY) * -8;
      imgRef.current.style.transform = `scale(1.08) translate(${moveX}px, ${moveY}px)`;
    }
  };

  const handleLeave = () => {
    const card = cardRef.current;
    if (!card) return;
    card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
    if (glareRef.current) glareRef.current.style.background = 'transparent';
    if (imgRef.current) imgRef.current.style.transform = 'scale(1) translate(0, 0)';
  };

  return (
    <article
      ref={cardRef}
      className={`nm-product nm-product-3d ${visible ? 'nm-product-visible' : ''}`}
      onClick={() => onOpen && onOpen(p)}
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}
    >
      <div className="nm-product-img-wrap">
        {p.img ? (
          <div ref={imgRef} className="nm-product-img" style={{ backgroundImage: visible ? `url('${p.img}')` : 'none' }} />
        ) : (
          <div ref={imgRef} className="nm-product-img nm-product-img-placeholder">
            <span className="nm-product-img-brand">{p.brand}</span>
          </div>
        )}
        {p.tag && <span className="nm-product-flag">{p.tag}</span>}
        <div ref={glareRef} className="nm-product-glare" />
      </div>
      <div className="nm-product-body">
        <p className="nm-product-brand">{p.brand}</p>
        <h3 className="nm-product-name">
          {p.name} {p.collection && <em>{p.collection}</em>}
        </h3>
        <p className="nm-product-desc-short">{p.description}</p>
        {p.formats && (
          <div className="nm-product-info">
            <div className="nm-product-info-row">
              <span className="nm-product-info-label">Formatos</span>
              <span className="nm-product-info-value">{p.formats.join(' · ')}</span>
            </div>
            {p.finishes && (
              <div className="nm-product-info-row">
                <span className="nm-product-info-label">Acabados</span>
                <span className="nm-product-info-value">{p.finishes.join(' · ')}</span>
              </div>
            )}
            {p.colors && (
              <div className="nm-product-info-row">
                <span className="nm-product-info-label">Colores</span>
                <span className="nm-product-info-value">{p.colors.join(' · ')}</span>
              </div>
            )}
            {p.thickness && (
              <div className="nm-product-info-row">
                <span className="nm-product-info-label">Espesores</span>
                <span className="nm-product-info-value">{p.thickness.join(' · ')}</span>
              </div>
            )}
          </div>
        )}
        <div className="nm-product-meta">
          {p.specs.map(s => <span key={s} className="nm-tag">{s}</span>)}
        </div>
      </div>
    </article>
  );
};

// ---------- Product grid ----------
const ProductGrid = ({ products, onOpen }) => (
  <div className="nm-grid">
    {products.map(p => (
      <ProductCard key={p.id} p={p} onOpen={onOpen} />
    ))}
  </div>
);

// ---------- Filter rail ----------
const FilterRail = ({ filters, active, onToggle }) => (
  <aside className="nm-filter">
    {filters.map(group => (
      <div key={group.label} className="nm-filter-group">
        <h4 className="nm-filter-title">{group.label}</h4>
        <ul className="nm-filter-list">
          {group.items.map(it => (
            <li key={it} className="nm-filter-item">
              <label>
                <input type="checkbox"
                       checked={!!active[group.label + '|' + it]}
                       onChange={() => onToggle(group.label, it)} />
                <span>{it}</span>
              </label>
            </li>
          ))}
        </ul>
      </div>
    ))}
  </aside>
);

// ---------- Pro block ----------
const ProBlock = ({ onNav }) => (
  <Section eyebrow="Para profesionales del sector">
    <div className="nm-pro">
      <h2 className="nm-pro-h2">
        Te ayudamos a <em>vender mejor</em>.<br/>
        Catálogo italiano, condiciones de profesional.
      </h2>
      <ul className="nm-pro-list">
        <li>
          <span className="nm-pro-num">01</span>
          <h3>Para tu tienda</h3>
          <p>Porcelánico italiano de alto nivel con condiciones profesionales. Catálogo digital, físico y muestras para tu proyecto.</p>
        </li>
        <li>
          <span className="nm-pro-num">02</span>
          <h3>Para tu estudio</h3>
          <p>Fichas técnicas, muestras y asesoramiento adaptado a cada proyecto. Te ayudamos a preparar propuestas para tu cliente.</p>
        </li>
        <li>
          <span className="nm-pro-num">03</span>
          <h3>Para tu obra</h3>
          <p>Formato, plazo y partida confirmados antes de hacer pedido. Sin sorpresas en la entrega.</p>
        </li>
      </ul>
      <button className="nm-btn nm-btn-primary" onClick={() => onNav('pros')}>
        Ver perfiles profesionales <span className="nm-arrow">→</span>
      </button>
    </div>
  </Section>
);

// ---------- Sample form ----------
const SampleForm = ({ source = 'Solicitud web' }) => {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState('');
  const [form, setForm] = useState({
    name: '', company: '', activity: 'Reformista',
    email: '', phone: '', project: '', materials: '', zone: '', timeline: ''
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const mailSubject = `Solicitud de muestras · Nova Materia Ceramics`;
  const buildMessage = (data = form) => [
    'Hola Nova Materia Ceramics, quiero pedir muestras para un proyecto profesional.',
    '',
    `Empresa / estudio: ${data.company || '-'}`,
    `Tipo de profesional: ${data.activity || '-'}`,
    `Nombre: ${data.name || '-'}`,
    `Email: ${data.email || '-'}`,
    `Teléfono: ${data.phone || '-'}`,
    `Proyecto: ${data.project || '-'}`,
    `Materiales o acabados que me interesan: ${data.materials || '-'}`,
    `Zona de la obra: ${data.zone || '-'}`,
    `Plazo aproximado: ${data.timeline || '-'}`,
    '',
    'Gracias.'
  ].join('\n');
  const mailBody = buildMessage();
  const mailtoHref = `mailto:novamateriaceramics@gmail.com?subject=${encodeURIComponent(mailSubject)}&body=${encodeURIComponent(mailBody)}`;
  const whatsappHref = `https://wa.me/34691519814?text=${encodeURIComponent(mailSubject + '\n\n' + mailBody)}`;
  const submitToMail = (e) => {
    e.preventDefault();
    setSending(true);
    setSendError('');
    const fd = new FormData(e.currentTarget);
    const data = {
      company: fd.get('empresa_estudio'),
      activity: fd.get('tipo_actividad'),
      name: fd.get('nombre'),
      email: fd.get('email'),
      phone: fd.get('telefono'),
      project: fd.get('proyecto'),
      materials: fd.get('materiales_acabados'),
      zone: fd.get('zona_obra'),
      timeline: fd.get('plazo_aproximado'),
    };
    const href = `https://wa.me/34691519814?text=${encodeURIComponent(mailSubject + '\n\n' + buildMessage(data))}`;
    window.open(href, '_blank', 'noopener,noreferrer');
    setSubmitted(true);
    setSending(false);
  };

  if (submitted) {
    return (
      <div className="nm-form-success">
        <Eyebrow>Solicitud recibida</Eyebrow>
        <h2 className="nm-form-success-h2">Te llamamos en 24 h.</h2>
        <p className="nm-form-success-p">
          Se ha abierto WhatsApp con tu solicitud preparada. Envíala y te responderemos para confirmar
          muestras y condiciones para tu {form.activity.toLowerCase() || 'estudio'}.
        </p>
        <button className="nm-btn nm-btn-ghost" onClick={() => setSubmitted(false)}>
          Volver
        </button>
      </div>
    );
  }

  return (
    <>
    <form
      className="nm-form"
      name="nova-materia-contact"
      action={whatsappHref}
      method="GET"
      onSubmit={submitToMail}
    >
      <div className="nm-field">
        <label>Empresa / estudio</label>
        <input className="nm-input" name="empresa_estudio" required value={form.company} onChange={set('company')} placeholder="Estudio Llovet" />
      </div>
      <div className="nm-field">
        <label>Tipo de actividad</label>
        <select className="nm-input" name="tipo_actividad" value={form.activity} onChange={set('activity')}>
          <option>Reformista</option>
          <option>Interiorista</option>
          <option>Arquitecto</option>
          <option>Constructora / promotora</option>
          <option>Tienda de materiales</option>
          <option>Otro</option>
        </select>
      </div>
      <div className="nm-field">
        <label>Tu nombre</label>
        <input className="nm-input" name="nombre" required value={form.name} onChange={set('name')} placeholder="Nombre y apellido" />
      </div>
      <div className="nm-field">
        <label>Email profesional</label>
        <input className="nm-input" name="email" type="text" inputMode="email" required value={form.email} onChange={set('email')} placeholder="contacto@estudio.es" />
      </div>
      <div className="nm-field">
        <label>Teléfono</label>
        <input className="nm-input" name="telefono" required value={form.phone} onChange={set('phone')} placeholder="+34 ..." />
      </div>
      <div className="nm-field nm-field-full">
        <label>Proyecto</label>
        <input className="nm-input" name="proyecto" value={form.project} onChange={set('project')} placeholder="Vivienda alto nivel, hotel, local comercial..." />
      </div>
      <div className="nm-field nm-field-full">
        <label>Materiales o acabados que te interesan</label>
        <textarea className="nm-input" name="materiales_acabados" rows="3" value={form.materials} onChange={set('materials')}
                  placeholder="Mármol blanco 120×278, piedra natural, exterior R11, madera porcelánica..." />
      </div>
      <div className="nm-field">
        <label>Zona de la obra</label>
        <input className="nm-input" name="zona_obra" value={form.zone} onChange={set('zone')} placeholder="Barcelona, Sarrià, Maresme..." />
      </div>
      <div className="nm-field">
        <label>Plazo aproximado</label>
        <input className="nm-input" name="plazo_aproximado" value={form.timeline} onChange={set('timeline')} placeholder="Urgente, 2 semanas, 2 meses..." />
      </div>
      <div className="nm-field-full">
        <button className="nm-btn nm-btn-primary nm-btn-lg" type="submit" disabled={sending}>
          {sending ? 'Abriendo WhatsApp...' : 'Enviar por WhatsApp'} <span className="nm-arrow">→</span>
        </button>
        <p className="nm-form-note">Se abrirá WhatsApp con tu solicitud ya escrita. También puedes <a href={mailtoHref}>enviarla por email</a>.</p>
      </div>
    </form>
    </>
  );
};

// ---------- Floating WhatsApp CTA ----------
const FloatingWhatsApp = () => (
  <a
    className="nm-floating-whatsapp"
    href="https://wa.me/34691519814?text=Hola%20Nova%20Materia%20Ceramics%2C%20quiero%20pedir%20muestras%20para%20un%20proyecto%20profesional.%0A%0AEmpresa%20/%20estudio%3A%0ATipo%20de%20profesional%3A%0ANombre%3A%0AEmail%3A%0ATel%C3%A9fono%3A%0AProyecto%3A%0AMateriales%20o%20acabados%20que%20me%20interesan%3A%0AZona%20de%20la%20obra%3A%0APlazo%20aproximado%3A%0A%0AGracias."
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Hablar por WhatsApp con Nova Materia Ceramics"
  >
    <span className="nm-floating-whatsapp-dot">●</span>
    <span>WhatsApp comercial</span>
  </a>
);

// Export to window
// ---------- Servizio strip (numbered pillars, Italian editorial) ----------
const TiltCard = ({ children, index }) => {
  const cardRef = React.useRef(null);
  const glareRef = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const card = cardRef.current;
    if (!card) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold: 0.2 }
    );
    obs.observe(card);
    return () => obs.disconnect();
  }, []);

  const handleMove = (e) => {
    const card = cardRef.current;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    const rotateX = ((y - centerY) / centerY) * -10;
    const rotateY = ((x - centerX) / centerX) * 10;

    card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.03, 1.03, 1.03)`;

    if (glareRef.current) {
      const glareX = (x / rect.width) * 100;
      const glareY = (y / rect.height) * 100;
      glareRef.current.style.background = `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.18) 0%, transparent 55%)`;
    }
  };

  const handleLeave = () => {
    const card = cardRef.current;
    if (!card) return;
    card.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
    if (glareRef.current) glareRef.current.style.background = 'transparent';
  };

  return (
    <div
      ref={cardRef}
      className={`nm-servizio-item ${visible ? 'nm-servizio-visible' : ''}`}
      style={{ transitionDelay: `${index * 120}ms` }}
      onMouseMove={handleMove}
      onMouseLeave={handleLeave}
    >
      <div className="nm-servizio-accent" />
      <div ref={glareRef} className="nm-servizio-glare" />
      {children}
    </div>
  );
};

const ServizioStrip = () => {
  const items = [
    ['01', 'Catálogo italiano', 'Acceso directo a Emil, Ergon, Provenza y Keope desde Barcelona.'],
    ['02', 'Muestras gratis', 'Todas las muestras que necesites para tu estudio, tienda u obra.'],
    ['03', 'Soporte técnico', 'Formato, acabado, antideslizante, variación — te asesoramos antes y durante.'],
    ['04', 'Precio cerrado', 'Margen, plazo y partida confirmados antes del pedido. Sin sorpresas.'],
  ];
  return (
    <section className="nm-servizio">
      <div className="nm-servizio-bg" />
      <div className="nm-container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="nm-servizio-head">
          <span className="nm-eyebrow">Cómo trabajamos</span>
          <h2 className="nm-servizio-lead">
            Todo lo que necesitas para <em>presentar, presupuestar y ejecutar.</em>
          </h2>
        </div>
        <div className="nm-servizio-grid">
          {items.map(([n, t, d], i) => (
            <TiltCard key={n} index={i}>
              <span className="nm-servizio-num">{n}</span>
              <h3 className="nm-servizio-t">{t}</h3>
              <p className="nm-servizio-d">{d}</p>
            </TiltCard>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Lockup (Italia · Barcelona) ----------
const ItaliaLockup = () => (
  <section className="nm-lockup">
    <div className="nm-container nm-lockup-inner">
      <div className="nm-lockup-side">
        <span className="nm-lockup-label">Origen</span>
        <h3 className="nm-lockup-place">Italia.</h3>
        <p className="nm-lockup-meta">Sassuolo · Casalgrande · Fiorano</p>
      </div>
      <div className="nm-lockup-rule" />
      <div className="nm-lockup-side">
        <span className="nm-lockup-label">Distribución</span>
        <h3 className="nm-lockup-place"><em>Barcelona.</em></h3>
        <p className="nm-lockup-meta">Y provincia</p>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  Header, Footer, Hero, BrandBar, BrandDirectory, SampleTray, ValueStrip, ProAccessCard,
  ServizioStrip, ItaliaLockup, FloatingWhatsApp,
  Section, Eyebrow,
  ProductCard, ProductGrid, FilterRail, ProBlock, SampleForm,
});