const APPLE_SANS_S = "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif";
const APPLE_TEXT_S = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif";

const IncludedSection = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";
  const stacked = isMobile || isTablet;
  return (
    <section style={{
      background: "rgba(179,205,249,0.25)",
      padding: isMobile ? "80px 20px" : "140px 32px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          eyebrow="What you get"
          title={<>Your free month,<br/><span style={{ color: "#B3CDF9" }}>itemized.</span></>}
          lede="The same engagement our paying clients get. For 30 days. On us."
        />
        <div style={{
          marginTop: isMobile ? 48 : 72,
          display: "grid",
          gridTemplateColumns: stacked ? "1fr" : "1.1fr 1fr",
          gap: isMobile ? 20 : 28,
          alignItems: "start",
        }}>
          <div style={{ display: "grid", gap: 12, order: stacked ? 2 : 1 }}>
            {INCLUDED.map((it, i) => (
              <div key={i} style={{
                background: "#fff", borderRadius: 18,
                padding: isMobile ? "18px 18px" : "24px 28px",
                display: "grid",
                gridTemplateColumns: isMobile ? "auto 1fr" : "auto 1fr auto",
                gap: isMobile ? 14 : 20,
                alignItems: "center",
              }}>
                <div style={{
                  width: isMobile ? 36 : 40, height: isMobile ? 36 : 40, borderRadius: 999,
                  background: "rgba(179,205,249,0.25)", color: "#051B42",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: APPLE_SANS_S, fontWeight: 600,
                  fontSize: isMobile ? 13 : 14, letterSpacing: "-0.01em",
                  flex: "none",
                }}>{(i+1).toString().padStart(2,"0")}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{
                    fontFamily: APPLE_SANS_S, fontWeight: 600,
                    fontSize: isMobile ? 15 : 17, color: "#051B42", letterSpacing: "-0.015em",
                    display: "flex", alignItems: "baseline", justifyContent: "space-between",
                    gap: 10, flexWrap: "wrap",
                  }}>
                    <span>{it.t}</span>
                    {isMobile && (
                      <span style={{
                        fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 12,
                        color: "#051B42", letterSpacing: "-0.005em",
                      }}>{it.v}</span>
                    )}
                  </div>
                  <div style={{
                    fontFamily: APPLE_TEXT_S, fontSize: isMobile ? 13 : 14,
                    color: "rgba(5,27,66,0.6)", marginTop: 4, lineHeight: 1.5, letterSpacing: "-0.005em",
                  }}>{it.d}</div>
                </div>
                {!isMobile && (
                  <div style={{
                    fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 13,
                    color: "#051B42", letterSpacing: "-0.005em",
                  }}>{it.v}</div>
                )}
              </div>
            ))}
          </div>
          <div style={{
            background: "#051B42", color: "#fff", borderRadius: 22,
            padding: isMobile ? 28 : 40,
            position: stacked ? "static" : "sticky",
            top: 80,
            order: stacked ? 1 : 2,
            overflow: "hidden",
          }}>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 14,
              color: "rgba(255,255,255,0.55)", letterSpacing: "-0.005em",
            }}>Total value</div>
            <div style={{
              fontFamily: APPLE_SANS_S, fontWeight: 700,
              fontSize: isMobile ? 60 : 84,
              letterSpacing: "-0.045em", lineHeight: 1, margin: "10px 0 8px",
            }}>
              $5,350
            </div>
            <div style={{ fontFamily: APPLE_TEXT_S, fontSize: 15, color: "rgba(255,255,255,0.6)", letterSpacing: "-0.005em" }}>
              at current market retainer rate
            </div>
            <div style={{ height: 1, background: "rgba(255,255,255,0.12)", margin: isMobile ? "24px 0" : "32px 0" }}/>
            <div style={{ fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 14,
              color: "rgba(255,255,255,0.55)", letterSpacing: "-0.005em" }}>Your cost</div>
            <div style={{
              fontFamily: APPLE_SANS_S, fontWeight: 700,
              fontSize: isMobile ? 72 : 104,
              letterSpacing: "-0.055em", lineHeight: 1, margin: "10px 0 16px",
              color: "#fff",
              textShadow: "0 0 48px rgba(179,205,249,0.45)",
            }}>
              $0
            </div>
            <div style={{ fontFamily: APPLE_TEXT_S, fontSize: 15, color: "rgba(255,255,255,0.78)", lineHeight: 1.5, letterSpacing: "-0.005em" }}>
              No credit card. No contract. If it doesn't work, you walk. If it does, we'll talk.
            </div>
            <a href="#claim" style={{
              marginTop: isMobile ? 24 : 32,
              display: "inline-flex", alignItems: "center", gap: 6,
              background: "#fff", color: "#051B42",
              padding: isMobile ? "12px 20px" : "14px 24px",
              borderRadius: 999,
              fontFamily: APPLE_TEXT_S, fontWeight: 600,
              fontSize: isMobile ? 15 : 16, letterSpacing: "-0.01em",
              textDecoration: "none",
              transition: "background 160ms ease",
              width: isMobile ? "100%" : "auto",
              justifyContent: "center", boxSizing: "border-box",
            }}
            onMouseEnter={(e)=>{e.currentTarget.style.background="#B3CDF9";}}
            onMouseLeave={(e)=>{e.currentTarget.style.background="#fff";}}
            >
              Claim my free month
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const INCLUDED = [
  { t: "6 AI-produced video ads", d: "Short-form cuts optimized for Meta Reels, TikTok, YouTube Shorts. 15–30s each. Multiple hook variants.", v: "$3,600" },
  { t: "25 static creatives", d: "Feed ads, story ads, carousel frames. Sized for Meta, Pinterest, LinkedIn, programmatic.", v: "$1,250" },
  { t: "Creative strategy audit", d: "Full teardown of your current ads, landing page, and funnel. Loom-recorded. Yours to keep.", v: "$500" },
  { t: "Campaign architecture", d: "Account structure, audiences, and testing framework — done by a Meta/Google specialist.", v: "INCLUDED" },
  { t: "Weekly performance reviews", d: "30-minute calls with your strategist. No account manager theater.", v: "INCLUDED" },
  { t: "Full asset handoff", d: "Every file, every script, every edit. You own it all. Even if we part ways day 31.", v: "INCLUDED" },
];

