// home.jsx
const { useState: uS_h, useEffect: uE_h, useRef: uR_h } = React;

function HeroParallax() {
  const [mouse, setMouse] = uS_h({ x: 0, y: 0 });
  const [y, setY] = uS_h(0);
  uE_h(() => {
    const fn = () => setY(window.scrollY);
    const mm = (e) => setMouse({ x: (e.clientX / window.innerWidth - 0.5) * 2, y: (e.clientY / window.innerHeight - 0.5) * 2 });
    window.addEventListener("scroll", fn, { passive: true });
    window.addEventListener("mousemove", mm);
    return () => { window.removeEventListener("scroll", fn); window.removeEventListener("mousemove", mm); };
  }, []);
  return (
    <section style={{
      position: "relative", minHeight: "100dvh", overflow: "hidden",
      background: "radial-gradient(ellipse at 80% 20%, #1AADBA 0%, #0E8A96 35%, #0B5A66 75%, #062E36 100%)",
      display: "flex", alignItems: "center", color: "var(--color-cream)"
    }}>
      {/* Floating bokeh dots */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        {[0,1,2,3,4,5,6,7].map((i) => {
          const sz = 60 + i * 18;
          return <div key={i} style={{
            position: "absolute",
            left: `${(i * 37) % 90 + 5}%`, top: `${(i * 53) % 80 + 8}%`,
            width: sz, height: sz, borderRadius: "50%",
            background: `radial-gradient(circle, rgba(92,197,207,${0.10 + (i%3)*0.04}) 0%, transparent 70%)`,
            transform: `translate(${mouse.x * (i+1) * 4}px, ${mouse.y * (i+1) * 4 - y * 0.1}px)`,
            transition: "transform 400ms cubic-bezier(0.16,1,0.3,1)"
          }}/>;
        })}
      </div>

      {/* Subtle grain overlay */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.05, mixBlendMode: "overlay",
        background: "repeating-conic-gradient(from 0deg, rgba(255,255,255,0.2) 0deg 2deg, transparent 2deg 4deg)" }}/>

      <div className="container" style={{ position: "relative", zIndex: 2, paddingTop: 120, paddingBottom: 80 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 48, alignItems: "center" }} className="hero-grid">
          <div style={{ maxWidth: 600 }}>
            <Reveal as="div" delay={100}>
              <span className="section-label" style={{ color: "var(--color-peach)" }}>Open Tue–Sun · 8am–3pm · Capitola, CA</span>
            </Reveal>
            <Reveal as="h1" delay={250} className="h1" style={{ color: "var(--color-cream)", marginTop: 20, marginBottom: 24, textShadow: "0 4px 30px rgba(0,0,0,0.3)" }}>
              Your friend when<br/>gluten <span className="hero-accent">isn't.</span>
            </Reveal>
            <Reveal as="p" delay={550} style={{ fontSize: 19, lineHeight: 1.55, color: "rgba(253,248,240,0.88)", maxWidth: 480, marginBottom: 32 }}>
              Every batch baked fresh. No gluten. No peanuts.<br/>
              The only dedicated GF bakery in Santa Cruz County.
            </Reveal>
            <Reveal as="div" delay={800} style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Link to="/menu" className="btn btn-primary" style={{ padding: "16px 28px", fontSize: 15, background: "var(--color-cream)", color: "var(--color-teal-deep)" }}>What's fresh today →</Link>
              <Link to="/menu" className="btn btn-cream-outline" style={{ padding: "16px 28px", fontSize: 15 }}>See the menu</Link>
            </Reveal>
          </div>
          <Reveal delay={400} style={{ transform: `translate(${mouse.x * -8}px, ${mouse.y * -6}px)`, transition: "transform 600ms cubic-bezier(0.16,1,0.3,1)" }}>
            <HeroTurntable/>
          </Reveal>
        </div>
      </div>

      <div style={{
        position: "absolute", bottom: 28, left: 40,
        color: "rgba(253,248,240,0.65)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase",
        display: "flex", alignItems: "center", gap: 10
      }}>
        <div style={{ width: 28, height: 1, background: "linear-gradient(to right, rgba(253,248,240,0.6), transparent)" }}/>
        <span>Scroll</span>
      </div>

      <style>{`
        @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </section>
  );
}

function TrustBar() {
  const items = [
    "14-time Award Winner", "13 Years Baking", "100% Gluten & Peanut-Free",
    "Only Dedicated GF Bakery in Santa Cruz County", "Made From Scratch, Every Day",
    "Open Tue–Sun · 8am–3pm", "Capitola, CA"
  ];
  const row = (
    <>
      {items.map((t, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 48 }}>
          <span style={{ fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 400, fontSize: 18, color: "var(--color-cream)", whiteSpace: "nowrap" }}>{t}</span>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--color-honey)", flexShrink: 0 }}/>
        </span>
      ))}
    </>
  );
  return (
    <div style={{ background: "var(--color-espresso)", padding: "22px 0", overflow: "hidden", whiteSpace: "nowrap" }}>
      <div className="marquee-track">{row}{row}</div>
    </div>
  );
}

const featuredMenu = [
  { name: "Croissant",     tone: "warm",    img: "brand/photos/croissant-single.jpg" },
  { name: "Donut",         tone: "default", img: "brand/photos/donuts-new.jpg" },
  { name: "Cinnamon roll", tone: "warm",    img: "brand/photos/cinnamon-roll-branded.jpg" },
  { name: "Bear claw",     tone: "warm",    img: "brand/photos/bear-claw.jpg" },
  { name: "Scone",         tone: "default", img: "brand/photos/scone-blueberry.jpg" },
  { name: "Cookie",        tone: "default", img: "brand/photos/cookie.jpg" },
  { name: "Cupcake",       tone: "warm",    img: "brand/photos/cupcake-lavender.jpg" },
];

function DailyCase() {
  const dcRef = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    gsap.fromTo(
      dcRef.current.querySelectorAll('article'),
      { y: 40, opacity: 0 },
      { y: 0, opacity: 1, duration: 0.7, stagger: 0.1, ease: "power2.out",
        scrollTrigger: { trigger: dcRef.current, start: "top 75%", once: true } }
    );
  }, []);
  return (
    <section className="section" style={{ background: "var(--color-cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "end", marginBottom: 56, flexWrap: "wrap" }}>
          <div>
            <Reveal><span className="section-label">Fresh Today</span></Reveal>
            <Reveal delay={120} as="h2" className="h2" style={{ marginTop: 16, maxWidth: 600 }}>What's in the case.</Reveal>
            <Reveal delay={240} as="p" className="lead" style={{ marginTop: 16 }}>
              Baked every morning. Some things sell out by 9am.
            </Reveal>
          </div>
          <Reveal delay={360}>
            <Link to="/menu" className="btn btn-ghost">See full menu →</Link>
          </Reveal>
        </div>

        <div ref={dcRef} className="no-scrollbar" style={{
          display: "flex",
          overflowX: "auto",
          scrollSnapType: "x mandatory",
          gap: 20,
          paddingBottom: 12,
          scrollPaddingLeft: 24,
          WebkitOverflowScrolling: "touch",
          marginLeft: -8,
          marginRight: -8,
          paddingLeft: 8,
          paddingRight: 8
        }}>
          {featuredMenu.map((item, i) => (
            <div key={i} style={{
              flexShrink: 0,
              width: "clamp(260px, 32vw, 360px)",
              scrollSnapAlign: "start"
            }}>
              <MenuCard item={item} aspect="4/3"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MenuCard({ item, aspect = "4/3" }) {
  return (
    <article style={{
      background: "var(--color-white-warm)",
      border: "1px solid var(--color-border)",
      borderRadius: 20,
      overflow: "hidden",
      height: "100%",
      display: "flex", flexDirection: "column",
      transition: "transform 250ms var(--ease-out-expo), box-shadow 250ms var(--ease-out-expo), border-color 250ms",
      cursor: "pointer"
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; e.currentTarget.style.borderColor = "var(--color-border-hover)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; e.currentTarget.style.borderColor = "var(--color-border)"; }}
    >
      {item.img ? (
        <div style={{ aspectRatio: aspect, width: "100%", flex: 1, minHeight: 0, overflow: "hidden", position: "relative" }}>
          <img src={item.img} alt={item.name}
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
        </div>
      ) : (
        <div className={`ph ${item.tone}`} style={{ aspectRatio: aspect, width: "100%", flex: 1, minHeight: 0 }}>
          <span className="ph-label">{item.name.toLowerCase()}</span>
        </div>
      )}
      <div style={{ padding: "18px 22px 20px" }}>
        <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 22, lineHeight: 1.1 }}>{item.name}</div>
      </div>
    </article>
  );
}

function WeddingCallout() {
  const bgRef = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const imgs = bgRef.current.querySelectorAll('div[style]');
    imgs.forEach((img, i) => {
      gsap.to(img, {
        yPercent: (i % 2 === 0 ? -8 : 8), ease: "none",
        scrollTrigger: { trigger: bgRef.current, start: "top bottom", end: "bottom top", scrub: 1 }
      });
    });
  }, []);
  return (
    <section className="section" style={{ background: "var(--color-espresso)", color: "var(--color-cream)", position: "relative", overflow: "hidden" }}>
      {/* BG masonry */}
      <div ref={bgRef} style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16, padding: 24, opacity: 0.28 }} aria-hidden>
        <div style={{ height: "100%", borderRadius: 16, backgroundImage: "url('brand/photos/lp-croissant-tray.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}/>
        <div style={{ height: "100%", borderRadius: 16, backgroundImage: "url('brand/photos/scone-blueberry.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}/>
        <div style={{ height: "100%", borderRadius: 16, backgroundImage: "url('brand/photos/cupcake-lavender.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}/>
        <div style={{ height: "100%", borderRadius: 16, backgroundImage: "url('brand/photos/site-wedding-sunflower.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}/>
        <div style={{ height: "100%", borderRadius: 16, backgroundImage: "url('brand/photos/croissant-almond.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}/>
        <div style={{ height: "100%", borderRadius: 16, backgroundImage: "url('brand/photos/wedding-cake.png')", backgroundSize: "cover", backgroundPosition: "center" }}/>
      </div>
      <div className="container" style={{ position: "relative", zIndex: 2, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
        <div className="wc-text">
          <Reveal><span className="section-label peach">Wedding Cakes</span></Reveal>
          <Reveal delay={120} as="h2" className="h2" style={{ color: "var(--color-cream)", marginTop: 16, marginBottom: 24 }}>
            14 years of <em style={{ fontWeight: 400, color: "var(--color-peach)" }}>I&nbsp;do</em> moments.
          </Reveal>
          <Reveal delay={240} as="p" style={{ color: "rgba(253,248,240,0.75)", fontSize: 17, lineHeight: 1.7, maxWidth: 520, marginBottom: 32 }}>
            Couples with celiac, gluten sensitivities, and food allergies deserve a cake that's remarkable — not a consolation. We've been delivering that since 2011.
          </Reveal>
          <Reveal delay={360}>
            <Link to="/weddings" className="btn btn-cream-outline" style={{ padding: "14px 26px" }}>See wedding cakes →</Link>
          </Reveal>
        </div>
        <Reveal delay={280}>
          <div style={{
            width: "100%", aspectRatio: "4/5", borderRadius: 20, overflow: "hidden",
            boxShadow: "0 30px 80px rgba(0,0,0,0.4)", position: "relative"
          }}>
            <img src="brand/photos/site-wedding-sunflower.jpg" alt="Wedding cake with fresh florals"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 880px) { .wc-text + div, section:has(.wc-text) .container { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function AboutTeaser() {
  return (
    <section className="section" style={{ background: "var(--color-cream)" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
        <Reveal delay={100}>
          <div style={{ width: "100%", aspectRatio: "4/5", borderRadius: 20, overflow: "hidden", position: "relative", boxShadow: "var(--shadow-card)" }}>
            <img src="brand/photos/scone-blueberry.jpg" alt="Fresh-baked pastries from Melinda's kitchen"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}/>
          </div>
        </Reveal>
        <div className="at-text">
          <Reveal><span className="section-label">Our Story</span></Reveal>
          <Reveal delay={120} as="h2" className="h2" style={{ marginTop: 16, marginBottom: 24 }}>
            Built on one belief: every person deserves food worth <em style={{ fontWeight: 400, color: "var(--color-honey)" }}>savoring.</em>
          </Reveal>
          <Reveal delay={240} as="p" className="body" style={{ marginBottom: 32 }}>
            Melinda opened the only fully gluten-and-peanut-free bakery in Santa Cruz County because everyone deserves food this good — dietary restrictions included. She still bakes everything herself, every morning.
          </Reveal>
          <Reveal delay={360}>
            <Link to="/about" className="btn btn-ghost" style={{ padding: "10px 0", fontSize: 15 }}>Read her story →</Link>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { section:has(.at-text) .container { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function RestockSignup() {
  const [email, setEmail] = uS_h("");
  const [done, setDone] = uS_h(false);
  return (
    <section className="section-tight" style={{ background: "var(--color-biscuit)", minHeight: "auto" }}>
      <div className="container" style={{ maxWidth: 620, textAlign: "center" }}>
        <Reveal><span className="section-label">Never miss a batch</span></Reveal>
        <Reveal delay={120} as="h3" className="h3" style={{ marginTop: 14, marginBottom: 14 }}>
          Fresh croissants by 8am.<br/>Gone by 9.
        </Reveal>
        <Reveal delay={240} as="p" className="body" style={{ margin: "0 auto 28px", color: "var(--color-cocoa)" }}>
          Our most popular items sell out fast — sometimes before we open. Drop your email and we'll let you know when they're back.
        </Reveal>
        <Reveal delay={360}>
          {!done ? (
            <form onSubmit={(e) => { e.preventDefault(); if (email) setDone(true); }}
              style={{ display: "flex", gap: 8, maxWidth: 460, margin: "0 auto", flexWrap: "wrap" }}>
              <input
                type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="your@email.com"
                style={{
                  flex: 1, minWidth: 200, padding: "14px 18px",
                  borderRadius: 9999, border: "1px solid var(--color-border-hover)",
                  background: "var(--color-white-warm)", fontFamily: "var(--body)", fontSize: 14
                }}
              />
              <button type="submit" className="btn btn-primary" style={{ padding: "14px 22px" }}>Get notified</button>
            </form>
          ) : (
            <div style={{ fontFamily: "var(--display)", fontStyle: "italic", fontSize: 20, color: "var(--color-honey)" }}>
              You're on the list. We'll be in touch.
            </div>
          )}
        </Reveal>
      </div>
    </section>
  );
}

function PressSection() {
  const press = [
    { label: "Yelp", stat: "4.5", unit: "★", sub: "200+ reviews", href: "https://www.yelp.com/biz/melindas-gluten-free-bakery-capitola" },
    { label: "TripAdvisor", stat: "Travelers'", unit: "Choice", sub: "4 years running", href: "https://www.tripadvisor.com/Restaurant_Review-g32168-d7745064-Reviews-Melinda_s_Gluten_Free_Bakery-Capitola_California.html" },
    { label: "Good Times SC", stat: "14×", unit: "", sub: "Best Bakery winner", href: "https://www.goodtimes.sc/melindas-gluten-free-bakery-is-a-capitola-treat/" },
    { label: "HappyCow", stat: "Top", unit: "Rated", sub: "GF bakery in region", href: "https://www.happycow.net/reviews/melindas-gluten-free-bakery-capitola-307074" },
    { label: "Find Me GF", stat: "#1", unit: "", sub: "in Santa Cruz County", href: "https://www.findmeglutenfree.com/biz/melindas-gluten-free/6357772050366464" },
    { label: "Santa Cruz Life", stat: "Best", unit: "", sub: "GF desserts pick", href: "https://santacruzlife.com/gluten-free-desserts/" },
    { label: "California.com", stat: "Top", unit: "", sub: "CA GF bakery list", href: "https://www.california.com/top-california-bakeries-for-gluten-free-goodies/" },
    { label: "A Gluten Free Plate", stat: "Must", unit: "Visit", sub: "Santa Cruz guide", href: "https://aglutenfreeplate.com/gluten-free-restaurants-in-santa-cruz/" },
  ];
  return (
    <section className="section-tight" style={{ background: "var(--color-espresso)", minHeight: "auto" }}>
      <div className="container">
        <Reveal style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="section-label" style={{ color: "var(--color-honey)" }}>As Featured On</span>
          <h2 className="h3" style={{ marginTop: 12, color: "var(--color-cream)" }}>They love us. We think you will too.</h2>
        </Reveal>
        <div className="press-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {press.map((p, i) => (
            <Reveal key={i} delay={i * 60}>
              <a href={p.href} target="_blank" rel="noopener" style={{ textDecoration: "none", display: "block" }}>
                <div style={{
                  background: "rgba(253,248,240,0.06)", border: "1px solid rgba(253,248,240,0.12)",
                  borderRadius: 16, padding: "28px 16px", textAlign: "center",
                  transition: "background 200ms, border-color 200ms",
                  cursor: "pointer", height: "100%",
                  display: "flex", flexDirection: "column", justifyContent: "center", minHeight: 130
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(253,248,240,0.12)"; e.currentTarget.style.borderColor = "var(--color-honey)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(253,248,240,0.06)"; e.currentTarget.style.borderColor = "rgba(253,248,240,0.12)"; }}
                >
                  <div style={{ fontFamily: "var(--display)", fontSize: 28, fontWeight: 700, color: "var(--color-honey)", lineHeight: 1.1 }}>
                    {p.stat}{p.unit ? " " + p.unit : ""}
                  </div>
                  <div style={{ fontSize: 11, color: "rgba(253,248,240,0.7)", marginTop: 8, lineHeight: 1.3 }}>{p.sub}</div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "var(--color-cream)", marginTop: 6, letterSpacing: "0.02em" }}>{p.label}</div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .press-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 560px) { .press-grid { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

function WhatMakesUsDifferent() {
  const points = [
    { icon: "✦", label: "Dedicated GF facility", detail: "No shared equipment. No cross-contamination risk. Period." },
    { icon: "◎", label: "Made from scratch, every morning", detail: "Nothing frozen. Nothing pre-mixed. Melinda bakes everything herself." },
    { icon: "▲", label: "14-time award winner", detail: "Good Times Best Bakery — 14 consecutive years." },
    { icon: "❋", label: "Santa Cruz County's only", detail: "Fully gluten-and-peanut-free bakery in the county. The only one." },
  ];
  return (
    <section className="section-tight" style={{ background: "var(--color-white-warm)", borderTop: "1px solid var(--color-border)" }}>
      <div className="container">
        <Reveal style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="section-label">Why Melinda's</span>
          <h2 className="h3" style={{ marginTop: 12 }}>Not all gluten-free is the same.</h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 24 }}>
          {points.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                padding: "28px 24px", borderRadius: 20,
                border: "1px solid var(--color-border)",
                background: "var(--color-cream)"
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: "var(--color-honey-light)", display: "grid", placeItems: "center",
                  color: "var(--color-honey)", fontSize: 22, marginBottom: 16
                }}>{p.icon}</div>
                <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 18, marginBottom: 8 }}>{p.label}</div>
                <div style={{ fontSize: 14, color: "var(--color-cocoa)", lineHeight: 1.6 }}>{p.detail}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function AwardsBlock() {
  const ref = React.useRef(null);
  const stats = [
    { num: 13, suffix: "", label: "Years baking" },
    { num: 14, suffix: "×", label: "Best Bakery award" },
    { num: 1, suffix: "", label: "Dedicated GF bakery in the county" },
    { num: 100, suffix: "%", label: "Gluten & peanut free. Everything." },
  ];

  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = ref.current.querySelectorAll('.counter-num');
    els.forEach((el, i) => {
      const target = stats[i].num;
      const obj = { val: 0 };
      gsap.to(obj, {
        val: target,
        duration: 1.6,
        ease: "power2.out",
        scrollTrigger: { trigger: el, start: "top 85%", once: true },
        onUpdate: () => { el.textContent = Math.round(obj.val) + stats[i].suffix; }
      });
    });
  }, []);

  return (
    <section ref={ref} className="section-tight" style={{
      background: "linear-gradient(135deg, #062E36 0%, #0B5A66 55%, #1AADBA22 100%)",
      color: "var(--color-cream)", borderTop: "1px solid rgba(255,255,255,0.06)"
    }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 0 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              textAlign: "center", padding: "52px 24px",
              borderRight: i < 3 ? "1px solid rgba(255,255,255,0.07)" : "none"
            }}>
              <div className="counter-num" style={{
                fontFamily: "var(--display)", fontStyle: "italic",
                fontSize: "clamp(4rem, 7vw, 6rem)", fontWeight: 700,
                lineHeight: 1, color: "var(--color-cream)", marginBottom: 16,
                letterSpacing: "-0.03em"
              }}>{s.num}<span style={{ color: "#5CC5CF", fontSize: "0.6em" }}>{s.suffix}</span></div>
              <div style={{ width: 32, height: 1, background: "rgba(255,255,255,0.2)", margin: "0 auto 14px" }}/>
              <div style={{ fontSize: 11, color: "rgba(253,248,240,0.5)", fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div className="home-page">
      <HeroParallax/>
      <TrustBar/>
      <DailyCase/>
      <WhatMakesUsDifferent/>
      <AwardsBlock/>
      <WeddingCallout/>
      <AboutTeaser/>
      <RestockSignup/>
      <PressSection/>
    </div>
  );
}

Object.assign(window, { HomePage });