/* ============================================================
   HOME — configurable hero · value strip · category grid ·
   featured products · one-cart band
   ============================================================ */

/* ── Hero — diagonal cascade collage (media first) + headline/CTA below.
   Header + hero fill exactly one viewport on load: hero height is the
   measured remaining space under the announce bar + sticky header. ───── */
function HomeHero() {
  const { nav } = useStore();
  const H = BB.BRAND.hero;
  const panels = BB.IMG.hero.panels;
  const [heroH, setHeroH] = useState(null);

  const GAP = 18;
  useEffect(() => {
    const measure = () => {
      const a = document.querySelector('.announce');
      const h = document.getElementById('site-header');
      setHeroH((a ? a.offsetHeight : 0) + (h ? h.offsetHeight : 0) + GAP);
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  const STEPS = [
    { top: '0%',  left: '0%',  width: '58%', height: '60%' },
    { top: '4%',  left: '52%', width: '46%', height: '44%' },
    { top: '50%', left: '20%', width: '38%', height: '38%' },
    { top: '58%', left: '62%', width: '32%', height: '34%' },
  ];

  return (
    <section className="hero-viewport" style={{ background: 'var(--cream)', display: 'flex', flexDirection: 'column', marginTop: GAP, height: heroH != null ? `calc(100dvh - ${heroH}px)` : '100dvh' }}>
      <div className="hero-cascade" style={{ position: 'relative', flex: '1 1 auto', minHeight: 0, margin: '0 var(--gutter)' }}>
        {panels.map((p, i) => {
          const s = STEPS[i % STEPS.length];
          return (
            <div key={i} className="hero-cascade-panel" style={{ position: 'absolute', top: s.top, left: s.left, width: s.width, height: s.height, borderRadius: 'var(--r-lg)', overflow: 'hidden', boxShadow: '0 14px 34px rgba(33,26,17,.22), 0 0 0 6px var(--cream)', zIndex: i + 1, animation: `fade .5s ${i * .08}s both` }}>
              <HeroPanel poster={p.img} video={p.video} label={p.label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
              <span className="hero-cascade-label" style={{ position: 'absolute', left: 10, bottom: 10, background: 'rgba(250,246,238,.92)', backdropFilter: 'blur(3px)', borderRadius: 100, padding: '5px 12px', fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink)' }}>{p.label}</span>
            </div>
          );
        })}
      </div>
      <div className="hero-copy" style={{ flex: '0 0 auto', textAlign: 'center', padding: 'clamp(14px,2.4vh,30px) var(--gutter) clamp(20px,3.2vh,36px)' }}>
        <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 700, letterSpacing: '-.02em', lineHeight: 1.04, fontSize: 'clamp(26px,5.4vh,60px)', margin: '0 0 clamp(14px,2.2vh,26px)', animation: 'rise .7s .05s both' }}>
          {H.titleA}<br /><em style={{ fontStyle: 'normal', fontWeight: 500, color: 'var(--gold-deep)' }}>{H.titleB}</em>
        </h1>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', animation: 'rise .7s .2s both' }}>
          <button className="btn btn-gold" style={{ padding: 'clamp(12px,1.8vh,19px) clamp(20px,3vw,38px)', fontSize: 'clamp(11px,1.5vh,14px)' }} onClick={() => nav(H.cta.page)}>{H.cta.label} →</button>
          <button className="btn btn-outline" style={{ padding: 'clamp(12px,1.8vh,19px) clamp(20px,3vw,38px)', fontSize: 'clamp(11px,1.5vh,14px)' }} onClick={() => nav(H.cta2.page)}>{H.cta2.label}</button>
        </div>
      </div>
    </section>
  );
}

/* ── Value strip — real platform features, no invented stats ── */
function ValueStrip() {
  const items = [
    [I.truck, 'Nationwide delivery', 'Every state, tracked door-to-door'],
    [I.shield, 'Secure checkout', 'Card, transfer — encrypted end to end'],
    [I.globe, 'Secure payment', 'Paystack, Flutterwave or wire transfer'],
    [I.box, 'Live order tracking', 'From confirmed to delivered'],
  ];
  return (
    <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--ivory)' }}>
      <div className="container wide value-strip" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, padding: '30px var(--gutter)' }}>
        {items.map(([Icon, t, s], i) =>
        <div key={i} style={{ display: 'flex', gap: 13, alignItems: 'center' }}>
            <span style={{ width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--r-md)', background: 'var(--gold-soft)', display: 'grid', placeItems: 'center', color: 'var(--gold-deep)' }}>{Icon({ width: 21, height: 21 })}</span>
            <div style={{ lineHeight: 1.25 }}><div style={{ fontWeight: 600, fontSize: 14 }}>{t}</div><div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 2 }}>{s}</div></div>
          </div>
        )}
      </div>
    </section>);
}

