/* ============================================================
   HOME PAGE — Adire by Bissie
   ============================================================ */

/* ── Hero: light — indigo textile imagery on a cream canvas ─ */
function HomeHero() {
  const { nav } = useStore();
  const tiles = IMG.hero.tiles || [];
  const tileLabels = ['In the dye pit', 'Indigo vats', 'Drying in the sun'];
  return (
    <section style={{ background: 'var(--cream)' }}>
      <div className="container wide" style={{ paddingTop: 'clamp(122px,16vh,184px)', paddingBottom: 'clamp(32px,5vw,52px)' }}>
        <div className="edit-split" style={{ display: 'grid', gridTemplateColumns: '1.02fr .98fr', gap: 'clamp(28px,5vw,66px)', alignItems: 'center' }}>
          {/* text */}
          <div>
            <p style={{ display: 'inline-flex', alignItems: 'center', gap: 12, fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 500, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 22, flexWrap: 'wrap' }}>
              <span style={{ display: 'block', width: 30, height: 1, background: 'var(--blush)' }} />
              Hand-Dyed Adire &nbsp;&bull;&nbsp; No Fade Nor Fray
            </p>
            <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 400, lineHeight: .9, fontSize: 'clamp(58px,8.5vw,116px)', letterSpacing: '-.02em', color: 'var(--ink)', marginBottom: 20 }}>
              Stay<br />
              <em style={{ fontStyle: 'italic', background: 'linear-gradient(120deg,var(--gold-deep),var(--gold) 45%,var(--blush))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>cultured.</em>
            </h1>
            <p style={{ maxWidth: 500, fontSize: 'clamp(15px,1.7vw,18px)', color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 32 }}>
              Adire and batik hand-dyed on soft cotton in Ibadan — full 4.5–5 yard bundles, customized cloth, and the traditional designs, delivered across Nigeria.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn-gold btn-lg" onClick={() => nav('shop')}>Shop the adire &nbsp;→</button>
              <button className="btn btn-outline btn-lg" onClick={() => nav('custom-order')}>Request custom cloth</button>
            </div>
          </div>
          {/* main image */}
          <Reveal style={{ position: 'relative' }}>
            <Ph src={IMG.hero.main} label="Hand-dyed indigo adire" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-md)' }} />
          </Reveal>
        </div>
      </div>
      {/* 3-tile strip on cream */}
      <div className="container wide" style={{ paddingBottom: 'clamp(40px,6vw,72px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
          {tiles.map((src, i) => (
            <div key={i} onClick={() => nav('shop')} style={{ cursor: 'pointer' }}>
              <Ph src={src} label={tileLabels[i] || ''} style={{ aspectRatio: '3/2', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)' }} />
              <p style={{ fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 10 }}>{tileLabels[i]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
  [I.truck, 'Nationwide delivery', 'Tracked courier across Nigeria'],
  [I.gift, '100% soft cotton', 'No fade nor fray, with care'],
  [I.check, 'Secure online checkout', 'Add to cart & pay on-site']];

  return (
    <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--ivory)' }}>
      <div className="container wide" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 48, flexWrap: 'wrap', padding: '34px var(--gutter)' }}>
        {items.map(([Icon, t, s], i) =>
        <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <span style={{ width: 46, height: 46, flexShrink: 0, borderRadius: 100, background: 'var(--cream-deep)', display: 'grid', placeItems: 'center', color: 'var(--gold-deep)' }}>{Icon({ width: 22, height: 22 })}</span>
            <div style={{ lineHeight: 1.25 }}><div style={{ fontWeight: 500, fontSize: 14.5 }}>{t}</div><div style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>{s}</div></div>
          </div>
        )}
      </div>
    </section>);

}

function FeaturedCategories() {
  const { nav } = useStore();
  return (
    <section className="container wide" style={{ padding: 'clamp(64px,9vw,120px) var(--gutter)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
        <div>
          <p className="eyebrow">What we make</p>
          <h2 style={{ fontSize: 'clamp(34px,5vw,60px)', marginTop: 12 }}>Every yard, <em style={{ fontStyle: 'italic' }}>hand-dyed</em></h2>
        </div>
        <button className="link-u" style={{ fontSize: 14 }} onClick={() => nav('shop')}>View all →</button>
      </div>
      <div className="cat-grid">
        {BB.categories.map((c, i) =>
        <Reveal key={c.id} delay={i % 3 + 1} className={`cat-tile ${i === 0 ? 'cat-feature' : ''}`} onClick={() => nav('shop', { cat: c.id })} style={{ cursor: 'pointer' }}>
            <Ph label={c.name} src={IMG.cats[c.id]} style={{ height: '100%', minHeight: 200, borderRadius: 'var(--r-lg)' }} />
            <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-lg)', background: 'linear-gradient(to top, rgba(23,35,63,.92) 0%, rgba(23,35,63,.55) 45%, transparent 70%)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 22, color: 'var(--cream)' }}>
              <h3 style={{ fontSize: i === 0 ? 32 : 24, color: 'var(--cream)' }}>{c.name}</h3>
              {i === 0 && <p style={{ fontSize: 14.5, color: 'rgba(250,246,238,.82)', marginTop: 6, maxWidth: 380 }}>{c.blurb}</p>}
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, letterSpacing: '.1em', textTransform: 'uppercase', marginTop: 12, color: 'var(--blush-soft)' }}>Explore <I.arrow width={15} height={15} /></span>
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

function Bestsellers() {
  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, 4);
  return (
    <section style={{ background: 'var(--cream-deep)' }}>
      <div className="container wide" style={{ padding: 'clamp(64px,9vw,120px) var(--gutter)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 18, marginBottom: 42 }}>
          <h2 style={{ fontSize: 'clamp(34px,5vw,60px)' }}>Worn with <em style={{ fontStyle: 'italic' }}>pride</em></h2>
          <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: 48 }}>
          <button className="btn btn-outline btn-lg" onClick={() => nav('shop')}>Shop everything</button>
        </div>
      </div>
    </section>);

}

function EditorialSplit() {
  const { nav } = useStore();
  return (
    <section className="container wide" style={{ padding: 'clamp(64px,9vw,120px) var(--gutter)' }}>
      <div className="edit-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(28px,5vw,72px)', alignItems: 'center' }}>
        <Reveal style={{ position: 'relative' }}>
          <Ph label="Adire hand-dyed in the studio" src={IMG.about.studio} style={{ aspectRatio: '5/6', borderRadius: 'var(--r-xl)' }} />
          <div style={{ position: 'absolute', bottom: 24, right: -20, background: 'var(--ivory)', padding: '18px 22px', borderRadius: 'var(--r-md)', boxShadow: 'var(--shadow-md)', maxWidth: 240 }}>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.35 }}>"Wear your heritage. Stay cultured."</p>
            <p style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 12, letterSpacing: '.12em' }}>— OLANIYI BARAKAT OLABISI</p>
          </div>
        </Reveal>
        <Reveal delay={2}>
          <p className="eyebrow">Made in Ibadan</p>
          <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)', margin: '14px 0 20px' }}>Indigo, dyed by <em style={{ fontStyle: 'italic' }}>hand</em></h2>
          <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 18 }}>
            Adire by Bissie keeps a proud Yoruba craft alive — cloth dyed by hand, one piece at a time, in Ibadan, Oyo State. Every bundle is 100% soft cotton in a resist pattern that will not fade nor fray.
          </p>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 30 }}>
            {['Hand-dyed adire & batik on 100% soft cotton', 'Customized names, monograms & brand marks', 'Delivered nationwide across Nigeria'].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" onClick={() => nav('about')}>Our story</button>
        </Reveal>
      </div>
    </section>);

}

