// BHP — Product Detail Page (Amazon A+ style)

const { useState, useEffect, useRef, useContext } = React;

// Base always ships with Brushed Steel — no selector needed

const FULL_SPECS = [
  ['Shell material',    '316L Stainless Steel'],
  ['Construction',      'CNC machined from billet'],
  ['Buttons',           'Steel flexure mechanism'],
  ['Sensor',            'PixArt PAW3395'],
  ['Connectivity',      '2.4GHz wireless USB-A'],
  ['Battery life',      '70+ hours'],
  ['Charging',          'Wireless Qi via dock'],
  ['DPI range',         '100–26,000 DPI'],
  ['IPS',               '650'],
  ['Acceleration',      '50G'],
  ['Polling rate',      '125–2000Hz'],
  ['Weight',            'TBD (machined steel)'],
  ['Mat size',          '350 × 280mm'],
  ['Mat material',      'Full-grain leather · natural rubber base'],
  ['Dock footprint',    '3″ × 5″'],
  ['Dock charging',     'Wireless Qi · USB-C tether'],
  ['Box contents',      'Mouse, dock, mat, braided USB-C, setup card'],
];

const FAQS = [
  { q: "What's the shell made of?",
    a: "316L stainless steel. CNC machined from a solid block — not cast, not stamped, not injection moulded. The same grade used in surgical instruments and marine hardware." },
  { q: "How does the shell swap work?",
    a: "Turn the mouse over. The shell slides out from the bottom with a light downward push. No tools, no screws, no adhesive. A new shell clicks in the same way." },
  { q: "What's in the box?",
    a: "The BHP Steele mouse, the wireless charging dock, the full-grain leather mat, a braided USB-C cable, a 2.4GHz USB-A receiver dongle, and a setup card." },
  { q: "Do all shells fit all BHP bases?",
    a: "Yes. The shell form factor is the same across the entire BHP base line. Any shell, current or future, fits any BHP Steele Base without modification." },
  { q: "Is this a pre-order?",
    a: "Yes. The base is in production. Reserving your place today does not require any payment. You'll be charged only when your order ships." },
  { q: "What are the shipping and return terms?",
    a: "Orders ship within 3 business days of fulfilment. Returns accepted within 30 days of delivery, no questions asked. Full details on the Support page." },
];