/* ── Category grid ─────────────────────────────────────────── */
function CategoryGrid() {
  const { nav } = useStore();
  return (
    <section className="container wide" style={{ padding: 'clamp(60px,8vw,110px) var(--gutter)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 38 }}>
        <div>
          <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)' }}>Very different goods.<br />One coherent store.</h2>
        </div>
        <button className="link-u" style={{ fontSize: 14, fontWeight: 600 }} onClick={() => nav('shop')}>View all products →</button>
      </div>
      <div className="cat-grid">
        {BB.navCategories.map((c, i) => {
          const count = BB.products.filter(p => BB.matchesNavCat(p, c)).length;
          const feature = c.id === 'vehicles';
          return (
          <Reveal key={c.id} delay={i % 3 + 1} className="cat-tile" onClick={() => nav('shop', { cat: c.id })} style={{ cursor: 'pointer' }}>
            <Ph label={c.name} src={c.img} style={{ height: '100%', minHeight: 210, borderRadius: 'var(--r-lg)' }} />
            <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-lg)', background: 'linear-gradient(to top, rgba(23,17,9,.85) 0%, rgba(23,17,9,.42) 45%, transparent 70%)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 22, color: 'var(--cream)' }}>
              <h3 style={{ fontSize: 23, color: '#FFFDF8' }}>{c.name}</h3>
              {feature && <p style={{ fontSize: 13, color: 'rgba(255,253,248,.85)', marginTop: 6, maxWidth: 380 }}>{c.blurb}</p>}
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', marginTop: 10, color: 'var(--gold-soft)', fontWeight: 600 }}>{`${count} product${count !== 1 ? 's' : ''}`} <I.arrow width={15} height={15} /></span>
            </div>
          </Reveal>);
        })}
      </div>
    </section>);
}

/* ── Featured products ─────────────────────────────────────── */
function Featured() {
  const { nav } = useStore();
  const [tab, setTab] = useState('best');
  const list = BB.products.filter((p) => tab === 'best' ? p.tags.includes('best') : p.tags.includes('new')).slice(0, 8);
  return (
    <section style={{ background: 'var(--cream-deep)', borderBottom: '1px solid var(--line)' }}>
      <div className="container wide" style={{ padding: 'clamp(60px,8vw,110px) var(--gutter)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 18, marginBottom: 38 }}>
          <div>
            <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)' }}>Across every category</h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className={`chip ${tab === 'best' ? 'active' : ''}`} onClick={() => setTab('best')}>Bestsellers</button>
            <button className={`chip ${tab === 'new' ? 'active' : ''}`} onClick={() => setTab('new')}>New in</button>
          </div>
        </div>
        <div className="prod-grid">
          {list.map((p, i) => <ProductCard key={p.id} p={p} delay={i % 4 + 1} />)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 44 }}>
          <button className="btn btn-outline btn-lg" onClick={() => nav('shop')}>Shop everything</button>
        </div>
      </div>
    </section>);
}

/* ── One cart band — the multi-category promise, made concrete ── */
function OneCartBand() {
  const { nav, money } = useStore();
  const picks = [BB.products.find(p => p.cat === 'food'), BB.products.find(p => p.cat === 'beauty'), BB.products.find(p => p.cat === 'electronics')].filter(Boolean);
  const total = picks.reduce((s, p) => s + p.price, 0);
  return (
    <section className="container wide" style={{ padding: 'clamp(60px,8vw,110px) var(--gutter)' }}>
      <div className="onecart-split" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
        <Reveal>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,52px)', marginBottom: 22 }}>One cart.<br /><em style={{ color: 'var(--gold-deep)' }}>Every category.</em></h2>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 30 }}>
            {['A single checkout, whatever the mix', 'One delivery fee, calculated once', 'One tracking number, order to door'].map((t) =>
            <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 15.5 }}>
                <span style={{ width: 26, height: 26, borderRadius: 100, background: 'var(--sage-soft)', color: 'var(--sage-deep)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><I.check width={15} height={15} /></span>{t}
              </li>
            )}
          </ul>
          <button className="btn btn-primary btn-lg" onClick={() => nav('shop')}>Start shopping</button>
        </Reveal>
        {/* mock mixed cart */}
        <Reveal delay={2}>
          <div style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(22px,3vw,32px)', boxShadow: 'var(--shadow-md)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
              <h3 style={{ fontSize: 20 }}>Your cart</h3>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--gold-deep)', background: 'var(--gold-soft)', borderRadius: 100, padding: '5px 12px' }}>3 categories</span>
            </div>
            {picks.map((p) => {
              const c = BB.catOf(p);
              return (
              <div key={p.id} style={{ display: 'flex', gap: 13, alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                <Ph src={p.img} label="" variant={p.ph} style={{ width: 52, height: 52, borderRadius: 'var(--r-sm)', flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span className="cat-tag">{c.short}</span>
                  <div style={{ fontSize: 14.5, fontWeight: 600, lineHeight: 1.25 }}>{p.name}</div>
                </div>
                <span style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap' }}>{money(p.price)}</span>
              </div>);
            })}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '16px 0 4px' }}>
              <span className="muted" style={{ fontSize: 14 }}>One total</span>
              <span style={{ fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 26 }}>{money(total)}</span>
            </div>
            <button className="btn btn-gold btn-block" style={{ marginTop: 14 }} onClick={() => nav('shop')}>One checkout →</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <HomeHero />
      <div className="container wide"><StitchDivider style={{ margin: 'clamp(26px,4vw,44px) 0 0' }} /></div>
      <ValueStrip />
      <CategoryGrid />
      <div className="container wide"><StitchDivider style={{ margin: '0 0 clamp(26px,4vw,44px)' }} /></div>
      <Featured />
      <OneCartBand />
      <Newsletter />
    </>);
}

Object.assign(window, { HomePage });