// FOLGORE — Home page
// Hero (mechanical animation + tagline) → Marquee → Numbers → Validation (Milán/Stuttgart/Detroit/Tokio)
// → Catalog teaser → Closing CTA. Cinematic reveals throughout.

const { useEffect, useRef } = React;

function HomePage({ onNavigate, heroMech = true }){
  useReveal();

  return (
    <div className="page-home">
      <style>{`
        /* HERO */
        .hero{
          position: relative;
          min-height: 100vh;
          height: 100vh;
          color: var(--bone);
          background: var(--ink);
          overflow: hidden;
        }
        .hero-content{
          position: absolute; inset: 0;
          display: flex; flex-direction: column; justify-content: flex-end;
          padding: 140px 48px 100px;
          z-index: 4;
        }
        /* Scrim so headline reads cleanly over the mechanical SVG */
        .hero::after{
          content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
          background:
            radial-gradient(ellipse at 50% 100%, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.15) 70%, rgba(10,10,10,0) 100%),
            linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.6) 30%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0) 100%);
          z-index: 3; pointer-events: none;
        }
        .hero-tagline{
          display:grid; grid-template-columns: 1fr auto; align-items: end; gap: 64px;
        }
        .hero h1{
          margin: 0;
          font-family: var(--display);
          font-weight: 100;
          font-size: clamp(48px, 7.6vw, 134px);
          line-height: 0.94;
          letter-spacing: -0.035em;
          color: var(--bone);
        }
        .hero h1 em{
          font-family: var(--serif); font-style: italic; font-weight: 300;
          letter-spacing: -0.01em;
        }
        /* word-rise rules now live in site.css so they fire on first paint */

        .hero-meta{
          display: flex; flex-direction: column; gap: 14px;
          font-family: var(--display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
          color: var(--grey-300); text-align: right;
          opacity: 0; animation: hero-rise-fade 1.1s 1.0s cubic-bezier(.2,0,.2,1) forwards;
          animation-duration: calc(1.1s * var(--speed));
        }
        @keyframes hero-rise-fade{ to{ opacity: 1; } }

        .hero-top-strip{
          position: absolute; top: 96px; left: 48px; right: 48px; z-index: 4;
          display: flex; justify-content: space-between;
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--grey-400);
          opacity: 0; animation: hero-rise-fade 1s .6s ease forwards;
          animation-duration: calc(1s * var(--speed));
        }
        .hero-top-strip span b{ color: var(--bone); font-weight: 500; }

        .scroll-cue{
          position: absolute; bottom: 32px; right: 48px; z-index: 4;
          display: flex; flex-direction: column; align-items: center; gap: 12px;
          font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--grey-300);
        }
        .scroll-cue .bar{
          width: 1px; height: 56px; background: linear-gradient(to bottom, transparent, var(--bone), transparent);
          background-size: 100% 200%;
          animation: scroll-pulse 2.4s linear infinite;
          animation-duration: calc(2.4s * var(--speed));
        }
        @keyframes scroll-pulse{ from{ background-position: 0 200%; } to{ background-position: 0 -100%; } }

        /* MARQUEE BAR */
        .strip{ background: var(--ink); color: var(--bone); }

        /* NUMBERS */
        .numbers{
          background: var(--ink);
          color: var(--bone);
          padding: 160px 0;
        }
        .numbers .grid{
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
          border-top: 1px solid var(--hairline);
        }
        .numbers .cell{
          padding: 48px 32px;
          border-right: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
          position: relative;
          overflow: hidden;
        }
        .numbers .cell:nth-child(4n){ border-right: 0; }
        .numbers .cell .num{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(56px, 6vw, 96px); line-height: 1;
          letter-spacing: -0.03em;
          color: var(--bone);
        }
        .numbers .cell .num em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .numbers .cell .lbl{
          font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
          color: var(--grey-400); margin-top: 16px;
        }
        .numbers .cell .desc{
          font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; color: var(--grey-200);
          margin-top: 14px; max-width: 28ch;
        }
        @media (max-width: 860px){
          .numbers .grid{ grid-template-columns: 1fr 1fr; }
          .numbers .cell{ border-right: 1px solid var(--hairline); }
          .numbers .cell:nth-child(2n){ border-right: 0; }
        }

        /* MANIFESTO */
        .manifesto{
          background: var(--ink); color: var(--bone);
          padding: 200px 0 220px;
        }
        .manifesto .top{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: 80px; }
        .manifesto .lede{
          font-family: var(--display); font-weight: 200;
          font-size: clamp(36px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -0.022em;
          color: var(--bone); max-width: 18ch;
        }
        .manifesto .lede em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .manifesto .copy{ display: flex; flex-direction: column; gap: 28px; padding-top: 12px; }
        .manifesto .copy p{ margin: 0; }

        /* VALIDATION CITIES */
        .cities{ background: var(--ink); color: var(--bone); padding: 160px 0; }
        .cities .head{ display: flex; justify-content: space-between; align-items: end; margin-bottom: 80px; }
        .cities .head h2{
          font-family: var(--display); font-weight: 200;
          font-size: clamp(40px, 5vw, 80px); line-height: 0.96; letter-spacing: -0.025em;
          margin: 0; max-width: 14ch;
        }
        .cities .head h2 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .cities .row{
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }
        .city{
          position: relative;
          padding: 56px 28px 32px;
          border-right: 1px solid var(--hairline);
          overflow: hidden;
          isolation: isolate;
          transition: background-color .5s ease;
        }
        .city:last-child{ border-right: 0; }
        .city::before{
          content:""; position:absolute; inset:0;
          background: var(--bone);
          transform: scaleY(0); transform-origin: bottom;
          transition: transform .7s cubic-bezier(.2,0,.2,1);
          z-index: 0;
        }
        .city:hover::before{ transform: scaleY(1); transform-origin: top; }
        .city:hover{ color: var(--ink); }
        .city > *{ position: relative; z-index: 1; }
        .city .num{ font-family: 'Inter', monospace; font-size: 11px; letter-spacing: 0.2em; opacity: .6; }
        .city .name{
          margin-top: 80px;
          font-family: var(--display); font-weight: 200;
          font-size: clamp(40px, 4vw, 64px);
          line-height: 1; letter-spacing: -0.022em;
        }
        .city .country{ margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 18px; opacity: .7; }
        .city .meta{ margin-top: 56px; display: flex; justify-content: space-between; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: .65; }
        .city .pin{
          position: absolute; top: 32px; right: 28px;
          width: 8px; height: 8px; background: currentColor; border-radius: 50%;
        }
        .city .pin::before{
          content:""; position:absolute; inset: -10px; border: 1px solid currentColor; border-radius: 50%;
          opacity: .35;
        }
        @media (max-width: 860px){
          .cities .row{ grid-template-columns: 1fr 1fr; }
          .city:nth-child(2){ border-right: 0; }
          .city:nth-child(1), .city:nth-child(2){ border-bottom: 1px solid var(--hairline); }
        }

        /* CATALOG TEASER */
        .catalog{ background: var(--ink); color: var(--bone); padding: 160px 0; }
        .catalog .head{ display:flex; justify-content: space-between; align-items: end; margin-bottom: 64px; gap: 32px; flex-wrap: wrap; }
        .catalog .head h2{
          font-family: var(--display); font-weight: 200;
          font-size: clamp(40px, 5.4vw, 88px); line-height: 0.96; letter-spacing: -0.025em;
          margin: 0; max-width: 16ch;
        }
        .catalog .head h2 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .product-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        @media (max-width: 1024px){ .product-row{ grid-template-columns: 1fr 1fr; } }
        @media (max-width: 720px){ .product-row{ grid-template-columns: 1fr; } }
        .product{
          position: relative;
          aspect-ratio: 4/5;
          background: var(--ink-2);
          overflow: hidden;
          border: 1px solid var(--hairline);
          isolation: isolate;
        }
        .product .silhouette{
          position: absolute; inset: 0;
          display: flex; align-items: center; justify-content: center;
          transition: transform .9s cubic-bezier(.2,0,.2,1);
        }
        .product:hover .silhouette{ transform: scale(1.04); }
        .product .silhouette svg{ width: 70%; height: 70%; opacity: .85; }
        .product .silhouette img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
        .product .meta{ flex-direction: column; gap: 12px; align-items: stretch; }
        .btn-comprar-card{
          display: flex; align-items: center; justify-content: center; gap: 6px;
          background: var(--bone); color: var(--ink); text-decoration: none;
          padding: 10px 16px; border: none;
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
          transition: background .25s; white-space: nowrap;
        }
        .btn-comprar-card:hover{ background: var(--gold); }
        .product .meta{
          position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px 28px;
          display: flex; justify-content: space-between; align-items: end; gap: 16px;
          background: linear-gradient(to top, rgba(10,10,10,0.92), transparent);
        }
        .product .name{ font-family: var(--display); font-weight: 300; font-size: 22px; letter-spacing: -0.005em; }
        .product .name em{ font-family: var(--serif); font-style: italic; font-weight: 400; }
        .product .line{ font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-400); margin-top: 4px; }
        .product .ix{ font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-300); }
        .product .stamp{
          position: absolute; top: 20px; left: 24px;
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--bone);
          display: flex; gap: 10px; align-items: center;
        }
        .product .stamp .dot{ width: 6px; height: 6px; background: var(--bone); border-radius: 50%; }
        .product .top-right{
          position: absolute; top: 20px; right: 24px;
          font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--grey-400);
        }
        .product .crosshair{
          position:absolute; inset: 16px; border: 1px solid rgba(250,250,250,0.06);
          pointer-events: none;
        }
        .product .crosshair::before, .product .crosshair::after{
          content: ""; position: absolute; background: rgba(250,250,250,0.18);
        }
        .product .crosshair::before{ left: 0; right: 0; top: 50%; height: 1px; }
        .product .crosshair::after{ top: 0; bottom: 0; left: 50%; width: 1px; }

        /* CTA */
        .closer{
          background: var(--ink); color: var(--bone);
          padding: 200px 0;
          text-align: center;
          position: relative;
        }
        .closer h2{
          font-family: var(--display); font-weight: 100;
          font-size: clamp(58px, 11vw, 200px); line-height: 0.92; letter-spacing: -0.04em;
          margin: 0;
        }
        .closer h2 em{ font-family: var(--serif); font-style: italic; font-weight: 300; }
        .closer .sub{
          margin-top: 40px;
          font-family: var(--serif); font-style: italic; font-weight: 300;
          font-size: clamp(20px, 2vw, 28px);
          color: var(--grey-200);
        }
        .closer .cta{ margin-top: 64px; display: inline-flex; }
      `}</style>

      {/* HERO */}
      <section className="hero">
        <MechanicalHero enabled={heroMech} />
        <div className="hero-top-strip">
          <span><b>SCROLL</b> · ESPLORARE</span>
          <span>FOLGORE · IT-MX · <b>EST. MCMLXXXV</b></span>
        </div>
        <div className="hero-content">
          <div className="hero-tagline">
            <h1>
              <span className="word"><span>POWER.</span></span>
              <span className="word"><span>PRECISION.</span></span>
              <span className="word"><span><em>Pure</em> Italian</span></span>
              <span className="word"><span>Soul.</span></span>
            </h1>
            <div className="hero-meta">
              <span>Sassuolo, IT</span>
              <span style={{ color: 'var(--bone)' }}>41.5° N · 10.8° E</span>
              <span>Reg. EM-RO</span>
            </div>
          </div>
        </div>
        <div className="scroll-cue">
          <span>Scorri</span>
          <span className="bar"></span>
          <span>01 / 06</span>
        </div>
      </section>

      {/* MARQUEE */}
      <section className="strip">
        <div className="marquee">
          <div className="marquee-track">
            <span className="marquee-item">FORZA<span className="star"></span></span>
            <span className="marquee-item outline">ECCELLENZA</span>
            <span className="marquee-item">PRECISIONE<span className="star"></span></span>
            <span className="marquee-item outline">SASSUOLO 1985</span>
            <span className="marquee-item">FOLGORE<span className="star"></span></span>
            <span className="marquee-item outline">PURE SOUL</span>
          </div>
          <div className="marquee-track" aria-hidden="true">
            <span className="marquee-item">FORZA<span className="star"></span></span>
            <span className="marquee-item outline">ECCELLENZA</span>
            <span className="marquee-item">PRECISIONE<span className="star"></span></span>
            <span className="marquee-item outline">SASSUOLO 1985</span>
            <span className="marquee-item">FOLGORE<span className="star"></span></span>
            <span className="marquee-item outline">PURE SOUL</span>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="manifesto">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">02</span>
            <span>Manifesto</span>
            <span className="line"></span>
            <span>Eccellenza Meccanica</span>
          </div>
          <div className="top" style={{ marginTop: 56 }}>
            <h2 className="lede" data-reveal>
              <span className="reveal-line" style={{ '--d': '0.0s' }}><span>Cuarenta años</span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>obsesionados con</span></span>
              <span className="reveal-line" style={{ '--d': '0.2s' }}><span>una sola cosa: <em>la</em></span></span>
              <span className="reveal-line" style={{ '--d': '0.3s' }}><span><em>máquina</em> perfecta.</span></span>
            </h2>
            <div className="copy" data-reveal>
              <p className="body-lg reveal-fade" style={{ '--d': '0.4s' }}>
                FOLGORE nace en 1985 en Sassuolo, en el corazón industrial de Emilia-Romagna. Tres ingenieros, un taller, una premisa simple: cada componente debe sobrevivir veinte años de uso intensivo sin perder un grado de precisión.
              </p>
              <p className="body-lg reveal-fade" style={{ '--d': '0.55s' }}>
                Hoy nuestras máquinas equipan estudios privados, centros de alto rendimiento y gimnasios de bandera en cuatro continentes. Cada pieza sigue saliendo de la misma línea de ensamblaje. Sigue el mismo control de calidad. Sigue la misma promesa.
              </p>
              <div className="reveal-fade" style={{ '--d': '0.7s', marginTop: 12 }}>
                <a href="#" className="btn-ghost" onClick={(e) => { e.preventDefault(); onNavigate('historia'); }} data-cursor-label="Ver">
                  <span className="underline">Conocer nuestra historia</span>
                  <span>→</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* NUMBERS */}
      <section className="numbers">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">03</span>
            <span>Numeri</span>
            <span className="line"></span>
            <span>Per scala</span>
          </div>
          <div className="grid" style={{ marginTop: 56 }}>
            <div className="cell" data-reveal>
              <div className="num reveal-fade" style={{ '--d': '0.0s' }}><em>40</em></div>
              <div className="lbl reveal-fade" style={{ '--d': '0.1s' }}>Años de oficio</div>
              <div className="desc reveal-fade" style={{ '--d': '0.2s' }}>Desde 1985, mismo taller, misma obsesión.</div>
            </div>
            <div className="cell" data-reveal>
              <div className="num reveal-fade" style={{ '--d': '0.1s' }}>27</div>
              <div className="lbl reveal-fade" style={{ '--d': '0.2s' }}>Países servidos</div>
              <div className="desc reveal-fade" style={{ '--d': '0.3s' }}>Una red logística construida pieza por pieza.</div>
            </div>
            <div className="cell" data-reveal>
              <div className="num reveal-fade" style={{ '--d': '0.2s' }}>1 <em>200</em></div>
              <div className="lbl reveal-fade" style={{ '--d': '0.3s' }}>Estudios y clubes</div>
              <div className="desc reveal-fade" style={{ '--d': '0.4s' }}>Equipados con al menos una máquina FOLGORE.</div>
            </div>
            <div className="cell" data-reveal>
              <div className="num reveal-fade" style={{ '--d': '0.3s' }}>20<em>y</em></div>
              <div className="lbl reveal-fade" style={{ '--d': '0.4s' }}>Garantía estructural</div>
              <div className="desc reveal-fade" style={{ '--d': '0.5s' }}>Hierro fundido tratado, no aluminio prensado.</div>
            </div>
          </div>
        </div>
      </section>

      {/* CITIES */}
      <section className="cities">
        <div className="shell">
          <div className="head" data-reveal>
            <h2>
              <span className="reveal-line"><span>Donde el <em>mundo</em></span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>entrena con</span></span>
              <span className="reveal-line" style={{ '--d': '0.2s' }}><span>nosotros.</span></span>
            </h2>
            <p className="body reveal-fade" style={{ '--d': '0.3s', maxWidth: 36 + 'ch' }}>
              Cuatro ciudades. Cuatro culturas del entrenamiento. Una sola exigencia: máquinas que no fallen cuando importa.
            </p>
          </div>
          <div className="row">
            {[
              { n: '01', name: 'Milano', country: 'Italia', meta: ['Studio Privato', '14 m²/máq.'], year: '1985' },
              { n: '02', name: 'Stuttgart', country: 'Deutschland', meta: ['Performance Lab', '22 unidades'], year: '1996' },
              { n: '03', name: 'Detroit', country: 'United States', meta: ['Athletic Club', '38 unidades'], year: '2004' },
              { n: '04', name: 'Tōkyō', country: '日本', meta: ['Wellness Studio', '18 unidades'], year: '2011' },
            ].map((c, i) => (
              <a href="#" key={c.name} className="city" data-cursor-label="Ver" data-magnetic data-reveal style={{ '--d': (i*0.08) + 's' }}>
                <span className="pin"></span>
                <div className="num reveal-fade">{c.n} · DESDE {c.year}</div>
                <div className="name reveal-line"><span>{c.name}</span></div>
                <div className="country reveal-fade" style={{ '--d': '0.1s' }}>{c.country}</div>
                <div className="meta reveal-fade" style={{ '--d': '0.2s' }}>
                  <span>{c.meta[0]}</span>
                  <span>{c.meta[1]}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CATALOG TEASER */}
      <section className="catalog">
        <div className="shell">
          <div className="section-tag" data-reveal>
            <span className="num">05</span>
            <span>Catalogo</span>
            <span className="line"></span>
            <span>Selezione 2026</span>
          </div>
          <div className="head" style={{ marginTop: 32 }}>
            <h2 data-reveal>
              <span className="reveal-line"><span>Ingegneria che</span></span>
              <span className="reveal-line" style={{ '--d': '0.1s' }}><span>si <em>sente</em>.</span></span>
            </h2>
            <a href="#" className="btn-ghost" onClick={(e) => { e.preventDefault(); onNavigate('catalogo'); }} data-cursor-label="Catálogo">
              <span className="underline">Ver catálogo completo</span>
              <span>→</span>
            </a>
          </div>
          <div className="product-row">
            <Product line="Tren Superior" name={<>FOLGORE <em>Press de Pecho</em></>}       idx="FZ-20" img={"assets/Productos/" + encodeURIComponent("PRESS DE PECHO.png")}           reveal={0.0} onNavigate={onNavigate} />
            <Product line="Tren Inferior" name={<>FOLGORE <em>Leg Press</em></>}             idx="FZ-12" img={"assets/Productos/" + encodeURIComponent("LEG PRESS.png")}               reveal={0.1} onNavigate={onNavigate} />
            <Product line="Tren Superior" name={<>FOLGORE <em>Jalón de Espalda Dual</em></>} idx="FZ-02" img={"assets/Productos/" + encodeURIComponent("JALON DE ESPALDA DUAL.png")} reveal={0.2} onNavigate={onNavigate} />
          </div>
        </div>
      </section>

      {/* CLOSER */}
      <section className="closer">
        <div className="shell">
          <div className="section-tag" data-reveal style={{ justifyContent: 'center' }}>
            <span className="num">06</span>
            <span>Iniziare</span>
            <span className="line" style={{ maxWidth: 240 }}></span>
          </div>
          <h2 data-reveal style={{ marginTop: 56 }}>
            <span className="reveal-line"><span>Diseñá tu</span></span>
            <span className="reveal-line" style={{ '--d': '0.12s' }}><span><em>studio.</em></span></span>
          </h2>
          <p className="sub reveal-fade" data-reveal style={{ '--d': '0.3s' }}>
            Un consultor FOLGORE escucha tu espacio, tu disciplina y tu visión.<br />
            La propuesta llega en 72 horas.
          </p>
          <div className="cta">
            <a href="#" className="btn" data-magnetic data-cursor-label="Empezar" onClick={(e) => { e.preventDefault(); onNavigate('contacto'); }}>
              <span>Iniciar Conversación</span>
              <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

// Silhouette SVGs — abstract machine outlines
function Silhouette({ kind }){
  const stroke = "rgba(250,250,250,0.65)";
  if (kind === 'treadmill'){
    return (
      <svg viewBox="0 0 240 300" fill="none">
        {/* deck */}
        <path d="M30 230 L210 230 L200 250 L40 250 Z" stroke={stroke} strokeWidth="1.2"/>
        {/* belt rollers */}
        <ellipse cx="40" cy="240" rx="14" ry="6" stroke={stroke} strokeWidth="1.2"/>
        <ellipse cx="200" cy="240" rx="14" ry="6" stroke={stroke} strokeWidth="1.2"/>
        {/* uprights */}
        <path d="M180 230 L180 80 L210 60" stroke={stroke} strokeWidth="1.2"/>
        <path d="M60 230 L60 100" stroke={stroke} strokeWidth="1.2"/>
        {/* handlebar */}
        <path d="M60 100 Q120 60 210 60" stroke={stroke} strokeWidth="1.2"/>
        {/* console */}
        <rect x="190" y="38" width="42" height="32" stroke={stroke} strokeWidth="1.2"/>
        <line x1="196" y1="48" x2="226" y2="48" stroke={stroke} strokeWidth="0.8"/>
        <line x1="196" y1="56" x2="216" y2="56" stroke={stroke} strokeWidth="0.8"/>
        {/* belt detail */}
        <line x1="50" y1="240" x2="190" y2="240" stroke={stroke} strokeWidth="0.6" strokeDasharray="2 4"/>
      </svg>
    );
  }
  if (kind === 'press'){
    return (
      <svg viewBox="0 0 240 300" fill="none">
        {/* base */}
        <path d="M40 260 L200 260 L210 270 L30 270 Z" stroke={stroke} strokeWidth="1.2"/>
        {/* seat */}
        <rect x="60" y="200" width="80" height="14" stroke={stroke} strokeWidth="1.2"/>
        <rect x="100" y="160" width="14" height="50" stroke={stroke} strokeWidth="1.2"/>
        {/* backrest */}
        <path d="M115 160 L150 110 L150 160 Z" stroke={stroke} strokeWidth="1.2"/>
        {/* arm */}
        <path d="M150 150 L210 90" stroke={stroke} strokeWidth="1.6"/>
        <circle cx="210" cy="90" r="14" stroke={stroke} strokeWidth="1.2"/>
        {/* weight stack */}
        <rect x="40" y="100" width="36" height="160" stroke={stroke} strokeWidth="1.2"/>
        {Array.from({length: 8}).map((_, i) => (
          <line key={i} x1="40" y1={120 + i*18} x2="76" y2={120 + i*18} stroke={stroke} strokeWidth="0.8"/>
        ))}
        {/* cable */}
        <path d="M58 100 Q58 60 150 60 L150 110" stroke={stroke} strokeWidth="0.8"/>
      </svg>
    );
  }
  // cable machine
  return (
    <svg viewBox="0 0 240 300" fill="none">
      {/* base */}
      <path d="M30 270 L210 270" stroke={stroke} strokeWidth="1.2"/>
      {/* twin towers */}
      <rect x="44" y="50" width="14" height="220" stroke={stroke} strokeWidth="1.2"/>
      <rect x="182" y="50" width="14" height="220" stroke={stroke} strokeWidth="1.2"/>
      {/* top crossbar */}
      <line x1="51" y1="50" x2="189" y2="50" stroke={stroke} strokeWidth="1.2"/>
      {/* pulleys */}
      <circle cx="51" cy="50" r="8" stroke={stroke} strokeWidth="1.2"/>
      <circle cx="189" cy="50" r="8" stroke={stroke} strokeWidth="1.2"/>
      {/* cables */}
      <path d="M51 58 L80 200 L80 240" stroke={stroke} strokeWidth="1"/>
      <path d="M189 58 L160 200 L160 240" stroke={stroke} strokeWidth="1"/>
      {/* handles */}
      <rect x="68" y="240" width="24" height="6" stroke={stroke} strokeWidth="1.2"/>
      <rect x="148" y="240" width="24" height="6" stroke={stroke} strokeWidth="1.2"/>
      {/* weight stacks inside towers */}
      {Array.from({length: 10}).map((_, i) => (
        <line key={'l'+i} x1="44" y1={140 + i*12} x2="58" y2={140 + i*12} stroke={stroke} strokeWidth="0.8"/>
      ))}
      {Array.from({length: 10}).map((_, i) => (
        <line key={'r'+i} x1="182" y1={140 + i*12} x2="196" y2={140 + i*12} stroke={stroke} strokeWidth="0.8"/>
      ))}
    </svg>
  );
}

function Product({ line, name, idx, sil, img, reveal = 0, onNavigate }){
  return (
    <div className="product" data-reveal style={{ '--d': reveal + 's' }}>
      <div className="crosshair"></div>
      <div className="silhouette reveal-fade">
        {img ? <img src={img} alt="" onError={(e) => { e.target.style.opacity='0.2'; }} /> : <Silhouette kind={sil} />}
      </div>
      <div className="stamp"><span className="dot"></span> Disponibile</div>
      <div className="top-right">{idx}</div>
      <div className="meta">
        <div>
          <div className="name">{name}</div>
          <div className="line">{line}</div>
        </div>
        <a
          href="https://solidworkgym.com/"
          target="_blank"
          rel="noopener noreferrer"
          className="btn-comprar-card"
          onClick={(e) => e.stopPropagation()}
        >
          ¿Dónde comprar? ↗
        </a>
      </div>
    </div>
  );
}

window.HomePage = HomePage;
window.Silhouette = Silhouette;
window.Product = Product;
