// BHP — Shared components
// Exports: CartContext, CartProvider, CartDrawer, Nav, Footer, Grain,
//          Eyebrow, SteelPlaceholder, LeatherPlaceholder, Reveal, Rule

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

// ─── Cart ─────────────────────────────────────────────────────────────────────

const CartContext = createContext(null);

function CartProvider({ children }) {
  const [items, setItems] = useState(() => {
    try { return JSON.parse(localStorage.getItem('bhp_cart') || '[]'); }
    catch { return []; }
  });
  const [open, setOpen] = useState(false);

  useEffect(() => {
    localStorage.setItem('bhp_cart', JSON.stringify(items));
  }, [items]);

  const add = (item) => {
    setItems(prev => {
      const key = item.id + '|' + (item.finish || '');
      const ex = prev.find(i => i.id + '|' + (i.finish || '') === key);
      if (ex) return prev.map(i => i.id + '|' + (i.finish || '') === key ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { ...item, qty: 1 }];
    });
    setOpen(true);
  };

  const remove = (id, finish = '') => {
    setItems(prev => prev.filter(i => !(i.id === id && (i.finish || '') === finish)));
  };

  const count = items.reduce((s, i) => s + i.qty, 0);
  const total = items.reduce((s, i) => s + i.price * i.qty, 0);

  return (
    <CartContext.Provider value={{ items, add, remove, count, total, open, setOpen }}>
      {children}
    </CartContext.Provider>
  );
}

// ─── Cart Drawer ──────────────────────────────────────────────────────────────

function CartDrawer() {
  const { items, remove, count, total, open, setOpen } = useContext(CartContext);

  const imgBg = (finish) => {
    const map = {
      'Brushed Steel': 'linear-gradient(135deg,#2d2c2a,#1e1d1c)',
      'Raw Steel': 'linear-gradient(135deg,#222120,#181716)',
      'Blackened Steel': 'linear-gradient(135deg,#141312,#0f0e0d)',
      'PVD Gold': 'linear-gradient(135deg,#4a3c1f,#3a2e18)',
      'PVD Copper': 'linear-gradient(135deg,#3d2418,#2e1c12)',
      'Mirror Polish': 'linear-gradient(145deg,#2e2d2b,#3a3836)',
    };
    return map[finish] || 'linear-gradient(135deg,#1a1918,#242220)';
  };

  return (
    <>
      {open && (
        <div onClick={() => setOpen(false)} style={{
          position: 'fixed', inset: 0, background: 'rgba(15,15,15,0.45)',
          zIndex: 300, backdropFilter: 'blur(3px)',
        }} />
      )}
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0, width: 400,
        background: '#FAFAF8', zIndex: 400,
        boxShadow: open ? '-4px 0 48px rgba(0,0,0,0.18)' : 'none',
        transform: open ? 'translateX(0)' : 'translateX(100%)',
        transition: 'transform 380ms cubic-bezier(0.4,0,0.2,1)',
        display: 'flex', flexDirection: 'column',
        borderLeft: '1px solid rgba(15,15,15,0.08)',
      }}>
        {/* Header */}
        <div style={{ padding: '22px 28px', borderBottom: '1px solid rgba(15,15,15,0.1)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.4rem', fontWeight: 400, color: '#0F0F0F' }}>
              Your system
            </div>
            {count > 0 && (
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: '#B07D45', marginTop: 2 }}>
                {count} {count === 1 ? 'item' : 'items'}
              </div>
            )}
          </div>
          <button onClick={() => setOpen(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(15,15,15,0.4)', fontSize: '1rem', padding: 4, lineHeight: 1 }}>✕</button>
        </div>

        {/* Items */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 28px' }}>
          {items.length === 0 ? (
            <div style={{ textAlign: 'center', paddingTop: 72 }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.2rem', fontStyle: 'italic', color: 'rgba(15,15,15,0.3)', marginBottom: 8 }}>Nothing here yet.</div>
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.9rem', color: 'rgba(15,15,15,0.35)', lineHeight: 1.6 }}>Add the base to get started.</div>
            </div>
          ) : items.map(item => (
            <div key={item.id + (item.finish || '')} style={{ display: 'flex', gap: 14, padding: '18px 0', borderBottom: '1px solid rgba(15,15,15,0.07)' }}>
              <div style={{ width: 68, height: 68, background: imgBg(item.finish), flexShrink: 0 }}></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.05rem', fontWeight: 400, color: '#0F0F0F', marginBottom: 3 }}>{item.name}</div>
                {item.finish && (
                  <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 4 }}>{item.finish}</div>
                )}
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', color: 'rgba(15,15,15,0.45)' }}>Qty {item.qty}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', flexShrink: 0 }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.1rem', fontStyle: 'italic', color: '#0F0F0F' }}>${item.price * item.qty}</div>
                <button onClick={() => remove(item.id, item.finish || '')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.3)', padding: 0 }}>Remove</button>
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        {items.length > 0 && (
          <div style={{ padding: '20px 28px', borderTop: '1px solid rgba(15,15,15,0.1)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(15,15,15,0.4)' }}>Total</div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '1.5rem', fontStyle: 'italic', color: '#0F0F0F' }}>${total}</div>
            </div>
            <BtnDark style={{ width: '100%', padding: '15px', marginBottom: 10 }}>
              Proceed to checkout
            </BtnDark>
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.06em', color: 'rgba(15,15,15,0.3)', textAlign: 'center' }}>
              Pre-order. No charge until shipment.
            </div>
          </div>
        )}
      </div>
    </>
  );
}

