// BHP — Homepage

const { useState, useEffect, useRef } = React;

function HomePage({ setPage }) {
  const { Eyebrow, SteelPlaceholder, LeatherPlaceholder, Reveal, Rule, BtnDark, BtnGhost } = window;

  // ── Hero shimmer ────────────────────────────────────────────────────────────
  const heroRef = useRef(null);
  const [mx, setMx] = useState(38);
  const [my, setMy] = useState(52);
  const tickRef = useRef(false);

  const handleHeroMouse = (e) => {
    if (!tickRef.current) {
      requestAnimationFrame(() => {
        const r = heroRef.current?.getBoundingClientRect();
        if (r) {
          setMx(((e.clientX - r.left) / r.width * 100).toFixed(1));
          setMy(((e.clientY - r.top) / r.height * 100).toFixed(1));
        }
        tickRef.current = false;
      });
      tickRef.current = true;
    }
  };

  // ── Email capture ───────────────────────────────────────────────────────────
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const handleSubmit = (e) => { e.preventDefault(); if (email) setSubmitted(true); };

  return (
    <div>

      {/* ── HERO ── */}
      <section
        ref={heroRef}
        onMouseMove={handleHeroMouse}
        style={{
          position: 'relative',
          minHeight: '100vh',
          background: `
            radial-gradient(ellipse 48% 48% at ${mx}% ${my}%, rgba(194,196,199,0.07) 0%, transparent 62%),
            radial-gradient(ellipse 70% 40% at 50% 100%, rgba(12,31,20,0.6) 0%, transparent 100%),
            linear-gradient(158deg, #0F0F0F 0%, #111510 55%, #0C1F14 100%)
          `,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          padding: '0 60px 80px', overflow: 'hidden',
        }}
        className="hero-section"
      >
        {/* Full-bleed background placeholder */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 0,
          background: 'linear-gradient(135deg, #1a1918 0%, #232120 45%, #1c1b1a 70%, #141312 100%)',
        }}>
          {[
            { top: 20, left: 20, borderTop: '1px solid rgba(176,125,69,0.35)', borderLeft: '1px solid rgba(176,125,69,0.35)', width: 20, height: 20 },
            { top: 20, right: 20, borderTop: '1px solid rgba(176,125,69,0.35)', borderRight: '1px solid rgba(176,125,69,0.35)', width: 20, height: 20 },
            { bottom: 20, left: 20, borderBottom: '1px solid rgba(176,125,69,0.35)', borderLeft: '1px solid rgba(176,125,69,0.35)', width: 20, height: 20 },
            { bottom: 20, right: 20, borderBottom: '1px solid rgba(176,125,69,0.35)', borderRight: '1px solid rgba(176,125,69,0.35)', width: 20, height: 20 },
          ].map((s, i) => <div key={i} style={{ position: 'absolute', ...s }} />)}
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
            <div style={{ fontFamily: "'Great Vibes', cursive", fontSize: '3.2rem', color: 'rgba(194,196,199,0.13)', lineHeight: 1 }}>BHP</div>
            <div style={{ width: 32, height: 1, background: 'rgba(176,125,69,0.22)' }}></div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontStyle: 'italic', fontSize: '0.9rem', letterSpacing: '0.08em', color: 'rgba(194,196,199,0.14)', textAlign: 'center' }}>Built for how it makes you feel.</div>
          </div>
        </div>

        <div style={{ position: 'relative', zIndex: 1, maxWidth: 1200, width: '100%', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 32 }}>

          {/* Headline */}
          <div>
            <h1 style={{
              fontFamily: "'Cormorant Garamond', serif", fontWeight: 300,
              fontSize: 'clamp(2.6rem, 5vw, 5rem)',
              color: '#FAFAF8', lineHeight: 1.05, letterSpacing: '-0.01em',
              marginBottom: 32,
            }}>
              <span className="h1-line h1-l1"><span style={{ whiteSpace: 'nowrap' }}>Built to stay</span></span>
              <span className="h1-line h1-l2"><span style={{ whiteSpace: 'nowrap' }}>on your <em style={{ color: '#B07D45', fontStyle: 'italic' }}>desk.</em></span></span>
            </h1>
            <div className="fade-u fade-u-1" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <BtnDark onClick={() => setPage('pdp')} style={{ background: '#B07D45' }}>Reserve your place</BtnDark>
              <button onClick={() => setPage('pdp')}
                style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.9rem', letterSpacing: '0.06em', color: 'rgba(250,250,248,0.55)', background: 'none', border: 'none', cursor: 'pointer', borderBottom: '1px solid rgba(250,250,248,0.2)', paddingBottom: 2 }}>
                The base →
              </button>
            </div>
          </div>

          {/* Price callout — anchored bottom-right */}
          <div className="fade-u fade-u-2" style={{ textAlign: 'right', flexShrink: 0 }}>
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(250,250,248,0.35)', marginBottom: 4 }}>Complete Set</div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '2.8rem', color: '#C2C4C7', lineHeight: 1 }}>$249</div>
            <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.68rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(250,250,248,0.2)', marginTop: 6 }}>Mouse · Dock · Mat</div>
          </div>

        </div>

        {/* Scroll cue */}
        <div className="fade-u fade-u-3" style={{ position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 1, height: 40, background: 'rgba(250,250,248,0.15)' }}></div>
        </div>
      </section>

      {/* ── STAT BAR ── */}
      <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: '316L', lbl: 'Stainless Steel', sub: 'Same grade as surgical instruments' },
              { val: '70+',  lbl: 'Hours battery',   sub: 'Wireless. No dongle required' },
              { val: '$249', lbl: 'Complete system',  sub: 'Mouse, dock, and leather mat' },
            ].map((s, i) => (
              <div key={s.val} style={{
                padding: '40px 44px',
                borderRight: i < 2 ? '1px solid rgba(15,15,15,0.08)' : 'none',
              }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '2.8rem', fontStyle: 'italic', fontWeight: 400, 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.5 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── THE SYSTEM ── */}
      <section style={{ background: '#0F0F0F', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <Reveal style={{ marginBottom: 56 }}>
            <Eyebrow light>The Base</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(2rem, 3.5vw, 3rem)', color: '#FAFAF8', lineHeight: 1.1, maxWidth: '18ch' }}>
              Three objects.<br />One desk.
            </h2>
          </Reveal>

          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2 }}>
            {[
              { name: 'Steele Mouse', desc: '316L stainless steel. CNC machined from billet. Swappable shells. Steel flexure buttons. PAW3395 sensor.', Img: SteelPlaceholder, h: 220 },
              { name: 'Premium Dock', desc: 'Wireless charging for mouse and phone. Single DPI control knob. Braided USB cable.', Img: SteelPlaceholder, h: 220 },
              { name: 'Leather Mat',  desc: 'Full-grain leather. Natural rubber base. 350 × 280mm. Debossed BHP monogram.', Img: LeatherPlaceholder, h: 220 },
            ].map((card, i) => {
              const [hov, setHov] = useState(false);
              return (
                <Reveal key={card.name} delay={i + 1}>
                  <div
                    onClick={() => setPage('pdp')}
                    onMouseEnter={() => setHov(true)}
                    onMouseLeave={() => setHov(false)}
                    style={{
                      background: '#0F0F0F', cursor: 'pointer',
                      border: '1px solid rgba(194,196,199,0.1)',
                      transform: hov ? 'translateY(-6px)' : 'translateY(0)',
                      transition: 'transform 400ms cubic-bezier(0.16,1,0.3,1), border-color 300ms',
                      borderColor: hov ? '#B07D45' : 'rgba(194,196,199,0.1)',
                    }}
                  >
                    <card.Img height={card.h} />
                    <div style={{ padding: '24px 22px' }}>
                      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.5rem', color: '#FAFAF8', lineHeight: 1.1, marginBottom: 10 }}>{card.name}</div>
                      <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.88rem', color: 'rgba(194,196,199,0.55)', lineHeight: 1.75 }}>{card.desc}</p>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>

          <Reveal style={{ marginTop: 40 }}>
            <button onClick={() => setPage('pdp')}
              style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', borderBottom: '1px solid rgba(176,125,69,0.4)', paddingBottom: 2 }}>
              View complete specifications →
            </button>
          </Reveal>
        </div>
      </section>

      {/* ── MATERIAL SPLIT ── */}
      <section className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'stretch' }}>
        <SteelPlaceholder style={{ height: '100%', minHeight: 560 }} />
        <div style={{ background: '#0F0F0F', padding: '88px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }} className="px-lg">
          <Reveal>
            <Eyebrow light>Material</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', color: '#FAFAF8', lineHeight: 1.1 }}>
              Built for how it<br />makes you <em style={{ color: '#B07D45' }}>feel.</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: 28, maxWidth: '40ch' }}>
              Most mouse shells are ABS plastic. Ours start as a solid block of 316L stainless steel and get machined down. Same grade as surgical instruments and maritime hardware.
            </p>
          </Reveal>

          <Reveal delay={2}>
            <div style={{ borderTop: '1px solid rgba(194,196,199,0.12)' }}>
              {[
                ['Shell', '316L Stainless Steel'],
                ['Construction', 'CNC Machined from Billet'],
                ['Buttons', 'Steel Flexure Mechanism'],
                ['Sensor', 'PixArt PAW3395'],
                ['Connectivity', '2.4GHz Wireless'],
                ['Battery', '70+ Hours'],
              ].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.35)' }}>{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>

      {/* ── SHELLS TEASER ── */}
      <section style={{ background: '#0C1F14', padding: '96px 60px' }} className="px-lg py-lg">
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
            <Reveal>
              <Eyebrow light>Shells</Eyebrow>
              <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', color: '#FAFAF8', lineHeight: 1.1 }}>
                Color it <em style={{ color: '#B07D45' }}>your way.</em>
              </h2>
            </Reveal>
            <Reveal>
              <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.95rem', color: 'rgba(194,196,199,0.5)', maxWidth: '36ch', lineHeight: 1.75 }}>
                The shell slides out. The dock panel clips off. The knob pulls free. Every surface is replaceable, in any finish.
              </p>
            </Reveal>
          </div>

          <div className="g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2 }}>
            {[
              { type: 'mouse', label: 'Mouse Shells',  price: '$89', unit: 'Set of 2',      desc: 'CNC machined 316L. Swappable without tools. Dishwasher safe.', bg: 'linear-gradient(140deg,#2d2c2a,#1e1d1c)', finish: 'brushed' },
              { type: 'dock',  label: 'Dock Shells',   price: '$69', unit: 'Single panel',  desc: 'Match the dock to the mouse. Press-fit, no tools required.',   bg: 'linear-gradient(140deg,#222120,#181716)', finish: 'raw' },
              { type: 'knob',  label: 'DPI Knobs',     price: '$39', unit: 'Single knob',   desc: 'Right down to the knob. Pull off, press on. Same steel.',       bg: 'linear-gradient(140deg,#141312,#0f0e0d)', finish: 'blackened' },
            ].map((card, i) => {
              const [hov, setHov] = useState(false);
              return (
                <Reveal key={card.type} delay={i + 1}>
                  <div
                    onClick={() => setPage('shell-pdp', { type: card.type, finish: card.finish })}
                    onMouseEnter={() => setHov(true)}
                    onMouseLeave={() => setHov(false)}
                    style={{
                      cursor: 'pointer', background: '#0C1F14',
                      border: hov ? '1px solid #B07D45' : '1px solid rgba(194,196,199,0.1)',
                      transform: hov ? 'translateY(-6px)' : 'translateY(0)',
                      transition: 'transform 400ms cubic-bezier(0.16,1,0.3,1), border-color 300ms',
                    }}>
                    <div style={{ aspectRatio: '4/3', background: card.bg }}></div>
                    <div style={{ padding: '24px 22px' }}>
                      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: '1.5rem', color: '#FAFAF8', lineHeight: 1.1, marginBottom: 6 }}>{card.label}</div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                        <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(194,196,199,0.35)' }}>{card.unit}</div>
                        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1.1rem', color: '#B07D45' }}>{card.price}</div>
                      </div>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>

          <Reveal style={{ marginTop: 40 }}>
            <button onClick={() => setPage('shells')}
              style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.82rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B07D45', background: 'none', border: 'none', cursor: 'pointer', borderBottom: '1px solid rgba(176,125,69,0.4)', paddingBottom: 2 }}>
              Browse all finishes →
            </button>
          </Reveal>
        </div>
      </section>

      {/* ── DOCK SPLIT ── */}
      <section className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div style={{ background: '#F0EDE6', padding: '88px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: 1 }} className="px-lg">
          <Reveal>
            <Eyebrow>Premium Dock</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 2.8vw, 2.6rem)', color: '#0F0F0F', lineHeight: 1.1 }}>
              Adjust your DPI<br />without a menu.
            </h2>
          </Reveal>
          <Rule />
          <Reveal delay={1}>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(15,15,15,0.6)', lineHeight: 1.85, marginBottom: 32, maxWidth: '38ch' }}>
              The dock charges your mouse and your phone simultaneously. The single knob controls DPI. Plug in the braided cable and forget about it.
            </p>
            <div style={{ borderTop: '1px solid rgba(15,15,15,0.1)' }}>
              {[
                ['Footprint', '3″ × 5″'],
                ['Charging', 'Wireless Qi'],
                ['Connection', 'Braided USB-C'],
                ['Phone charging', 'Yes'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid rgba(15,15,15,0.07)' }}>
                  <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>
          </Reveal>
        </div>
        <SteelPlaceholder style={{ height: '100%', minHeight: 480, order: 2 }} />
      </section>

      {/* ── MAT SPLIT ── */}
      <section className="g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'stretch' }}>
        <LeatherPlaceholder style={{ height: '100%', minHeight: 480 }} />
        <div style={{ background: '#0C1F14', padding: '88px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }} className="px-lg">
          <Reveal>
            <Eyebrow light>Leather Mat</Eyebrow>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(1.8rem, 2.8vw, 2.6rem)', color: '#FAFAF8', lineHeight: 1.1 }}>
              The surface<br />it <em style={{ color: '#B07D45' }}>lives on.</em>
            </h2>
          </Reveal>
          <Rule />
          <Reveal delay={1}>
            <div style={{ borderTop: '1px solid rgba(194,196,199,0.12)' }}>
              {[
                ['Material', 'Full-Grain Leather'],
                ['Size', '350 × 280mm'],
                ['Base', 'Natural Rubber'],
                ['Marking', 'Debossed BHP'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', 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.35)' }}>{k}</span>
                  <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: '1rem', color: 'rgba(250,250,248,0.8)' }}>{v}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── RESERVE ── */}
      <section style={{ background: '#0C1F14', padding: '120px 60px' }} className="px-lg">
        <div style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <div style={{ fontFamily: "'Great Vibes', cursive", fontSize: '2.2rem', color: '#B07D45', marginBottom: 16 }}>BHP</div>
            <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 300, fontSize: 'clamp(2rem, 4vw, 3.2rem)', color: '#FAFAF8', lineHeight: 1.15, marginBottom: 16 }}>
              First run is limited.<br />Be first to know.
            </h2>
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: 'rgba(194,196,199,0.5)', marginBottom: 40, lineHeight: 1.7 }}>
              No payment now. You&#39;ll hear from us directly when orders open.
            </p>
          </Reveal>
          <Reveal delay={1}>
            {submitted ? (
              <div style={{ fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: '#6aad7e', border: '1px solid #6aad7e', display: 'inline-block', padding: '13px 32px', letterSpacing: '0.08em' }}>
                You&#39;re on the list.
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: 'flex', flexWrap: 'wrap', gap: 0, justifyContent: 'center', maxWidth: 460, margin: '0 auto' }}>
                <input
                  type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="your@email.com" required
                  style={{
                    flex: 1, minWidth: 200,
                    fontFamily: "'EB Garamond', serif", fontSize: '1rem', color: '#FAFAF8',
                    background: 'rgba(250,250,248,0.06)',
                    border: '1px solid rgba(194,196,199,0.22)', borderRight: 'none',
                    padding: '13px 18px', outline: 'none',
                  }}
                />
                <BtnGhost dark style={{ borderLeft: 'none', borderRadius: 0 }}>Reserve</BtnGhost>
              </form>
            )}
            <p style={{ fontFamily: "'EB Garamond', serif", fontSize: '0.72rem', color: 'rgba(194,196,199,0.25)', marginTop: 16, letterSpacing: '0.06em' }}>No charge today.</p>
          </Reveal>
        </div>
      </section>

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

Object.assign(window, { HomePage });