// Productdetailpagina — A · Showroom richting
// 360°-view, brochure-stijl spec sheet, garage actions

const { Supercar: SupercarP, F1Car: F1CarP, ClassicCar: ClassicCarP, Truck: TruckP, RallyCar: RallyCarP } = window;

const PageProduct = ({ id, go }) => {
  const p = findProduct(id);
  const Car = window[p.shape];
  const [angle, setAngle] = React.useState(0);
  const [tab, setTab] = React.useState('specs');

  // related products: same cat or same brand, exclude self
  const related = PRODUCTS.filter(x => x.id !== p.id && (x.brand === p.brand || x.cat === p.cat)).slice(0, 4);

  return (
    <div style={{ background: SR.bg, color: SR.ink, fontFamily: '"Space Grotesk", sans-serif', minHeight: '100vh' }}>
      <ShowroomHeader active="catalog" go={go} />

      {/* breadcrumb */}
      <section style={{ padding: '24px 56px 0', fontSize: 11, letterSpacing: '0.25em', color: SR.ink2 }}>
        <span onClick={() => go('home')} style={{ cursor: 'pointer' }}>SHOWROOM</span>
        {' · '}
        <span onClick={() => go('catalog')} style={{ cursor: 'pointer' }}>CATALOGUS</span>
        {' · '}{p.cat.toUpperCase()}
      </section>

      {/* HERO — split: 360 view | spec brochure */}
      <section style={{ padding: '32px 56px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48 }}>

        {/* 360 view */}
        <div style={{
          background: '#fff', border: `1px solid ${SR.line}`,
          padding: 32, position: 'relative', overflow: 'hidden',
        }}>
          {/* spotlights */}
          <div style={{
            position: 'absolute', top: 0, left: '20%', right: '20%', height: 280,
            background: 'radial-gradient(ellipse at top, rgba(201,163,91,0.3) 0%, transparent 70%)',
          }} />

          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
            marginBottom: 16, fontSize: 10, letterSpacing: '0.25em', color: SR.ink2,
            fontFamily: '"JetBrains Mono", monospace', position: 'relative', zIndex: 2,
          }}>
            <div>
              <span style={{ color: SR.copper, fontWeight: 700 }}>● 360°</span> ROTEER VOOR INSPECTIE
            </div>
            <div>VOLG. KEN: <Plate style={{ marginLeft: 6 }}>{p.plate}</Plate></div>
          </div>

          {/* 360 stage */}
          <div style={{ position: 'relative', height: 380, perspective: 1200 }}>
            {/* glass plinth */}
            <div style={{
              position: 'absolute', bottom: 30, left: '8%', right: '8%', height: 16,
              background: `linear-gradient(180deg, ${SR.copper}aa 0%, ${SR.copper}55 100%)`,
              borderRadius: 4, transform: 'perspective(800px) rotateX(60deg)',
              boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
            }} />
            <div style={{
              position: 'absolute', bottom: 60, left: '50%',
              transform: `translateX(-50%) rotateY(${angle}deg)`,
              transformStyle: 'preserve-3d', width: 540,
              transition: 'transform .15s linear',
            }}>
              <ProductImage product={p} color={SR.ink} accent={SR.copper} style={{ width: '100%' }} />
            </div>

            {/* angle indicator */}
            <div style={{
              position: 'absolute', top: 20, right: 20,
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: SR.copper,
              letterSpacing: '0.15em',
            }}>{Math.round(((angle % 360) + 360) % 360)}°</div>
          </div>

          {/* slider control */}
          <div style={{
            marginTop: 24, padding: '14px 20px',
            background: SR.bg, border: `1px solid ${SR.line}`,
            display: 'flex', alignItems: 'center', gap: 16,
          }}>
            <span style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2 }}>0°</span>
            <input type="range" min={-180} max={180} value={angle}
              onChange={e => setAngle(+e.target.value)}
              style={{ flex: 1, accentColor: SR.copper }}/>
            <span style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2 }}>360°</span>
            <button onClick={() => setAngle(0)} style={{
              background: 'transparent', border: `1px solid ${SR.line}`, padding: '6px 10px',
              fontFamily: '"Archivo Narrow", sans-serif', fontSize: 10, letterSpacing: '0.15em',
              fontWeight: 700, cursor: 'pointer',
            }}>RESET</button>
          </div>

          {/* thumbnail row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 12 }}>
            {[0, 90, 180, 270].map((a, i) => (
              <button key={i} onClick={() => setAngle(a)} style={{
                background: angle === a ? SR.bg : '#fff',
                border: `1px solid ${angle === a ? SR.copper : SR.line}`,
                padding: 8, height: 80, cursor: 'pointer', position: 'relative',
              }}>
                <div style={{ transform: `rotateY(${a}deg)`, transformOrigin: 'center', height: '100%' }}>
                  <ProductImage product={p} color={SR.ink} accent={SR.copper} style={{ width: '100%', height: '100%' }}/>
                </div>
                <div style={{
                  position: 'absolute', bottom: 2, right: 4,
                  fontSize: 9, fontFamily: '"JetBrains Mono", monospace', color: SR.ink2,
                }}>{a}°</div>
              </button>
            ))}
          </div>
        </div>

        {/* SPEC BROCHURE side */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{
              padding: '4px 8px', background: SR.ink, color: '#fff',
              fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, fontSize: 10,
              letterSpacing: '0.2em',
            }}>{p.tag}</span>
            <span style={{ fontSize: 11, letterSpacing: '0.2em', color: SR.ink2, fontWeight: 600 }}>
              {p.brand.toUpperCase()} · {p.year}
            </span>
            <Stars n={p.rare} />
          </div>

          <h1 style={{
            fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 64,
            letterSpacing: '-0.02em', margin: 0, lineHeight: 0.95,
          }}>{p.name}</h1>
          <div style={{
            fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
            fontSize: 20, color: SR.copper, marginTop: 4,
          }}>{p.tagline}</div>

          {/* price block */}
          <div style={{
            marginTop: 28, paddingTop: 20, paddingBottom: 20,
            borderTop: `1px solid ${SR.line}`, borderBottom: `1px solid ${SR.line}`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2, marginBottom: 4 }}>PRIJS · INCL. BTW</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 56, lineHeight: 1 }}>€ {p.price}</div>
                {p.oldPrice && <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 14, color: SR.ink3, textDecoration: 'line-through' }}>€ {p.oldPrice}</div>}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2 }}>VOORRAAD</div>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace', fontSize: 14, fontWeight: 700,
                color: p.stock > 5 ? '#3a8a4a' : p.stock > 0 ? SR.copper : SR.ink3,
                marginTop: 4,
              }}>
                {p.stock > 5 ? `● ${p.stock} OP VOORRAAD` :
                 p.stock > 0 ? `● NOG ${p.stock} BESCHIKBAAR` :
                 '◇ PRE-ORDER'}
              </div>
            </div>
          </div>

          {/* CTA buttons */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, marginTop: 24 }}>
            <button style={{
              background: SR.ink, color: '#fff', border: 'none', padding: '18px 28px',
              fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, letterSpacing: '0.15em',
              fontSize: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            }}>
              <span style={{ fontSize: 16 }}>🅖</span>
              IN GARAGE PARKEREN — € {p.price}
            </button>
            <button style={{
              background: 'transparent', color: SR.ink, border: `1px solid ${SR.ink}`, padding: '18px 20px',
              fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, letterSpacing: '0.15em',
              fontSize: 14, cursor: 'pointer',
            }}>♡ WISHLIST</button>
          </div>

          {/* fuel-gauge spec strip */}
          <div style={{
            marginTop: 28, padding: '20px 24px', background: '#fff',
            border: `1px solid ${SR.line}`,
          }}>
            <div style={{
              fontSize: 10, letterSpacing: '0.25em', color: SR.copper, fontWeight: 700,
              marginBottom: 16,
            }}>BROCHURE · KERN-SPECIFICATIES</div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {[
                { l: 'Aantal stenen', v: p.parts.toLocaleString() },
                { l: 'Schaal', v: p.scale },
                { l: 'Bouwtijd', v: `~ ${p.hours} uur` },
                { l: 'Lengte', v: p.specs.lengte },
                { l: 'Gewicht', v: p.specs.gewicht },
                { l: 'Motor', v: p.specs.motor },
                { l: 'Kleur', v: p.color },
                { l: 'Leeftijd', v: p.ages },
              ].map((s, i) => (
                <div key={i} style={{ paddingBottom: 8, borderBottom: `1px dotted ${SR.line}` }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.2em', color: SR.ink2 }}>{s.l.toUpperCase()}</div>
                  <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 14, fontWeight: 700, marginTop: 2 }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* tachometer-style popularity */}
          <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 16 }}>
            <svg viewBox="0 0 120 80" style={{ width: 100 }}>
              <path d="M 15 65 A 45 45 0 0 1 105 65" fill="none" stroke={SR.line} strokeWidth="3"/>
              <path d="M 15 65 A 45 45 0 0 1 85 30" fill="none" stroke={SR.copper} strokeWidth="3"/>
              <line x1="60" y1="65" x2="86" y2="34" stroke={SR.ink} strokeWidth="2.5" strokeLinecap="round"/>
              <circle cx="60" cy="65" r="4" fill={SR.ink}/>
            </svg>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.2em', color: SR.ink2 }}>POPULARITEIT</div>
              <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 28, lineHeight: 1, color: SR.copper }}>HOOG · 7.4K</div>
              <div style={{ fontSize: 11, color: SR.ink2 }}>284 bekeken vandaag</div>
            </div>
          </div>
        </div>
      </section>

      {/* Tabs section */}
      <section style={{ padding: '40px 56px 60px' }}>
        <div style={{ display: 'flex', gap: 0, borderBottom: `1px solid ${SR.line}`, marginBottom: 32 }}>
          {[
            ['specs', 'Volledige specificaties'],
            ['build', 'Bouwproces'],
            ['reviews', 'Reviews · 47'],
            ['care', 'Onderhoud'],
          ].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{
              padding: '14px 24px', background: 'transparent',
              border: 'none', borderBottom: tab === k ? `2px solid ${SR.copper}` : '2px solid transparent',
              color: tab === k ? SR.copper : SR.ink2, cursor: 'pointer',
              fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700,
              letterSpacing: '0.15em', fontSize: 12, marginBottom: -1,
            }}>{l.toUpperCase()}</button>
          ))}
        </div>

        {tab === 'specs' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <tbody>
                {Object.entries(p.specs).map(([k, v], i) => (
                  <tr key={i} style={{ borderBottom: `1px dotted ${SR.line}` }}>
                    <td style={{ padding: '12px 0', fontSize: 11, letterSpacing: '0.2em', color: SR.ink2, width: '40%' }}>
                      {k.toUpperCase()}
                    </td>
                    <td style={{ padding: '12px 0', fontFamily: '"JetBrains Mono", monospace', fontSize: 14, fontWeight: 700 }}>
                      {typeof v === 'number' ? v.toLocaleString() : v}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div>
              <h3 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 28, margin: 0 }}>Beschrijving</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: SR.ink2, marginTop: 14 }}>
                {p.tagline}. Gebouwd als verzamelaarsobject op schaal {p.scale} in {p.color}.
                {p.parts.toLocaleString()} stenen, {p.hours} uur bouwplezier — een sculptuur
                voor wie auto's op de plank wil zien staan, niet op de weg.
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: SR.ink2 }}>
                Geleverd inclusief plexiglazen vitrine-basis, genummerde echtheids­certificaat
                en losse reservestenen. Verzending in beschermende dubbel-doos.
              </p>
            </div>
          </div>
        )}

        {tab === 'build' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { n: '01', t: 'Chassis', d: 'Bodemplaat & ophanging', h: '~2u' },
              { n: '02', t: 'Aandrijving', d: 'Motor, versnellingsbak, as', h: '~3u' },
              { n: '03', t: 'Carrosserie', d: 'Panelen & paneellijnen', h: '~6u' },
              { n: '04', t: 'Afwerking', d: 'Wielen, lampen, livery', h: '~3u' },
            ].map((s, i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${SR.line}`, padding: 24 }}>
                <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 56, color: SR.copper, lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 24, marginTop: 8 }}>{s.t}</div>
                <p style={{ fontSize: 13, color: SR.ink2, marginTop: 8 }}>{s.d}</p>
                <div style={{ marginTop: 12, fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: SR.copper }}>{s.h}</div>
              </div>
            ))}
          </div>
        )}

        {tab === 'reviews' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { n: 'M. Vermeulen', d: '12 mrt', s: 5, t: 'Een sculptuur. Drie weken bouwen, drie maanden ervan genieten op de boekenkast.' },
              { n: 'J. de Boer', d: '04 mrt', s: 5, t: 'Detail-niveau is buitengewoon. Echte rubberen banden, functionele V12. Geld waard.' },
              { n: 'S. el-Amrani', d: '28 feb', s: 4, t: 'Bouw is uitdagend, sommige stappen hebben echt instructies nodig. Eindresultaat top.' },
            ].map((r, i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${SR.line}`, padding: 24, display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24 }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>{r.n}</div>
                  <div style={{ fontSize: 11, color: SR.ink2 }}>{r.d}</div>
                </div>
                <div style={{ fontSize: 14, lineHeight: 1.5 }}>{r.t}</div>
                <Stars n={r.s}/>
              </div>
            ))}
          </div>
        )}

        {tab === 'care' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            {[
              ['Stof verwijderen', 'Een zachte borstel, geen perslucht — die kan stenen losblazen.'],
              ['Direct zonlicht', 'Vermijd. UV verkleurt felle bricks na ~3 jaar.'],
              ['Ontbrekende stenen', 'Brickcars levert binnen NL gratis na — vraag aan via je account.'],
              ['Uit elkaar halen', 'Gebruik de bricklift. Forceer nooit een naad.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${SR.line}`, padding: 24 }}>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 22 }}>{t}</div>
                <p style={{ fontSize: 14, color: SR.ink2, marginTop: 8, lineHeight: 1.5 }}>{d}</p>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Related */}
      <section style={{ padding: '0 56px 80px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24 }}>
          <h2 style={{ fontFamily: '"Instrument Serif", serif', fontSize: 40, margin: 0 }}>
            Past in <em style={{ color: SR.copper }}>dezelfde garage</em>
          </h2>
          <a onClick={() => go('catalog')} style={{ fontSize: 13, textDecoration: 'underline', cursor: 'pointer' }}>Hele catalogus →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {related.map(r => {
            const RC = window[r.shape];
            return (
              <article key={r.id} onClick={() => go('product', { id: r.id })} style={{
                background: '#fff', border: `1px solid ${SR.line}`, cursor: 'pointer',
                position: 'relative', overflow: 'hidden',
              }}>
                <Plate style={{ position: 'absolute', top: 12, right: 12, zIndex: 2, fontSize: 9, padding: '2px 6px' }}>{r.plate}</Plate>
                <div style={{ height: 130, padding: 14, background: `linear-gradient(180deg, ${SR.bg} 0%, #fff 100%)` }}>
                  <ProductImage product={r} color={SR.ink} accent={SR.copper} style={{ width: '100%', height: '100%' }}/>
                </div>
                <div style={{ padding: '12px 16px 16px' }}>
                  <div style={{ fontSize: 9, letterSpacing: '0.2em', color: SR.ink2 }}>{r.brand.toUpperCase()}</div>
                  <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 18, marginTop: 2 }}>{r.name}</div>
                  <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 22, marginTop: 6 }}>€ {r.price}</div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

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

window.PageProduct = PageProduct;