// BHP — Mouse Pads

const { useState, useContext } = React;

const PADS = [
  {
    id: 'leather-natural',
    name: 'Leather Mat',
    finish: 'Natural',
    desc: 'Full-grain leather. Not bonded. Not PU. The surface ages with use — the high points polish, the grain deepens. Natural rubber base.',
    price: 89,
    size: '350 × 280mm',
    status: 'in-stock',
    bg: 'linear-gradient(140deg, #3d2a16 0%, #4a3220 55%, #3a2814 100%)',
    tag: 'Ships with The Base',
  },
  {
    id: 'leather-dark',
    name: 'Leather Mat',
    finish: 'Dark Tobacco',
    desc: 'The same full-grain hide, tanned darker. Deep tobacco brown. Natural rubber base. Debossed BHP monogram bottom-right.',
    price: 89,
    size: '350 × 280mm',
    status: 'in-stock',
    bg: 'linear-gradient(140deg, #2a1c0e 0%, #33220f 55%, #241809 100%)',
    tag: null,
  },
  {
    id: 'leather-black',
    name: 'Leather Mat',
    finish: 'Waxed Black',
    desc: 'Full-grain leather, wax-finished in black. Develops a subtle sheen with use. The most formal of the three. Natural rubber base.',
    price: 89,
    size: '350 × 280mm',
    status: 'in-stock',
    bg: 'linear-gradient(140deg, #1a1411 0%, #221c17 55%, #161210 100%)',
    tag: null,
  },
  {
    id: 'leather-natural-xl',
    name: 'Leather Desk Mat',
    finish: 'Natural — XL',
    desc: 'The full-grain leather mat in desk size. Covers the full working area. Same hide, same rubber base, same BHP monogram. Debossed bottom-right.',
    price: 149,
    size: '900 × 400mm',
    status: 'coming-soon',
    bg: 'linear-gradient(140deg, #3d2a16 0%, #4a3220 55%, #3a2814 100%)',
    tag: null,
  },
  {
    id: 'leather-dark-xl',
    name: 'Leather Desk Mat',
    finish: 'Dark Tobacco — XL',
    desc: 'The dark tobacco hide at desk scale. Deep, warm, and permanent. Natural rubber base grips without adhesive.',
    price: 149,
    size: '900 × 400mm',
    status: 'coming-soon',
    bg: 'linear-gradient(140deg, #2a1c0e 0%, #33220f 55%, #241809 100%)',
    tag: null,
  },
  {
    id: 'leather-black-xl',
    name: 'Leather Desk Mat',
    finish: 'Waxed Black — XL',
    desc: 'Waxed black leather at full desk width. The most resolved surface in the range.',
    price: 149,
    size: '900 × 400mm',
    status: 'coming-soon',
    bg: 'linear-gradient(140deg, #1a1411 0%, #221c17 55%, #161210 100%)',
    tag: null,
  },
];

