// About page for theaiparentguide.com. Rough first pass. Composes AFP
// design-system primitives. Exposes window.AboutPage.
const DS = window.AIForParentsDesignSystem_cccd50;
const { Button, Kicker, Badge, Card, CJPortrait } = DS;

function AboutNav() {
  const link = { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14, color: "var(--text-on-navy)", textDecoration: "none" };
  const dim = { ...link, color: "var(--navy-300)", opacity: 0.5, cursor: "not-allowed" };
  const [open, setOpen] = React.useState(false);
  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={link}>The Guides</a>
          <span style={dim} title="Coming soon">Videos</span>
          <a href="/about/" style={{ ...link, color: "var(--afp-amber)" }}>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={{ ...link, padding: "10px 0" }}>The Guides</a>
        <span style={{ ...dim, padding: "10px 0" }}>Videos (soon)</span>
        <a href="/about/" style={{ ...link, color: "var(--afp-amber)", padding: "10px 0" }}>About</a>
        <a href="/subscribe/" style={{ ...link, color: "var(--afp-amber)", fontWeight: 600, padding: "10px 0" }}>Subscribe</a>
      </div>
    </div>
  );
}

function AboutHero() {
  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.18 }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--afp-navy) 34%, rgba(27,49,82,0.55) 82%, rgba(27,49,82,0.35))" }} />
      <div className="wrap r-cols" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 34, alignItems: "center", padding: "60px 40px" }}>
        <div>
          <Kicker tone="amber">About</Kicker>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 44, lineHeight: 1.08, letterSpacing: "-0.02em", color: "#fff", margin: "12px 0 16px" }}>
            Calm beats fear.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--text-on-navy-muted)", maxWidth: 460, margin: 0 }}>
            AI for Parents helps normal parents raise kids in the AI era — with plain-English guidance that's practical, not alarmist. No panic. No TED talk. Just what to do tonight.
          </p>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <CJPortrait src="/assets/cj/cj-bust-lowerthird.png" frame="bust" size={260} />
        </div>
      </div>
    </div>
  );
}

function AboutStory() {
  return (
    <div className="wrap r-cols" style={{ padding: "56px 40px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start" }}>
      <div>
        <Kicker tone="navy">Why this exists</Kicker>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, color: "var(--afp-navy)", margin: "10px 0 14px", lineHeight: 1.15 }}>
          Most AI advice for parents is either hype or fear.
        </h2>
        <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--text-body)", margin: "0 0 14px" }}>
          Your teen is already using AI. The headlines are either "it'll change everything" or "it'll ruin them" — neither helps you at the dinner table tonight.
        </p>
        <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--text-body)", margin: 0 }}>
          We translate what's actually happening into calm, specific steps: the settings worth turning on, the rules worth setting, and the exact words to say. You're a capable adult navigating something new — we treat you like one.
        </p>
      </div>
      <div>
        <Kicker tone="navy">Meet Jason, your guide</Kicker>
        <div style={{ marginTop: 12, display: "flex", gap: 18, alignItems: "flex-start" }}>
          <CJPortrait src="/assets/cj/cj-headshot.png" frame="box" size={92} style={{ border: "1px solid var(--afp-white)" }} />
          <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--text-body)", margin: 0 }}>
            Jason is the host of AI for Parents — a calm, practical voice who explains AI the way you'd want a knowledgeable friend to: no jargon, no lectures, and never fearmongering.
          </p>
        </div>
      </div>
    </div>
  );
}

function AboutPrinciples() {
  const items = [
    { k: "Calm beats fear", d: "Every guide is built to open a conversation, not start a panic." },
    { k: "Practical over theory", d: "Ten-minute setups and exact scripts — not a reading list." },
    { k: "Plain English", d: "Written for normal parents. If you can read a fridge note, you're set." },
  ];
  return (
    <div style={{ background: "var(--surface-cream)" }}>
      <div className="wrap" style={{ padding: "56px 40px" }}>
        <div style={{ textAlign: "center", marginBottom: 30 }}>
          <Kicker tone="navy">What we stand for</Kicker>
        </div>
        <div className="r-cols" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map((it) => (
            <Card key={it.k} tone="white" accentBar kicker={it.k} padding={22}>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--text-body)", margin: 0 }}>{it.d}</p>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

function AboutCTA() {
  return (
    <div style={{ background: "var(--afp-navy)" }}>
      <div className="wrap" style={{ padding: "52px 40px", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, color: "#fff", margin: "0 0 18px" }}>
          Start with the free checklist.
        </h2>
        <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
          <Button variant="primary" size="lg" as="a" href="/guides/family-ai-rules/">Get the checklist</Button>
          <Button variant="ghost" size="lg" as="a" href="/subscribe/" style={{ color: "#fff", borderColor: "var(--line-on-navy)" }}>Join the list</Button>
        </div>
      </div>
    </div>
  );
}

function AboutFooter() {
  return (
    <div style={{ background: "var(--navy-900)", color: "var(--text-on-navy-muted)" }}>
      <div className="wrap" style={{ padding: "26px 40px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, color: "#fff" }}>AI for Parents · <span style={{ color: "var(--afp-amber)" }}>TheAIParentGuide.com</span></span>
        <span style={{ fontSize: 12, maxWidth: 460, textAlign: "right" }}>Educational use only. Not legal, medical, or school-policy advice.</span>
      </div>
    </div>
  );
}

function AboutPage() {
  return (
    <div style={{ background: "var(--surface-white)" }}>
      <AboutNav />
      <AboutHero />
      <AboutStory />
      <AboutPrinciples />
      <AboutCTA />
      <AboutFooter />
    </div>
  );
}
window.AboutPage = AboutPage;