/* ── Wholesale + Customized entry points ─────────────────── */
function BespokeSection() {
  const { nav } = useStore();
  return (
    <section style={{ background: 'var(--cream-deep)', padding: 'clamp(64px,9vw,110px) var(--gutter)', borderTop: '1px solid var(--line)' }}>
      <div className="container wide">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <p className="eyebrow">Beyond the bundles</p>
          <h2 style={{ fontSize: 'clamp(36px,5.5vw,66px)', color: 'var(--ink)', marginTop: 12 }}>
            Buy for you, or <em style={{ fontStyle: 'italic', background: 'linear-gradient(120deg,var(--gold-deep),var(--gold) 45%,var(--blush))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>build a business.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: 540, margin: '14px auto 0', lineHeight: 1.75 }}>
            Order customized cloth of your own, or buy wholesale and resell our adire across Nigeria.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {/* Wholesale card */}
          <Reveal delay={1}>
            <div
              onClick={() => nav('packages')}
              style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(28px,4vw,48px)', cursor: 'pointer', transition: 'transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s', display: 'flex', flexDirection: 'column', gap: 18, boxShadow: 'var(--shadow-sm)' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}>
              <div style={{ width: 52, height: 52, borderRadius: 'var(--r-md)', background: 'var(--gold-soft)', display: 'grid', placeItems: 'center', color: 'var(--gold-deep)' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 11h16v9H4zM4 8h16v3H4zM12 8v12" strokeLinejoin="round"/></svg>
              </div>
              <div>
                <p style={{ fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8, fontWeight: 500 }}>Wholesale</p>
                <h3 style={{ fontSize: 'clamp(24px,3vw,36px)', color: 'var(--ink)', marginBottom: 10, lineHeight: 1.1 }}>Buy 5, resell,<br/><em style={{ fontStyle: 'italic' }}>grow.</em></h3>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7 }}>Five hand-dyed pieces for ₦55,000 — plus a place in our reseller community to start your own adire business.</p>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
                {[['5 pieces', '₦55,000'], ['Reseller', 'community'], ['Start', 'your business']].map(([p, n]) => (
                  <div key={n} style={{ background: 'var(--gold-soft)', borderRadius: 100, padding: '6px 14px', fontSize: 12, color: 'var(--gold-deep)', fontWeight: 500 }}>{p} · {n}</div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 'auto' }}>
                <span style={{ fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--gold-deep)', fontWeight: 500 }}>See wholesale</span>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--gold-deep)" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          </Reveal>

          {/* Customized card */}
          <Reveal delay={2}>
            <div
              onClick={() => nav('custom-order')}
              style={{ background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(28px,4vw,48px)', cursor: 'pointer', transition: 'transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s', display: 'flex', flexDirection: 'column', gap: 18, boxShadow: 'var(--shadow-sm)' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}>
              <div style={{ width: 52, height: 52, borderRadius: 'var(--r-md)', background: 'linear-gradient(135deg,var(--gold-deep),var(--gold))', display: 'grid', placeItems: 'center', color: '#fff' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5Z"/></svg>
              </div>
              <div>
                <p style={{ fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--blush-deep)', marginBottom: 8, fontWeight: 500 }}>Customized</p>
                <h3 style={{ fontSize: 'clamp(24px,3vw,36px)', color: 'var(--ink)', marginBottom: 10, lineHeight: 1.1 }}>Your name,<br/><em style={{ fontStyle: 'italic' }}>dyed in.</em></h3>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7 }}>Names, monograms and brand marks dyed right into the cloth — made to order for you, your family or your event.</p>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
                {['Any name', 'Any mark', 'Made to order'].map(t => (
                  <div key={t} style={{ background: 'var(--blush-soft)', borderRadius: 100, padding: '6px 14px', fontSize: 12, color: 'var(--blush-deep)', fontWeight: 500 }}>{t}</div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 'auto' }}>
                <span style={{ fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--blush-deep)', fontWeight: 500 }}>Start a request</span>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--blush-deep)" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          </Reveal>
        </div>

        {/* On-site help CTA */}
        <div style={{ marginTop: 20, background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '20px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6 }}>Not sure what you need? <strong style={{ color: 'var(--ink)' }}>Browse the full shop</strong> or request a custom piece — we'll help you choose the right cloth.</p>
          <div style={{ display: 'flex', gap: 10, flexShrink: 0, flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-sm" onClick={() => nav('shop')}>Browse the shop</button>
            <button className="btn btn-outline btn-sm" onClick={() => nav('contact')}>Ask a question</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const [i, setI] = useState(0);
  const t = BB.testimonials;
  useEffect(() => { const id = setInterval(() => setI((p) => (p + 1) % t.length), 5500); return () => clearInterval(id); }, []);
  return (
    <section style={{ background: 'linear-gradient(160deg, var(--gold-soft), var(--cream))' }}>
      <div className="container" style={{ padding: 'clamp(64px,9vw,120px) var(--gutter)', textAlign: 'center', maxWidth: 860 }}>
        <p className="eyebrow">From our customers</p>
        <div style={{ position: 'relative', minHeight: 220, marginTop: 24 }}>
          {t.map((item, idx) =>
          <blockquote key={idx} style={{ position: idx === i ? 'relative' : 'absolute', inset: 0, opacity: idx === i ? 1 : 0, transition: 'opacity .7s', pointerEvents: idx === i ? 'auto' : 'none' }}>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(22px,3.5vw,38px)', lineHeight: 1.35, fontStyle: 'italic' }}>"{item.quote}"</p>
              <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                <Stars value={5} size={16} />
                <div style={{ fontWeight: 600, fontSize: 15 }}>{item.name}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{item.role}</div>
              </div>
            </blockquote>
          )}
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 30 }}>
          {t.map((_, idx) => <button key={idx} onClick={() => setI(idx)} aria-label={`Testimonial ${idx + 1}`} style={{ width: idx === i ? 28 : 9, height: 9, borderRadius: 100, background: idx === i ? 'var(--gold)' : 'var(--line)', transition: 'all .4s' }} />)}
        </div>
      </div>
    </section>);

}

function TikTokSection() {
  const B = BB.BRAND;
  return (
    <section className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="edit-split">
        <div>
          <p className="eyebrow">{B.social}</p>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,52px)', margin: '14px 0 16px' }}>Follow the <em style={{ fontStyle: 'italic' }}>craft</em></h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 28 }}>
            New dyeing, fresh bundles and behind-the-scenes from the workshop — on Instagram, TikTok and Threads as {B.social}. Come and stay cultured with us.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href={B.tiktok} target="_blank" rel="noopener" className="btn btn-primary">
              <I.tiktok width={17} height={17} /> Follow on TikTok
            </a>
            <a href={B.instagram} target="_blank" rel="noopener" className="btn btn-outline"><I.ig width={17} height={17} /> Instagram</a>
          </div>
        </div>
        <div className="social-grid">
          {IMG.social.map((src, i) =>
          <Reveal key={i} delay={i % 3 + 1} style={{ position: 'relative' }} className="social-tile">
              <Ph label="adire" src={src} style={{ aspectRatio: '1', borderRadius: 'var(--r-md)' }} />
              <div className="social-ov" style={{ position: 'absolute', inset: 0, background: 'rgba(23,35,63,.5)', borderRadius: 'var(--r-md)', display: 'grid', placeItems: 'center', opacity: 0, transition: 'opacity .35s' }}>
                <I.ig width={26} height={26} style={{ color: 'var(--cream)' }} />
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function HomePage() {
  return (
    <>
      <HomeHero />
      <TrustStrip />
      <FeaturedCategories />
      <Bestsellers />
      <EditorialSplit />
      <BespokeSection />
      <Testimonials />
      <TikTokSection />
      <Newsletter />
    </>);

}

Object.assign(window, { HomePage });