// AI for Parents marketing landing (theaiparentguide.com). Composes AFP
// design-system primitives. Exposes window.AFPLanding.
const DS = window.AIForParentsDesignSystem_cccd50;
const { Button, Kicker, Badge, Card, StatCallout, CJPortrait } = DS;

const VIDEOS = [
  { tag: "Video 1", title: "Is ChatGPT Safe for Kids?", meta: "Setup + the conversation · 10 min", accent: true },
  { tag: "Video 2", title: "The AI Conversation Every Parent Should Have", meta: "The four questions that work · 9 min" },
  { tag: "Video 3", title: "ChatGPT in 15 Minutes: The Safe Setup", meta: "Both paths, step by step · 13 min" },
  { tag: "Video 4", title: "7 AI Apps Your Kid Might Already Be Using", meta: "What they are, what to watch · 12 min" },
];

const VALUES = [
  { k: "Plain English", t: "No jargon, no lectures", d: "Every guide is written the way you'd explain it to a friend — practical over alarmist, always." },
  { k: "Do-it-tonight", t: "Steps, not theory", d: "Ten-minute setups and exact scripts you can use at the dinner table, not a reading list." },
  { k: "Calm beats fear", t: "Confidence, not panic", d: "You're a capable adult navigating something new. We treat you like one." },
];

function TopNav() {
  const [open, setOpen] = React.useState(false);
  const linkS = { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14, color: "var(--text-on-navy)", textDecoration: "none" };
  const dimS = { ...linkS, color: "var(--navy-300)", opacity: 0.5, cursor: "not-allowed" };
  return (
    <div style={{ background: "var(--surface-navy)", borderBottom: "1px solid var(--line-on-navy)", position: "relative" }}>
      <div className="wrap" style={{ height: 66, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="/" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <CJPortrait src="/assets/cj/cj-headshot.png" frame="box" size={34} style={{ border: "1px solid var(--afp-white)" }} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "#fff" }}>AI for Parents</span>
        </a>
        <div className="r-nav-links" style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <a href="/guides/" style={linkS}>The Guides</a>
          <a href="/videos/" style={linkS}>Videos</a>
          <a href="/about/" style={linkS}>About</a>
          <Button variant="primary" size="sm" as="a" href="/subscribe/">Subscribe</Button>
        </div>
        <button className="r-menu-btn" onClick={() => setOpen(!open)} aria-label="Menu"
          style={{ background: "transparent", border: "1px solid var(--line-on-navy)", borderRadius: 8, width: 40, height: 36, alignItems: "center", justifyContent: "center", cursor: "pointer", color: "#fff", fontSize: 18, lineHeight: 1 }}>
          {open ? "✕" : "☰"}
        </button>
      </div>
      <div className={"r-mobile-menu" + (open ? " open" : "")} style={{ flexDirection: "column", gap: 4, padding: "8px 20px 16px", background: "var(--surface-navy)", borderTop: "1px solid var(--line-on-navy)" }}>
        <a href="/guides/" style={{ ...linkS, padding: "10px 0" }}>The Guides</a>
        <a href="/videos/" style={{ ...linkS, padding: "10px 0" }}>Videos</a>
        <a href="/about/" style={{ ...linkS, padding: "10px 0" }}>About</a>
        <a href="/subscribe/" style={{ ...linkS, padding: "10px 0", color: "var(--afp-amber)", fontWeight: 600 }}>Subscribe</a>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <div style={{ position: "relative", background: "var(--afp-navy)", overflow: "hidden" }}>
      <img src="/assets/brand/circuit-board.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.22 }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--afp-navy) 30%, rgba(27,49,82,0.55) 78%, rgba(27,49,82,0.35))" }} />
      <div className="wrap r-cols" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 30, alignItems: "center", padding: "56px 40px 62px" }}>
        <div>
          <Kicker tone="amber">Calm · Practical · Trustworthy</Kicker>
          <h1 className="r-h1" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.02em", color: "#fff", margin: "14px 0 0" }}>
            AI explained for<br />normal parents.
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--text-on-navy-muted)", maxWidth: 460, margin: "18px 0 26px" }}>
            Calm, plain-English guidance for parents of teens navigating AI — no panic, no TED talk. Just what to do tonight.
          </p>
          <div style={{ display: "flex", gap: 12 }}>
            <Button variant="primary" size="lg" as="a" href="/guides/">Get a free guide</Button>
            <Button variant="ghost" size="lg" as="a" href="https://www.youtube.com/@TheAIParentGuide" target="_blank" rel="noopener" style={{ color: "#fff", borderColor: "var(--line-on-navy)" }}>Videos coming soon</Button>
          </div>
        </div>
        <div className="r-hero-art" style={{ display: "flex", justifyContent: "center" }}>
          <CJPortrait src="/assets/cj/cj-bust-lowerthird.png" frame="bust" size={300} />
        </div>
      </div>
    </div>
  );
}

function Values() {
  return (
    <div className="wrap" style={{ padding: "56px 40px" }}>
      <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 34px" }}>
        <Kicker tone="navy">Why parents trust it</Kicker>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, color: "var(--afp-navy)", margin: "10px 0 0" }}>
          The channel that stays calm
        </h2>
      </div>
      <div className="r-cols" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {VALUES.map((v) => (
          <Card key={v.k} tone="white" accentBar kicker={v.k} title={v.t} padding={24}>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--text-body)", margin: 0 }}>{v.d}</p>
          </Card>
        ))}
      </div>
    </div>
  );
}

