/* ============================================================
   HOME PAGE
   ============================================================ */
const IMG = BB.IMG;
/* ── Video panel cycling hook ─────────────────────────────── */
function useVideoCycle(count, intervalMs) {
  const [active, setActive] = React.useState(0);
  const [pulsing, setPulsing] = React.useState(-1);
  const timer = React.useRef(null);
  const goTo = React.useCallback((idx) => {
    setActive((prev) => {if (prev === idx) return prev;setPulsing(idx);setTimeout(() => setPulsing(-1), 700);return idx;});
  }, []);
  const start = React.useCallback(() => {
    timer.current = setInterval(() => setActive((prev) => {const next = (prev + 1) % count;setPulsing(next);setTimeout(() => setPulsing(-1), 700);return next;}), intervalMs);
  }, [count, intervalMs]);
  const stop = React.useCallback(() => clearInterval(timer.current), []);
  React.useEffect(() => {start();return stop;}, [start, stop]);
  return { active, pulsing, goTo, start, stop };
}

function HomeHero() {
  const { nav } = useStore();
  const { active, goTo, start, stop } = useVideoCycle(4, 4500);

  /* Four panels — each has a still image behind its video so the panel
     paints instantly and never shows blank while the clip loads */
  const panels = [
  { src: 'https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/heportal-storefront/Screen_Recording_20260630_050029_Instagram.webm', still: BB.IMG.cats.wedding, label: 'Wedding Florals' },
  { src: 'https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/heportal-storefront/Screen_Recording_20260630_050134_Instagram.webm', still: BB.IMG.cats.funeral, label: 'Funeral Tributes' },
  { src: 'https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/heportal-storefront/Screen_Recording_20260630_050356_Instagram.webm', still: BB.IMG.cats.events,  label: 'Event Arrangements' },
  { src: 'https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/heportal-storefront/Screen_Recording_20260630_050459_Instagram.webm', still: BB.IMG.cats.bespoke, label: 'Bespoke Designs' }];

  /* Try to play all videos (needed on iOS); reveal each only once it has
     a decoded frame so the still image shows through until then */
  const refs = React.useRef([]);
  const [ready, setReady] = React.useState([false, false, false, false]);
  const markReady = React.useCallback((i) => setReady((r) => { if (r[i]) return r; const n = r.slice(); n[i] = true; return n; }), []);
  React.useEffect(() => {
    refs.current.forEach((v, i) => { if (!v) return; if (v.readyState >= 2) markReady(i); v.play().catch(() => {}); });
    const resume = () => refs.current.forEach((v) => v && v.play().catch(() => {}));
    document.addEventListener('pointerdown', resume, { once: true });
    return () => document.removeEventListener('pointerdown', resume);
  }, [markReady]);

  return (
    <section style={{ position: 'relative', width: '100%', minHeight: '100svh', overflow: 'hidden', background: 'linear-gradient(160deg, var(--cream), var(--cream-deep))', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>

      {/* ── 4-panel video collage ─────────────────────── */}
      <div style={{
        padding: 'clamp(70px,9vh,88px) clamp(20px,4vw,52px) 0',
        marginBottom: 'clamp(36px,6vh,56px)',
      }}>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 10,
            maxWidth: 1100,
            margin: '0 auto'
          }}
          onMouseEnter={stop}
          onMouseLeave={start}>
          {panels.map((p, i) =>
          <div
            key={i}
            onClick={() => {stop();goTo(i);start();}}
            style={{
              position: 'relative',
              overflow: 'hidden',
              cursor: 'pointer',
              borderRadius: 'var(--r-lg)',
              aspectRatio: '3 / 3.6',
              boxShadow: 'var(--shadow-md)'
            }}>

            {/* Real still image — paints instantly, sits behind the video */}
            <img
              src={p.still}
              alt={p.label}
              aria-hidden="true"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
            />

            {/* Video layered on top of the still */}
            <video
              ref={(el) => refs.current[i] = el}
              autoPlay muted loop playsInline
              aria-hidden="true"
              onLoadedData={() => markReady(i)}
              onCanPlay={() => markReady(i)}
              style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%',
                objectFit: 'cover',
                opacity: ready[i] ? 1 : 0,
                transition: 'opacity .6s ease',
                animation: active === i ? 'kenburnsActive 18s ease-in-out infinite alternate' : 'kenburns 18s ease-in-out infinite alternate',
                willChange: 'transform'
              }}>
              <source src={p.src} type={p.src.endsWith('.webm') ? 'video/webm' : 'video/mp4'} />
            </video>

            {/* Subtle bottom gradient so the label stays legible over any footage */}
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 60%, rgba(13,12,10,.55) 100%)', zIndex: 1 }} />

            {/* Label chip */}
            <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, zIndex: 2 }}>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 12, fontWeight: 500, letterSpacing: '.04em', color: '#fff' }}>{p.label}</span>
            </div>

            {/* Active ring */}
            <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-lg)', boxShadow: active === i ? 'inset 0 0 0 2.5px var(--gold)' : 'inset 0 0 0 0px transparent', transition: 'box-shadow .5s ease', zIndex: 3, pointerEvents: 'none' }} />
          </div>
          )}
        </div>
      </div>

      {/* ── Content ──────────────────────────────────── */}
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        padding: 'clamp(28px,4vh,44px) clamp(24px,6vw,80px) clamp(36px,5vh,56px)',
        textAlign: 'center'
      }}>
        {/* Eyebrow */}
        <p style={{
          display: 'inline-flex', alignItems: 'center', gap: 14,
          fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 500, letterSpacing: '.28em', textTransform: 'uppercase',
          color: 'var(--gold-deep)', marginBottom: 16,
          animation: 'fadeUpHero .9s .35s both'
        }}>
          <span style={{ display: 'block', width: 36, height: 1, background: 'linear-gradient(90deg, transparent, var(--gold))' }} />
          Premium Florals &nbsp;&bull;&nbsp; Lagos, Nigeria &nbsp;&bull;&nbsp; Weddings · Funerals · Events
          <span style={{ display: 'block', width: 36, height: 1, background: 'linear-gradient(90deg, var(--gold), transparent)' }} />
        </p>

        {/* Headline */}
        <h1 style={{
          fontFamily: 'var(--serif)', fontWeight: 400, lineHeight: .96,
          fontSize: 'clamp(36px,5.2vw,68px)',
          letterSpacing: '-.02em', color: 'var(--ink)',
          maxWidth: 780, marginBottom: 18,
          animation: 'fadeUpHero 1.1s .7s both'
        }}>
          Elegant Bouquets<br />
          <em style={{
            fontStyle: 'italic',
            background: 'linear-gradient(135deg, var(--gold-deep) 10%, var(--blush) 90%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text'
          }}>for Every Moment.</em>
        </h1>

        {/* CTAs */}
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 20, animation: 'fadeUpHero 1.1s 1.2s both' }}>
          <button
            className="btn btn-primary btn-lg"
            onClick={() => nav('shop')}
            style={{ borderRadius: 100, background: 'linear-gradient(135deg,var(--gold-deep),var(--blush))', border: 'none', color: '#fff', boxShadow: '0 8px 32px rgba(44,85,48,.28)' }}>
            Shop
          </button>
          <button
            className="btn btn-lg"
            onClick={() => nav('custom-order')}
            style={{ borderRadius: 100, background: 'transparent', color: 'var(--ink)', boxShadow: 'inset 0 0 0 1.5px var(--ink)', marginLeft: 0 }}>
            Book Consultation
          </button>
        </div>

        {/* Stats */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap', justifyContent: 'center', animation: 'fadeUpHero 1.1s 1.5s both' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 24, color: 'var(--ink)', lineHeight: 1 }}>Lagos</span>
            <span style={{ fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.10em', color: 'var(--ink-soft)', textTransform: 'uppercase' }}>& Beyond</span>
          </div>
        </div>
      </div>

      {/* ── Keyframes (injected once) ─────────────────── */}
      <style>{`
        @keyframes kenburns {
          0%   { transform: scale(1.00) translate(0%,0%); }
          50%  { transform: scale(1.06) translate(-1.2%,-1.5%); }
          100% { transform: scale(1.03) translate(1.2%,0.5%); }
        }
        @keyframes kenburnsActive {
          0%   { transform: scale(1.04) translate(0%,0%); }
          50%  { transform: scale(1.12) translate(-1.8%,-2%); }
          100% { transform: scale(1.07) translate(1.8%,0.8%); }
        }
        @keyframes panelPulse {
          0%   { opacity: .5; }
          100% { opacity: 0; }
        }
        @keyframes fadeUpHero {
          from { opacity: 0; transform: translateY(28px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>);

}

function TrustStrip() {
  const items = [
  [I.truck, 'Nationwide Delivery', 'Lagos & major cities covered'],
  [I.shield, 'Premium Flowers', 'Long-lasting, lifelike quality'],
  [I.gift, 'Fully Bespoke', 'Every arrangement made to order']];

  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 category</p>
          <h2 style={{ fontSize: 'clamp(34px,5vw,60px)', marginTop: 12 }}>Every bloom, <em style={{ fontStyle: 'italic' }}>crafted to last</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) =>
        i === 5 ? null : (
        <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]} variant={c.tag} 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(13,12,10,.92) 0%, rgba(13,12,10,.55) 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,247,252,.82)', 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>
        )
        )}

        {/* ── Custom Theme Request card ── */}
        <Reveal delay={3} className="cat-tile" onClick={() => nav('custom-order')} style={{ cursor: 'pointer' }}>
          {/* Solid background */}
          <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-lg)', background: 'var(--ink)' }} />
          {/* Content */}
          <div style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-lg)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 22 }}>
            {/* Top badge */}
            <span style={{ background: 'var(--gold-deep)', color: '#fff', borderRadius: 100, padding: '5px 14px', fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 500, alignSelf: 'flex-start' }}>Bespoke</span>
            {/* Bottom text */}
            <div>
              <h3 style={{ fontSize: 25, color: '#fff', marginBottom: 8, lineHeight: 1.1 }}>Custom Theme<br/>Request</h3>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,.62)', lineHeight: 1.6, marginBottom: 14 }}>Have a vision in mind? Describe it — we'll quote you personally within 48 hours.</p>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--gold)', fontWeight: 500 }}>
                Start brief <I.arrow width={15} height={15} />
              </span>
            </div>
          </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)' }}>Clients <em style={{ fontStyle: 'italic' }}>love</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="HePortal Nig — Luxury Florals" src={IMG.about.founder} variant="ph-gold" 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 }}>“We bring your mental picture to life — excellently.”</p>
            <p style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 12, letterSpacing: '.12em' }}>— HEPORTAL NIG, LAGOS</p>
          </div>
        </Reveal>
        <Reveal delay={2}>
          <p className="eyebrow">The HePortal story</p>
          <h2 style={{ fontSize: 'clamp(32px,4.5vw,54px)', margin: '14px 0 20px' }}>Your vision, brought to life <em style={{ fontStyle: 'italic' }}>excellently.</em></h2>
          <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 18 }}>
            HePortal Nig is a Lagos-based luxury floral atelier specialising in premium quality artificial flowers that look and feel real — crafted for weddings, funerals, events and gifts. Every arrangement is fully bespoke, designed from scratch to match your exact vision.
          </p>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 30 }}>
            {['Premium quality artificial flowers — lifelike and long-lasting', 'Fully bespoke to your vision, colour and occasion', 'Weddings, funerals, events, gifts — any occasion'].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 ─────────────────────────────────── */
function BespokeSection() {
  const { nav } = useStore();
  return (
    <section style={{ background: 'var(--ink)', padding: 'clamp(64px,9vw,110px) var(--gutter)' }}>
      <div className="container wide">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <p className="eyebrow" style={{ color: 'rgba(255,255,255,.45)' }}>Beyond the catalogue</p>
          <h2 style={{ fontSize: 'clamp(36px,5.5vw,66px)', color: '#fff', marginTop: 12 }}>
            Your perfect arrangement, <em style={{ fontStyle: 'italic', background: 'linear-gradient(135deg,#B88A30 10%,#C85A72 90%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>designed for you.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,.55)', maxWidth: 520, margin: '14px auto 0', lineHeight: 1.75 }}>
            Every occasion is different. Choose a fixed package or submit a bespoke brief — either way, your flowers are crafted exactly to your vision.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {/* Packages card */}
          <Reveal delay={1}>
            <div
              onClick={() => nav('packages')}
              style={{ background: 'linear-gradient(140deg,var(--cream-deep),var(--ivory))', border: '1px solid rgba(255,255,255,.06)', 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 }}
              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='none'; }}>
              <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 8v12M12 8c-1-3-5-3-5-1s4 1 5 1Zm0 0c1-3 5-3 5-1s-4 1-5 1Z" strokeLinejoin="round"/></svg>
              </div>
              <div>
                <p style={{ fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8, fontWeight: 500 }}>Packages</p>
                <h3 style={{ fontSize: 'clamp(24px,3vw,36px)', color: 'var(--ink)', marginBottom: 10, lineHeight: 1.1 }}>Floral packages,<br/><em style={{ fontStyle: 'italic' }}>priced clearly.</em></h3>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7 }}>Three pre-configured packages from ₦85,000. Choose your tier, share your vision, and we create it.</p>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
                {[['₦85k', 'Boutique'],['₦250k', 'Bridal Suite'],['₦500k', 'Grand Wedding']].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(--ink-soft)', fontWeight: 500 }}>View packages</span>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ink-soft)" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          </Reveal>

          {/* Custom Order card */}
          <Reveal delay={2}>
            <div
              onClick={() => nav('custom-order')}
              style={{ background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 'var(--r-xl)', padding: 'clamp(28px,4vw,48px)', cursor: 'pointer', transition: 'transform .4s cubic-bezier(.2,.8,.2,1), background .3s', display: 'flex', flexDirection: 'column', gap: 18, backdropFilter: 'blur(8px)' }}
              onMouseEnter={e => { e.currentTarget.style.transform='translateY(-5px)'; e.currentTarget.style.background='rgba(255,255,255,.1)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform='none'; e.currentTarget.style.background='rgba(255,255,255,.06)'; }}>
              <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: 'rgba(255,255,255,.5)', marginBottom: 8, fontWeight: 500 }}>Custom Order</p>
                <h3 style={{ fontSize: 'clamp(24px,3vw,36px)', color: '#fff', marginBottom: 10, lineHeight: 1.1 }}>Your floral vision,<br/><em style={{ fontStyle: 'italic', background: 'linear-gradient(135deg,#B88A30,#C85A72)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>quoted personally.</em></h3>
                <p style={{ fontSize: 15, color: 'rgba(255,255,255,.62)', lineHeight: 1.7 }}>Have something specific in mind? Describe your flowers — we'll quote you personally within 48 hours.</p>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
                {['Any occasion','Any scale','48h quote'].map(t => (
                  <div key={t} style={{ background: 'rgba(255,255,255,.1)', borderRadius: 100, padding: '6px 14px', fontSize: 12, color: 'rgba(255,255,255,.7)', fontWeight: 500 }}>{t}</div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 'auto' }}>
                <span style={{ fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)', fontWeight: 500 }}>Start a brief</span>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Booking CTA */}
        <div style={{ marginTop: 20, border: '1px solid rgba(255,255,255,.1)', borderRadius: 'var(--r-lg)', padding: '20px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,.75)', lineHeight: 1.6 }}>Not sure what you need? <strong style={{ color: '#fff' }}>Book a free consultation call</strong> — we'll guide you to the perfect arrangement for your occasion.</p>
          </div>
          <button className="btn" onClick={() => nav('booking')}
            style={{ background: 'transparent', color: '#fff', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,.3)', borderRadius: 100, padding: '14px 28px', fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 500, whiteSpace: 'nowrap', flexShrink: 0 }}>
            Book a 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">Real clients, real flowers</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 { nav } = useStore();
  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 the magic <em style={{ fontStyle: 'italic' }}>in the making</em></h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 28 }}>
            Watch behind-the-scenes process reels, arrangement reveals and real event setups on our Instagram — updated weekly with fresh floral inspiration.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://www.instagram.com/heportal_nig" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37Z"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
              Follow on Instagram
            </a>
            <a href="https://www.tiktok.com/@heportal_nig" target="_blank" rel="noopener noreferrer" className="btn btn-outline"><I.tiktok width={17} height={17} /> @heportal_nig</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="party setup" src={src} style={{ aspectRatio: '1', borderRadius: 'var(--r-md)' }} />
              <div className="social-ov" style={{ position: 'absolute', inset: 0, background: 'rgba(44,85,48,.48)', 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 />
      <Bestsellers />
      <FeaturedCategories />
      <EditorialSplit />
      <BespokeSection />
      <Testimonials />
      <TikTokSection />
      <Newsletter />
    </>);

}

Object.assign(window, { HomePage });