function MousePadsPage({ setPage }) {
  const { Eyebrow, LeatherPlaceholder, Reveal, Rule, BtnDark, BtnGhost } = window;
  const cart = useContext(window.CartContext);
  const [hovered, setHovered] = useState(null);
  const [added, setAdded] = useState({});
  const [activeSize, setActiveSize] = useState('standard');

  const handleAdd = (pad) => {
    cart.add({ id: pad.id, name: `${pad.name} — ${pad.finish}`, price: pad.price });
    setAdded(prev => ({ ...prev, [pad.id]: true }));
    setTimeout(() => setAdded(prev => ({ ...prev, [pad.id]: false })), 2200);
  };

  const standard = PADS.filter(p => p.size === '350 × 280mm');
  const xl = PADS.filter(p => p.size === '900 × 400mm');
  const visible = activeSize === 'standard' ? standard : xl;

  return (
    <div>

      {/* ── HERO ── */}
      <section style={{ background: '#0F0F0F', padding: '128px 60px 72px' }} className="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', 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)' }}>Mouse Pads</li>
            </ol>
          </nav>

          <div className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
            <div>
              <Eyebrow light>Mouse Pads</Eyebrow>
              <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(2.4rem, 5vw, 4.5rem)', color: '#FAFAF8', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
                Full-grain leather.
              </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: '44ch' }}>
                The leather mat ships with every BHP Steele Base. Sold separately in three hides and two sizes. Natural rubber base. Debossed BHP monogram.
              </p>
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', color: 'rgba(194,196,199,0.28)', marginTop: 14, letterSpacing: '0.04em' }}>
                Standard from $89 · Desk size from $149
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── MATERIAL CALLOUT ── */}
      <section style={{ background: '#FAFAF8', borderBottom: '1px solid rgba(15,15,15,0.08)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)' }}>
            {[
              { val: 'Full-grain',  lbl: 'Leather grade',   sub: "The hide's outermost layer. Strongest. Ages best." },
              { val: 'Natural',     lbl: 'Rubber base',      sub: 'Grips without adhesive. Safe on all desk surfaces.' },
              { val: 'Debossed',    lbl: 'BHP monogram',     sub: 'Bottom-right. No dye. No print. Just the press.' },
            ].map((s, i) => (
              <div key={s.val} style={{
                padding: '36px 44px',
                borderRight: i < 2 ? '1px solid rgba(15,15,15,0.08)' : 'none',
              }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '2rem', fontStyle: 'italic', color: '#0F0F0F', lineHeight: 1, marginBottom: 8 }}>{s.val}</div>
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 5 }}>{s.lbl}</div>
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.88rem', color: 'rgba(15,15,15,0.45)', lineHeight: 1.6 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

          {/* Size filter */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 48 }}>
            {[
              { id: 'standard', label: 'Standard — 350 × 280mm', price: '$89' },
              { id: 'xl',       label: 'Desk Mat — 900 × 400mm', price: '$149' },
            ].map(sz => {
              const active = activeSize === sz.id;
              const [hov, setHov] = useState(false);
              return (
                <button key={sz.id}
                  onClick={() => setActiveSize(sz.id)}
                  onMouseEnter={() => setHov(true)}
                  onMouseLeave={() => setHov(false)}
                  style={{
                    fontFamily: "'EB Garamond', serif",
                    fontSize: '0.72rem', letterSpacing: '0.16em', textTransform: 'uppercase',
                    padding: '8px 18px', cursor: 'pointer',
                    background: active ? '#B07D45' : (hov ? 'rgba(176,125,69,0.1)' : 'transparent'),
                    border: active ? '1px solid #B07D45' : '1px solid rgba(176,125,69,0.35)',
                    color: active ? '#FAFAF8' : '#B07D45',
                    transition: 'background 200ms, color 200ms, border-color 200ms',
                  }}>
                  {sz.label}
                </button>
              );
            })}
          </div>

          {/* Coming soon notice for XL */}
          {activeSize === 'xl' && (
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.85rem', color: 'rgba(15,15,15,0.4)', marginBottom: 32, letterSpacing: '0.04em' }}>
              Desk mats are available to reserve now — no charge until they ship.
            </div>
          )}

          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {visible.map(pad => {
              const isHov = hovered === pad.id;
              const isAdded = added[pad.id];
              const isCS = pad.status === 'coming-soon';

              return (
                <div key={pad.id}
                  onMouseEnter={() => setHovered(pad.id)}
                  onMouseLeave={() => setHovered(null)}
                  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: isCS ? 0.72 : 1,
                  }}>

                  {/* Image */}
                  <div style={{ width: '100%', aspectRatio: '4/3', background: pad.bg, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 14 }}>
                    {pad.tag && (
                      <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: "'EB Garamond', serif", fontSize: '0.6rem', letterSpacing: '0.16em', textTransform: 'uppercase', padding: '4px 9px', background: '#B07D45', color: '#FAFAF8' }}>
                        {pad.tag}
                      </div>
                    )}
                    {isCS && (
                      <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: "'EB Garamond', serif", fontSize: '0.6rem', letterSpacing: '0.16em', textTransform: 'uppercase', padding: '4px 9px', border: '1px solid #B07D45', color: '#B07D45', background: 'rgba(15,15,15,0.5)' }}>
                        Coming Soon
                      </div>
                    )}
                  </div>

                  {/* Info */}
                  <div style={{ padding: '18px 16px' }}>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.3rem', color: '#0F0F0F', marginBottom: 2 }}>{pad.name}</div>
                    <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.75rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 8 }}>{pad.finish}</div>
                    <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.88rem', color: 'rgba(15,15,15,0.5)', lineHeight: 1.65, marginBottom: 14 }}>{pad.desc}</p>
                    <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.3)', marginBottom: 14 }}>{pad.size}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1.25rem', color: '#0F0F0F' }}>${pad.price}</div>
                      {isCS ? (
                        <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={() => handleAdd(pad)} style={{ padding: '8px 12px', fontSize: '0.68rem' }}>Add to bag</BtnDark>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── MATERIAL STORY ── */}
      <section className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'stretch' }}>
        <LeatherPlaceholder style={{ height: '100%', minHeight: 520 }} />
        <div style={{ background: '#0F0F0F', padding: '88px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }} className="px-lg">
          <Reveal>
            <Eyebrow light>The hide</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 2.8vw, 2.6rem)', color: '#FAFAF8', lineHeight: 1.1 }}>
              Leather that ages.<br /><em style={{ color: '#B07D45' }}>Not leather that wears.</em>
            </h2>
          </Reveal>
          <Rule />
          <Reveal delay={1}>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.6)', lineHeight: 1.85, marginBottom: 20, maxWidth: '40ch' }}>
              Full-grain leather is the outermost layer of the hide — the densest, most durable part. Bonded and PU leathers are reconstituted scraps. They crack. Full-grain doesn&#39;t.
            </p>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.6)', lineHeight: 1.85, maxWidth: '40ch' }}>
              The surface develops a patina with use. The mouse glides across it. The rubber base holds without adhesive.
            </p>
          </Reveal>
          <Reveal delay={2}>
            <div style={{ borderTop: '1px solid rgba(194,196,199,0.12)', marginTop: 28 }}>
              {[
                ['Leather',  'Full-grain (not bonded, not PU)'],
                ['Tanning',  'Vegetable tanned'],
                ['Base',     'Natural rubber'],
                ['Marking',  'Debossed BHP — no dye or print'],
                ['Care',     'Wipe clean · Occasional leather conditioner'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '11px 0', borderBottom: '1px solid rgba(194,196,199,0.1)' }}>
                  <span style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(194,196,199,0.32)' }}>{k}</span>
                  <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1rem', color: 'rgba(250,250,248,0.75)' }}>{v}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── SHIPS WITH THE BASE ── */}
      <section style={{ background: '#0C1F14', padding: '80px 60px' }} className="px-lg">
        <div style={{ maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <Eyebrow light style={{ textAlign: 'center' }}>Included with The Base</Eyebrow>
            <p style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.6rem, 3vw, 2.4rem)', color: '#FAFAF8', lineHeight: 1.2, marginBottom: 14 }}>
              The Natural mat ships<br />with every BHP Steele Base.
            </p>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.95rem', color: 'rgba(194,196,199,0.42)', marginBottom: 36, lineHeight: 1.7 }}>
              If you want a second colourway or the desk size, they&#39;re sold separately above.
            </p>
            <BtnGhost onClick={() => setPage('pdp')} dark>The Base — $249</BtnGhost>
          </Reveal>
        </div>
      </section>

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

Object.assign(window, { MousePadsPage });