// Main app: hero, how-it-works, pricing/packaging, FAQ + the order form.

function Nav() {
  const isMobile = useIsMobile();
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 20,
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      background: "oklch(0.97 0.018 82 / 0.78)",
      borderBottom: "1px solid var(--rule)",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "14px clamp(16px, 4vw, 40px)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "var(--cocoa)", minWidth: 0 }}>
          <Cookie size={28} dough="oklch(0.82 0.06 70)" ring="oklch(0.95 0.04 90)" dots="oklch(0.55 0.14 25)" dotCount={5} />
          <div style={{ minWidth: 0 }}>
            <div className="serif" style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1, whiteSpace: "nowrap" }}>Baking with Nadya</div>
            {!isMobile && <div className="script" style={{ fontSize: 13, color: "var(--terra)", lineHeight: 1, marginTop: 2 }}>sugar cookie commissions</div>}
          </div>
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: isMobile ? 2 : 8 }}>
          {!isMobile && <a href="#how" style={navLinkStyle}>How it works</a>}
          {!isMobile && <a href="#pricing" style={navLinkStyle}>Pricing</a>}
          {!isMobile && <a href="#faq" style={navLinkStyle}>FAQ</a>}
          <a href="#order" style={{ ...navLinkStyle, background: "var(--cocoa)", color: "var(--butter)", borderRadius: 999, padding: "8px 16px", border: "1px solid var(--cocoa)" }}>Order →</a>
        </nav>
      </div>
    </header>
  );
}
const navLinkStyle = {
  padding: "8px 12px",
  fontSize: 14,
  color: "var(--cocoa)",
  textDecoration: "none",
  borderRadius: 999,
};

function Hero() {
  const isMobile = useIsMobile();
  return (
    <section id="top" style={{
      maxWidth: 1180, margin: "0 auto",
      padding: "clamp(48px, 9vw, 110px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 80px)",
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "1.15fr 1fr",
      gap: isMobile ? 40 : "clamp(28px, 5vw, 64px)",
      alignItems: "center",
    }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <div style={{ width: 28, height: 1, background: "var(--terra)" }} />
          <div className="script" style={{ fontSize: 22, color: "var(--terra)", lineHeight: 1 }}>made-to-order, by hand</div>
        </div>
        <h1 className="serif" style={{ fontSize: "clamp(44px, 9vw, 86px)", lineHeight: 1, margin: 0, color: "var(--cocoa)", letterSpacing: -0.5 }}>
          Sugar cookies,
          <br />
          <em style={{ fontStyle: "italic", color: "var(--terra)" }}>thoughtfully</em> iced
          <br />
          for your people.
        </h1>
        <p style={{ marginTop: 24, fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: "var(--cocoa-soft)", maxWidth: 520 }}>
          Hand-decorated sugar cookies for birthdays, showers, holidays, and any other
          excuse to celebrate. Baked, iced, and packaged with care from a small kitchen in Los Angeles.
        </p>
        <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="#order" style={{ textDecoration: "none" }}>
            <Button variant="primary">Start an order</Button>
          </a>
          <a href="#how" style={{ textDecoration: "none" }}>
            <Button variant="ghost">How it works</Button>
          </a>
        </div>
        <div style={{ marginTop: 32, display: "flex", gap: isMobile ? 14 : 22, alignItems: "center", color: "var(--cocoa-soft)", fontSize: 14, flexWrap: "wrap" }}>
          <Tagline k="Min." v="1 dozen" />
          <Dot />
          <Tagline k="From" v="$40 / dozen" />
          <Dot />
          <Tagline k="Local + shipped" v="across the US" />
        </div>
      </div>

      <HeroCookies isMobile={isMobile} />
    </section>
  );
}

function Tagline({ k, v }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
      <span style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: 1.2, color: "var(--cocoa-soft)" }}>{k}</span>
      <span style={{ fontSize: 15, color: "var(--cocoa)", fontWeight: 500 }}>{v}</span>
    </div>
  );
}
function Dot() {
  return <span style={{ width: 4, height: 4, borderRadius: 999, background: "var(--crust)" }} />;
}

