// 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. 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 — productos reales, grid filtrable, modal con ficha
============================================================ */
function CatalogoPage({ onNavigate }){
  useReveal();
  const [filter, setFilter] = useState('Tutto');
  const [selected, setSelected] = useState(null);

  const enc = encodeURIComponent;
  const photoPath = (file) => 'assets/Productos/' + enc(file);
  const fichaPath = (n)    => 'assets/' + enc('Fichas técnicas') + '/' + enc('Folgore (' + n + ').png');

  const PRODUCTS = [
    { idx: 'FN-01', line: 'Funcional',     name: 'Torso Rotativo',               file: 'TORSO ROTATIVO.png'                  , ficha: 1 , desc: 'Trabaja oblicuos y core con resistencia controlada. Movimiento de rotación bilateral que activa la musculatura profunda del tronco.',          specs: { musculos: 'Oblicuos · Core',                            tipo: 'Rotación bilateral',          resistencia: 'Pila de peso', stack: '70 kg'      } },
    { idx: 'FZ-02', line: 'Tren Superior', name: 'Jalón de Espalda Dual',         file: 'JALON DE ESPALDA DUAL.png'            , ficha: 2 , desc: 'Torre doble con agarre independiente para trabajar dorsal ancho y romboides. Ideal para desarrollar amplitud y simetría en la espalda.',          specs: { musculos: 'Dorsal · Romboides · Bícep',                  tipo: 'Jalón bilateral',             resistencia: 'Pila de peso', stack: '2 × 70 kg'  } },
    { idx: 'FZ-03', line: 'Tren Superior', name: 'Jalón de Espalda Unilateral',   file: 'JALON DE ESPALDA UNILATERAL.png'      , ficha: 3 , desc: 'Jalón de un solo brazo que corrige desequilibrios musculares. Activa dorsal, redondo mayor y bícep con mayor rango de movimiento.',               specs: { musculos: 'Dorsal · Redondo mayor · Bícep',               tipo: 'Jalón unilateral',            resistencia: 'Pila de peso', stack: '90 kg'      } },
    { idx: 'FZ-04', line: 'Tren Superior', name: 'Fly Rear Delt',                 file: 'FLY REAR DELT.png'                    , ficha: 4 , desc: 'Aisla el deltoides posterior y los músculos del manguito rotador. Movimiento de apertura que mejora la postura y previene lesiones de hombro.',    specs: { musculos: 'Deltoides posterior · Trapecio',               tipo: 'Apertura posterior',          resistencia: 'Pila de peso', stack: '70 kg'      } },
    { idx: 'FZ-05', line: 'Tren Superior', name: 'Press de Pecho Mariposa',       file: 'PRESS DE PECHO MARIPOSA.png'          , ficha: 5 , desc: 'Aducción horizontal para desarrollar pectoral mayor. La trayectoria convergente maximiza la contracción muscular en el punto de cierre.',          specs: { musculos: 'Pectoral mayor · Deltoides anterior',          tipo: 'Aducción horizontal',         resistencia: 'Pila de peso', stack: '100 kg'     } },
    { idx: 'FZ-06', line: 'Tren Superior', name: 'Press de Pecho Dual',           file: 'PRESS DE PECHO DUAL.png'             , ficha: 6 , desc: 'Prensa pectoral con palancas independientes para cada brazo. Corrige asimetrías y permite mayor control en cada repetición.',                     specs: { musculos: 'Pectoral mayor · Deltoides · Trícep',          tipo: 'Empuje horizontal bilateral', resistencia: 'Pila de peso', stack: '2 × 80 kg'  } },
    { idx: 'FZ-07', line: 'Tren Superior', name: 'Curl de Bícep Unilateral',      file: 'CURL DE BICEP UNILATERAL.png'         , ficha: 7 , desc: 'Aísla el bícep braquial con soporte de brazo integrado. El trabajo unilateral garantiza contracción completa sin compensaciones.',                 specs: { musculos: 'Bícep braquial · Braquiorradial',               tipo: 'Curl unilateral',             resistencia: 'Pila de peso', stack: '80 kg'      } },
    { idx: 'FZ-08', line: 'Tren Inferior', name: 'Femoral Acostado',              file: 'FEMORAL ACOSTADO.png'                 , ficha: 8 , desc: 'Trabaja los isquiotibiales en posición prona con resistencia ajustable. El eje articulado sigue la curva natural de la rodilla.',                  specs: { musculos: 'Isquiotibiales · Sóleo',                       tipo: 'Flexión de rodilla prona',    resistencia: 'Pila de peso', stack: '100 kg'     } },
    { idx: 'FZ-09', line: 'Tren Superior', name: 'Remo',                          file: 'REMO.png'                             , ficha: 9 , desc: 'Movimiento de tracción horizontal que trabaja dorsal, romboides y trapecio medio. Postura de agarre neutral para proteger muñecas.',               specs: { musculos: 'Dorsal · Romboides · Trapecio · Bícep',        tipo: 'Tracción horizontal',         resistencia: 'Pila de peso', stack: '100 kg'     } },
    { idx: 'FZ-10', line: 'Tren Superior', name: 'Remo Bajo',                     file: 'REMO BAJO.png'                        , ficha: 10, desc: 'Remo con apoyo abdominal que elimina la carga lumbar. Trabaja la musculatura media de la espalda con máxima estabilidad.',                        specs: { musculos: 'Trapecio medio · Romboides · Dorsal',          tipo: 'Tracción horizontal baja',    resistencia: 'Pila de peso', stack: '100 kg'     } },
    { idx: 'FZ-11', line: 'Tren Superior', name: 'Extensión de Trícep',           file: 'EXTENSION DE TRICEP.png'             , ficha: 11, desc: 'Aisla las tres cabezas del trícep en movimiento supravertical. El soporte de codo fijo asegura alineación perfecta en todo el recorrido.',        specs: { musculos: 'Trícep braquial (3 cabezas)',                  tipo: 'Extensión de codo',           resistencia: 'Pila de peso', stack: '70 kg'      } },
    { idx: 'FZ-12', line: 'Tren Inferior', name: 'Leg Press',                     file: 'LEG PRESS.png'                        , ficha: 12, desc: 'Prensa inclinada para cuádriceps, glúteos e isquiotibiales. Alta carga de trabajo con mínimo estrés sobre la columna vertebral.',                 specs: { musculos: 'Cuádriceps · Glúteo mayor · Isquiotibiales',   tipo: 'Prensa inclinada',            resistencia: 'Pila de peso', stack: '200 kg'     } },
    { idx: 'FN-13', line: 'Tren Inferior', name: 'Aductor Dual',                  file: 'ADDUCTOR DUAL.png'                   , ficha: 13, desc: 'Trabaja aductores de ambas piernas en un solo movimiento. La resistencia bilateral garantiza equilibrio y tono muscular en la cara interna del muslo.', specs: { musculos: 'Aductores · Grácil · Pectíneo',               tipo: 'Aducción bilateral',          resistencia: 'Pila de peso', stack: '2 × 70 kg'  } },
    { idx: 'FZ-14', line: 'Tren Inferior', name: 'Femoral Sentado',               file: 'FEMORAL SENTADO.png'                  , ficha: 14, desc: 'Curl de pierna en posición sedente que reduce la tensión en la cadera. Trabaja isquiotibiales con apoyo lumbar ergonómico.',                      specs: { musculos: 'Isquiotibiales · Gemelos',                     tipo: 'Flexión de rodilla sedente',  resistencia: 'Pila de peso', stack: '100 kg'     } },
    { idx: 'FZ-15', line: 'Tren Inferior', name: 'Extensión de Pierna',           file: 'EXTENSION DE PIERNA.png'              , ficha: 15, desc: 'Aísla el cuádriceps femoral con extensión completa de rodilla. Ajuste fino de posición para adaptar el recorrido a cada usuario.',               specs: { musculos: 'Cuádriceps femoral',                           tipo: 'Extensión de rodilla',        resistencia: 'Pila de peso', stack: '100 kg'     } },
    { idx: 'FN-16', line: 'Tren Inferior', name: 'Patada de Glúteo',              file: 'PATADA DE GLUTEO.png'                 , ficha: 16, desc: 'Extensión de cadera con resistencia directa sobre el glúteo mayor. Movimiento guiado que maximiza la activación sin cargar la zona lumbar.',       specs: { musculos: 'Glúteo mayor · Extensores de cadera',          tipo: 'Extensión de cadera',         resistencia: 'Pila de peso', stack: '80 kg'      } },
    { idx: 'FZ-17', line: 'Tren Inferior', name: 'Pantorrilla de Pie',            file: 'PANTORRILLA DE PIE.png'              , ficha: 17, desc: 'Trabaja gastrocnemio y sóleo en posición bípeda con carga superior. El apoyo lumbar estabiliza la postura durante todo el movimiento.',            specs: { musculos: 'Gastrocnemio · Sóleo',                         tipo: 'Flexión plantar bípeda',      resistencia: 'Pila de peso', stack: '120 kg'     } },
    { idx: 'FZ-18', line: 'Tren Inferior', name: 'Ext. Pierna Dual Sentado',      file: 'EXTENSION DE PIERNA DUAL SENTADO.png' , ficha: 18, desc: 'Extensión de rodilla bilateral en posición sedente. Trabaja cuádriceps de ambas piernas simultáneamente con resistencia independiente.',          specs: { musculos: 'Cuádriceps femoral (bilateral)',               tipo: 'Extensión bilateral sedente', resistencia: 'Pila de peso', stack: '2 × 80 kg'  } },
    { idx: 'FZ-19', line: 'Tren Superior', name: 'Press de Hombro',               file: 'PRESS DE HOMBRO.png'                  , ficha: 19, desc: 'Press vertical para deltoides anterior, medial y trícep. Palancas articuladas que siguen la trayectoria natural del hombro.',                     specs: { musculos: 'Deltoides anterior y medial · Trícep',         tipo: 'Empuje vertical',             resistencia: 'Pila de peso', stack: '90 kg'      } },
    { idx: 'FZ-20', line: 'Tren Superior', name: 'Press de Pecho',                file: 'PRESS DE PECHO.png'                   , ficha: 20, desc: 'Press pectoral clásico con movimiento horizontal guiado. Trabaja pectoral mayor, deltoides anterior y trícep en un recorrido controlado.',        specs: { musculos: 'Pectoral mayor · Deltoides anterior · Trícep', tipo: 'Empuje horizontal',           resistencia: 'Pila de peso', stack: '120 kg'     } },
  ];

  const lines   = ['Tutto', 'Tren Superior', 'Tren Inferior', 'Funcional'];
  const visible = filter === 'Tutto' ? PRODUCTS : PRODUCTS.filter(p => p.line === filter);
  const prod    = selected !== null ? PRODUCTS[selected] : null;

  useEffect(() => {
    document.body.style.overflow = selected !== null ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [selected]);

  useEffect(() => {
    if (selected === null) return;
    const onKey = (e) => { if (e.key === 'Escape') setSelected(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [selected]);

  return (
    <div className="page-catalogo">
      <style>{`
        /* ─── HEADER ─── */
        .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; flex-wrap: wrap; }
        .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; }

        /* ─── FILTROS ─── */
        .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; }

        /* ─── GRID ─── */
        .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: 640px) { .cat-grid{ grid-template-columns: 1fr; } }

        /* ─── CARD ─── */
        .prod-card{
          background: var(--ink-2); border: 1px solid var(--hairline);
          overflow: hidden; display: flex; flex-direction: column;
          transition: border-color .4s;
        }
        .prod-card:hover{ border-color: rgba(255,255,255,0.25); }
        .prod-card-photo{
          aspect-ratio: 3/4; overflow: hidden; position: relative;
          background: #fff; cursor: pointer;
        }
        .prod-card-photo img{
          width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px;
          transition: transform .9s cubic-bezier(.2,0,.2,1);
        }
        .prod-card:hover .prod-card-photo img{ transform: scale(1.04); }
        .prod-card-body{ padding: 20px 22px 18px; border-top: 1px solid var(--hairline); flex: 1; display: flex; flex-direction: column; }
        .prod-card-meta{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .prod-card-line{ font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-400); }
        .prod-card-idx { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--grey-500); }
        .prod-card-name{
          font-family: var(--display); font-weight: 300; font-size: clamp(17px, 1.5vw, 21px);
          line-height: 1.2; letter-spacing: -0.01em; color: var(--bone); margin-bottom: 18px;
          cursor: pointer;
        }
        .prod-card-actions{ display: flex; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); }
        .btn-comprar{
          flex: 1; background: var(--bone); color: var(--ink);
          padding: 11px 14px; border: none; cursor: pointer; text-decoration: none;
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
          display: flex; align-items: center; justify-content: center; gap: 6px;
          transition: background .25s, color .25s;
          white-space: nowrap;
        }
        .btn-comprar:hover{ background: var(--gold); }

        /* ─── MODAL ─── */
        .prod-modal-overlay{
          position: fixed; inset: 0; z-index: 500;
          background: rgba(10,10,10,0.95); backdrop-filter: blur(16px);
          display: flex; align-items: stretch;
          animation: modal-in .35s ease forwards;
        }
        @keyframes modal-in{ from{ opacity:0; } to{ opacity:1; } }
        .prod-modal{ display: grid; grid-template-columns: 44% 56%; width: 100%; height: 100dvh; overflow: hidden; }
        @media (max-width: 860px){ .prod-modal{ grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; } }
        .prod-modal-photo{ position: relative; overflow: hidden; background: var(--ink-3); border-right: 1px solid var(--hairline); }
        .prod-modal-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
        .prod-modal-content{
          display: flex; flex-direction: column; overflow-y: auto;
          padding: 80px 64px 56px; position: relative;
        }
        @media (max-width: 1100px){ .prod-modal-content{ padding: 64px 40px 48px; } }
        @media (max-width: 640px) { .prod-modal-content{ padding: 52px 24px 40px; } }

        .modal-close{
          position: fixed; top: 28px; right: 36px; z-index: 502;
          width: 44px; height: 44px; border: 1px solid var(--hairline);
          background: rgba(14,14,14,0.85); backdrop-filter: blur(10px);
          display: flex; align-items: center; justify-content: center;
          cursor: pointer; color: var(--bone); font-size: 17px;
          transition: border-color .2s, background .2s;
        }
        .modal-close:hover{ border-color: rgba(255,255,255,0.45); background: rgba(28,28,28,0.9); }
        .modal-tag{
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
          color: var(--grey-500); display: flex; gap: 20px; align-items: center; margin-bottom: 28px;
        }
        .modal-tag::before{ content:''; width: 22px; height: 1px; background: var(--grey-500); }
        .modal-name{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(32px, 3.8vw, 58px); line-height: 0.97; letter-spacing: -0.03em;
          color: var(--bone); margin: 0 0 8px;
        }
        .modal-line{ font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-400); margin-bottom: 36px; }
        .modal-divider{ height: 1px; background: var(--hairline); margin-bottom: 32px; }
        .modal-desc{ font-family: var(--display); font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--grey-300); margin: 0 0 28px; max-width: 42ch; }
        .modal-specs{ display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0 0 auto; border-top: 1px solid var(--hairline); }
        .modal-specs .sk{ font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500); padding: 10px 20px 10px 0; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
        .modal-specs .sv{ font-family: var(--display); font-weight: 300; font-size: 13px; color: var(--grey-200); padding: 10px 0; border-bottom: 1px solid var(--hairline); }
        .btn-comprar-modal{
          display: flex; align-items: center; justify-content: center; gap: 10px;
          width: 100%; padding: 17px 28px; margin-top: auto;
          background: var(--bone); color: var(--ink); text-decoration: none; border: none; cursor: pointer;
          font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
          transition: background .25s;
        }
        .btn-comprar-modal:hover{ background: var(--gold); }
        .btn-comprar-modal .arr{ font-size: 17px; font-weight: 300; }
      `}</style>

      {/* ── Header ── */}
      <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' }}>
              Veinte modelos. Ingeniería italiana para cada grupo muscular. Una sola filosofía: la máquina debe desaparecer y dejar al cuerpo trabajar.
            </p>
          </div>
        </div>
      </section>

      <div className="shell">
        {/* ── Filtros ── */}
        <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>

        {/* ── Grid ── */}
        <div className="cat-grid">
          {visible.map((p, i) => (
            <div key={p.idx} className="prod-card" data-reveal style={{ '--d': (i * 0.04) + 's' }}>
              <div className="prod-card-photo" onClick={() => setSelected(PRODUCTS.indexOf(p))}>
                <img src={photoPath(p.file)} alt={p.name} loading="lazy" onError={(e) => { e.target.style.opacity='0.2'; }} />
              </div>
              <div className="prod-card-body">
                <div className="prod-card-meta">
                  <span className="prod-card-line">{p.line}</span>
                  <span className="prod-card-idx">{p.idx}</span>
                </div>
                <div className="prod-card-name" onClick={() => setSelected(PRODUCTS.indexOf(p))}>{p.name}</div>
                <div className="prod-card-actions">
                  <a
                    href="https://solidworkgym.com/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="btn-comprar"
                    onClick={(e) => e.stopPropagation()}
                  >
                    ¿Dónde comprar? ↗
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Modal detalle ── */}
      {prod && (
        <div className="prod-modal-overlay" onClick={() => setSelected(null)}>
          <button className="modal-close" onClick={() => setSelected(null)} aria-label="Cerrar">✕</button>
          <div className="prod-modal" onClick={(e) => e.stopPropagation()}>
            <div className="prod-modal-photo">
              <img src={photoPath(prod.file)} alt={prod.name} />
            </div>
            <div className="prod-modal-content">
              <div className="modal-tag">
                <span>{prod.idx}</span><span>FOLGORE</span>
              </div>
              <h2 className="modal-name">{prod.name}</h2>
              <div className="modal-line">{prod.line}</div>
              <div className="modal-divider"></div>
              <p className="modal-desc">{prod.desc}</p>
              <div className="modal-specs">
                <span className="sk">Músculos</span>    <span className="sv">{prod.specs.musculos}</span>
                <span className="sk">Tipo</span>        <span className="sv">{prod.specs.tipo}</span>
                <span className="sk">Resistencia</span> <span className="sv">{prod.specs.resistencia}</span>
                <span className="sk">Stack</span>       <span className="sv">{prod.specs.stack}</span>
              </div>
              <a
                href="https://solidworkgym.com/"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-comprar-modal"
              >
                ¿Dónde comprar? <span className="arr">↗</span>
              </a>
            </div>
          </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();
    const text = encodeURIComponent(
      `Hola FOLGORE, me interesa información.\n\nNombre: ${form.name}\nEmail: ${form.email}\nEstudio / Club: ${form.org}\nProyecto: ${form.msg}`
    );
    window.open(`https://wa.me/5213334987753?text=${text}`, '_blank');
    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>
              <div className="info-block reveal-fade" style={{ '--d': '0.1s' }}>
                <h3>Operaciones · México</h3>
                <div className="addr">Guadalajara, <em>Jalisco</em></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>

      <section className="ct-solidwork">
        <div className="shell">
          <style>{`
            .ct-solidwork{
              padding: 48px 0 64px;
              border-top: 1px solid var(--hairline);
              text-align: center;
            }
            .ct-solidwork p{
              font-family: var(--display); font-weight: 300;
              font-size: clamp(16px, 1.4vw, 20px);
              color: var(--grey-300); margin: 0;
            }
            .ct-solidwork a{
              color: var(--bone);
              border-bottom: 1px solid var(--hairline);
              padding-bottom: 2px;
              transition: color .3s, border-color .3s;
            }
            .ct-solidwork a:hover{ color: var(--gold); border-color: var(--gold); }
          `}</style>
          <p>De venta en México en{' '}
            <a href="https://solidworkgym.com/" target="_blank" rel="noopener">Solid Work</a>
          </p>
        </div>
      </section>

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