// Home page — A · Showroom (refactored to use shared header/footer + go())

const { Supercar, F1Car, ClassicCar, Truck, RallyCar, Stud } = window;

const PageHome = ({ go }) => {
  const [hovered, setHovered] = React.useState(null);
  const featured = PRODUCTS.slice(0, 6);

  return (
    <div style={{
      width: '100%', minHeight: '100vh', background: SR.bg,
      color: SR.ink, fontFamily: '"Space Grotesk", sans-serif', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
        backgroundImage: `linear-gradient(${SR.line} 1px, transparent 1px), linear-gradient(90deg, ${SR.line} 1px, transparent 1px)`,
        backgroundSize: '80px 80px',
        maskImage: 'linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%)',
      }} />
      <ShowroomHeader active="home" go={go} />

      {/* HERO */}
      <section style={{ padding: '60px 56px 60px', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          <div style={{ height: 1, width: 40, background: SR.copper }} />
          <span style={{ fontSize: 11, letterSpacing: '0.3em', color: SR.copper, fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700 }}>
            EDITIE 05 · ZOMER COLLECTIE 2026
          </span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <h1 style={{
              fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 116,
              lineHeight: 0.95, letterSpacing: '-0.02em', margin: 0,
            }}>
              Auto's<br/>
              <em style={{ color: SR.copper }}>steen voor steen</em><br/>
              gebouwd.
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.5, color: SR.ink2, maxWidth: 480, marginTop: 28 }}>
              De grootste Nederlandse showroom voor verzamelwaardige auto bouwsets.
              LEGO én Mattel Bricks onder één dak. Alleen auto's. Niets anders.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <button onClick={() => go('catalog')} style={{
                background: SR.ink, color: '#fff', border: 'none', padding: '16px 28px',
                fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, letterSpacing: '0.12em',
                fontSize: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10,
              }}>BETREED SHOWROOM <span>→</span></button>
              <button onClick={() => go('compare')} style={{
                background: 'transparent', color: SR.ink, border: `1px solid ${SR.ink}`,
                padding: '16px 28px', fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700,
                letterSpacing: '0.12em', fontSize: 14, cursor: 'pointer',
              }}>VERGELIJK MERKEN</button>
            </div>
            <div style={{ display: 'flex', gap: 36, marginTop: 56, paddingTop: 28, borderTop: `1px solid ${SR.line}` }}>
              {[['847','sets in voorraad'],['12','limited editions'],['4.9★','collectorbeoordeling']].map((s, i) => (
                <div key={i}>
                  <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 38, lineHeight: 1 }}>{s[0]}</div>
                  <div style={{ fontSize: 11, letterSpacing: '0.2em', color: SR.ink2, marginTop: 6 }}>{s[1].toUpperCase()}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ position: 'relative', height: 540, cursor: 'pointer' }} onClick={() => go('product', { id: 'gtx' })}>
            <div style={{ position: 'absolute', bottom: 60, left: 0, right: 0, height: 220,
              background: 'linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%)',
              border: `1px solid ${SR.line}`, backdropFilter: 'blur(8px)' }} />
            <div style={{ position: 'absolute', top: 0, left: '20%', right: '20%', height: 320,
              background: 'radial-gradient(ellipse at top, rgba(201,163,91,0.35) 0%, transparent 70%)' }} />
            <div style={{ position: 'absolute', top: 80, left: '50%', transform: 'translateX(-50%)', width: 580 }}>
              <ProductImage product={findProduct('gtx')} color={SR.ink} accent={SR.copper} style={{ width: '100%' }} />
            </div>
            <div style={{ position: 'absolute', right: -8, bottom: -8, width: 240,
              background: '#fff', padding: 18, border: `1px solid ${SR.line}`, boxShadow: '0 12px 32px rgba(0,0,0,0.08)', zIndex: 3 }}>
              <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.copper, fontWeight: 700 }}>FEATURED · GRAIL</div>
              <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 26, lineHeight: 1.1, marginTop: 8 }}>Bugatti Chiron 42083</div>
              <div style={{ fontSize: 12, color: SR.ink2, marginTop: 4 }}>LEGO Technic · 1:8 schaal</div>
              <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 8, paddingTop: 14, borderTop: `1px solid ${SR.line}` }}>
                <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 30 }}>€ 549</div>
                <div style={{ fontSize: 10, color: SR.ink2, textDecoration: 'line-through' }}>€ 599</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRODUCT GRID */}
      <section style={{ padding: '20px 56px 60px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.3em', color: SR.copper, fontWeight: 700 }}>SHOWROOM · VLOER 1</div>
            <h2 style={{ fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 56, margin: '6px 0 0', letterSpacing: '-0.02em' }}>
              De huidige collectie
            </h2>
          </div>
          <a onClick={() => go('catalog')} style={{ fontSize: 13, color: SR.ink2, textDecoration: 'underline', cursor: 'pointer' }}>Toon alle 847 →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {featured.map((p, i) => {
            const Car = window[p.shape];
            const isHover = hovered === i;
            return (
              <article key={p.id}
                onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
                onClick={() => go('product', { id: p.id })}
                style={{
                  background: '#fff', border: `1px solid ${SR.line}`, position: 'relative', overflow: 'hidden', cursor: 'pointer',
                  transition: 'transform .25s, box-shadow .25s',
                  transform: isHover ? 'translateY(-4px)' : 'none',
                  boxShadow: isHover ? '0 24px 48px rgba(0,0,0,0.10)' : '0 2px 6px rgba(0,0,0,0.04)',
                }}>
                <div style={{ position: 'absolute', top: 14, left: 14, zIndex: 2, padding: '4px 8px',
                  background: SR.ink, color: '#fff', fontFamily: '"Archivo Narrow", sans-serif',
                  fontWeight: 700, fontSize: 10, letterSpacing: '0.15em' }}>{p.tag}</div>
                <Plate style={{ position: 'absolute', top: 14, right: 14, zIndex: 2 }}>{p.plate}</Plate>
                <div style={{ height: 200, padding: '20px 20px 0', position: 'relative',
                  background: `linear-gradient(180deg, ${SR.bg} 0%, #fff 100%)` }}>
                  <ProductImage product={p} color={SR.ink} accent={SR.copper} style={{ width: '100%', height: '100%',
                    transition: 'transform .4s', transform: isHover ? 'translateX(8px)' : 'none' }}/>
                </div>
                <div style={{ padding: '20px 22px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div style={{ fontSize: 10, letterSpacing: '0.2em', color: SR.ink2, fontWeight: 600 }}>
                      {p.brand.toUpperCase()} · {p.cat.toUpperCase()}
                    </div>
                    <Stars n={p.rare}/>
                  </div>
                  <h3 style={{ fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 26, margin: '6px 0 14px' }}>{p.name}</h3>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10,
                    paddingBottom: 14, borderBottom: `1px dashed ${SR.line}`,
                    fontFamily: '"JetBrains Mono", monospace', fontSize: 10 }}>
                    <div><div style={{ color: SR.ink2 }}>STENEN</div><div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>{p.parts.toLocaleString()}</div></div>
                    <div><div style={{ color: SR.ink2 }}>SCHAAL</div><div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>{p.scale}</div></div>
                    <div><div style={{ color: SR.ink2 }}>BOUW</div><div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>~{p.hours}u</div></div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14 }}>
                    <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 30 }}>€ {p.price}</div>
                    <div style={{ background: SR.ink, color: '#fff', padding: '10px 16px',
                      fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.15em' }}>BEKIJK →</div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      {/* COMPARE STRIP */}
      <section style={{ padding: '40px 56px 60px' }}>
        <div style={{ background: '#fff', border: `1px solid ${SR.line}`,
          padding: '32px 40px', display: 'grid', gridTemplateColumns: '1fr auto 1fr auto', gap: 32, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 28 }}>LEGO</div>
            <div style={{ fontSize: 11, color: SR.ink2, letterSpacing: '0.2em' }}>412 SETS · GEM. € 519</div>
          </div>
          <div style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontSize: 36, color: SR.copper }}>vs</div>
          <div>
            <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 28 }}>MATTEL BRICKS</div>
            <div style={{ fontSize: 11, color: SR.ink2, letterSpacing: '0.2em' }}>435 SETS · GEM. € 169</div>
          </div>
          <button onClick={() => go('compare')} style={{
            background: SR.ink, color: '#fff', border: 'none', padding: '14px 22px',
            fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, letterSpacing: '0.12em',
            fontSize: 13, cursor: 'pointer',
          }}>VERGELIJK SET-VOOR-SET →</button>
        </div>
      </section>

      <ShowroomFooter />
    </div>
  );
};

window.PageHome = PageHome;