const WhoForSection = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  return (
    <section style={{
      background: "#fff",
      padding: isMobile ? "80px 20px" : "140px 32px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          eyebrow="Who this is for"
          title={<>You'll get the most out of this<br/><span style={{ color: "#B3CDF9" }}>if one of these is true.</span></>}
        />
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: isMobile ? 16 : 24,
          marginTop: isMobile ? 40 : 72,
        }}>
          <WhoList
            isMobile={isMobile}
            variant="for"
            title="This is for you if…"
            items={[
              "You're spending $5K+ / month on paid social and plateauing",
              "Your creative is the bottleneck — hooks, pacing, or volume",
              "You're a DTC brand, SaaS, app, or service — early stage or scaling",
              "You've been burned by agencies that promised 'bespoke' and shipped slop",
              "You want specialists running the ads, not an account manager",
              "You want to own every file and strategy at the end of 30 days",
            ]}
          />
          <WhoList
            isMobile={isMobile}
            variant="not"
            title="This isn't for you if…"
            items={[
              "You need a logo, website, or brand identity — we don't do that",
              "You're pre-product or spending under $500/mo on ads",
              "You want us to run ads through your Canva templates",
              "You expect results in 3 days with no creative iteration",
              "You're hoping AI removes the need for a human strategist",
              "You want a monthly retainer with no skin in the game",
            ]}
          />
        </div>
      </div>
    </section>
  );
};