function PDPPage({ setPage }) {
  const { Eyebrow, SteelPlaceholder, LeatherPlaceholder, Reveal, Rule, BtnDark, BtnGhost } = window;
  const cart = useContext(window.CartContext);

  const [openFaq, setOpenFaq] = useState(null);
  const [stickyVis, setStickyVis] = useState(false);
  const [added, setAdded] = useState(false);
  const buyBoxRef = useRef(null);

  useEffect(() => {
    if (!buyBoxRef.current) return;
    const obs = new IntersectionObserver(
      ([entry]) => setStickyVis(!entry.isIntersecting),
      { threshold: 0, rootMargin: '-64px 0px 0px 0px' }
    );
    obs.observe(buyBoxRef.current);
    return () => obs.disconnect();
  }, []);

  const handleAddToCart = () => {
    cart.add({ id: 'bhp-base', name: 'BHP Steele Base', price: 249, finish: 'Brushed Steel' });
    setAdded(true);
    setTimeout(() => setAdded(false), 2500);
  };

  return (
    <div>

      {/* ── STICKY BUY BAR ── */}
      <div className={`sticky-bar${stickyVis ? ' vis' : ''}`}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 60px', height: 52, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
          <div style={{ display: 'flex', gap: 24, alignItems: 'baseline', overflow: 'hidden' }}>
            <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1rem', fontWeight: 400, color: '#FAFAF8', whiteSpace: 'nowrap' }}>BHP Steele Base</span>
            <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B07D45', whiteSpace: 'nowrap' }}>Brushed Steel</span>
          </div>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexShrink: 0 }}>
            <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1.3rem', color: '#FAFAF8' }}>$249</span>
            <BtnDark onClick={handleAddToCart} style={{ padding: '9px 20px', fontSize: '0.72rem' }}>
              {added ? 'Added ✓' : 'Pre-order'}
            </BtnDark>
          </div>
        </div>
      </div>

      {/* ── BREADCRUMB ── */}
      <div style={{ background: '#FAFAF8', paddingTop: 80 }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '16px 60px 0' }} className="px-lg">
          <ol style={{ display: 'flex', gap: 10, listStyle: 'none', padding: 0, alignItems: 'center' }}>
            <li><button onClick={() => setPage('home')} style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', letterSpacing: '0.06em', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>BHP</button></li>
            <li style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: 'rgba(15,15,15,0.25)' }}>—</li>
            <li style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: 'rgba(15,15,15,0.5)', letterSpacing: '0.06em' }}>The Base</li>
          </ol>
        </div>
      </div>

      {/* ── MAIN GRID ── */}
      <section style={{ background: '#FAFAF8', padding: '24px 60px 96px' }} className="px-lg">
        <div className="pdp-grid" ref={buyBoxRef} style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 72, alignItems: 'start' }}>

          {/* Images */}
          <div>
            <SteelPlaceholder height={500} />
            <div className="pdp-img-thumb" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginTop: 8 }}>
              <SteelPlaceholder height={130} />
              <LeatherPlaceholder height={130} />
              <SteelPlaceholder height={130} />
            </div>
          </div>

          {/* Buy box */}
          <div style={{ position: 'sticky', top: 80 }}>
            <Eyebrow>The Base</Eyebrow>
            <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', color: '#0F0F0F', lineHeight: 1.1, marginBottom: 16 }}>
              BHP Steele<br />Base
            </h1>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '2rem', color: '#0F0F0F', marginBottom: 20 }}>$249</div>

            <div style={{ borderTop: '1px solid rgba(15,15,15,0.1)', paddingTop: 20, marginBottom: 20 }}>
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(15,15,15,0.65)', lineHeight: 1.75, maxWidth: '38ch' }}>
                CNC machined 316L stainless steel. Swappable shells. Steel flexure buttons. PAW3395 sensor. 70+ hour battery. Comes with dock and full-grain leather mat.
              </p>
            </div>

            {/* Included finish — static, no selector */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', border: '1px solid rgba(15,15,15,0.12)', marginBottom: 24, background: 'rgba(15,15,15,0.02)' }}>
              <div style={{ width: 28, height: 28, background: 'linear-gradient(140deg,#2d2c2a,#1e1d1c)', flexShrink: 0 }}></div>
              <div>
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.4)', marginBottom: 2 }}>Included finish</div>
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.92rem', color: '#0F0F0F' }}>Brushed Steel</div>
              </div>
              <div style={{ marginLeft: 'auto', fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: '#B07D45', cursor: 'pointer', borderBottom: '1px solid rgba(176,125,69,0.3)', paddingBottom: 1 }}
                onClick={() => setPage('shells')}>Change with shells →</div>
            </div>

            {/* Trust strip */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'rgba(15,15,15,0.07)', marginBottom: 20 }}>
              {['30-day returns', 'Ships in 3 days', 'Founder-built'].map(t => (
                <div key={t} style={{ background: '#FAFAF8', padding: '10px 8px', fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', color: 'rgba(15,15,15,0.5)', lineHeight: 1.35, textAlign: 'center', letterSpacing: '0.02em' }}>{t}</div>
              ))}
            </div>

            {/* CTA */}
            {added ? (
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.88rem', color: '#4a9c65', border: '1px solid #4a9c65', padding: '14px 20px', textAlign: 'center', letterSpacing: '0.06em' }}>
                Added to your base.
              </div>
            ) : (
              <BtnDark onClick={handleAddToCart} style={{ width: '100%', padding: '15px', marginBottom: 10, fontSize: '0.85rem' }}>
                Pre-order — $249
              </BtnDark>
            )}
            <BtnGhost onClick={() => {}} style={{ width: '100%', padding: '13px', fontSize: '0.78rem' }}>
              Reserve your place — no charge today
            </BtnGhost>

            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', color: 'rgba(15,15,15,0.3)', textAlign: 'center', marginTop: 12, letterSpacing: '0.04em' }}>
              Limited first run. No charge until your order ships.
            </p>
          </div>
        </div>
      </section>

      {/* ── A+ MATERIAL STORY ── */}
      <section style={{ background: '#0F0F0F', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'stretch' }}>
            <Reveal>
              <Eyebrow light>Why steel</Eyebrow>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', color: '#FAFAF8', lineHeight: 1.1, marginBottom: 24 }}>
                A tool that gets<br />better with use.
              </h2>
              <Rule />
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.6)', lineHeight: 1.85, marginBottom: 20 }}>
                Stainless steel develops a patina over years of use. The high points of the shell polish naturally from your palm and fingers. The geometry gets familiar. It becomes yours.
              </p>
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.6)', lineHeight: 1.85 }}>
                When you want a change, the shell slides out. No tools. Dishwasher safe. The electronics never get wet.
              </p>
            </Reveal>
            <SteelPlaceholder height={420} />
          </div>
        </div>
      </section>

      {/* ── COMPLETE SET BREAKDOWN ── */}
      <section style={{ background: '#FAFAF8', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 56 }}>
            <Eyebrow>What's included</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', color: '#0F0F0F', lineHeight: 1.1 }}>
              Everything on the desk.<br />Nothing missing.
            </h2>
          </Reveal>
          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2, background: 'rgba(15,15,15,0.07)' }}>
            {[
              { eye: '01 / The Mouse', title: 'Steele Mouse', Img: SteelPlaceholder,
                pts: ['316L stainless steel shell', 'CNC machined from billet', 'Swappable finishes', 'Steel flexure buttons', 'PixArt PAW3395', '2.4GHz wireless', '70+ hour battery', 'Wireless charging capable'] },
              { eye: '02 / The Dock', title: 'Premium Dock', Img: SteelPlaceholder,
                pts: ['Wireless mouse charging', 'Wireless phone charging (Qi)', 'Single DPI control knob', 'Braided USB-C cable', '3″ × 5″ footprint'] },
              { eye: '03 / The Mat', title: 'Leather Mat', Img: LeatherPlaceholder,
                pts: ['Full-grain leather surface', 'Natural rubber base', '350 × 280mm', 'Debossed BHP monogram', 'Non-PU, non-bonded leather'] },
            ].map(card => (
              <Reveal key={card.title}>
                <div style={{ background: '#FAFAF8', height: '100%', display: 'flex', flexDirection: 'column' }}>
                  <card.Img height={200} />
                  <div style={{ padding: '24px 22px', flex: 1 }}>
                    <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 8 }}>{card.eye}</div>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.4rem', color: '#0F0F0F', marginBottom: 16 }}>{card.title}</div>
                    <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
                      {card.pts.map(p => (
                        <li key={p} style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.88rem', color: 'rgba(15,15,15,0.55)', lineHeight: 1.4, display: 'flex', gap: 8, alignItems: 'baseline' }}>
                          <span style={{ color: '#B07D45', fontSize: '0.6rem', flexShrink: 0 }}>—</span>{p}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── FULL SPECS ── */}
      <section style={{ background: '#0F0F0F', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 48 }}>
            <Eyebrow light>Specifications</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3vw, 2.4rem)', color: '#FAFAF8', lineHeight: 1.1 }}>
              Every fact that matters.
            </h2>
          </Reveal>
          <div className="g2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 1, background: 'rgba(194,196,199,0.08)' }}>
            {FULL_SPECS.map(([k, v], i) => (
              <Reveal key={k} delay={Math.min((i % 4) + 1, 3)}>
                <div style={{ background: '#0F0F0F', padding: '18px 24px', display: 'flex', gap: 20, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(194,196,199,0.32)', width: 150, flexShrink: 0 }}>{k}</span>
                  <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1rem', color: 'rgba(250,250,248,0.8)' }}>{v}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── SHELL ECOSYSTEM ── */}
      <section style={{ background: '#0C1F14', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 3fr', gap: 72, alignItems: 'center' }} className="g2">
          <Reveal>
            <Eyebrow light>Shell Sets</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.8vw, 2.4rem)', color: '#FAFAF8', lineHeight: 1.1, marginBottom: 16 }}>
              Change the finish.<br />Keep the mouse.
            </h2>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.5)', lineHeight: 1.75, marginBottom: 28 }}>
              Mouse shells, dock panels, DPI knobs — all the same 316L finished differently. Brushed, raw, blackened, PVD coated. Slides in without tools.
            </p>
            <BtnGhost onClick={() => setPage('shells')} dark>Browse shells →</BtnGhost>
          </Reveal>
          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 4 }}>
            {[
              'linear-gradient(135deg,#2d2c2a,#1e1d1c)',
              'linear-gradient(135deg,#222120,#181716)',
              'linear-gradient(135deg,#141312,#0f0e0d)',
            ].map((bg, i) => (
              <div key={i} style={{ aspectRatio: '1', background: bg }}></div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section style={{ background: '#F0EDE6', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 800, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 48 }}>
            <Eyebrow>Common questions</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.8vw, 2.2rem)', color: '#0F0F0F', lineHeight: 1.1 }}>
              Before you reserve.
            </h2>
          </Reveal>
          {FAQS.map((faq, i) => {
            const [hov, setHov] = useState(false);
            return (
              <div key={i} style={{ borderTop: '1px solid rgba(15,15,15,0.12)', ...(i === FAQS.length - 1 ? { borderBottom: '1px solid rgba(15,15,15,0.12)' } : {}) }}>
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  onMouseEnter={() => setHov(true)}
                  onMouseLeave={() => setHov(false)}
                  style={{
                    width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    padding: '20px 0', background: 'none', border: 'none', cursor: 'pointer', gap: 24,
                  }}>
                  <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.2rem', fontWeight: 400, color: hov ? '#B07D45' : '#0F0F0F', textAlign: 'left', transition: 'color 200ms' }}>{faq.q}</span>
                  <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '1.3rem', color: '#B07D45', transform: openFaq === i ? 'rotate(45deg)' : 'none', transition: 'transform 280ms', flexShrink: 0 }}>+</span>
                </button>
                {openFaq === i && (
                  <div style={{ paddingBottom: 24 }}>
                    <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(15,15,15,0.65)', lineHeight: 1.8, maxWidth: '58ch' }}>{faq.a}</p>
                  </div>
                )}
              </div>
            );
          })}
          <Reveal style={{ marginTop: 40 }}>
            <button onClick={() => setPage('faq')} style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', borderBottom: '1px solid rgba(176,125,69,0.4)', paddingBottom: 2 }}>
              More questions → Support
            </button>
          </Reveal>
        </div>
      </section>

      <Footer setPage={setPage} />
    </div>
  );
}

Object.assign(window, { PDPPage });