function ChecklistOptIn() {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  return (
    <div style={{ background: "var(--surface-navy)" }}>
      <div className="wrap r-cols" style={{ display: "grid", gridTemplateColumns: "1fr 0.9fr", gap: 40, alignItems: "center", padding: "56px 40px" }}>
        <div>
          <Kicker tone="amber">Free · Start here</Kicker>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, color: "#fff", margin: "12px 0 10px", lineHeight: 1.1 }}>
            The 8 Rules for AI at Home
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--text-on-navy-muted)", maxWidth: 440, margin: "0 0 22px" }}>
            One page. Print it, screenshot it, or stick it on the fridge. Eight plain-English rules plus by-age guidance and the exact words to say.
          </p>
          <Button variant="primary" size="lg" as="a" href="/guides/family-ai-rules/">Get the free checklist</Button>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          {/* Mini preview of the checklist sheet */}
          <div style={{ width: 260, background: "var(--surface-cream)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", overflow: "hidden", transform: "rotate(-2deg)" }}>
            <div style={{ background: "var(--afp-navy)", padding: "16px 18px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 8, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--afp-amber)" }}>AI for Parents · Family AI Rules</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "#fff", marginTop: 5 }}>The 8 Rules for AI at Home</div>
            </div>
            <div style={{ padding: "14px 16px", display: "grid", gap: 6 }}>
              {["No AI for assignments.", "Read AI output first.", "It remembers everything.", "Check a real source."].map((t, i) => (
                <div key={i} style={{ display: "flex", gap: 8, alignItems: "center", borderLeft: "3px solid var(--afp-amber)", paddingLeft: 8, background: "var(--surface-cream-soft)", padding: "6px 8px", borderRadius: 3 }}>
                  <span style={{ width: 10, height: 10, border: "2px solid var(--afp-navy)", borderRadius: 2, flex: "none" }} />
                  <span style={{ fontSize: 9.5, color: "var(--text-body)" }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function LatestVideos() {
  return (
    <div className="wrap" style={{ padding: "56px 40px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 26 }}>
        <div>
          <Kicker tone="navy">Coming soon</Kicker>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, color: "var(--afp-navy)", margin: "8px 0 0" }}>Videos launching soon</h2>
        </div>
        <Button variant="link" as="a" href="/subscribe/">Subscribe for updates</Button>
      </div>
      <div className="r-cols" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
        {VIDEOS.map((v) => (
          <div key={v.title} style={{ background: "var(--surface-white)", borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--line-on-cream)", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--afp-navy)", overflow: "hidden" }}>
              <img src="/assets/brand/circuit-board.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.25 }} />
              <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                <div style={{ padding: "5px 12px", borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,0.14)", border: "1px solid var(--line-on-navy)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "#fff" }}>Coming soon</div>
              </div>
              <div style={{ position: "absolute", top: 10, left: 10 }}><Badge tone={v.accent ? "amber" : "navy"}>{v.tag}</Badge></div>
            </div>
            <div style={{ padding: "14px 15px 16px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, color: "var(--afp-navy)", lineHeight: 1.25 }}>{v.title}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-secondary)", marginTop: 6 }}>{v.meta}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div style={{ background: "var(--navy-900)", color: "var(--text-on-navy-muted)" }}>
      <div className="wrap" style={{ padding: "40px 40px 34px", display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 20 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <img src="/assets/brand/favicon.png" alt="" width="26" height="26" style={{ borderRadius: 6, display: "block" }} />
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "#fff" }}>AI for Parents</div>
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14, color: "var(--afp-amber)", marginTop: 4 }}>TheAIParentGuide.com</div>
          <p style={{ fontSize: 12.5, maxWidth: 360, marginTop: 12, lineHeight: 1.5 }}>Educational use only. Not legal, medical, or school-policy advice.</p>
        </div>
        <div style={{ display: "flex", gap: 44, flexWrap: "wrap" }}>
          {[
            ["Start here", [["The Guides", "/guides/"], ["Subscribe", "/subscribe/"], ["About", "/about/"], ["Videos", "/videos/"]]],
            ["The fine print", [["Privacy", "/privacy/"], ["Terms of Use", "/terms/"], ["Disclaimer", "/disclaimer/"], ["Affiliate Disclosure", "/affiliates/"]]],
            ["Get in touch", [["YouTube", "https://www.youtube.com/@TheAIParentGuide"], ["Contact", "/contact/"], ["Sponsor & partner", "/sponsor/"], ["hello@theaiparentguide.com", "mailto:hello@theaiparentguide.com"]]],
          ].map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff", marginBottom: 10 }}>{h}</div>
              {items.map(([label, href]) => (
                <div key={label} style={{ fontSize: 13.5, padding: "4px 0" }}>
                  {href ? <a href={href} style={{ color: "var(--text-on-navy-muted)", textDecoration: "none" }}>{label}</a>
                        : <span style={{ color: "var(--navy-300)", opacity: 0.5 }}>{label}</span>}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AFPLanding() {
  return (
    <div>
      <TopNav />
      <Hero />
      <Values />
      <ChecklistOptIn />
      <LatestVideos />
      <Footer />
    </div>
  );
}
window.AFPLanding = AFPLanding;