const WhoList = ({ variant, title, items, isMobile }) => {
  const good = variant === "for";
  return (
    <div style={{
      background: good ? "rgba(179,205,249,0.25)" : "#fff",
      border: good ? "none" : "1px solid rgba(5,27,66,0.12)",
      borderRadius: 22,
      padding: isMobile ? 28 : 40,
    }}>
      <div style={{
        fontFamily: APPLE_SANS_S, fontWeight: 600,
        fontSize: isMobile ? 22 : 26,
        color: "#051B42", letterSpacing: "-0.02em",
        marginBottom: isMobile ? 20 : 28,
      }}>
        {title}
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
        {items.map((it, i) => (
          <li key={i} style={{
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 14,
            fontFamily: APPLE_TEXT_S,
            fontSize: isMobile ? 15 : 16,
            color: good ? "#051B42" : "rgba(5,27,66,0.55)",
            lineHeight: 1.45, letterSpacing: "-0.005em",
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 999, flexShrink: 0, marginTop: 2,
              background: good ? "#051B42" : "transparent",
              border: good ? "none" : "1.5px solid rgba(5,27,66,0.18)",
              color: good ? "#fff" : "rgba(5,27,66,0.55)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                {good ? <polyline points="20 6 9 17 4 12"/> : (<><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>)}
              </svg>
            </div>
            <span>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

const FounderSection = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  return (
    <section style={{
      background: "rgba(179,205,249,0.25)",
      padding: isMobile ? "80px 20px" : "140px 32px",
    }}>
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "128px 1fr",
          gap: isMobile ? 24 : 40,
          alignItems: isMobile ? "center" : "start",
          textAlign: isMobile ? "center" : "left",
          justifyItems: isMobile ? "center" : "start",
        }}>
          <div style={{
            width: isMobile ? 96 : 128, height: isMobile ? 96 : 128,
            borderRadius: 999, overflow: "hidden",
            background: "linear-gradient(135deg,#051B42,#B3CDF9)",
            position: "relative", flex: "none",
            boxShadow: "0 12px 32px rgba(5,27,66,0.18)",
            border: "2px solid rgba(179,205,249,0.3)",
          }}>
            <img
              src="uploads/Augusto%20Site.webp"
              alt="Augusto Di Fiore"
              style={{
                width: "100%", height: "100%",
                objectFit: "cover",
                objectPosition: "center 20%",
                display: "block",
              }}
            />
          </div>
          <div>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 15,
              color: "#051B42", marginBottom: 12, letterSpacing: "-0.005em",
            }}>
              A note from the founder
            </div>
            <div style={{
              fontFamily: APPLE_SANS_S, fontWeight: 600,
              fontSize: isMobile ? 24 : 36,
              lineHeight: 1.2, letterSpacing: "-0.025em",
              color: "#051B42", marginBottom: isMobile ? 18 : 24,
            }}>
              "I built Di Fiore because I got tired of agencies billing $15K/mo to ship three ads a quarter."
            </div>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontSize: isMobile ? 16 : 18,
              lineHeight: 1.55, color: "rgba(5,27,66,0.75)",
              marginBottom: 16, letterSpacing: "-0.005em",
            }}>
              The free month isn't a marketing gimmick — it's how we prove the system works. If we can't move your CPA in 30 days, you've lost nothing. You keep every asset, every strategy doc, every account build. Most of our best clients came in through this door. Some didn't convert. That's fine. Either way, you get a month of real work. No upsells, no hostage tactics.
            </div>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontSize: isMobile ? 16 : 18,
              lineHeight: 1.55, color: "rgba(5,27,66,0.75)", letterSpacing: "-0.005em",
            }}>
              We keep it to 10 brands per month because we actually do the work ourselves.
            </div>
            <div style={{
              fontFamily: APPLE_SANS_S, fontWeight: 600, fontSize: 16,
              color: "#051B42", marginTop: isMobile ? 20 : 28, letterSpacing: "-0.01em",
            }}>
              Augusto Di Fiore <span style={{ fontWeight: 400, color: "#051B42" }}>— Founder & CEO</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTASection = ({ spotsLeft, onSubmit }) => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  return (
    <section id="claim" style={{
      background: "#051B42",
      padding: isMobile ? "100px 20px" : "160px 32px",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 50% 0%, rgba(179,205,249,0.35), transparent 55%)",
        pointerEvents: "none",
      }}/>
      <div style={{ maxWidth: 960, margin: "0 auto", position: "relative", textAlign: "center" }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 14px", borderRadius: 999,
          background: "rgba(255,255,255,0.08)",
          border: "1px solid rgba(255,255,255,0.15)",
          fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 12,
          color: "#fff", marginBottom: 24,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "#B3CDF9",
            boxShadow: "0 0 0 3px rgba(179,205,249,0.3)" }}/>
          Only {spotsLeft} of 10 spots remaining
        </div>
        <h2 style={{
          fontFamily: APPLE_SANS_S, fontWeight: 700,
          fontSize: "clamp(38px, 8vw, 96px)",
          lineHeight: 1, letterSpacing: "-0.045em",
          color: "#fff", margin: "0 0 22px",
        }}>
          A free month.<br/>
          <span style={{
            background: "linear-gradient(90deg,#fff,#B3CDF9)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            backgroundClip: "text",
            display: "inline-block",
            paddingRight: "0.12em",
          }}>Zero risk.</span> One scaled brand.
        </h2>
        <p style={{
          fontFamily: APPLE_TEXT_S, fontSize: isMobile ? 16 : 21,
          lineHeight: 1.42,
          color: "rgba(255,255,255,0.72)",
          margin: isMobile ? "0 auto 32px" : "0 auto 48px", maxWidth: 640,
          letterSpacing: "-0.01em",
        }}>
          Give us 30 days. We'll give you 6 videos, 25 statics, a live campaign, and receipts. Worst case: you keep everything.
        </p>
        <div style={{
          maxWidth: 540, margin: "0 auto",
          background: "rgba(255,255,255,0.04)",
          border: "1px solid rgba(255,255,255,0.1)",
          borderRadius: 22,
          padding: isMobile ? 20 : 32,
          textAlign: "left",
          backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)",
        }}>
          <LeadForm variant="dark" onSubmit={onSubmit}/>
        </div>
      </div>
    </section>
  );
};