// ─── Nav ─────────────────────────────────────────────────────────────────────

function Nav({ page, setPage }) {
  const { count, setOpen } = useContext(CartContext);
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const isHome = page === 'home';

  useEffect(() => {
    const el = document.getElementById('page-scroll');
    if (!el) return;
    const handler = () => setScrolled(el.scrollTop > 72);
    el.addEventListener('scroll', handler, { passive: true });
    return () => el.removeEventListener('scroll', handler);
  }, [page]);

  useEffect(() => { setScrolled(false); }, [page]);

  const solid = !isHome || scrolled;

  const sysItems = [
    { label: 'Steele Mouse',  sub: '316L stainless · PAW3395 · swappable shells' },
    { label: 'Premium Dock',  sub: 'Wireless charging · DPI knob · braided USB' },
    { label: 'Leather Mat',   sub: 'Full-grain leather · 350 × 280mm · rubber base' },
  ];

  const linkStyle = {
    fontFamily: "'EB Garamond', serif",
    fontSize: '0.84rem', letterSpacing: '0.14em', textTransform: 'uppercase',
    background: 'none', border: 'none', cursor: 'pointer', padding: '6px 0',
    color: solid ? '#8B5E2A' : '#B07D45',
    transition: 'color 200ms',
  };

  const hoverLink = (e) => { e.currentTarget.style.color = '#C2C4C7'; };
  const leaveLink = (e) => { e.currentTarget.style.color = solid ? '#8B5E2A' : '#B07D45'; };

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 64, padding: '0 60px',
        background: solid ? 'rgba(250,250,248,0.97)' : 'transparent',
        backdropFilter: solid ? 'blur(12px)' : 'none',
        borderBottom: solid ? '1px solid #C2C4C7' : '1px solid transparent',
        transition: 'background 450ms cubic-bezier(0.4,0,0.2,1), border-color 450ms cubic-bezier(0.4,0,0.2,1)',
      }}>
        {/* Logo */}
        <span onClick={() => setPage('home')} style={{
          fontFamily: "'Great Vibes', cursive", fontSize: '2.2rem', lineHeight: 1,
          color: solid ? '#0F0F0F' : '#FAFAF8', cursor: 'pointer',
          transition: 'color 450ms cubic-bezier(0.4,0,0.2,1)',
        }}>BHP</span>

        {/* Desktop links */}
        <ul className="nav-links-d" style={{ display: 'flex', gap: 36, listStyle: 'none', margin: 0, padding: 0, alignItems: 'center' }}>
          <li>
            <button
              style={{ ...linkStyle, borderBottom: page === 'pdp' ? `1px solid ${solid ? '#8B5E2A' : '#B07D45'}` : '1px solid transparent' }}
              onClick={() => setPage('pdp')} onMouseEnter={hoverLink} onMouseLeave={leaveLink}>
              The Base
            </button>
          </li>

          <li>
            <button onClick={() => setPage('shells')} onMouseEnter={hoverLink} onMouseLeave={leaveLink}
              style={{ ...linkStyle, borderBottom: page === 'shells' || page === 'shell-pdp' ? `1px solid ${solid ? '#8B5E2A' : '#B07D45'}` : '1px solid transparent' }}>
              Shells
            </button>
          </li>

          <li>
            <button onClick={() => setPage('pads')} onMouseEnter={hoverLink} onMouseLeave={leaveLink}
              style={{ ...linkStyle, borderBottom: page === 'pads' ? `1px solid ${solid ? '#8B5E2A' : '#B07D45'}` : '1px solid transparent' }}>
              Mouse Pads
            </button>
          </li>

          <li>
            <button onClick={() => setPage('faq')} onMouseEnter={hoverLink} onMouseLeave={leaveLink}
              style={{ ...linkStyle, borderBottom: page === 'faq' ? `1px solid ${solid ? '#8B5E2A' : '#B07D45'}` : '1px solid transparent' }}>
              Support
            </button>
          </li>
        </ul>

        {/* Right: Bag + Reserve */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <button className="nav-bag-d" onClick={() => setOpen(true)} onMouseEnter={hoverLink} onMouseLeave={leaveLink} style={{
            ...linkStyle, position: 'relative', padding: '6px 8px',
          }}>
            Bag
            {count > 0 && (
              <span style={{
                position: 'absolute', top: 0, right: 0,
                background: '#B07D45', color: '#FAFAF8',
                width: 15, height: 15, borderRadius: '50%',
                fontFamily: "'EB Garamond', serif", fontSize: '0.6rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{count}</span>
            )}
          </button>

          <button className="nav-cta-d"
            style={{
              fontFamily: "'EB Garamond', serif", fontSize: '0.78rem',
              letterSpacing: '0.14em', textTransform: 'uppercase',
              padding: '10px 22px', cursor: 'pointer',
              border: solid ? 'none' : '1px solid rgba(250,250,248,0.3)',
              background: solid ? '#0F0F0F' : 'transparent',
              color: '#FAFAF8',
              transition: 'background 250ms',
            }}
            onClick={() => setPage('pdp')}
            onMouseEnter={e => e.currentTarget.style.background = '#B07D45'}
            onMouseLeave={e => e.currentTarget.style.background = solid ? '#0F0F0F' : 'transparent'}>
            Reserve
          </button>

          {/* Hamburger */}
          <button className="nav-hbg" onClick={() => setMobileOpen(true)}
            style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', flexDirection: 'column', gap: 5, padding: 4 }}>
            <span style={{ display: 'block', height: 1, width: 24, background: solid ? '#0F0F0F' : '#FAFAF8' }}></span>
            <span style={{ display: 'block', height: 1, width: 16, background: solid ? '#0F0F0F' : '#FAFAF8' }}></span>
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 500, background: '#0F0F0F', display: 'flex', flexDirection: 'column', padding: '24px 32px 48px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 32 }}>
            <span style={{ fontFamily: "'Great Vibes', cursive", fontSize: '2rem', color: '#FAFAF8' }}>BHP</span>
            <button onClick={() => setMobileOpen(false)} style={{ background: 'none', border: 'none', color: 'rgba(194,196,199,0.6)', fontSize: '1.1rem', cursor: 'pointer' }}>✕</button>
          </div>
          {[['The Base', 'pdp'], ['Shells', 'shells'], ['Mouse Pads', 'pads'], ['Support', 'faq']].map(([lbl, pg]) => (
            <button key={pg} onClick={() => { setPage(pg); setMobileOpen(false); }}
              style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '2.6rem', fontWeight: 300, color: '#FAFAF8', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: '14px 0', borderBottom: '1px solid rgba(194,196,199,0.1)', letterSpacing: '-0.01em' }}>
              {lbl}
            </button>
          ))}
          <button onClick={() => { setPage('pdp'); setMobileOpen(false); }}
            style={{ marginTop: 36, fontFamily: "'EB Garamond', serif", fontSize: '0.85rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FAFAF8', background: '#B07D45', border: 'none', cursor: 'pointer', padding: '15px' }}>
            Reserve — $249
          </button>
        </div>
      )}
    </>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────────

