// BHP — Shell Sets Shop (3 product types: Mouse Shells, Dock Shells, DPI Knob)

const { useState, useContext } = React;

const SHELLS_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 SHELLS_TYPE_LIST = [
  {
    id: 'mouse',
    label: 'Mouse Shells',
    eyebrow: 'Mouse Shell Sets',
    headline: 'Change the finish.\nKeep the mouse.',
    desc: 'The outer shell of the BHP Steele Mouse. CNC machined 316L stainless steel. Slides out from the bottom without tools. Dishwasher safe. Available in all finishes.',
    price: 89,
    unit: 'Set of 2',
  },
  {
    id: 'dock',
    label: 'Dock Shells',
    eyebrow: 'Dock Shell Panels',
    headline: 'Match the dock\nto the mouse.',
    desc: 'The interchangeable outer panel of the BHP Premium Dock. Same 316L stainless steel as the mouse shells. Clips on without tools. Mix finishes or match exactly.',
    price: 69,
    unit: 'Single panel',
  },
  {
    id: 'knob',
    label: 'DPI Knobs',
    eyebrow: 'DPI Knob Shells',
    headline: 'Right down\nto the knob.',
    desc: 'The machined steel DPI control knob for the BHP Premium Dock. Press-fit replacement. Same material, same finish options — because the details matter.',
    price: 39,
    unit: 'Single knob',
  },
];