// Decorative array of cookies, geometric. No illustration.
function HeroCookies({ isMobile }) {
  const cookies = [
    { x: "8%",  y: "10%", size: 100, rot: -8,  dough: "oklch(0.83 0.06 75)", ring: "oklch(0.95 0.04 90)", dots: "oklch(0.55 0.14 25)", n: 6 },
    { x: "55%", y: "4%",  size: 130, rot: 12,  dough: "oklch(0.78 0.07 60)", ring: "oklch(0.94 0.05 80)", dots: "oklch(0.55 0.08 130)", n: 8 },
    { x: "30%", y: "38%", size: 170, rot: -3,  dough: "oklch(0.85 0.05 80)", ring: "oklch(0.96 0.03 90)", dots: "oklch(0.55 0.14 45)", n: 10 },
    { x: "70%", y: "48%", size: 110, rot: 18,  dough: "oklch(0.74 0.07 50)", ring: "oklch(0.92 0.05 80)", dots: "oklch(0.95 0.02 90)", n: 7 },
    { x: "10%", y: "62%", size: 90,  rot: 7,   dough: "oklch(0.86 0.04 90)", ring: "oklch(0.96 0.03 90)", dots: "oklch(0.55 0.13 25)", n: 5 },
    { x: "58%", y: "78%", size: 80,  rot: -14, dough: "oklch(0.82 0.06 70)", ring: "oklch(0.94 0.05 80)", dots: "oklch(0.55 0.1 110)",  n: 6 },
  ];
  const scale = isMobile ? 0.7 : 1;
  return (
    <div style={{
      position: "relative",
      aspectRatio: "1 / 1",
      width: "100%",
      maxWidth: isMobile ? 360 : 560,
      justifySelf: "center",
    }}>
      <div style={{
        position: "absolute", inset: "5% 5%",
        background: "radial-gradient(circle at 50% 50%, oklch(0.95 0.04 80) 0%, transparent 70%)",
        borderRadius: "50%",
      }} />
      {cookies.map((c, i) => (
        <div key={i} style={{ position: "absolute", left: c.x, top: c.y }}>
          <Cookie size={c.size * scale} rotate={c.rot} dough={c.dough} ring={c.ring} dots={c.dots} dotCount={c.n} />
        </div>
      ))}
      <div style={{
        position: "absolute", right: isMobile ? 4 : -8, bottom: isMobile ? 12 : 24,
        background: "var(--cocoa)", color: "var(--butter)",
        padding: isMobile ? "8px 12px" : "10px 16px", borderRadius: 999,
        fontSize: isMobile ? 11.5 : 13, letterSpacing: 0.4,
        boxShadow: "0 12px 28px -16px oklch(0.3 0.05 50 / 0.5)",
        whiteSpace: "nowrap",
      }}>
        every cookie individually heat-sealed →
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// Closed-dates marquee
// ───────────────────────────────────────────────────────────────────────────
function Notice() {
  const isMobile = useIsMobile();
  return (
    <div style={{
      background: "var(--cocoa)", color: "var(--butter)",
      overflow: "hidden", whiteSpace: "nowrap", padding: isMobile ? "8px 0" : "12px 0",
      fontSize: isMobile ? 11 : 14, letterSpacing: isMobile ? 1 : 1.5, textTransform: "uppercase",
    }}>
      <div style={{ display: "inline-block", animation: "marquee 30s linear infinite" }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <span key={i} style={{ marginRight: isMobile ? 32 : 48 }}>
            ✦ &nbsp; please note: I'll be unavailable for pickups &amp; shipping on June 11–17 and July 24–26 &nbsp; ✦
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// How it works (the lead-time and packaging info from the form)
// ───────────────────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: "01", title: "Send a request", body: "Fill out the form below with the date, theme, and quantity. I'll get back to you within a day or two to chat colors, inspo and design over Instagram DM." },
    { n: "02", title: "Sketches & approval", body: "I'll draw up some sketches based on our conversation. Once you approve the look, I'll lock in your date on the calendar." },
    { n: "03", title: "Baked & iced", body: "It takes me 3–4 days from baking to packaging. Cookies are individually heat-sealed in clear compostable bags." },
    { n: "04", title: "Pickup or ship", body: "Local LA: box with crinkle paper, ready for pickup or drop-off. Shipping: same, plus a bubble-wrap rolled liner inside a sturdy cardboard box." },
  ];
  return (
    <section id="how" style={sectionStyle}>
      <SectionEyebrow eyebrow="The process" title="How an order comes together" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20, marginTop: 40 }}>
        {steps.map((s) => (
          <div key={s.n} style={{
            padding: "26px 24px",
            background: "var(--cream)",
            borderRadius: 18,
            border: "1px solid var(--rule)",
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            <div className="serif" style={{ fontSize: 40, color: "var(--terra)", lineHeight: 1 }}>{s.n}</div>
            <div className="serif" style={{ fontSize: 22, color: "var(--cocoa)", lineHeight: 1.2 }}>{s.title}</div>
            <div style={{ fontSize: 14.5, color: "var(--cocoa-soft)", lineHeight: 1.55 }}>{s.body}</div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 36,
        display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16,
      }}>
        <LeadCard
          title="Local to LA"
          time="1 week"
          body="Minimum lead time before pickup or drop-off."
        />
        <LeadCard
          title="Shipping anywhere in the US"
          time="3 weeks"
          body="Allows time to source any specific cookie shapes. I'll ship 2–3 days before you need them."
          accent
        />
      </div>
    </section>
  );
}

function LeadCard({ title, time, body, accent }) {
  return (
    <div style={{
      padding: "22px 24px",
      borderRadius: 16,
      background: accent ? "var(--cocoa)" : "transparent",
      color: accent ? "var(--butter)" : "var(--cocoa)",
      border: `1px solid ${accent ? "var(--cocoa)" : "var(--rule)"}`,
      display: "flex", gap: 20, alignItems: "center", justifyContent: "space-between",
    }}>
      <div>
        <div style={{ fontSize: 12, letterSpacing: 1.6, textTransform: "uppercase", opacity: 0.75 }}>{title}</div>
        <div style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5, opacity: 0.85, maxWidth: 320 }}>{body}</div>
      </div>
      <div className="serif" style={{ fontSize: 38, lineHeight: 1, color: accent ? "var(--butter)" : "var(--terra)", flexShrink: 0 }}>{time}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// Pricing + packaging
// ───────────────────────────────────────────────────────────────────────────
function Pricing() {
  const isMobile = useIsMobile();
  return (
    <section id="pricing" style={sectionStyle}>
      <SectionEyebrow eyebrow="Pricing & packaging" title="Honest, simple numbers" />
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: 24, marginTop: 40 }}>
        {/* Pricing card */}
        <div style={{
          background: "var(--cream)", borderRadius: 24, border: "1px solid var(--rule)",
          padding: "36px clamp(20px, 4vw, 44px)",
        }}>
          <div className="script" style={{ fontSize: 24, color: "var(--terra)", lineHeight: 1 }}>per the dozen</div>
          <div className="serif" style={{ fontSize: 64, lineHeight: 1.05, marginTop: 6, color: "var(--cocoa)" }}>
            $40<span style={{ fontSize: 36, color: "var(--cocoa-soft)" }}> – </span>$60
          </div>
          <div style={{ fontSize: 14, color: "var(--cocoa-soft)", marginTop: 4 }}>depending on design complexity · minimum 1 dozen</div>

          <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
            <PriceRow tier="Simple" body="One or two icing colors, repeated motif, light detail." price="≈ $40" />
            <PriceRow tier="Detailed" body="Multi-color layering, hand-painted accents, custom shapes." price="≈ $50" />
            <PriceRow tier="Showstopper" body="Many colors, fine detail, intricate florals or text." price="≈ $60" />
          </div>

          <div style={{
            marginTop: 28, padding: "14px 16px", borderRadius: 12,
            background: "var(--butter)", border: "1px dashed var(--crust)",
            fontSize: 13.5, color: "var(--cocoa-soft)", lineHeight: 1.55,
          }}>
            <span style={{ color: "var(--cocoa)", fontWeight: 500 }}>Shipping:</span> usually $15–$35 depending on weight &amp; destination from CA. I'll quote the exact cost once they're packed.
          </div>

          <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 8 }}>
            {["Venmo", "Zelle", "PayPal", "Cash (LA only)"].map((p) => (
              <span key={p} style={{
                padding: "6px 12px", borderRadius: 999,
                background: "var(--butter)", border: "1px solid var(--rule)",
                fontSize: 13, color: "var(--cocoa)",
              }}>{p}</span>
            ))}
          </div>
        </div>

        {/* Packaging card */}
        <div style={{
          background: "transparent", borderRadius: 24, border: "1px solid var(--rule)",
          padding: "32px clamp(20px, 4vw, 36px)",
          display: "flex", flexDirection: "column", gap: 22,
        }}>
          <div>
            <div className="script" style={{ fontSize: 22, color: "var(--terra)", lineHeight: 1 }}>handled with care</div>
            <div className="serif" style={{ fontSize: 32, color: "var(--cocoa)", lineHeight: 1.1, marginTop: 4 }}>Packaging</div>
          </div>
          <PackBlock
            title="Local to LA"
            body="Cookies are individually heat-sealed in clear compostable bags, nested in a box with crinkle paper."
          />
          <PackBlock
            title="Shipping anywhere in the US"
            body="Same as local, but rolled into bubble wrap to keep cookies protected, with extra bubble wrap around the box. Shipped in a regular cardboard box."
          />

          <div style={{ marginTop: "auto", display: "flex", gap: 12 }}>
            <Cookie size={56} dough="oklch(0.83 0.06 75)" ring="oklch(0.95 0.04 90)" dots="oklch(0.55 0.14 25)" rotate={-8} dotCount={6} />
            <Cookie size={56} dough="oklch(0.78 0.06 60)" ring="oklch(0.94 0.05 80)" dots="oklch(0.55 0.08 130)" rotate={6} dotCount={5} />
            <Cookie size={56} dough="oklch(0.85 0.05 80)" ring="oklch(0.96 0.03 90)" dots="oklch(0.55 0.14 45)" rotate={-2} dotCount={7} />
          </div>
        </div>
      </div>
    </section>
  );
}

