// BHP — Shell PDP (individual shell product detail)

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

const SPDP_FINISHES = [
  { id: 'brushed',    name: 'Brushed Steel',  detail: 'Satin silver finish',  status: 'in-stock',    bg: 'linear-gradient(140deg,#2d2c2a 0%,#1e1d1c 100%)' },
  { id: 'raw',        name: 'Raw Steel',       detail: 'Raw mill finish',      status: 'in-stock',    bg: 'linear-gradient(140deg,#222120 0%,#181716 100%)' },
  { id: 'blackened',  name: 'Blackened Steel', detail: 'Darkened patina',      status: 'in-stock',    bg: 'linear-gradient(140deg,#141312 0%,#0f0e0d 100%)' },
  { id: 'pvd-gold',   name: 'PVD Gold',        detail: 'PVD coated',           status: 'coming-soon', bg: 'linear-gradient(140deg,#4a3c1f 0%,#3a2e18 100%)' },
  { id: 'pvd-copper', name: 'PVD Copper',      detail: 'PVD coated',           status: 'coming-soon', bg: 'linear-gradient(140deg,#3d2418 0%,#2e1c12 100%)' },
  { id: 'mirror',     name: 'Mirror Polish',   detail: 'High-mirror finish',   status: 'coming-soon', bg: 'linear-gradient(145deg,#2e2d2b 0%,#3a3836 50%,#242321 100%)' },
];

