/* ============================================================
   HOME PAGE
   ============================================================ */
function HomeHero() {
  const { nav } = useStore();
  const panels = BB.IMG.hero.panels;

  return (
    <section style={{ position: 'relative', width: '100%', height: '100svh', minHeight: 620, overflow: 'hidden', background: 'var(--cream-deep)' }}>

      {/* ── 4-panel video collage ── */}
      <div className="hero-collage" style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 3 }}>
        {panels.map((p, i) => (
          <div key={i} style={{ position: 'relative', overflow: 'hidden' }}>
            <Ph label={p.label} variant={p.variant} src={p.poster} videoSrc={p.videoSrc} style={{ position: 'absolute', inset: 0 }} />
            <div style={{ position: 'absolute', inset: 0, background: 'rgba(36,36,36,.28)' }} />
          </div>
        ))}
      </div>

      <div style={{ position: 'absolute', inset: 0, zIndex: 10, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 90% 70% at 50% 50%, transparent 15%, rgba(36,36,36,.45) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 11, pointerEvents: 'none',
        background: 'linear-gradient(to bottom, rgba(36,36,36,.55) 0%, rgba(36,36,36,.22) 30%, rgba(36,36,36,.22) 65%, rgba(36,36,36,.62) 100%)' }} />

      <div style={{
        position: 'absolute', inset: 0, zIndex: 20,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: 'clamp(90px,10vh,120px) clamp(24px,6vw,80px) clamp(70px,9vh,100px)',
        textAlign: 'center',
        pointerEvents: 'none'
      }}>
        <h1 style={{
          fontFamily: 'var(--sans)', fontWeight: 600, lineHeight: .96,
          fontSize: 'clamp(48px,8vw,120px)',
          letterSpacing: '-.02em', color: '#fff',
          maxWidth: 1040, marginBottom: 38,
          animation: 'fadeUpHero 1.1s .7s both'
        }}>
          Favors, personalised.
        </h1>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', animation: 'fadeUpHero 1.1s 1.2s both', pointerEvents: 'auto' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('custom-order')}>Start a Custom Order &nbsp;→</button>
          <button className="btn btn-outline btn-lg" style={{ color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,.7)' }} onClick={() => nav('shop')}>Shop the Boxes</button>
        </div>
      </div>

      <style>{`
        @keyframes fadeUpHero {
          from { opacity: 0; transform: translateY(28px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

function TrustStrip() {
  const items = [
    [I.truck, 'Worldwide Shipping', 'Every order travels safely, wherever you are'],
    [I.gift, 'Handmade to Order', 'Every box made fresh once you order — never off a shelf'],
    [I.heart, 'Personalised Every Time', 'Name and age, hand-finished on every single box'],
  ];
  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">Shop by theme</p>
          <h2 style={{ fontSize: 'clamp(34px,5vw,60px)', marginTop: 12 }}>Every box, <em style={{ fontStyle: 'italic' }}>made for them</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) =>
        c.id === 'custom' ? (
        <Reveal key={c.id} delay={i % 3 + 1} className="cat-tile" onClick={() => nav('custom-order')} style={{ cursor: 'pointer' }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-lg)', border: '1px solid var(--gold)', background: 'var(--ivory)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 26, color: 'var(--ink)' }}>
              <p className="eyebrow">Made just for you</p>
              <div>
                <h3 style={{ fontSize: 27, color: 'var(--ink)', fontStyle: 'italic', fontFamily: 'var(--serif)' }}>{c.name}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.6 }}>{c.blurb}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, letterSpacing: '.1em', textTransform: 'uppercase', marginTop: 16, color: 'var(--gold)' }}>Start your brief <I.arrow width={15} height={15} /></span>
              </div>
            </div>
          </Reveal>
        ) : (
        <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} variant={i % 2 === 0 ? 'ph-gold' : 'ph-blush'} src={(BB.IMG.cats[c.id] || {}).poster} 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(36,36,36,.88) 0%, rgba(36,36,36,.5) 45%, transparent 70%)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 22, color: 'var(--cream)' }}>
              <h3 style={{ fontSize: i === 0 ? 34 : 25, color: 'var(--cream)' }}>{c.name}</h3>
              {i === 0 && <p style={{ fontSize: 14.5, color: 'rgba(251,249,245,.85)', marginTop: 6, maxWidth: 360 }}>{c.blurb}</p>}
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, letterSpacing: '.1em', textTransform: 'uppercase', marginTop: 12, color: 'var(--gold-soft)' }}>Shop now <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)' }}>Loved <em style={{ fontStyle: 'italic' }}>again and again</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="Behind the scenes" variant="ph-gold" src={BB.IMG.studio.poster} 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: 230 }}>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.35 }}>"Every box should feel like it was made just for that one child."</p>
            <p style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 12, letterSpacing: '.12em' }}>— THE ASHIRA TEAM</p>
          </div>
        </Reveal>
        <Reveal delay={2}>
          <p className="eyebrow">Made by hand</p>
          <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)', margin: '14px 0 20px' }}>Favors made to be <em style={{ fontStyle: 'italic' }}>remembered</em></h2>
          <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 18 }}>
            We design and hand-finish personalised party favor and gable boxes for car, circus, princess and milestone-birthday celebrations — every single box carrying the guest of honour's real name and age.
          </p>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 30 }}>
            {['Every box personalised — name & age', 'Car, circus, princess & milestone themes', 'Carefully packed and shipped worldwide'].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>);

}

/* ── Bespoke entry point — the business is custom ordering, so this leads with it ── */
function BespokeSection() {
  const { nav } = useStore();
  return (
    <section style={{ background: 'var(--ink)', padding: 'clamp(64px,9vw,110px) var(--gutter)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ maxWidth: 760, textAlign: 'center' }}>
        <p className="eyebrow" style={{ color: 'rgba(255,255,255,.55)' }}>Beyond the catalogue</p>
        <h2 style={{ fontSize: 'clamp(36px,5.5vw,66px)', marginTop: 12, color: '#fff' }}>
          Your theme, <em style={{ fontStyle: 'italic' }}>your vision.</em>
        </h2>
        <p style={{ fontSize: 16, color: 'rgba(255,255,255,.65)', maxWidth: 520, margin: '14px auto 30px', lineHeight: 1.75 }}>
          Don't see the exact theme, colours or age you need? Submit a brief — pick a few boxes from our catalogue for inspiration — and we'll quote you personally.
        </p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 22 }}>
          {['Any theme, any age', '48h quote'].map(t => (
            <div key={t} style={{ background: 'rgba(255,255,255,.1)', borderRadius: 100, padding: '7px 16px', fontSize: 12.5, color: 'rgba(255,255,255,.75)', fontWeight: 500 }}>{t}</div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-lg" style={{ background: '#fff', color: '#000' }} onClick={() => nav('custom-order')}>Start a Custom Order</button>
          <button className="btn btn-outline btn-lg" style={{ color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,.7)' }} onClick={() => nav('booking')}>Book a free call</button>
        </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(--sage-soft), var(--cream))' }}>
      <div className="container" style={{ padding: 'clamp(64px,9vw,120px) var(--gutter)', textAlign: 'center', maxWidth: 860 }}>
        <p className="eyebrow">What customers say</p>
        <div style={{ position: 'relative', minHeight: 190, 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: 22, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <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 SocialSection() {
  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' }}>
        <div>
          <p className="eyebrow">{BB.BRAND.social}</p>
          <h2 style={{ fontSize: 'clamp(30px,4.5vw,52px)', margin: '14px 0 16px' }}>See every box <em style={{ fontStyle: 'italic' }}>before it ships</em></h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 12 }}>
            Behind-the-scenes process, new themes and finished orders on our Instagram — updated regularly.
          </p>
          <p style={{ fontSize: 14, color: 'var(--ink-faint)', lineHeight: 1.6, marginBottom: 28 }}>
            Shopping for little ones? See our kids' creative kits on {BB.BRAND.kidsSocial}.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#" className="btn btn-primary"><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="" src={src} variant={i % 2 === 0 ? 'ph-gold' : 'ph-blush'} style={{ aspectRatio: '1', borderRadius: 'var(--r-md)' }} />
              <div className="social-ov" style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,.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 />
      <SocialSection />
      <Newsletter />
    </>);

}

Object.assign(window, { HomePage });