function PriceRow({ tier, body, price }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "baseline", paddingBottom: 14, borderBottom: "1px solid var(--rule)" }}>
      <div>
        <div style={{ fontSize: 15, fontWeight: 500, color: "var(--cocoa)" }}>{tier}</div>
        <div style={{ fontSize: 13.5, color: "var(--cocoa-soft)", marginTop: 3, lineHeight: 1.45 }}>{body}</div>
      </div>
      <div className="serif" style={{ fontSize: 22, color: "var(--cocoa)" }}>{price}</div>
    </div>
  );
}
function PackBlock({ title, body }) {
  return (
    <div>
      <div style={{ fontSize: 14, fontWeight: 500, color: "var(--cocoa)", marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 14.5, color: "var(--cocoa-soft)", lineHeight: 1.55 }}>{body}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// FAQ
// ───────────────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: "How far in advance should I order?", a: "1 week minimum for local LA pickup or drop-off, 3 weeks minimum for shipping anywhere in the US. The earlier the better — popular dates fill up." },
    { q: "Are vegan and gluten-free options safe for allergies?", a: "Please note that vegan and gluten-free cookies are made in a kitchen with equipment exposed to gluten and dairy products. They're not suitable for severe allergies." },
    { q: "How does pricing work?", a: "Cookies are $40–60 per dozen depending on design complexity, with a minimum order of 1 dozen. We'll confirm the exact rate after sketching." },
    { q: "How will I get them?", a: "Local LA: pickup or drop-off, your choice. Shipping: I'll send them 2–3 days before your arrive-by date. Shipping cost is $15–$35 depending on weight and destination from California." },
    { q: "When do I pay?", a: "At least one week before your pickup or ship date. Venmo (@nadyasharif), Zelle (nadyabsharif@gmail.com), PayPal (paypal.me/nadyasharif), or cash for LA pickups." },
    { q: "What if I have a question?", a: "Send me a message on Instagram @bakingwithnadya — that's the fastest way to get back to me. Email and text work too." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={sectionStyle}>
      <SectionEyebrow eyebrow="Questions" title="The most asked" />
      <div style={{ marginTop: 40, borderTop: "1px solid var(--rule)" }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: "1px solid var(--rule)" }}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: "100%", padding: "20px 4px",
                  background: "transparent", border: "none", cursor: "pointer",
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  textAlign: "left", color: "var(--cocoa)",
                  fontFamily: "inherit",
                }}
              >
                <span className="serif" style={{ fontSize: 22 }}>{it.q}</span>
                <span style={{
                  width: 28, height: 28, borderRadius: 999,
                  border: "1px solid var(--rule)", display: "grid", placeItems: "center",
                  fontSize: 14, color: "var(--cocoa-soft)",
                  transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                  transition: "transform 180ms ease",
                  flexShrink: 0, marginLeft: 16,
                }}>+</span>
              </button>
              <div style={{
                overflow: "hidden",
                maxHeight: isOpen ? 200 : 0,
                transition: "max-height 220ms ease",
              }}>
                <div style={{ padding: "0 4px 22px", fontSize: 15, color: "var(--cocoa-soft)", lineHeight: 1.6, maxWidth: 720 }}>
                  {it.a}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// Order section (wraps the form)
