/* ============================================================
   HOME PAGE
   ============================================================ */
function VideoPanel({ video, still, alt, delay, radius }) {
  const ref = React.useRef(null);
  const [live, setLive] = React.useState(false);
  React.useEffect(() => {
    let url, cancelled = false;
    const v = ref.current;
    if (v) v.muted = true;
    // The preview host does not serve HTTP Range requests, which <video src> needs;
    // fetch the clip fully and hand the element an in-memory object URL instead.
    fetch(video).then(r => r.blob()).then(b => {
      if (cancelled) return;
      url = URL.createObjectURL(b);
      if (!ref.current) return;
      ref.current.src = url;
      ref.current.muted = true;
      ref.current.load();
      const p = ref.current.play();
      if (p && p.catch) p.catch(() => {});
    }).catch(() => {});
    return () => { cancelled = true; if (url) URL.revokeObjectURL(url); };
  }, [video]);
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: 180, overflow: 'hidden', background: 'var(--cream-deep)', borderRadius: radius || 0, animation: `fadeUpHero 1s ${delay}s both` }}>
      <img src={still} alt={alt} loading="eager" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <video ref={ref} autoPlay muted loop playsInline preload="auto"
        onPlaying={() => setLive(true)} onTimeUpdate={() => setLive(true)}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: live ? 1 : 0, transition: 'opacity .5s ease' }} />
    </div>
  );
}