const StarterPlanBanner = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";
  const stacked = isMobile || isTablet;
  return (
    <section style={{
      background: "#fff",
      padding: isMobile ? "0 20px 80px" : "0 32px 140px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          background: "#051B42", color: "#fff",
          borderRadius: isMobile ? 22 : 28,
          padding: isMobile ? "32px 24px" : "48px 56px",
          position: "relative", overflow: "hidden",
          display: "grid",
          gridTemplateColumns: stacked ? "1fr" : "1fr auto",
          gap: stacked ? 28 : 48,
          alignItems: "center",
          textAlign: stacked ? "center" : "left",
          justifyItems: stacked ? "center" : "stretch",
        }}>
          <div style={{ position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at 88% 50%, rgba(179,205,249,0.28), transparent 55%)",
            pointerEvents: "none" }}/>
          <div style={{ position: "relative", maxWidth: "100%" }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "4px 12px", borderRadius: 999,
              background: "rgba(179,205,249,0.14)",
              border: "1px solid rgba(179,205,249,0.4)",
              fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 11,
              color: "#B3CDF9", marginBottom: 14,
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              Starter Plan
            </div>
            <div style={{
              fontFamily: APPLE_SANS_S, fontWeight: 600,
              fontSize: isMobile ? 26 : 36,
              lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: 12,
            }}>
              Spending less than $5K/month?<br/>
              <span style={{
                background: "linear-gradient(90deg,#fff,#B3CDF9)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                display: "inline-block",
                paddingRight: "0.12em",
              }}>We'll help you grow.</span>
            </div>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontSize: isMobile ? 15 : 17,
              lineHeight: 1.5, color: "rgba(255,255,255,0.7)",
              maxWidth: 620, letterSpacing: "-0.005em",
              margin: stacked ? "0 auto" : 0,
            }}>
              Our Starter plan gives you professional campaign management at a flat rate — no performance fees, no hidden costs. Perfect for brands just getting started with paid media.
            </div>
          </div>
          <div style={{
            position: "relative",
            textAlign: stacked ? "center" : "right",
            minWidth: stacked ? "auto" : 240,
          }}>
            <div style={{
              display: "flex", alignItems: "baseline",
              justifyContent: stacked ? "center" : "flex-end", gap: 6,
            }}>
              <div style={{
                fontFamily: APPLE_SANS_S, fontWeight: 700,
                fontSize: isMobile ? 60 : 76,
                letterSpacing: "-0.045em", lineHeight: 1, color: "#fff",
              }}>$999</div>
              <div style={{
                fontFamily: APPLE_TEXT_S, fontSize: 17,
                color: "rgba(255,255,255,0.65)", letterSpacing: "-0.005em",
              }}>/mo</div>
            </div>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontSize: 13, color: "#B3CDF9",
              marginBottom: 18, marginTop: 4, letterSpacing: "-0.005em",
            }}>
              0% performance fees
            </div>
            <a href="#claim" style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              background: "#fff", color: "#051B42",
              padding: "12px 22px", borderRadius: 999,
              fontFamily: APPLE_TEXT_S, fontWeight: 500, fontSize: 15, letterSpacing: "-0.01em",
              textDecoration: "none",
              transition: "background 160ms ease",
            }}
            onMouseEnter={(e)=>{e.currentTarget.style.background="rgba(179,205,249,0.25)";}}
            onMouseLeave={(e)=>{e.currentTarget.style.background="#fff";}}
            >
              Get Started
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ──────────────────────────────────────────────────────────────────
// InlineCTA — compact mid-page action break. Drops between major sections
// to re-hook users without duplicating the hero form or FinalCTA.
//   variant="navy"  → dark surface, white button (use on light-bg neighbors)
//   variant="white" → white surface, navy button (use on dark-bg neighbors)
// ──────────────────────────────────────────────────────────────────
const InlineCTA = ({ title, highlight, cta = "Claim your free month", href = "#claim", variant = "navy" }) => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isDark = variant === "navy";
  return (
    <section style={{
      background: isDark ? "#051B42" : "#fff",
      padding: isMobile ? "56px 20px" : "88px 32px",
      textAlign: "center",
      position: "relative",
      overflow: "hidden",
    }}>
      {isDark && (
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(ellipse at 50% 50%, rgba(179,205,249,0.18), transparent 55%)",
          pointerEvents: "none",
        }}/>
      )}
      <div style={{ maxWidth: 900, margin: "0 auto", position: "relative" }}>
        <h3 style={{
          fontFamily: APPLE_SANS_S, fontWeight: 700,
          fontSize: "clamp(28px, 4.5vw, 52px)",
          lineHeight: 1.1, letterSpacing: "-0.03em",
          color: isDark ? "#fff" : "#051B42",
          margin: 0, marginBottom: isMobile ? 22 : 32,
        }}>
          <span>{title}</span>
          {highlight ? <span>{" "}</span> : null}
          {highlight ? (
            <span style={{
              background: isDark
                ? "linear-gradient(90deg,#fff,#B3CDF9)"
                : "linear-gradient(90deg,#051B42,#B3CDF9)",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
              WebkitTextFillColor: "transparent",
              color: "transparent",
              display: "inline-block",
              paddingRight: "0.12em",
            }}>{highlight}</span>
          ) : null}
        </h3>
        <a href={href} style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          background: isDark ? "#fff" : "#051B42",
          color: isDark ? "#051B42" : "#fff",
          padding: isMobile ? "13px 26px" : "15px 30px",
          borderRadius: 999,
          fontFamily: APPLE_TEXT_S, fontWeight: 600,
          fontSize: isMobile ? 15 : 16, letterSpacing: "-0.01em",
          textDecoration: "none",
          transition: "background 160ms ease, transform 160ms ease",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = isDark ? "#B3CDF9" : "#0A2A5C";
          e.currentTarget.style.transform = "translateY(-1px)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = isDark ? "#fff" : "#051B42";
          e.currentTarget.style.transform = "translateY(0)";
        }}
        >
          {cta}
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
        </a>
      </div>
    </section>
  );
};