// ───────────────────────────────────────────────────────────────────────────
function OrderSection() {
  return (
    <section id="order" style={{ ...sectionStyle, paddingTop: 40 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12, marginBottom: 36, textAlign: "center", maxWidth: 720, marginInline: "auto" }}>
        <div className="script" style={{ fontSize: 24, color: "var(--terra)", lineHeight: 1 }}>let's make something</div>
        <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.05, margin: 0, color: "var(--cocoa)" }}>Start a cookie request</h2>
        <p style={{ fontSize: 16, color: "var(--cocoa-soft)", lineHeight: 1.55, maxWidth: 560, margin: "8px auto 0" }}>
          This is mostly informational — get the basics down and I'll follow up to chat colors, inspo and design over Instagram DM.
        </p>
      </div>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <OrderForm />
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// Footer
// ───────────────────────────────────────────────────────────────────────────
function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{ background: "var(--cocoa)", color: "var(--butter)", marginTop: 80 }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "56px clamp(20px, 4vw, 40px) 32px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr 1fr", gap: isMobile ? 32 : 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Cookie size={36} dough="oklch(0.82 0.06 70)" ring="oklch(0.95 0.04 90)" dots="oklch(0.65 0.14 45)" dotCount={6} />
            <div>
              <div className="serif" style={{ fontSize: 22 }}>Baking with Nadya</div>
              <div className="script" style={{ fontSize: 16, color: "oklch(0.8 0.08 60)", lineHeight: 1 }}>sugar cookie commissions</div>
            </div>
          </div>
          <div style={{ marginTop: 18, fontSize: 14, color: "oklch(0.85 0.02 80)", lineHeight: 1.6, maxWidth: 380 }}>
            A small home bakery in Los Angeles, decorating cookies for the people you love. Local pickup and shipping across the US.
          </div>
        </div>

        <div>
          <div style={{ fontSize: 12, letterSpacing: 1.5, textTransform: "uppercase", opacity: 0.6 }}>Get in touch</div>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8, fontSize: 14.5 }}>
            <a href="https://www.instagram.com/bakingwithnadya/" target="_blank" rel="noreferrer" style={footerLink}>Instagram → @bakingwithnadya</a>
            <a href="mailto:nadyabsharif@gmail.com" style={footerLink}>nadyabsharif@gmail.com</a>
            <span style={{ opacity: 0.65 }}>Message me directly on Instagram for the fastest replies.</span>
          </div>
        </div>

        <div>
          <div style={{ fontSize: 12, letterSpacing: 1.5, textTransform: "uppercase", opacity: 0.6 }}>Payment</div>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8, fontSize: 14.5 }}>
            <span>Venmo · @nadyasharif</span>
            <span>Zelle · nadyabsharif@gmail.com</span>
            <span>PayPal · paypal.me/nadyasharif</span>
            <span style={{ opacity: 0.65 }}>Cash accepted for LA pickup only.</span>
          </div>
        </div>
      </div>
      <div style={{ borderTop: "1px solid oklch(0.4 0.03 50)", padding: "18px clamp(20px, 4vw, 40px)", maxWidth: 1180, margin: "0 auto", display: "flex", justifyContent: "space-between", fontSize: 12.5, color: "oklch(0.78 0.02 80)", flexWrap: "wrap", gap: 10 }}>
        <div>© {new Date().getFullYear()} Baking with Nadya · Los Angeles, CA</div>
        <div>Site by butter & love.</div>
      </div>
    </footer>
  );
}
const footerLink = { color: "var(--butter)", textDecoration: "none", borderBottom: "1px solid oklch(0.7 0.02 80)", paddingBottom: 2, alignSelf: "flex-start" };

// ───────────────────────────────────────────────────────────────────────────
// Shared section helpers
// ───────────────────────────────────────────────────────────────────────────
const sectionStyle = {
  maxWidth: 1180,
  margin: "0 auto",
  padding: "clamp(56px, 8vw, 100px) clamp(20px, 4vw, 40px)",
};

function SectionEyebrow({ eyebrow, title }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
      <div className="script" style={{ fontSize: 22, color: "var(--terra)", lineHeight: 1 }}>{eyebrow}</div>
      <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.05, margin: 0, color: "var(--cocoa)" }}>{title}</h2>
      <Squiggle width={120} height={10} color="var(--terra)" stroke={2} />
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
function App() {
  return (
    <div>
      <Notice />
      <Nav />
      <Hero />
      <HowItWorks />
      <Pricing />
      <FAQ />
      <OrderSection />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
