// Reusable, catalog-driven opt-in (email capture) page for any AFP guide. // Reads window.AFP_GUIDE_KEY + window.AFP_GUIDES (guides-catalog.js). // On submit → redirects to that guide's thank-you page (prototype flow), or // posts to your provider when AFP_SIGNUP_ACTION is set. Exposes window.GuideOptin. function GuideOptinForm({ guide }) { const { Button: GOButton, Kicker: GOKicker, Badge: GOBadge, CJPortrait: GOPortrait } = window.AIForParentsDesignSystem_cccd50; const [email, setEmail] = React.useState(""); const [firstName, setFirstName] = React.useState(""); const [sent, setSent] = React.useState(false); // Posts directly to MailerLite's real form-submit endpoint (from the form's HTML // embed export) via fetch — a hidden-iframe/native-submit approach was tried first // but let MailerLite's own generic-styled form bleed through visibly on the page. // fetch with mode:"no-cors" posts the same fields with zero visible side effect; // the response is opaque (cross-origin), so we optimistically redirect after. const account = window.AFP_MAILERLITE_ACCOUNT; const live = account && guide.mlFormId; return (
{ e.preventDefault(); if (!email.includes("@")) return; if (live) { const fd = new FormData(); fd.append("fields[email]", email); fd.append("fields[name]", firstName); fd.append("ml-submit", "1"); fetch("https://assets.mailerlite.com/jsonp/" + account + "/forms/" + guide.mlFormId + "/subscribe", { method: "POST", mode: "no-cors", body: fd }).catch(() => {}); setSent(true); setTimeout(() => { window.location.href = guide.thanks; }, 500); return; } if (window.AFP_SIGNUP_ACTION) { fetch(window.AFP_SIGNUP_ACTION, { method: "POST", mode: "no-cors", body: new URLSearchParams({ guide: guide.key, name: firstName, email }) }).catch(() => {}); } window.location.href = guide.thanks; }} style={{ display: "flex", gap: 10, maxWidth: 480, flexWrap: "wrap" }}> setFirstName(e.target.value)} type="text" placeholder="First name (optional)" style={{ flex: "1 1 150px", fontFamily: "var(--font-body)", fontSize: "var(--fs-body)", padding: "13px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--line-on-navy)", background: "rgba(255,255,255,0.06)", color: "#fff", outline: "none" }} /> setEmail(e.target.value)} type="email" required placeholder="you@email.com" style={{ flex: "1 1 240px", fontFamily: "var(--font-body)", fontSize: "var(--fs-body)", padding: "13px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--line-on-navy)", background: "rgba(255,255,255,0.06)", color: "#fff", outline: "none" }} /> {sent ? "Sending…" : "Send it to me"}
); } // Generic guide-cover mock, built from catalog fields (no per-guide art needed). function GuideCover({ guide }) { const { Button: GOButton, Kicker: GOKicker, Badge: GOBadge, CJPortrait: GOPortrait } = window.AIForParentsDesignSystem_cccd50; return (
AI for Parents · Free guide
{guide.title}
{guide.bullets.slice(0, 4).map((b, i) => (
{b}
))}
); } // The article that sits under the opt-in. Catalog-driven like everything else // here: a guide with no `article` renders nothing and the page is unchanged. // // It exists because the opt-in on its own answers no question. A parent // searching "google family link setup" wants the steps, and a page that only // asks for an email gives a search engine nothing to rank and the parent // nothing to read. The guide is still the thing worth having — this is the // answer, and the PDF is the version you can print and keep. function GuideArticle({ guide }) { const a = guide.article; if (!a) return null; const H2 = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 27, lineHeight: 1.2, color: "var(--afp-navy)", margin: "44px 0 14px", letterSpacing: "-0.01em" }; const P = { fontSize: 17, lineHeight: 1.72, color: "var(--ink-900)", margin: "0 0 16px" }; const STEP_H = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--afp-navy)", margin: "0 0 6px" }; return (
{a.intro.map((t, i) => (

{t}

))} {a.sections.map((s, i) => (

{s.h}

{(s.p || []).map((t, j) =>

{t}

)} {s.steps && (
    {s.steps.map((st, j) => (
  1. {j + 1}
    {st.h}

    {st.p}

    2. ))}
)} {s.list && (
    {s.list.map((t, j) => (
  • • {t}
    • ))}
)} {/* The script's signature unit: what the kid says, what is really going on, and the exact words back. */} {s.exchange && (
{s.exchange.map((row, j) => (
{row.label}
{row.text}
))}
)} {/* Questions get their own heading each. A parent scanning for one answer should find it without reading the paragraph above it, and a search engine reads a heading as the question it is. */} {s.qa && s.qa.map((row, j) => (

{row.q}

{row.a}

))} {s.source && (

{s.source}

)}
))} {a.bottomLine && (
The bottom line
{a.bottomLine}
)} {/* Real links between the guides, in context rather than only in the footer. A parent on the Family Link page who owns an iPhone needs the next page, and a crawler reads a link in the body as a stronger signal than one in a site-wide list. */} {a.related && a.related.length > 0 && (
Read next
    {a.related.map((r, i) => (
  • {r.text} {r.note && — {r.note}}
    • ))}
)} {a.updated && (

Last checked {a.updated}.

)}
); } function GuideOptin() { const { Badge: GOBadge } = window.AIForParentsDesignSystem_cccd50; const { SiteNav, SiteFooter } = window; const key = window.AFP_GUIDE_KEY; const guide = (window.AFP_GUIDES || {})[key]; if (!guide) { return
Unknown guide: {String(key)}
; } return (
{guide.pages} · yours free
} >
{guide.badge}
{guide.bullets.map((b, i) => (
✓ {b}
))}
Free · No spam · Unsubscribe anytime
); } window.GuideOptin = GuideOptin;