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="Cosa ottieni"
          title={<>Il tuo mese gratuito,<br/><span style={{ color: "#B3CDF9" }}>voce per voce.</span></>}
          lede="Lo stesso lavoro che facciamo per i clienti paganti. Per 30 giorni. Offerto da noi."
        />
        <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",
            }}>Valore totale</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" }}>
              al retainer di mercato attuale
            </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" }}>Il tuo costo</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" }}>
              Senza carta di credito. Senza contratto. Se non funziona, niente vincoli. Se funziona, ci sentiamo.
            </div>
            <a href="#ottieni" 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";}}
            >
              Prenota il mio mese gratuito
              <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 video ads prodotti con AI", d: "Tagli short-form ottimizzati per Meta Reels, TikTok, YouTube Shorts. 15–30s ciascuno. Diverse varianti di hook.", v: "€3,600" },
  { t: "25 creatività statiche", d: "Feed ads, Stories, frame per Carousel. Formati per Meta, Pinterest, LinkedIn, programmatic.", v: "€1,250" },
  { t: "Audit della strategia creativa", d: "Smontaggio completo delle tue ads attuali, della landing page e del funnel. Registrato su Loom. Tuo da tenere.", v: "€500" },
  { t: "Architettura della campagna", d: "Struttura account, audience e framework di test — costruiti da uno specialista Meta/Google.", v: "INCLUSO" },
  { t: "Review settimanali sulle performance", d: "Call di 30 minuti con il tuo strategist. Senza il teatrino dell'account manager.", v: "INCLUSO" },
  { t: "Consegna completa degli asset", d: "Ogni file, ogni script, ogni edit. Tutto tuo. Anche se ci salutiamo al giorno 31.", v: "INCLUSO" },
];

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="A chi è rivolto"
          title={<>Otterrai il massimo da questa offerta<br/><span style={{ color: "#B3CDF9" }}>se uno di questi punti ti rispecchia.</span></>}
        />
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: isMobile ? 16 : 24,
          marginTop: isMobile ? 40 : 72,
        }}>
          <WhoList
            isMobile={isMobile}
            variant="for"
            title="Fa per te se…"
            items={[
              "Spendi €5K+ al mese in paid social e sei in stallo",
              "Il collo di bottiglia è il creativo — hook, ritmo o volume",
              "Sei un brand DTC, SaaS, app o servizio — early stage o in scaling",
              "Sei stato scottato da agenzie che promettevano 'su misura' e hanno consegnato roba scadente",
              "Vuoi specialisti che gestiscono le ads, non un account manager",
              "Vuoi possedere ogni file e ogni strategia alla fine dei 30 giorni",
            ]}
          />
          <WhoList
            isMobile={isMobile}
            variant="not"
            title="Non fa per te se…"
            items={[
              "Ti serve un logo, un sito o una brand identity — non li facciamo",
              "Sei pre-prodotto o spendi meno di €500/mese in ads",
              "Vuoi che gestiamo le ads partendo dai tuoi template Canva",
              "Ti aspetti risultati in 3 giorni senza iterazione creativa",
              "Speri che l'AI elimini la necessità di uno strategist umano",
              "Vuoi un retainer mensile senza che ci mettiamo la faccia",
            ]}
          />
        </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",
            }}>
              Un messaggio dal 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,
            }}>
              "Ho fondato Di Fiore perché ero stanco di vedere agenzie fatturare €15K/mese per consegnare tre ads a trimestre."
            </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",
            }}>
              Il mese gratuito non è un trucco di marketing — è il modo in cui dimostriamo che il sistema funziona. Se non riusciamo a muovere il tuo CPA in 30 giorni, non hai perso nulla. Tieni ogni asset, ogni documento di strategia, ogni configurazione di account. La maggior parte dei nostri clienti migliori è entrato da questa porta. Alcuni non hanno convertito. Va bene così. In ogni caso, ottieni un mese di lavoro vero. Senza upsell, senza trappole contrattuali.
            </div>
            <div style={{
              fontFamily: APPLE_TEXT_S, fontSize: isMobile ? 16 : 18,
              lineHeight: 1.55, color: "rgba(5,27,66,0.75)", letterSpacing: "-0.005em",
            }}>
              Lo limitiamo a 10 brand al mese perché il lavoro lo facciamo davvero noi.
            </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="ottieni" 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)" }}/>
          Posti Esauriti
        </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",
        }}>
          Un mese gratuito.<br/>
          <span style={{
            background: "linear-gradient(90deg,#fff,#B3CDF9)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            backgroundClip: "text",
            display: "inline-block",
            paddingRight: "0.12em",
          }}>Zero rischio.</span> Un brand in scaling.
        </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",
        }}>
          Dacci 30 giorni. Ti diamo 6 video, 25 statiche, una campagna live e prove alla mano. Nel caso peggiore: tieni tutto.
        </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>
              Piano Starter
            </div>
            <div style={{
              fontFamily: APPLE_SANS_S, fontWeight: 600,
              fontSize: isMobile ? 26 : 36,
              lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: 12,
            }}>
              Spendi meno di €5K al mese?<br/>
              <span style={{
                background: "linear-gradient(90deg,#fff,#B3CDF9)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                backgroundClip: "text",
                display: "inline-block",
                paddingRight: "0.12em",
              }}>Ti aiutiamo a crescere.</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,
            }}>
              Il nostro piano Starter ti offre gestione professionale delle campagne a un costo fisso — niente performance fees, nessun costo nascosto. Perfetto per brand che muovono i primi passi nel 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",
              }}>/mese</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="#ottieni" 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";}}
            >
              Inizia ora
              <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 = "Prenota il tuo mese gratuito", href = "#ottieni", 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 da operatori che scalano fatturato vero</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",
        }}>
          Sii la prossima{" "}
          <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",
          }}>storia di successo.</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 giorni. 6 video. 25 statiche. Una campagna live. Zero costi per iniziare.
        </p>

        {/* 3D CTA button — wrapped in a block div so it stacks above the trust row */}
        <div>
          <a href="#ottieni" 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>
            Prenota il tuo mese gratuito
            <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="Senza carta di credito"/>
          <TrustCheck label="Senza contratto"/>
          <TrustCheck label="Consegna in 72 ore"/>
          <TrustCheck label="Tieni tutti i contenuti"/>
        </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)",
          }}>Gestiamo ads su</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;