// ──────────────────────────────────────────────────────────────────
// SuccessStoryCTA — the big Apple-style "wow" CTA that lives after testimonials.
// Layers: ambient gradient glows, floating sparkles, review badge with stars,
// gradient+shimmer headline, 3D navy pill button, trust icons, platform strip.
// ──────────────────────────────────────────────────────────────────
const SuccessStoryCTA = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  return (
    <section style={{
      background: "#fff",
      padding: isMobile ? "96px 20px" : "160px 32px",
      position: "relative",
      overflow: "hidden",
      textAlign: "center",
    }}>
      {/* Shimmer keyframe for the gradient headline */}
      <style>{`
        @keyframes dfc-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        @keyframes dfc-float-a { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
        @keyframes dfc-float-b { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(-6deg); } }
      `}</style>

      {/* Ambient gradient orbs */}
      <div style={{
        position: "absolute",
        width: "55%", height: "90%",
        top: "-20%", left: "-15%",
        background: "radial-gradient(ellipse, rgba(179,205,249,0.45), transparent 70%)",
        pointerEvents: "none", zIndex: 0,
      }}/>
      <div style={{
        position: "absolute",
        width: "45%", height: "70%",
        bottom: "-15%", right: "-10%",
        background: "radial-gradient(ellipse, rgba(168,184,255,0.25), transparent 70%)",
        pointerEvents: "none", zIndex: 0,
      }}/>

      {/* Floating sparkles */}
      {!isMobile && (
        <>
          <Sparkle size={40} top="18%"  left="10%" opacity={0.55} anim="dfc-float-a 7s ease-in-out infinite"/>
          <Sparkle size={24} top="28%"  left="88%" opacity={0.5}  anim="dfc-float-b 8s ease-in-out infinite"/>
          <Sparkle size={28} top="72%"  left="8%"  opacity={0.4}  anim="dfc-float-b 9s ease-in-out infinite"/>
          <Sparkle size={36} top="68%"  left="90%" opacity={0.5}  anim="dfc-float-a 6.5s ease-in-out infinite"/>
        </>
      )}

      <div style={{
        maxWidth: 960, margin: "0 auto",
        position: "relative", zIndex: 1,
      }}>
        {/* Review badge */}
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          padding: "9px 18px",
          background: "rgba(255,255,255,0.75)",
          backdropFilter: "blur(12px)",
          WebkitBackdropFilter: "blur(12px)",
          border: "1px solid rgba(5,27,66,0.08)",
          borderRadius: 999,
          boxShadow: "0 6px 20px rgba(5,27,66,0.08)",
          marginBottom: isMobile ? 22 : 32,
        }}>
          <span style={{ display: "inline-flex", gap: 2 }}>
            {[1,2,3,4,5].map(i => (
              <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="#051B42">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/>
              </svg>
            ))}
          </span>
          <span style={{
            fontFamily: APPLE_TEXT_S,
            fontSize: 13, fontWeight: 600,
            color: "#051B42",
            letterSpacing: "-0.005em",
          }}>4.9 from operators scaling real revenue</span>
        </div>

        {/* Headline with shimmering gradient */}
        <h2 style={{
          fontFamily: APPLE_SANS_S, fontWeight: 800,
          fontSize: "clamp(40px, 7vw, 88px)",
          lineHeight: 1.1, letterSpacing: "-0.04em",
          color: "#051B42",
          margin: isMobile ? "0 0 14px" : "0 0 18px",
          overflow: "visible",
        }}>
          Be the next{" "}
          <span style={{
            background: "linear-gradient(90deg,#051B42 0%,#1E4A99 25%,#B3CDF9 55%,#A8B8FF 80%,#B3CDF9 100%)",
            backgroundSize: "200% 100%",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
            WebkitTextFillColor: "transparent",
            color: "transparent",
            display: "inline-block",
            paddingRight: "0.12em",
            paddingBottom: "0.1em",
            lineHeight: 1.1,
            animation: "dfc-shimmer 6s ease-in-out infinite",
          }}>success story.</span>
        </h2>

        {/* Subtitle */}
        <p style={{
          fontFamily: APPLE_TEXT_S,
          fontSize: isMobile ? 16 : 20,
          lineHeight: 1.5,
          color: "rgba(5,27,66,0.6)",
          margin: isMobile ? "0 auto 32px" : "0 auto 44px",
          maxWidth: 560,
          letterSpacing: "-0.01em",
        }}>
          30 days. 6 videos. 25 statics. A live campaign. Zero cost to start.
        </p>

        {/* 3D CTA button — wrapped in a block div so it stacks above the trust row */}
        <div>
          <a href="#claim" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "linear-gradient(180deg,#0A2A5C 0%,#051B42 100%)",
            color: "#fff",
            padding: isMobile ? "12px 24px" : "13px 28px",
            borderRadius: 999,
            fontFamily: APPLE_TEXT_S, fontWeight: 600,
            fontSize: isMobile ? 14 : 15,
            letterSpacing: "-0.01em",
            textDecoration: "none",
            border: "1px solid rgba(255,255,255,0.12)",
            boxShadow: [
              "inset 0 1px 0 rgba(255,255,255,0.2)",
              "inset 0 -1px 0 rgba(0,0,0,0.18)",
              "0 2px 0 rgba(5,27,66,0.18)",
              "0 8px 22px rgba(5,27,66,0.24)",
              "0 22px 44px rgba(5,27,66,0.15)",
            ].join(", "),
            transition: "transform 220ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 220ms cubic-bezier(0.2,0.7,0.2,1), filter 220ms ease",
            position: "relative",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = "translateY(-3px) scale(1.02)";
            e.currentTarget.style.filter = "brightness(1.08)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = "translateY(0) scale(1)";
            e.currentTarget.style.filter = "none";
          }}
          onMouseDown={(e) => { e.currentTarget.style.transform = "translateY(0) scale(0.98)"; }}
          onMouseUp={(e) => { e.currentTarget.style.transform = "translateY(-3px) scale(1.02)"; }}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
            </svg>
            Claim your free month
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
          </a>
        </div>

        {/* Trust row */}
        <div style={{
          display: "flex",
          alignItems: "center",
          gap: isMobile ? 14 : 28,
          flexWrap: "wrap",
          justifyContent: "center",
          marginTop: isMobile ? 44 : 56,
          fontFamily: APPLE_TEXT_S,
          fontSize: isMobile ? 12 : 13,
          color: "rgba(5,27,66,0.6)",
        }}>
          <TrustCheck label="No credit card"/>
          <TrustCheck label="No contract"/>
          <TrustCheck label="72-hour turnaround"/>
          <TrustCheck label="Keep every content"/>
        </div>

        {/* Platform strip */}
        <div style={{
          marginTop: isMobile ? 44 : 60,
          paddingTop: isMobile ? 28 : 36,
          borderTop: "1px solid rgba(5,27,66,0.08)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 18,
        }}>
          <div style={{
            fontFamily: APPLE_TEXT_S,
            fontSize: 11, fontWeight: 500,
            letterSpacing: "0.08em", textTransform: "uppercase",
            color: "rgba(5,27,66,0.4)",
          }}>Running ads across</div>
          <div style={{
            display: "flex",
            gap: isMobile ? 24 : 40,
            flexWrap: "wrap", justifyContent: "center", alignItems: "center",
            color: "rgba(5,27,66,0.55)",
          }}>
            <BrandIcon name="Meta" size={isMobile ? 22 : 26} path={BRAND_META}/>
            <BrandIcon name="TikTok" size={isMobile ? 20 : 24} path={BRAND_TIKTOK}/>
            <BrandIcon name="Google Ads" size={isMobile ? 20 : 24} path={BRAND_GOOGLE}/>
            <BrandIcon name="YouTube" size={isMobile ? 24 : 28} path={BRAND_YOUTUBE}/>
            <BrandIcon name="LinkedIn" size={isMobile ? 20 : 24} path={BRAND_LINKEDIN}/>
          </div>
        </div>
      </div>
    </section>
  );
};

