/* ============================================================
   HOME — hero collage · value strip · category grid · fabrics
   ============================================================ */
function HomeHero() {
  const { nav } = useStore();
  const H = BB.BRAND.hero;
  const panels = BB.IMG.hero.panels;
  return (
    <section style={{ background: 'var(--cream)', borderBottom: '1px solid var(--line)' }}>
      <div className="container wide hero-split" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center', padding: 'clamp(48px,7vw,96px) var(--gutter)' }}>
        <div>
          <h1 className="display" style={{ margin: '0 0 30px', animation: 'rise .7s .05s both' }}>
            {H.titleA}<br /><em style={{ color: 'var(--accent-deep)' }}>{H.titleB}</em>
          </h1>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', animation: 'rise .7s .2s both' }}>
            <button className="btn btn-accent btn-lg" onClick={() => nav(H.cta.page)}>{H.cta.label} →</button>
          </div>
        </div>
        <div className="hero-collage" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, animation: 'rise .8s .2s both' }}>
          {panels.map((p, i) => (
            <div key={i} className="hero-panel" style={{ position: 'relative', borderRadius: 'var(--r-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', transition: 'transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s' }}>
              <HeroPanel poster={p.img} video={p.video} label={p.label} style={{ transition: 'transform .6s cubic-bezier(.2,.8,.2,1)' }} />
              <span 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>
    </section>
  );
}

function ValueStrip() {
  const items = [
    [I.truck, 'Nationwide delivery', 'Via Shipbubble · free in Nigeria over ₦250,000'],
    [I.shield, 'Two Lagos locations', 'Lekki 1 & Town Planning Way — free pickup'],
    [I.doc, 'Real styling experience', 'Fabric we’ve styled for real brides & asoebi groups'],
    [I.globe, 'Cut to order', 'Buy by the yard — card, transfer or pay on pickup'],
  ];
  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(--accent-soft)', display: 'grid', placeItems: 'center', color: 'var(--accent-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>);
}

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 }}>
        <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)' }}>Fabrics we source</h2>
        <button className="link-u" style={{ fontSize: 14, fontWeight: 600 }} onClick={() => nav('shop')}>View all →</button>
      </div>
      <div className="cat-grid">
        {BB.navCategories.map((c, i) => {
          const count = BB.products.filter(p => BB.matchesNavCat(p, c)).length;
          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>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', marginTop: 10, color: 'var(--accent-soft)', fontWeight: 600 }}>{`${count} fabric${count !== 1 ? 's' : ''}`} <I.arrow width={15} height={15} /></span>
            </div>
          </Reveal>);
        })}
      </div>
    </section>);
}

function ReelBand() {
  const reels = BB.IMG.reels || [];
  if (!reels.length) return null;
  return (
    <section style={{ background: 'var(--ink)', borderTop: '1px solid var(--line)' }}>
      <div className="container wide" style={{ padding: 'clamp(48px,6vw,84px) var(--gutter)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 26 }}>
          <h2 style={{ fontSize: 'clamp(28px,3.6vw,44px)', color: 'var(--cream)' }}>Straight from the store</h2>
          <a href={BB.BRAND.instagram} target="_blank" rel="noopener" style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--accent-soft)' }}>{BB.BRAND.social} →</a>
        </div>
        <div className="reel-band" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {reels.map((r, i) => (
            <div key={i} style={{ position: 'relative', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
              <HeroPanel poster={r.poster} video={r.video} label={r.label} style={{ aspectRatio: '9/13' }} />
              <span style={{ position: 'absolute', left: 10, bottom: 10, background: 'rgba(23,17,9,.6)', backdropFilter: 'blur(3px)', borderRadius: 100, padding: '5px 12px', fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--cream)' }}>{r.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>);
}

function Featured() {
  const { nav } = useStore();
  return (
    <section style={{ background: 'var(--cream-deep)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container wide" style={{ padding: 'clamp(60px,8vw,110px) var(--gutter)' }}>
        <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)', marginBottom: 38 }}>Across every category</h2>
        <div className="prod-grid">
          {BB.products.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 all fabrics</button>
        </div>
      </div>
    </section>);
}

function HomePage() {
  return (
    <>
      <HomeHero />
      <ValueStrip />
      <CategoryGrid />
      <ReelBand />
      <Featured />
      <Newsletter />
    </>);
}

Object.assign(window, { HomePage });