function ShellsPage({ setPage }) {
  const { Eyebrow, Reveal, BtnDark, BtnGhost } = window;
  const cart = useContext(window.CartContext);
  const [activeType, setActiveType] = useState('mouse');
  const [hovered, setHovered] = useState(null);
  const [added, setAdded] = useState({});

  const currentType = SHELLS_TYPE_LIST.find(t => t.id === activeType);

  const handleAdd = (finish) => {
    const key = `${activeType}-${finish.id}`;
    cart.add({
      id: `shell-${activeType}-${finish.id}`,
      name: `${finish.name} ${currentType.label.replace(/s$/, '')}`,
      price: currentType.price,
      finish: finish.name,
    });
    setAdded(prev => ({ ...prev, [key]: true }));
    setTimeout(() => setAdded(prev => ({ ...prev, [key]: false })), 2200);
  };

  return (
    <div>

      {/* ── HERO ── */}
      <section style={{ background: '#0F0F0F', padding: '128px 60px 72px' }} className="shells-hero-p px-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <nav style={{ marginBottom: 40 }}>
            <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(194,196,199,0.25)' }}>—</li>
              <li style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.78rem', color: 'rgba(194,196,199,0.5)', letterSpacing: '0.06em' }}>Shells</li>
            </ol>
          </nav>

          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
            <div>
              <Eyebrow light>Shells</Eyebrow>
              <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(2.4rem, 5vw, 4.5rem)', color: '#FAFAF8', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                Six finishes.<br /><em style={{ color: '#B07D45' }}>Available.</em>
              </h1>
            </div>
            <div style={{ paddingBottom: 8 }}>
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1.05rem', color: 'rgba(194,196,199,0.55)', lineHeight: 1.8, maxWidth: '42ch' }}>
                Every shell is 316L stainless steel — the material doesn&#39;t change. Mouse shells, dock panels, and DPI knobs. Mix finishes or run them all matching.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── PRODUCT TYPE TABS ── */}
      <div style={{ background: '#0F0F0F', borderBottom: '1px solid rgba(194,196,199,0.1)', position: 'sticky', top: 64, zIndex: 100 }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '14px 60px', display: 'flex', gap: 8 }} className="px-lg">
          {SHELLS_TYPE_LIST.map(type => {
            const active = activeType === type.id;
            const [hov, setHov] = useState(false);
            return (
              <button key={type.id}
                onClick={() => setActiveType(type.id)}
                onMouseEnter={() => setHov(true)}
                onMouseLeave={() => setHov(false)}
                style={{
                  fontFamily: "'EB Garamond', serif",
                  fontSize: '0.72rem', letterSpacing: '0.16em', textTransform: 'uppercase',
                  padding: '8px 18px',
                  background: active ? '#B07D45' : (hov ? 'rgba(176,125,69,0.12)' : 'transparent'),
                  border: active ? '1px solid #B07D45' : '1px solid rgba(176,125,69,0.35)',
                  color: active ? '#FAFAF8' : '#B07D45',
                  cursor: 'pointer',
                  transition: 'background 200ms, color 200ms, border-color 200ms',
                }}>
                {type.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* ── PRODUCT SECTION ── */}
      <section style={{ background: '#FAFAF8', padding: '64px 60px 96px' }} className="px-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>

          {/* Section header */}
          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 48, paddingBottom: 40, borderBottom: '1px solid rgba(15,15,15,0.08)' }}>
            <div>
              <Eyebrow>{currentType.eyebrow}</Eyebrow>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 2.8vw, 2.4rem)', color: '#0F0F0F', lineHeight: 1.1, whiteSpace: 'pre-line' }}>
                {currentType.headline}
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(15,15,15,0.55)', lineHeight: 1.8, marginBottom: 12 }}>
                {currentType.desc}
              </p>
              <div style={{ display: 'flex', gap: 24, alignItems: 'baseline' }}>
                <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1.4rem', color: '#0F0F0F' }}>${currentType.price}</span>
                <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.4)' }}>{currentType.unit}</span>
              </div>
            </div>
          </div>

          {/* How it works (mouse shells only) */}
          {activeType === 'mouse' && (
            <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'rgba(15,15,15,0.07)', marginBottom: 48 }}>
              {[
                { n: '01', t: 'Slide out', d: 'Turn the mouse over. The shell slides out from the bottom — no tools, no screws.' },
                { n: '02', t: 'Wash it',   d: 'Stainless steel. Dishwasher safe. Electronics never get wet.' },
                { n: '03', t: 'Drop in',   d: 'Align the new shell. Press until it clicks. Same mouse, different steel.' },
              ].map(step => (
                <div key={step.n} style={{ background: '#FAFAF8', padding: '28px 24px' }}>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.3rem', fontStyle: 'italic', color: 'rgba(176,125,69,0.35)', marginBottom: 10 }}>{step.n}</div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.1rem', color: '#0F0F0F', marginBottom: 6 }}>{step.t}</div>
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.9rem', color: 'rgba(15,15,15,0.5)', lineHeight: 1.7 }}>{step.d}</div>
                </div>
              ))}
            </div>
          )}

          {/* In Stock */}
          <div style={{ marginBottom: 48 }}>
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 24 }}>Available now</div>
            <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
              {SHELLS_FINISHES.filter(f => f.status === 'in-stock').map(finish => {
                const key = `${activeType}-${finish.id}`;
                const isAdded = added[key];
                const isHov = hovered === key;
                return (
                  <ShellCard
                    key={key}
                    finish={finish}
                    type={currentType}
                    isHov={isHov}
                    isAdded={isAdded}
                    onHover={() => setHovered(key)}
                    onLeave={() => setHovered(null)}
                    onAdd={() => handleAdd(finish)}
                    onView={() => setPage('shell-pdp', { type: activeType, finish: finish.id })}
                  />
                );
              })}
            </div>
          </div>

          {/* Coming Soon */}
          <div>
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.65rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.28)', marginBottom: 24 }}>Coming soon</div>
            <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
              {SHELLS_FINISHES.filter(f => f.status === 'coming-soon').map(finish => {
                const key = `${activeType}-${finish.id}`;
                const isHov = hovered === key;
                return (
                  <ShellCard
                    key={key}
                    finish={finish}
                    type={currentType}
                    isHov={isHov}
                    comingSoon
                    onHover={() => setHovered(key)}
                    onLeave={() => setHovered(null)}
                    onView={() => setPage('shell-pdp', { type: activeType, finish: finish.id })}
                  />
                );
              })}
            </div>
          </div>

          <div style={{ marginTop: 44, paddingTop: 24, borderTop: '1px solid rgba(15,15,15,0.07)' }}>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.85rem', color: 'rgba(15,15,15,0.36)', lineHeight: 1.7, maxWidth: '60ch' }}>
              Coming Soon finishes are available to reserve at no charge. You&#39;ll be notified directly when they&#39;re ready to ship.
            </p>
          </div>
        </div>
      </section>

      {/* ── NEEDS A MOUSE ── */}
      <section style={{ background: '#0C1F14', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <div style={{ fontFamily: "'Great Vibes', cursive", fontSize: '1.8rem', color: '#B07D45', marginBottom: 12 }}>BHP</div>
            <p style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)', color: '#FAFAF8', lineHeight: 1.2, marginBottom: 14 }}>
              The shells need a base.
            </p>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.95rem', color: 'rgba(194,196,199,0.45)', marginBottom: 36, lineHeight: 1.7 }}>
              The BHP Steele Base comes with a Brushed Steel shell included. $249.
            </p>
            <BtnGhost onClick={() => setPage('pdp')} dark>The Base — $249</BtnGhost>
          </Reveal>
        </div>
      </section>

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

function ShellCard({ finish, type, isHov, isAdded, comingSoon, onHover, onLeave, onAdd, onView }) {
  const { BtnDark, BtnGhost } = window;

  return (
    <div
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      style={{
        background: '#FAFAF8',
        border: isHov ? '1px solid #B07D45' : '1px solid rgba(15,15,15,0.09)',
        transition: 'border-color 260ms cubic-bezier(0.4,0,0.2,1)',
        opacity: comingSoon ? 0.7 : 1,
      }}>
      {/* Image — clicking goes to shell PDP */}
      <div
        onClick={onView}
        style={{ aspectRatio: '1', background: finish.bg, cursor: 'pointer', position: 'relative', overflow: 'hidden' }}>
        {comingSoon && (
          <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: "'EB Garamond', serif", fontSize: '0.6rem', letterSpacing: '0.2em', textTransform: 'uppercase', padding: '4px 8px', border: '1px solid #B07D45', color: '#B07D45', background: 'rgba(15,15,15,0.5)' }}>
            Coming Soon
          </div>
        )}
        {isHov && !comingSoon && (
          <div style={{ position: 'absolute', bottom: 12, left: 12, fontFamily: "'EB Garamond', serif", fontSize: '0.62rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(194,196,199,0.5)' }}>
            View details →
          </div>
        )}
      </div>

      {/* Info */}
      <div style={{ padding: '16px 14px' }}>
        {!comingSoon && (
          <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.58rem', letterSpacing: '0.18em', textTransform: 'uppercase', padding: '2px 6px', border: '1px solid rgba(15,15,15,0.18)', color: 'rgba(15,15,15,0.5)', display: 'inline-block', marginBottom: 9 }}>In Stock</div>
        )}
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.25rem', color: '#0F0F0F', marginBottom: 2, lineHeight: 1.1 }}>{finish.name}</div>
        <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.75rem', color: 'rgba(15,15,15,0.4)', letterSpacing: '0.04em', marginBottom: 12 }}>{finish.detail} · {type.unit}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1.2rem', color: '#0F0F0F' }}>${type.price}</div>
          {comingSoon ? (
            <BtnGhost style={{ padding: '7px 12px', fontSize: '0.65rem' }}>Notify me</BtnGhost>
          ) : isAdded ? (
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: '#4a9c65', padding: '8px 12px', border: '1px solid #4a9c65' }}>Added ✓</div>
          ) : (
            <BtnDark onClick={onAdd} style={{ padding: '8px 12px', fontSize: '0.68rem' }}>Add to bag</BtnDark>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ShellsPage });