// FOLGORE — Inner pages: Historia, Catálogo, Innovación, Contacto

const { useEffect, useState, useRef } = React;

/* ============================================================
   HISTORIA — vertical timeline, editorial cinematic
============================================================ */
function HistoriaPage({ onNavigate }){
  useReveal();
  const events = [
    { y: '1985', t: 'Sassuolo', d: 'Tres ingenieros — Marcello Vidoni, Carla Bertolini y Pietro Nardi — abren un taller de 220 m² en Via Cavalli, Sassuolo. La primera máquina, una prensa olímpica de hierro fundido, todavía está en uso.' },
    { y: '1991', t: 'Primera Línea Cardio', d: 'Lanzamos FOLGORE Run, el primer trotador con doble cinta de neopreno italiano. La inercia mecánica imitaba la sensación de correr en asfalto.' },
    { y: '1996', t: 'Cruzamos los Alpes', d: 'Stuttgart Performance Lab adopta veinte unidades. El equipo de natación olímpica alemán entrena con FOLGORE durante 8 años consecutivos.' },
    { y: '2004', t: 'Atlántico', d: 'Detroit Athletic Club instala el primer estudio FOLGORE en América. La máquina de cable Cavo se convierte en pieza icónica.' },
    { y: '2011', t: 'Tōkyō', d: 'Apertura de showroom en Aoyama. La sensibilidad japonesa al detalle redefine la línea Studio Privato.' },
    { y: '2018', t: 'Fundición Propia', d: 'Adquirimos la fundición histórica Maranello-Sud. Hoy controlamos cada pieza desde el lingote hasta el acabado.' },
    { y: '2024', t: 'México', d: 'Operaciones latinoamericanas en Guadalajara, en sociedad con Pixelab Soluciones Creativas. Servicio post-venta nativo en español.' },
  ];

  return (
    <div className="page-historia">
      <style>{`
        .historia-hero{
          padding: 200px 0 120px;
          border-bottom: 1px solid var(--hairline);
          position: relative;
        }
        .historia-hero .grid{
          display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
        }
        .historia-hero h1{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(56px, 9vw, 168px); line-height: 0.92; letter-spacing: -0.035em;
          margin: 0;
        }
        .historia-hero h1 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .historia-hero .lede{
          font-family: var(--serif); font-style: italic; font-weight: 300;
          font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5;
          color: var(--grey-200); max-width: 38ch;
        }
        @media (max-width: 860px){ .historia-hero .grid{ grid-template-columns: 1fr; gap: 32px; } }

        .timeline{ padding: 120px 0; }
        .timeline .row{
          display: grid; grid-template-columns: 200px 1fr 1fr; gap: 64px;
          padding: 56px 0;
          border-bottom: 1px solid var(--hairline);
          align-items: start;
        }
        .timeline .y{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(48px, 5vw, 88px); line-height: 1; letter-spacing: -0.02em;
          color: var(--bone);
        }
        .timeline .y em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .timeline .t{
          font-family: var(--display); font-weight: 300;
          font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.01em;
          color: var(--bone); line-height: 1.15;
        }
        .timeline .t em{ font-family: var(--serif); font-style: italic; font-weight: 400; }
        .timeline .d{
          font-family: var(--display); font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--grey-300);
          max-width: 48ch;
        }
        .timeline .num{
          font-family: 'Inter', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--grey-500);
          margin-bottom: 12px;
        }
        @media (max-width: 860px){
          .timeline .row{ grid-template-columns: 1fr; gap: 16px; }
        }

        .quote-strip{
          padding: 200px 0;
          background: var(--ink-2);
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }
        .quote-strip blockquote{
          margin: 0;
          font-family: var(--serif); font-style: italic; font-weight: 300;
          font-size: clamp(32px, 4vw, 64px); line-height: 1.1; letter-spacing: -0.015em;
          color: var(--bone); max-width: 22ch;
        }
        .quote-strip .attrib{ margin-top: 40px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-400); }
      `}</style>

      <section className="historia-hero">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">01</span><span>Storia</span><span className="line"></span><span>1985 — Oggi</span>
          </div>
          <div className="grid" style={{ marginTop: 64 }}>
            <h1 data-reveal>
              <span className="reveal-line"><span>Cuarenta años</span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>de <em>oficio.</em></span></span>
            </h1>
            <p className="lede reveal-fade" data-reveal style={{ '--d': '0.3s' }}>
              No somos una marca de fitness. Somos una fundición italiana que decidió, en 1985, que el equipo deportivo merecía la misma exigencia que un motor de carreras. Esto es lo que pasó después.
            </p>
          </div>
        </div>
      </section>

      <section className="timeline">
        <div className="shell">
          {events.map((e, i) => (
            <div key={e.y} className="row" data-reveal style={{ '--d': (i*0.05) + 's' }}>
              <div className="y reveal-fade">{e.y}</div>
              <div>
                <div className="num reveal-fade" style={{ '--d': '0.05s' }}>EV.{String(i+1).padStart(2,'0')}</div>
                <div className="t reveal-fade" style={{ '--d': '0.1s' }}>{e.t}</div>
              </div>
              <div className="d reveal-fade" style={{ '--d': '0.2s' }}>{e.d}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="quote-strip">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">02</span><span>Filosofia</span><span className="line"></span>
          </div>
          <blockquote data-reveal style={{ marginTop: 64 }}>
            <span className="reveal-line"><span>"Una máquina debe</span></span>
            <span className="reveal-line" style={{ '--d': '0.1s' }}><span>sobrevivir a la</span></span>
            <span className="reveal-line" style={{ '--d': '0.2s' }}><span>persona que la</span></span>
            <span className="reveal-line" style={{ '--d': '0.3s' }}><span>compró."</span></span>
          </blockquote>
          <div className="attrib reveal-fade" data-reveal style={{ '--d': '0.5s' }}>— Marcello Vidoni · Co-fundador, FOLGORE · 1985</div>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </div>
  );
}
window.HistoriaPage = HistoriaPage;

/* ============================================================
   CATÁLOGO — filterable grid, big silhouettes
============================================================ */
function CatalogoPage({ onNavigate }){
  useReveal();
  const products = [
    { line: 'Cardio', name: 'Run', idx: 'FR-08', sil: 'treadmill', spec: '3.6 kW · 22 km/h · 18°' },
    { line: 'Cardio', name: 'Vela', idx: 'FV-03', sil: 'cable',     spec: 'Remo magnético · 16 niveles' },
    { line: 'Cardio', name: 'Ciclo', idx: 'FC-05', sil: 'press',    spec: 'Bici indoor · volante 22 kg' },
    { line: 'Forza', name: 'Press', idx: 'FP-12', sil: 'press',     spec: 'Pectoral horizontal · 120 kg' },
    { line: 'Forza', name: 'Squadra', idx: 'FS-09', sil: 'press',   spec: 'Multi-pierna · 200 kg' },
    { line: 'Forza', name: 'Sbarra', idx: 'FB-02', sil: 'cable',    spec: 'Dorsal · 130 kg' },
    { line: 'Funzionale', name: 'Cavo', idx: 'FN-04', sil: 'cable', spec: 'Doble polea · 90 kg/lado' },
    { line: 'Funzionale', name: 'Anelli', idx: 'FA-06', sil: 'cable', spec: 'TRX italiano · acero 304' },
    { line: 'Studio Privato', name: 'Tutto', idx: 'FT-01', sil: 'press', spec: 'Multi-estación 12 ejercicios' },
  ];
  const [filter, setFilter] = useState('Tutto');
  const lines = ['Tutto', 'Cardio', 'Forza', 'Funzionale', 'Studio Privato'];
  const visible = filter === 'Tutto' ? products : products.filter(p => p.line === filter);

  return (
    <div className="page-catalogo">
      <style>{`
        .cat-hero{ padding: 200px 0 80px; border-bottom: 1px solid var(--hairline); }
        .cat-hero h1{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(56px, 9vw, 168px); line-height: 0.92; letter-spacing: -0.035em; margin: 0;
        }
        .cat-hero h1 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .cat-hero .row{ display: flex; justify-content: space-between; align-items: end; gap: 64px; margin-top: 64px; }
        .cat-hero .lede{
          font-family: var(--serif); font-style: italic; font-weight: 300;
          font-size: clamp(20px, 1.6vw, 26px); color: var(--grey-200); max-width: 36ch;
        }
        .cat-filter{
          padding: 32px 0; border-bottom: 1px solid var(--hairline);
          display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
          font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
        }
        .cat-filter button{
          color: var(--grey-400); transition: color .3s; position: relative; padding: 8px 0;
          font-family: inherit; letter-spacing: inherit; text-transform: inherit;
        }
        .cat-filter button.active{ color: var(--bone); }
        .cat-filter button.active::after{
          content:""; position:absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bone);
        }
        .cat-filter .count{ margin-left: auto; color: var(--grey-500); font-family: ui-monospace, monospace; }

        .cat-grid{
          padding: 80px 0 160px;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
        }
        @media (max-width: 1024px){ .cat-grid{ grid-template-columns: 1fr 1fr; } }
        @media (max-width: 720px){ .cat-grid{ grid-template-columns: 1fr; } }
      `}</style>

      <section className="cat-hero">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">02</span><span>Catalogo</span><span className="line"></span><span>Selezione 2026</span>
          </div>
          <div className="row">
            <h1 data-reveal>
              <span className="reveal-line"><span>Cada <em>máquina,</em></span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>una decisión.</span></span>
            </h1>
            <p className="lede reveal-fade" data-reveal style={{ '--d': '0.3s' }}>
              Veintinueve modelos. Cuatro líneas. Una sola filosofía: la máquina debe desaparecer y dejar al cuerpo trabajar.
            </p>
          </div>
        </div>
      </section>

      <div className="shell">
        <div className="cat-filter">
          {lines.map(l => (
            <button key={l} onClick={() => setFilter(l)} className={filter === l ? 'active' : ''} data-magnetic>{l}</button>
          ))}
          <span className="count">{String(visible.length).padStart(2,'0')} / {String(products.length).padStart(2,'0')} modelli</span>
        </div>

        <div className="cat-grid">
          {visible.map((p, i) => (
            <Product key={p.idx} line={p.line} name={<>FOLGORE <em>{p.name}</em></>} idx={p.idx} sil={p.sil} reveal={(i*0.04)} />
          ))}
        </div>
      </div>

      <Footer onNavigate={onNavigate} />
    </div>
  );
}
window.CatalogoPage = CatalogoPage;

/* ============================================================
   INNOVACIÓN — process columns, materials, R&D
============================================================ */
function InnovacionPage({ onNavigate }){
  useReveal();
  return (
    <div className="page-innovacion">
      <style>{`
        .inn-hero{ padding: 200px 0 120px; border-bottom: 1px solid var(--hairline); }
        .inn-hero h1{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(56px, 9vw, 168px); line-height: 0.92; letter-spacing: -0.035em; margin: 0;
        }
        .inn-hero h1 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }

        .inn-process{ padding: 160px 0; }
        .inn-process .grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hairline); }
        .inn-process .col{
          padding: 56px 28px;
          border-right: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
          min-height: 380px;
          display: flex; flex-direction: column;
        }
        .inn-process .col:last-child{ border-right: 0; }
        .inn-process .num{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(40px, 4vw, 64px); line-height: 1; letter-spacing: -0.02em;
          color: var(--bone);
        }
        .inn-process .num em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .inn-process .label{
          margin-top: 24px;
          font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-400);
        }
        .inn-process .t{
          margin-top: 56px;
          font-family: var(--display); font-weight: 300;
          font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; letter-spacing: -0.01em;
          color: var(--bone);
        }
        .inn-process .t em{ font-family: var(--serif); font-style: italic; font-weight: 400; }
        .inn-process .d{
          margin-top: 16px;
          font-family: var(--display); font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--grey-300);
        }
        @media (max-width: 1024px){ .inn-process .grid{ grid-template-columns: 1fr 1fr; } }
        @media (max-width: 720px){ .inn-process .grid{ grid-template-columns: 1fr; } }

        .materials{
          padding: 160px 0;
          background: var(--ink-2);
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }
        .materials .head{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
        .materials h2{
          font-family: var(--display); font-weight: 200;
          font-size: clamp(40px, 5vw, 80px); line-height: 0.96; letter-spacing: -0.025em; margin: 0;
        }
        .materials h2 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .materials .matgrid{
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
          margin-top: 80px; border-top: 1px solid var(--hairline);
        }
        .materials .mat{
          padding: 48px 32px;
          border-right: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
          display: flex; flex-direction: column;
        }
        .materials .mat:nth-child(3n){ border-right: 0; }
        .materials .mat .swatch{
          width: 100%; aspect-ratio: 16/9;
          background: var(--ink); border: 1px solid var(--hairline);
          margin-bottom: 32px; position: relative; overflow: hidden;
        }
        .materials .mat .swatch::before{
          content:""; position:absolute; inset:0;
          background-image: var(--pat);
          opacity: 0.5;
        }
        .materials .mat .name{
          font-family: var(--display); font-weight: 300; font-size: 22px; color: var(--bone); letter-spacing: -0.005em;
        }
        .materials .mat .name em{ font-family: var(--serif); font-style: italic; font-weight: 400; }
        .materials .mat .src{ font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-400); margin-top: 8px; }
        .materials .mat p{ margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--grey-300); }
        @media (max-width: 860px){ .materials .matgrid{ grid-template-columns: 1fr; } }

        .rd{
          padding: 200px 0;
        }
        .rd-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
        .rd-grid h2{
          font-family: var(--display); font-weight: 200;
          font-size: clamp(36px, 4.5vw, 72px); line-height: 1; letter-spacing: -0.022em; margin: 0;
        }
        .rd-grid h2 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .rd-list{ display:flex; flex-direction: column; gap: 0; }
        .rd-list .item{
          padding: 32px 0;
          border-bottom: 1px solid var(--hairline);
          display: grid; grid-template-columns: 60px 1fr auto; gap: 32px; align-items: baseline;
        }
        .rd-list .item:first-child{ border-top: 1px solid var(--hairline); }
        .rd-list .item .n{ font-family: ui-monospace, monospace; font-size: 11px; color: var(--grey-500); letter-spacing: 0.2em; }
        .rd-list .item .t{ font-family: var(--display); font-weight: 300; font-size: 20px; letter-spacing: -0.005em; color: var(--bone); }
        .rd-list .item .y{ font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-400); }
        @media (max-width: 860px){ .rd-grid{ grid-template-columns: 1fr; } }
      `}</style>

      <section className="inn-hero">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">03</span><span>Innovazione</span><span className="line"></span><span>R&D · Sassuolo</span>
          </div>
          <h1 data-reveal style={{ marginTop: 64 }}>
            <span className="reveal-line"><span>La <em>obsesión</em></span></span>
            <span className="reveal-line" style={{ '--d': '0.1s' }}><span>por la pieza.</span></span>
          </h1>
        </div>
      </section>

      <section className="inn-process">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">04</span><span>Processo</span><span className="line"></span>
          </div>
          <div className="grid" style={{ marginTop: 56 }}>
            {[
              { n: '01', l: 'Disegno', t: 'Trazado a mano antes que CAD.', d: 'Cada modelo nuevo empieza con seis meses de bocetos en papel — para escapar de la simetría fácil del software.' },
              { n: '02', l: 'Fonderia', t: 'Hierro fundido propio.', d: 'Adquirimos Maranello-Sud en 2018. El lingote se trata 14 horas a 1480°C. La estructura cristalina la define el tiempo, no la prisa.' },
              { n: '03', l: 'Lavorazione', t: 'CNC más mano humana.', d: 'Las superficies estructurales se mecanizan con tolerancia ±0.02 mm. Las que tocas las terminamos con lima y paño en taller.' },
              { n: '04', l: 'Collaudo', t: 'Cada máquina, 200 horas.', d: 'Antes de salir de Sassuolo, simulamos diez años de uso. Si vibra, si chirría, si pierde un grado, vuelve a la línea.' },
            ].map((c, i) => (
              <div key={c.n} className="col" data-reveal style={{ '--d': (i*0.08) + 's' }}>
                <div className="num reveal-fade">{c.n}</div>
                <div className="label reveal-fade" style={{ '--d': '0.05s' }}>{c.l}</div>
                <div className="t reveal-fade" style={{ '--d': '0.15s' }}>{c.t}</div>
                <div className="d reveal-fade" style={{ '--d': '0.25s' }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="materials">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">05</span><span>Materiali</span><span className="line"></span>
          </div>
          <div className="head" style={{ marginTop: 56 }}>
            <h2 data-reveal>
              <span className="reveal-line"><span>Tres <em>materiales,</em></span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>un alma.</span></span>
            </h2>
            <p className="body reveal-fade" data-reveal style={{ '--d': '0.3s' }}>
              No usamos plástico estructural. No usamos aluminio prensado. La máquina se siente porque pesa, y pesa porque está hecha de cosas serias.
            </p>
          </div>
          <div className="matgrid">
            <div className="mat" data-reveal style={{ '--pat': "linear-gradient(135deg, transparent 48%, rgba(250,250,250,0.06) 50%, transparent 52%), linear-gradient(45deg, transparent 48%, rgba(250,250,250,0.06) 50%, transparent 52%)" }}>
              <div className="swatch reveal-fade"></div>
              <div className="name reveal-fade" style={{ '--d': '0.05s' }}>Ghisa <em>FE-360B</em></div>
              <div className="src reveal-fade" style={{ '--d': '0.1s' }}>Maranello-Sud, IT</div>
              <p className="reveal-fade" style={{ '--d': '0.2s' }}>Hierro fundido tratado. Estructura, bases, columnas. Lo que no debe moverse en treinta años.</p>
            </div>
            <div className="mat" data-reveal style={{ '--d': '0.1s', '--pat': "repeating-linear-gradient(90deg, rgba(250,250,250,0.10) 0 1px, transparent 1px 6px)" }}>
              <div className="swatch reveal-fade"></div>
              <div className="name reveal-fade" style={{ '--d': '0.05s' }}>Acciaio <em>304-L</em></div>
              <div className="src reveal-fade" style={{ '--d': '0.1s' }}>Brescia, IT</div>
              <p className="reveal-fade" style={{ '--d': '0.2s' }}>Cables, ejes, articulaciones. Inoxidable de grado quirúrgico — pulido a mano hasta espejo.</p>
            </div>
            <div className="mat" data-reveal style={{ '--d': '0.2s', '--pat': "radial-gradient(circle at 30% 30%, rgba(250,250,250,0.10), transparent 50%), radial-gradient(circle at 70% 70%, rgba(250,250,250,0.06), transparent 50%)" }}>
              <div className="swatch reveal-fade"></div>
              <div className="name reveal-fade" style={{ '--d': '0.05s' }}>Pelle <em>fiore intero</em></div>
              <div className="src reveal-fade" style={{ '--d': '0.1s' }}>Tannerie de Toscana</div>
              <p className="reveal-fade" style={{ '--d': '0.2s' }}>Asientos y empuñaduras. Cuero italiano curtido al vegetal — gana carácter con cada sesión.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="rd">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">06</span><span>Brevetti</span><span className="line"></span>
          </div>
          <div className="rd-grid" style={{ marginTop: 56 }}>
            <h2 data-reveal>
              <span className="reveal-line"><span>Patentes</span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>que cambian</span></span>
              <span className="reveal-line" style={{ '--d': '0.2s' }}><span>la <em>industria.</em></span></span>
            </h2>
            <div className="rd-list">
              {[
                { n: '07', t: 'Sistema de doble cinta sin fricción', y: 'EP-2008/471' },
                { n: '08', t: 'Cabezal de polea auto-alineante', y: 'EP-2014/892' },
                { n: '09', t: 'Volante de inercia variable magnética', y: 'EP-2019/233' },
                { n: '10', t: 'Encoder de carga digital sin sensor externo', y: 'EP-2023/108' },
              ].map((it, i) => (
                <div key={it.n} className="item" data-reveal style={{ '--d': (i*0.06) + 's' }}>
                  <div className="n reveal-fade">{it.n}</div>
                  <div className="t reveal-fade" style={{ '--d': '0.1s' }}>{it.t}</div>
                  <div className="y reveal-fade" style={{ '--d': '0.2s' }}>{it.y}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </div>
  );
}
window.InnovacionPage = InnovacionPage;

/* ============================================================
   CONTACTO — form + map placeholder + offices
============================================================ */
function ContactoPage({ onNavigate }){
  useReveal();
  const [form, setForm] = useState({ name: '', email: '', org: '', msg: '' });
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className="page-contacto">
      <style>{`
        .ct-hero{ padding: 200px 0 80px; border-bottom: 1px solid var(--hairline); }
        .ct-hero h1{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(56px, 10vw, 200px); line-height: 0.9; letter-spacing: -0.04em; margin: 0;
        }
        .ct-hero h1 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .ct-hero .row{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; margin-top: 56px; }
        .ct-hero .lede{ font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 1.6vw, 26px); color: var(--grey-200); max-width: 36ch; }
        @media (max-width: 860px){ .ct-hero .row{ grid-template-columns: 1fr; } }

        .ct-body{ padding: 120px 0 160px; }
        .ct-body .grid{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 96px; }
        @media (max-width: 1024px){ .ct-body .grid{ grid-template-columns: 1fr; gap: 64px; } }

        .ct-form{ display: flex; flex-direction: column; gap: 0; }
        .field{
          display: flex; flex-direction: column; gap: 8px;
          padding: 28px 0;
          border-bottom: 1px solid var(--hairline);
          position: relative;
        }
        .field label{
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--grey-400);
        }
        .field input, .field textarea{
          font-family: var(--display); font-weight: 300;
          font-size: 22px; line-height: 1.4;
          background: transparent; border: 0; outline: none; color: var(--bone);
          padding: 4px 0;
          width: 100%;
        }
        .field textarea{ resize: vertical; min-height: 80px; }
        .field input::placeholder, .field textarea::placeholder{ color: var(--grey-500); font-style: italic; font-family: var(--serif); }
        .field .bar{ position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bone); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,0,.2,1); }
        .field input:focus + .bar, .field textarea:focus + .bar{ transform: scaleX(1); }
        .ct-submit{ margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
        .sent{ font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 22px; color: var(--bone); padding: 24px 0; }

        .ct-info{ display: flex; flex-direction: column; gap: 56px; }
        .info-block h3{
          font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
          color: var(--grey-400); font-weight: 500; margin: 0 0 16px;
        }
        .info-block .addr{
          font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 1.4; color: var(--bone);
        }
        .info-block .addr em{ font-family: var(--serif); font-style: italic; font-weight: 400; }
        .info-block .meta{ margin-top: 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--grey-300); }
        .info-block a{ color: var(--bone); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }

        .ct-map{
          margin-top: 56px;
          aspect-ratio: 16/10;
          background: var(--ink-2);
          border: 1px solid var(--hairline);
          position: relative; overflow: hidden;
        }
        .ct-map svg{ width: 100%; height: 100%; }
      `}</style>

      <section className="ct-hero">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">04</span><span>Contatto</span><span className="line"></span><span>Risposta in 72 h</span>
          </div>
          <div className="row">
            <h1 data-reveal>
              <span className="reveal-line"><span>Hablemos.</span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>Bene, <em>davvero.</em></span></span>
            </h1>
            <p className="lede reveal-fade" data-reveal style={{ '--d': '0.3s' }}>
              Un consultor FOLGORE entiende tu espacio, tu disciplina y tu visión antes de proponer una sola máquina. Cuéntanos.
            </p>
          </div>
        </div>
      </section>

      <section className="ct-body">
        <div className="shell">
          <div className="grid">
            {sent ? (
              <div className="ct-form">
                <div className="field" style={{ borderBottom: 0 }}>
                  <p className="sent">Recibido. Un consultor te escribirá en menos de 72 horas, <em>{form.name || 'amico'}</em>. Mientras tanto, mira el catálogo.</p>
                  <a href="#" className="btn-ghost" data-cursor-label="Catálogo" onClick={(e) => { e.preventDefault(); onNavigate('catalogo'); }}>
                    <span className="underline">Ir al catálogo</span><span>→</span>
                  </a>
                </div>
              </div>
            ) : (
              <form className="ct-form" onSubmit={submit} data-reveal>
                <div className="field">
                  <label>01 · Nombre</label>
                  <input value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} placeholder="¿Cómo te llamas?" />
                  <span className="bar"></span>
                </div>
                <div className="field">
                  <label>02 · Email</label>
                  <input type="email" value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} placeholder="tu@correo.com" />
                  <span className="bar"></span>
                </div>
                <div className="field">
                  <label>03 · Estudio / Club</label>
                  <input value={form.org} onChange={(e) => setForm({...form, org: e.target.value})} placeholder="Nombre del proyecto" />
                  <span className="bar"></span>
                </div>
                <div className="field">
                  <label>04 · Proyecto</label>
                  <textarea rows="4" value={form.msg} onChange={(e) => setForm({...form, msg: e.target.value})} placeholder="Cuéntanos espacio, disciplinas y visión." />
                  <span className="bar"></span>
                </div>
                <div className="ct-submit">
                  <button type="submit" className="btn" data-magnetic data-cursor-label="Enviar">
                    <span>Enviar Mensaje</span><span className="arrow">↗</span>
                  </button>
                  <span className="mono">Respuesta · &lt; 72h · IT/ES</span>
                </div>
              </form>
            )}

            <aside className="ct-info" data-reveal>
              <div className="info-block reveal-fade">
                <h3>Sede · Italia</h3>
                <div className="addr">Via Cavalli 14<br /><em>41049 Sassuolo</em>, MO</div>
                <div className="meta">+39 0536 000 000 · <a href="mailto:hola@folgore.it">hola@folgore.it</a></div>
              </div>
              <div className="info-block reveal-fade" style={{ '--d': '0.1s' }}>
                <h3>Operaciones · México</h3>
                <div className="addr">Guadalajara, <em>Jalisco</em></div>
                <div className="meta">+52 33 3502 8560 · <a href="mailto:hola@folgore.mx">hola@folgore.mx</a></div>
              </div>
              <div className="info-block reveal-fade" style={{ '--d': '0.2s' }}>
                <h3>Showroom</h3>
                <div className="addr">Visitas con cita previa<br />en <em>Sassuolo</em>, <em>GDL</em> y <em>Tōkyō</em>.</div>
              </div>

              <div className="ct-map reveal-fade" style={{ '--d': '0.3s' }}>
                <svg viewBox="0 0 600 380" preserveAspectRatio="xMidYMid slice">
                  {/* Simple stylized world */}
                  <g stroke="rgba(250,250,250,0.18)" strokeWidth="0.5" fill="none">
                    {Array.from({length: 19}).map((_, i) => (
                      <line key={'h'+i} x1="0" y1={20*i+10} x2="600" y2={20*i+10}/>
                    ))}
                    {Array.from({length: 30}).map((_, i) => (
                      <line key={'v'+i} x1={20*i+10} y1="0" x2={20*i+10} y2="380"/>
                    ))}
                  </g>
                  {/* Continents — abstract dot map */}
                  {Array.from({length: 380}).map((_, i) => {
                    const x = 30 + Math.random()*540;
                    const y = 50 + Math.random()*280;
                    // crude world-shape mask: weight toward Eurasia/Americas bands
                    const eurasia = (x > 270 && x < 480 && y > 90 && y < 200);
                    const americas = (x > 80 && x < 200 && y > 100 && y < 280);
                    const africa = (x > 280 && x < 360 && y > 180 && y < 290);
                    const asia = (x > 420 && x < 540 && y > 110 && y < 220);
                    const aus = (x > 470 && x < 540 && y > 240 && y < 290);
                    if (!(eurasia || americas || africa || asia || aus)) return null;
                    return <circle key={i} cx={x} cy={y} r="1.2" fill="rgba(250,250,250,0.5)"/>;
                  })}
                  {/* Pins: Sassuolo, Guadalajara, Stuttgart, Detroit, Tokio */}
                  {[
                    { x: 318, y: 140, n: 'Sassuolo' },
                    { x: 122, y: 195, n: 'Guadalajara' },
                    { x: 312, y: 130, n: 'Stuttgart' },
                    { x: 158, y: 152, n: 'Detroit' },
                    { x: 510, y: 158, n: 'Tōkyō' },
                  ].map(p => (
                    <g key={p.n}>
                      <circle cx={p.x} cy={p.y} r="3" fill="#FAFAFA"/>
                      <circle cx={p.x} cy={p.y} r="9" fill="none" stroke="rgba(250,250,250,0.5)"/>
                      <circle cx={p.x} cy={p.y} r="14" fill="none" stroke="rgba(250,250,250,0.25)"/>
                      <text x={p.x + 18} y={p.y + 4} fill="#FAFAFA" style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase' }}>{p.n}</text>
                    </g>
                  ))}
                </svg>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </div>
  );
}
window.ContactoPage = ContactoPage;