const TrustCheck = ({ label }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}>
    <span style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      width: 18, height: 18, borderRadius: 999,
      background: "rgba(179,205,249,0.35)",
    }}>
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#051B42" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    </span>
    {label}
  </span>
);

// Brand icon paths from Simple Icons (simpleicons.org, CC0).
const BRAND_META = "M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.16-1.664-1.004-.496-.654-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z";
const BRAND_TIKTOK = "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z";
const BRAND_GOOGLE = "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z";
const BRAND_YOUTUBE = "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z";
const BRAND_LINKEDIN = "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z";

const BrandIcon = ({ name, size = 24, path }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-label={name} role="img" style={{
    transition: "transform 180ms ease, color 180ms ease",
    cursor: "default",
  }}
  onMouseEnter={(e) => { e.currentTarget.style.color = "#051B42"; e.currentTarget.style.transform = "translateY(-2px)"; }}
  onMouseLeave={(e) => { e.currentTarget.style.color = ""; e.currentTarget.style.transform = "translateY(0)"; }}>
    <title>{name}</title>
    <path d={path}/>
  </svg>
);

// Floating brand logo — minimalist watermark (natural brand color at low opacity)
const Sparkle = ({ size = 24, top, left, opacity = 0.5, anim }) => (
  <img
    src="assets/logo-brand.png"
    alt=""
    width={size}
    height={size}
    style={{
      position: "absolute", top, left,
      opacity: opacity * 0.7,
      filter: "drop-shadow(0 4px 14px rgba(5,27,66,0.12))",
      animation: anim,
      pointerEvents: "none",
      zIndex: 0,
      objectFit: "contain",
    }}
  />
);

window.IncludedSection = IncludedSection;
window.WhoForSection = WhoForSection;
window.FounderSection = FounderSection;
window.FinalCTASection = FinalCTASection;
window.StarterPlanBanner = StarterPlanBanner;
window.InlineCTA = InlineCTA;
window.SuccessStoryCTA = SuccessStoryCTA;