function HomeHero() {
  const { nav } = useStore();

  const tiles = [
    { video: 'uploads/hero-video-1-ba981dbc.webm', still: 'uploads/craftycle-caketopper.jpg', alt: 'Custom cake topper' },
    { video: 'uploads/hero-video-2.webm', still: 'uploads/craftycle-pinata-dino.jpg', alt: 'Dinosaur piñata' },
    { video: 'uploads/hero-video-3.webm', still: 'uploads/craftycle-favourboxes-donut.jpg', alt: 'Themed treat boxes' },
    { video: 'uploads/hero-video-4.webm', still: 'uploads/craftycle-partyprops-jungle.jpg', alt: 'Jungle party centrepiece' },
  ];

  return (
    <section style={{
      position: 'relative', width: '100%', minHeight: 620, overflow: 'hidden',
      background: 'var(--cream)',
      display: 'grid', gap: 'clamp(8px,0.9vw,14px)', padding: 'clamp(8px,0.9vw,14px)',
    }} className="hero-collage">

      {/* ── Text panel — solid, no media wash ─────────── */}
      <div style={{
        gridArea: 'txt', position: 'relative', zIndex: 2,
        background: 'linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 100%)',
        borderRadius: 'clamp(14px,1.6vw,22px)',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: 'clamp(34px,4.4vw,64px)',
      }}>
        <p style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 500, letterSpacing: '.22em', textTransform: 'uppercase',
          color: 'var(--gold-deep)', marginBottom: 22, animation: 'fadeUpHero .9s .3s both'
        }}>
          <span style={{ display: 'block', width: 30, height: 1, background: 'var(--gold-deep)' }} />
          Craft Décor Production Company
        </p>

        <h1 style={{
          fontFamily: 'var(--serif)', fontWeight: 400, lineHeight: .98,
          fontSize: 'clamp(44px,5vw,84px)', letterSpacing: '-.02em', color: 'var(--ink)',
          marginBottom: 20, animation: 'fadeUpHero 1.1s .55s both'
        }}>
          Cake toppers, piñatas &amp;<br />
          <em style={{
            fontStyle: 'italic',
            background: 'linear-gradient(135deg, var(--gold-deep) 10%, var(--blush-deep) 90%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'
          }}>party props, handmade.</em>
        </h1>

        <p style={{
          fontFamily: 'var(--sans)', fontSize: 16.5, color: 'var(--ink-soft)', maxWidth: 460, lineHeight: 1.7,
          marginBottom: 34, animation: 'fadeUpHero 1.1s .8s both'
        }}>
          Treat boxes, standees, acrylic signage and centrepieces — designed around your theme and made to order in our Lekki, Lagos studio.
        </p>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'nowrap', alignItems: 'center', marginBottom: 30, animation: 'fadeUpHero 1.1s 1.05s both' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('shop')}
            style={{ letterSpacing: '.05em', textTransform: 'uppercase', fontSize: 12.5, padding: '18px 34px' }}>
            Shop the Collection &nbsp;→</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(--line)', letterSpacing: '.05em', textTransform: 'uppercase', fontSize: 12.5, padding: '18px 30px' }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = 'inset 0 0 0 1.5px var(--ink)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = 'inset 0 0 0 1.5px var(--line)'; }}>
            Start a custom brief</button>
        </div>

        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', animation: 'fadeUpHero 1.1s 1.25s both' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '9px 15px', borderRadius: 100, background: 'var(--ivory)', boxShadow: 'inset 0 0 0 1px var(--line)', fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-soft)' }}>
            <I.ig width={14} height={14} style={{ color: 'var(--gold-deep)' }} />
            <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>14K+</strong>&nbsp;on Instagram
          </span>
          <span style={{ display: 'inline-flex', alignItems: 'center', padding: '9px 15px', borderRadius: 100, background: 'var(--ivory)', boxShadow: 'inset 0 0 0 1px var(--line)', fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-soft)' }}>Made to order</span>
        </div>
      </div>

      {/* ── Video collage — full-colour, no wash ─────── */}
      <div style={{ gridArea: 'v1' }}><VideoPanel {...tiles[0]} delay={0.35} radius="clamp(14px,1.6vw,22px)" /></div>
      <div style={{ gridArea: 'v2' }}><VideoPanel {...tiles[1]} delay={0.5} radius="clamp(14px,1.6vw,22px)" /></div>
      <div style={{ gridArea: 'v3' }}><VideoPanel {...tiles[2]} delay={0.65} radius="clamp(14px,1.6vw,22px)" /></div>
      <div style={{ gridArea: 'v4' }}><VideoPanel {...tiles[3]} delay={0.8} radius="clamp(14px,1.6vw,22px)" /></div>

      <style>{`
        .hero-collage {
          grid-template-columns: 1.15fr 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-template-areas: "txt v1 v2" "txt v3 v4";
          height: calc(100svh - 128px); min-height: 480px; max-height: 720px;
        }
        @media (max-width: 860px) {
          .hero-collage {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 30vw 30vw;
            grid-template-areas: "txt txt" "v1 v2" "v3 v4";
            height: auto; max-height: none;
          }
        }
        @keyframes fadeUpHero { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </section>);

}

function TrustStrip() {
  const items = [
  [I.truck, 'Worldwide Shipping', 'Multiple shipping options'],
  [I.shield, 'Secure dual-currency checkout', 'Multiple payment options'],
  [I.gift, '100% handmade', 'Every piece crafted 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 detail, <em style={{ fontStyle: 'italic' }}>handmade</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(42,32,24,.92) 0%, rgba(42,32,24,.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,239,.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>
        )
        )}
      </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)' }}>Party parents <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="Behind the scenes in our studio" 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 }}>"Every little detail should spark joy."</p>
            <p style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 12, letterSpacing: '.12em' }}>— THE STUDIO 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' }}>We make the <em style={{ fontStyle: 'italic' }}>magic</em> you celebrate with</h2>
          <p style={{ fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 18 }}>
            We started with a simple vision — that every celebration deserves to look extraordinary. Today we design and hand-craft party props, custom favour boxes, invitation suites, 3D toppers and full themed bundles, shipped worldwide.
          </p>
          <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 30 }}>
            {['100% handmade, made to order', 'Fully custom themes — any character, any colour', 'Flat-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 ─────────────────────────────────── */
function BespokeSection() {
  const { nav, money } = useStore();
  const steps = [
    ['01', 'Share your vision', 'Theme, characters, colours, quantities and your event date. Send photos, Pinterest links, even a voice note — however it\u2019s easiest for you.'],
    ['02', 'Get a personal quote', 'A real person from our studio replies within 48 hours with pricing and a realistic timeline, whatever the size of the brief.'],
    ['03', 'Approve your proof', 'Two rounds of digital design proofs are included, free, before we cut, print or paint a single piece.'],
    ['04', 'We handcraft & ship', 'Your order is made by hand in our Lagos studio, quality-checked, then flat-packed and shipped to your door.'],
  ];
  return (
    <section style={{ background: 'var(--ivory)', padding: 'clamp(64px,9vw,110px) var(--gutter)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container wide">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <p className="eyebrow" style={{ color: 'var(--gold-deep)' }}>Beyond the catalogue</p>
          <h2 style={{ fontSize: 'clamp(36px,5.5vw,66px)', marginTop: 12 }}>
            Built exactly <em style={{ fontStyle: 'italic', background: 'linear-gradient(135deg,#C8971F 10%,#C07B4A 90%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>for you.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: 540, margin: '14px auto 0', lineHeight: 1.75 }}>
            No fixed menu, no limits. Every bespoke piece is designed from scratch around your theme, then handcrafted in our studio — from a single centrepiece to a full party install.
          </p>
        </div>

        <div className="edit-split" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center', marginBottom: 56 }}>
          <Reveal style={{ position: 'relative' }}>
            <Ph label="Hand-finishing a custom piece in the studio" src="https://images.unsplash.com/photo-1558636508-e0db3814bd1d?auto=format&fit=crop&w=900&q=80" variant="ph-gold" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)' }} />
            <div style={{ position: 'absolute', top: 22, left: -18, background: 'var(--cream)', padding: '14px 20px', borderRadius: 'var(--r-md)', boxShadow: 'var(--shadow-md)' }}>
              <p style={{ fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--ink-faint)', marginBottom: 4 }}>Custom pieces from</p>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 600 }}>{money(20000)}</p>
            </div>
          </Reveal>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            {steps.map(([n, t, d]) => (
              <div key={n} style={{ display: 'flex', gap: 20 }}>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 600, color: 'var(--gold-deep)', flexShrink: 0, width: 46 }}>{n}</span>
                <div>
                  <h4 style={{ fontSize: 18.5, fontWeight: 600, marginBottom: 5 }}>{t}</h4>
                  <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.65 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 44 }}>
          {['Any theme, any character', 'Any scale — one piece or a full install', '48h personal quote', '2 free proof revisions'].map(t => (
            <div key={t} style={{ background: 'var(--cream-deep)', borderRadius: 100, padding: '10px 18px', fontSize: 13.5, fontWeight: 500, color: 'var(--ink)' }}>{t}</div>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
          <button className="btn btn-gold btn-lg" onClick={() => nav('custom-order')}>Start a custom brief &nbsp;→</button>
          <button className="btn btn-outline btn-lg" onClick={() => nav('booking')}>Not sure yet? Book a 30-min 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 parents, real parties</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 videos, unboxings, party setups and full decorations on our social channels — updated weekly with fresh inspiration.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#" className="btn btn-primary">
              <I.tiktok width={17} height={17} /> Follow on TikTok
            </a>
            <a href="#" 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="party setup" src={src} style={{ aspectRatio: '1', borderRadius: 'var(--r-md)' }} />
              <div className="social-ov" style={{ position: 'absolute', inset: 0, background: 'rgba(200,151,31,.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 />
      <FeaturedCategories />
      <Bestsellers />
      <EditorialSplit />
      <BespokeSection />
      <Testimonials />
      <TikTokSection />
      <Newsletter />
    </>);

}

Object.assign(window, { HomePage });