const SPDP_TYPES = {
  mouse: {
    id: 'mouse',
    name: 'Mouse Shell',
    namePlural: 'Mouse Shells',
    eyebrow: 'Mouse Shell Set',
    desc: 'The outer shell of the BHP Steele Mouse. CNC machined 316L stainless steel. Slides out from the bottom without tools. Dishwasher safe.',
    longDesc: 'Most mouse shells are fixed. Ours slide out from the bottom of the mouse with a light push — no tools, no screws, no adhesive. The steel shell is fully waterproof and dishwasher safe. The electronics never get wet. When you want a change, it takes ten seconds.',
    price: 89,
    unit: 'Set of 2',
    compat: 'Fits all BHP Steele Mouse models',
    specs: [
      ['Material',      '316L Stainless Steel'],
      ['Construction',  'CNC machined from billet'],
      ['Contents',      'Set of 2 (matched pair)'],
      ['Compatibility', 'All BHP Steele Mouse models'],
      ['Installation',  'No tools — slide out, click in'],
      ['Care',          'Dishwasher safe'],
    ],
    steps: [
      { n: '01', t: 'Slide out', d: 'Turn the mouse over. The shell slides out from the bottom with a light downward push.' },
      { n: '02', t: 'Wash it',   d: 'Stainless steel. Dishwasher safe. The electronics sit inside the mouse body and never touch water.' },
      { n: '03', t: 'Drop in',   d: 'Align the new shell. Press until it clicks. No tools. Same mouse, different steel.' },
    ],
  },
  dock: {
    id: 'dock',
    name: 'Dock Shell',
    namePlural: 'Dock Shells',
    eyebrow: 'Dock Shell Panel',
    desc: 'The interchangeable outer panel of the BHP Premium Dock. Same 316L stainless steel. Clips on without tools. Match your mouse finish or mix intentionally.',
    longDesc: 'The dock panel is held in place by a simple press-fit clip system. Pull up from the rear edge to release it. Press the new panel down until it seats flush. The same six finishes as the mouse shells — so your desk can be a matched set or deliberately contrasted.',
    price: 69,
    unit: 'Single panel',
    compat: 'Fits BHP Premium Dock (all versions)',
    specs: [
      ['Material',      '316L Stainless Steel'],
      ['Construction',  'CNC machined from billet'],
      ['Contents',      'Single dock panel'],
      ['Compatibility', 'BHP Premium Dock'],
      ['Installation',  'Press-fit clip — no tools'],
      ['Care',          'Wipe clean'],
    ],
    steps: [
      { n: '01', t: 'Lift off', d: 'Pull up from the rear edge of the dock panel. It releases from the press-fit clip.' },
      { n: '02', t: 'Set down', d: 'Place the new panel on the dock. Align the front edge first.' },
      { n: '03', t: 'Press',    d: 'Press firmly along the panel until it clips flush. No tools. Done.' },
    ],
  },
  knob: {
    id: 'knob',
    name: 'DPI Knob',
    namePlural: 'DPI Knobs',
    eyebrow: 'DPI Knob',
    desc: 'The machined steel DPI control knob for the BHP Premium Dock. Same 316L steel, same finish options. Pull off, press on.',
    longDesc: "The knob sits on a splined shaft. Pull it straight off — it takes about 3kg of force, which is enough that it won't come off in use. Press the new one on. The knurl pattern is identical across all finishes, so the feel doesn't change. Only the look does.",
    price: 39,
    unit: 'Single knob',
    compat: 'Fits BHP Premium Dock (all versions)',
    specs: [
      ['Material',      '316L Stainless Steel'],
      ['Construction',  'CNC machined from billet'],
      ['Contents',      'Single knob'],
      ['Compatibility', 'BHP Premium Dock'],
      ['Installation',  'Pull off, press on — splined fit'],
      ['Knurl',         'Straight knurl, 0.5mm pitch'],
    ],
    steps: [
      { n: '01', t: 'Pull off', d: 'Grip the knob and pull straight up with firm, even force. It releases from the splined shaft.' },
      { n: '02', t: 'Press on', d: 'Align the new knob over the shaft. Press straight down until it seats.' },
      { n: '03', t: 'Done',     d: 'Turn to confirm it feels solid. No tools. No screws. Takes under 10 seconds.' },
    ],
  },
};

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

  const [activeType, setActiveType] = useState(params.type || 'mouse');
  const [activeFinish, setActiveFinish] = useState(params.finish || 'brushed');
  const [added, setAdded] = useState(false);
  const [stickyVis, setStickyVis] = useState(false);
  const buyBoxRef = useRef(null);

  const type = SPDP_TYPES[activeType] || SPDP_TYPES.mouse;
  const finish = SPDP_FINISHES.find(f => f.id === activeFinish) || SPDP_FINISHES[0];
  const isAvailable = finish.status === 'in-stock';

  useEffect(() => {
    if (params.type) setActiveType(params.type);
    if (params.finish) setActiveFinish(params.finish);
  }, [params.type, params.finish]);

  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 handleAdd = () => {
    cart.add({
      id: `shell-${activeType}-${activeFinish}`,
      name: `${finish.name} ${type.name}`,
      price: type.price,
      finish: finish.name,
    });
    setAdded(true);
    setTimeout(() => setAdded(false), 2400);
  };

  const productTitle = `${finish.name} ${type.name}`;

  return (
    <div>

      {/* ── STICKY 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: 20, alignItems: 'baseline', overflow: 'hidden' }}>
            <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1rem', color: '#FAFAF8', whiteSpace: 'nowrap' }}>{productTitle}</span>
            <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B07D45', whiteSpace: 'nowrap' }}>{type.unit}</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' }}>${type.price}</span>
            {isAvailable
              ? <BtnDark onClick={handleAdd} style={{ padding: '9px 20px', fontSize: '0.72rem' }}>{added ? 'Added ✓' : 'Add to bag'}</BtnDark>
              : <BtnGhost style={{ padding: '9px 20px', fontSize: '0.72rem', borderColor: 'rgba(250,250,248,0.2)', color: '#FAFAF8' }}>Notify me</BtnGhost>
            }
          </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', flexWrap: 'wrap' }}>
            <li><button onClick={() => setPage('home')} style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>BHP</button></li>
            <li style={{ color: 'rgba(15,15,15,0.25)', fontFamily: "'EB Garamond', serif", fontSize: '0.78rem' }}>—</li>
            <li><button onClick={() => setPage('shells')} style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>Shells</button></li>
            <li style={{ color: 'rgba(15,15,15,0.25)', fontFamily: "'EB Garamond', serif", fontSize: '0.78rem' }}>—</li>
            <li style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: 'rgba(15,15,15,0.5)' }}>{productTitle}</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' }}>

          {/* Large image */}
          <div>
            <div style={{ width: '100%', aspectRatio: '4/3', background: finish.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(194,196,199,0.12)' }}>Product Photography</div>
            </div>
            {/* Finish thumbnail strip */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 6, marginTop: 8 }}>
              {SPDP_FINISHES.map(f => (
                <button key={f.id} onClick={() => setActiveFinish(f.id)}
                  style={{
                    aspectRatio: '1', background: f.bg, border: activeFinish === f.id ? '2px solid #B07D45' : '2px solid transparent',
                    cursor: 'pointer', padding: 0, position: 'relative', opacity: f.status === 'coming-soon' ? 0.5 : 1,
                    transition: 'border-color 200ms, opacity 200ms',
                  }}
                  title={f.name}
                />
              ))}
            </div>
          </div>

          {/* Buy box */}
          <div style={{ position: 'sticky', top: 80 }}>
            {/* Product type switcher */}
            <div style={{ display: 'flex', gap: 0, marginBottom: 24, borderBottom: '1px solid rgba(15,15,15,0.1)' }}>
              {Object.values(SPDP_TYPES).map(t => (
                <button key={t.id} onClick={() => setActiveType(t.id)}
                  style={{
                    fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', letterSpacing: '0.14em',
                    textTransform: 'uppercase', padding: '10px 0', marginRight: 24,
                    background: 'none', border: 'none', cursor: 'pointer',
                    color: activeType === t.id ? '#0F0F0F' : 'rgba(15,15,15,0.35)',
                    borderBottom: activeType === t.id ? '2px solid #0F0F0F' : '2px solid transparent',
                    marginBottom: -1,
                    transition: 'color 180ms, border-color 180ms',
                  }}>
                  {t.name}
                </button>
              ))}
            </div>

            <Eyebrow>{type.eyebrow}</Eyebrow>
            <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.8vw, 2.4rem)', color: '#0F0F0F', lineHeight: 1.1, marginBottom: 10 }}>
              {finish.name}<br />{type.name}
            </h1>

            {!isAvailable && (
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 10 }}>Coming Soon</div>
            )}

            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '2rem', color: '#0F0F0F', marginBottom: 18 }}>${type.price}</div>

            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.95rem', color: 'rgba(15,15,15,0.6)', lineHeight: 1.75, marginBottom: 24, maxWidth: '38ch' }}>
              {type.desc}
            </p>

            {/* Finish selector */}
            <div style={{ marginBottom: 24 }}>
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.4)', marginBottom: 10 }}>
                Finish — <span style={{ color: '#B07D45' }}>{finish.name}</span>
                {finish.status === 'coming-soon' && <span style={{ color: '#B07D45', marginLeft: 8 }}>· Coming soon</span>}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {SPDP_FINISHES.map(f => (
                  <button key={f.id} onClick={() => setActiveFinish(f.id)}
                    title={f.name}
                    style={{
                      width: 36, height: 36, background: f.bg, padding: 0, cursor: 'pointer',
                      border: activeFinish === f.id ? '2px solid #0F0F0F' : '2px solid transparent',
                      outline: activeFinish === f.id ? '1px solid rgba(15,15,15,0.2)' : 'none',
                      outlineOffset: 2,
                      opacity: f.status === 'coming-soon' ? 0.55 : 1,
                      transition: 'border-color 180ms, opacity 180ms',
                    }}
                  />
                ))}
              </div>
            </div>

            {/* Compatibility + unit */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(15,15,15,0.07)', marginBottom: 20 }}>
              {[['Fits', type.compat], ['Contents', type.unit]].map(([k, v]) => (
                <div key={k} style={{ background: '#FAFAF8', padding: '10px 12px' }}>
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.62rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.35)', marginBottom: 3 }}>{k}</div>
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', color: '#0F0F0F', lineHeight: 1.3 }}>{v}</div>
                </div>
              ))}
            </div>

            {/* CTA */}
            {isAvailable ? (
              added ? (
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.88rem', color: '#4a9c65', border: '1px solid #4a9c65', padding: '14px 20px', textAlign: 'center', letterSpacing: '0.06em', marginBottom: 10 }}>
                  Added to your system.
                </div>
              ) : (
                <BtnDark onClick={handleAdd} style={{ width: '100%', padding: '15px', marginBottom: 10, fontSize: '0.85rem' }}>
                  Add to bag — ${type.price}
                </BtnDark>
              )
            ) : (
              <BtnGhost style={{ width: '100%', padding: '14px', marginBottom: 10, fontSize: '0.85rem' }}>
                Notify me when available
              </BtnGhost>
            )}

            <button onClick={() => setPage('shells')}
              style={{ width: '100%', fontFamily: "'EB Garamond', serif", fontSize: '0.75rem', letterSpacing: '0.1em', color: 'rgba(15,15,15,0.35)', background: 'none', border: 'none', cursor: 'pointer', padding: '8px', textAlign: 'center' }}>
              ← Back to all shell sets
            </button>
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section style={{ background: '#0F0F0F', padding: '80px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 48 }}>
            <Eyebrow light>How it works</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.8vw, 2.4rem)', color: '#FAFAF8', lineHeight: 1.1 }}>
              Ten seconds.<br />No tools.
            </h2>
          </Reveal>
          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2 }}>
            {type.steps.map((step, i) => (
              <Reveal key={step.n} delay={i + 1}>
                <div style={{ background: 'rgba(194,196,199,0.05)', border: '1px solid rgba(194,196,199,0.08)', padding: '32px 28px' }}>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.5rem', fontStyle: 'italic', color: 'rgba(176,125,69,0.4)', marginBottom: 14 }}>{step.n}</div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.25rem', color: '#FAFAF8', marginBottom: 10 }}>{step.t}</div>
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.92rem', color: 'rgba(194,196,199,0.55)', lineHeight: 1.75 }}>{step.d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── MATERIAL STORY ── */}
      <section style={{ background: '#FAFAF8', padding: '80px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="g2">
          <Reveal>
            <Eyebrow>316L Stainless</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.6vw, 2.2rem)', color: '#0F0F0F', lineHeight: 1.1, marginBottom: 20 }}>
              The material<br />doesn't change.
            </h2>
            <Rule />
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(15,15,15,0.6)', lineHeight: 1.85, maxWidth: '40ch' }}>
              {type.longDesc}
            </p>
          </Reveal>
          {/* Specs */}
          <div style={{ borderTop: '1px solid rgba(15,15,15,0.1)' }}>
            {type.specs.map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '13px 0', borderBottom: '1px solid rgba(15,15,15,0.08)' }}>
                <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.35)' }}>{k}</span>
                <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1rem', color: '#0F0F0F' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── OTHER SHELL TYPES ── */}
      <section style={{ background: '#F0EDE6', padding: '80px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 40 }}>
            <Eyebrow>Complete the set</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.5rem, 2.4vw, 2rem)', color: '#0F0F0F', lineHeight: 1.1 }}>
              Match every surface.
            </h2>
          </Reveal>
          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2, background: 'rgba(15,15,15,0.07)' }}>
            {Object.values(SPDP_TYPES).map(t => {
              const [hov, setHov] = useState(false);
              const isCurrent = t.id === activeType;
              return (
                <button key={t.id}
                  onClick={() => { setActiveType(t.id); document.getElementById('page-scroll').scrollTop = 0; }}
                  onMouseEnter={() => setHov(true)}
                  onMouseLeave={() => setHov(false)}
                  style={{
                    background: isCurrent ? 'rgba(176,125,69,0.07)' : (hov ? 'rgba(15,15,15,0.02)' : '#F0EDE6'),
                    border: 'none', cursor: isCurrent ? 'default' : 'pointer', textAlign: 'left', padding: '28px 24px',
                    borderBottom: isCurrent ? '2px solid #B07D45' : '2px solid transparent',
                    transition: 'background 200ms, border-color 200ms',
                  }}>
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: isCurrent ? '#B07D45' : 'rgba(15,15,15,0.35)', marginBottom: 8 }}>
                    {isCurrent ? 'Current' : `$${t.price}`}
                  </div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.3rem', color: '#0F0F0F', marginBottom: 6 }}>{t.namePlural}</div>
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', color: 'rgba(15,15,15,0.5)', lineHeight: 1.6 }}>{t.desc.slice(0, 70)}…</div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── NEEDS A MOUSE ── */}
      <section style={{ background: '#0C1F14', padding: '80px 60px' }} className="px-lg">
        <div style={{ maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <p style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', color: '#FAFAF8', lineHeight: 1.2, marginBottom: 12 }}>
              The shells need a base.
            </p>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.9rem', color: 'rgba(194,196,199,0.4)', marginBottom: 32, lineHeight: 1.7 }}>
              The complete BHP Steele Base includes the mouse, dock, leather mat, and a Brushed Steel shell. $249.
            </p>
            <BtnGhost onClick={() => setPage('pdp')} dark>The Base — $249</BtnGhost>
          </Reveal>
        </div>
      </section>

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

Object.assign(window, { ShellPDPPage });