function Footer({ setPage }) {
  const cols = [
    { head: 'Product', links: [['The Base', 'pdp'], ['Shells', 'shells'], ['Mouse Pads', 'pads']] },
    { head: 'Support', links: [['FAQ', 'faq'], ['Shipping & Returns', 'faq'], ['Contact', 'faq']] },
    { head: 'Legal',   links: [['Privacy Policy', 'faq'], ['Terms of Use', 'faq']] },
  ];

  return (
    <footer style={{ background: '#0F0F0F', borderTop: '1px solid rgba(194,196,199,0.08)', padding: '64px 60px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 60, flexWrap: 'wrap', paddingBottom: 48, marginBottom: 28, borderBottom: '1px solid rgba(194,196,199,0.08)' }}>
          <div style={{ maxWidth: 240 }}>
            <div style={{ fontFamily: "'Great Vibes', cursive", fontSize: '2.2rem', color: '#FAFAF8', marginBottom: 12 }}>BHP</div>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.92rem', color: 'rgba(194,196,199,0.45)', lineHeight: 1.75 }}>
              Precision tools for serious people.<br />316L stainless steel. CNC machined from billet.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
            {cols.map(col => (
              <div key={col.head}>
                <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.62rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#B07D45', marginBottom: 18 }}>{col.head}</div>
                <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {col.links.map(([label, pg]) => (
                    <li key={label}>
                      <button onClick={() => setPage(pg)}
                        style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.9rem', color: 'rgba(194,196,199,0.4)', background: 'none', border: 'none', cursor: 'pointer', padding: 0, letterSpacing: '0.03em', transition: 'color 200ms' }}
                        onMouseEnter={e => e.currentTarget.style.color = 'rgba(194,196,199,0.75)'}
                        onMouseLeave={e => e.currentTarget.style.color = 'rgba(194,196,199,0.4)'}>
                        {label}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.7rem', color: 'rgba(194,196,199,0.2)', letterSpacing: '0.06em' }}>© 2026 BHP Premium Electronics. All rights reserved.</div>
          <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.7rem', color: 'rgba(194,196,199,0.2)', letterSpacing: '0.06em' }}>bhpmouse.com</div>
        </div>
      </div>
    </footer>
  );
}

// ─── Grain ────────────────────────────────────────────────────────────────────

function Grain() {
  return (
    <div aria-hidden="true" style={{
      position: 'fixed', inset: 0, zIndex: 150, pointerEvents: 'none', opacity: 0.038,
      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
      backgroundSize: '256px 256px',
    }} />
  );
}

// ─── Atoms ────────────────────────────────────────────────────────────────────

function Eyebrow({ children, light = false, style = {} }) {
  return (
    <p style={{
      fontFamily: "'EB Garamond', serif",
      fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase',
      color: light ? 'rgba(194,196,199,0.65)' : '#B07D45',
      marginBottom: 14, ...style,
    }}>{children}</p>
  );
}

function SteelPlaceholder({ height = 420, style = {} }) {
  return (
    <div style={{
      width: '100%', height, flexShrink: 0, position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, #1a1918 0%, #232120 45%, #1c1b1a 70%, #141312 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      {/* Corner marks */}
      {[
        { top: 16, left: 16, borderTop: '1px solid rgba(194,196,199,0.18)', borderLeft: '1px solid rgba(194,196,199,0.18)', width: 20, height: 20 },
        { top: 16, right: 16, borderTop: '1px solid rgba(194,196,199,0.18)', borderRight: '1px solid rgba(194,196,199,0.18)', width: 20, height: 20 },
        { bottom: 16, left: 16, borderBottom: '1px solid rgba(194,196,199,0.18)', borderLeft: '1px solid rgba(194,196,199,0.18)', width: 20, height: 20 },
        { bottom: 16, right: 16, borderBottom: '1px solid rgba(194,196,199,0.18)', borderRight: '1px solid rgba(194,196,199,0.18)', width: 20, height: 20 },
      ].map((s, i) => <div key={i} style={{ position: 'absolute', ...s }} />)}
      {/* Center mark */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
        <div style={{ fontFamily: "'Great Vibes', cursive", fontSize: '2.2rem', color: 'rgba(194,196,199,0.18)', lineHeight: 1 }}>BHP</div>
        <div style={{ width: 28, height: 1, background: 'rgba(176,125,69,0.22)' }}></div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '0.58rem', letterSpacing: '0.28em', textTransform: 'uppercase', color: 'rgba(194,196,199,0.18)' }}>316L Stainless Steel</div>
      </div>
    </div>
  );
}

function LeatherPlaceholder({ height = 420, style = {} }) {
  return (
    <div style={{
      width: '100%', height, flexShrink: 0, position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(140deg, #3d2a16 0%, #4a3220 55%, #3a2814 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      {[
        { top: 16, left: 16, borderTop: '1px solid rgba(176,125,69,0.2)', borderLeft: '1px solid rgba(176,125,69,0.2)', width: 20, height: 20 },
        { top: 16, right: 16, borderTop: '1px solid rgba(176,125,69,0.2)', borderRight: '1px solid rgba(176,125,69,0.2)', width: 20, height: 20 },
        { bottom: 16, left: 16, borderBottom: '1px solid rgba(176,125,69,0.2)', borderLeft: '1px solid rgba(176,125,69,0.2)', width: 20, height: 20 },
        { bottom: 16, right: 16, borderBottom: '1px solid rgba(176,125,69,0.2)', borderRight: '1px solid rgba(176,125,69,0.2)', width: 20, height: 20 },
      ].map((s, i) => <div key={i} style={{ position: 'absolute', ...s }} />)}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
        <div style={{ fontFamily: "'Great Vibes', cursive", fontSize: '2.2rem', color: 'rgba(176,125,69,0.28)', lineHeight: 1 }}>BHP</div>
        <div style={{ width: 28, height: 1, background: 'rgba(176,125,69,0.28)' }}></div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '0.58rem', letterSpacing: '0.28em', textTransform: 'uppercase', color: 'rgba(176,125,69,0.22)' }}>Full-Grain Leather</div>
      </div>
    </div>
  );
}

// ─── useReveal hook ───────────────────────────────────────────────────────────

function useReveal(threshold = 0.15) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVis(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, vis];
}

// ─── Reveal wrapper ───────────────────────────────────────────────────────────

function Reveal({ children, delay = 0, style = {}, className = '' }) {
  const [ref, vis] = useReveal();
  return (
    <div ref={ref} className={`reveal${vis ? ' vis' : ''}${delay ? ` rd${delay}` : ''} ${className}`} style={style}>
      {children}
    </div>
  );
}

// ─── Animated caramel rule ────────────────────────────────────────────────────

function Rule({ style = {} }) {
  const [ref, vis] = useReveal(0.5);
  return <div ref={ref} className={`bhp-rule${vis ? ' exp' : ''}`} style={style} />;
}

// ─── Buttons ─────────────────────────────────────────────────────────────────

function BtnDark({ children, onClick, style = {} }) {
  const [hov, setHov] = useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        fontFamily: "'EB Garamond', serif",
        fontSize: '0.82rem', letterSpacing: '0.14em', textTransform: 'uppercase',
        color: '#FAFAF8',
        background: hov ? '#B07D45' : '#0F0F0F',
        border: 'none', cursor: 'pointer', padding: '13px 28px',
        transition: 'background 220ms cubic-bezier(0.4,0,0.2,1)',
        ...style,
      }}>
      {children}
    </button>
  );
}

function BtnGhost({ children, onClick, style = {}, dark = false }) {
  const [hov, setHov] = useState(false);
  const borderCol = dark ? 'rgba(250,250,248,0.28)' : 'rgba(15,15,15,0.28)';
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        fontFamily: "'EB Garamond', serif",
        fontSize: '0.82rem', letterSpacing: '0.14em', textTransform: 'uppercase',
        color: dark ? '#FAFAF8' : '#0F0F0F',
        background: hov ? '#B07D45' : 'transparent',
        border: `1px solid ${hov ? 'transparent' : borderCol}`,
        cursor: 'pointer', padding: '13px 28px',
        transition: 'background 220ms, border-color 220ms',
        ...style,
      }}>
      {children}
    </button>
  );
}

Object.assign(window, {
  CartContext, CartProvider, CartDrawer,
  Nav, Footer, Grain,
  Eyebrow, SteelPlaceholder, LeatherPlaceholder,
  useReveal, Reveal, Rule,
  BtnDark, BtnGhost,
});