// CTA + FAQ + Footer
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "What does UniPaith actually do?",
      a: "UniPaith gives students an admissions experience once reserved for private college counselors — discovery, options, materials, submissions, management. For institutions, it's an end-to-end admission operating system combining marketing exposure, market insights, and streamlined admissions." },
    { q: "How does the AI matching work?",
      a: "Online platforms collect your context. Large language models convert that context into prompts and feature vectors. Our ML engine — using collaborative filtering and pattern recognition — turns those vectors into truthful matches with reasoning. All trained on permissioned partner data with bias avoidance in mind." },
    { q: "Is my data sold to schools?",
      a: "No. Never. Institutions can opt to contribute permissioned, de-identified outcome data that trains and improves our models. We monetize through SaaS for students and Insights-as-a-Service for institutions — not by selling raw student data." },
    { q: "What does the free trial include?",
      a: "Seven days of full access, no card required. After that, $99 introductory / $129 standard for twelve months. Need-based waivers available." },
    { q: "How do institutions partner with UniPaith?",
      a: "$15,000 per admissions unit per year, first 2,500 submitted applications included, $2 per application above that. Partners also gain access to market insights and fit-based marketing channels." },
    { q: "How do you avoid bias in recommendations?",
      a: "Our ML engine is trained with bias avoidance in mind, on permissioned historical data from partner institutions. Every recommendation comes with reasoning, and every cohort is audited for fairness." },
  ];

  return (
    <section id="faq" style={{ padding: "140px 40px", background: "var(--fog-200)" }}>
      <div style={{ maxWidth: 1000, margin: "0 auto" }}>
        <div data-reveal="up" style={{ marginBottom: 64, textAlign: "center" }}>
          <SectionNum n={6} color="var(--ocean-500)"/>
          <h2 style={{
            fontFamily: "var(--font-heading)", fontSize: "clamp(36px, 4vw, 54px)",
            fontWeight: 600, color: "var(--navy-500)", letterSpacing: "-0.025em",
            lineHeight: 1.05, margin: "16px auto 0", maxWidth: 640,
          }}>
            Questions, <HandWritten color="var(--ocean-500)" variant={2}>Answered</HandWritten>.
          </h2>
          <span data-path-anchor="left" data-path-offset-y="-20" aria-hidden style={{ display: "block", height: 1 }}/>
        </div>
        <div data-reveal="up" data-reveal-delay="100" style={{ display: "flex", flexDirection: "column", gap: 0,
                      background: "var(--card)", borderRadius: 20,
                      border: "1px solid var(--border)", overflow: "hidden" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: i < items.length - 1 ? "1px solid var(--border)" : "none" }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                        style={{ width: "100%", display: "flex", alignItems: "center",
                                 justifyContent: "space-between", gap: 20,
                                 padding: "26px 32px", background: "transparent",
                                 border: 0, cursor: "pointer", textAlign: "left",
                                 fontFamily: "var(--font-heading)", fontSize: 18,
                                 fontWeight: 600, color: "var(--navy-500)",
                                 letterSpacing: "-0.01em" }}>
                  <span>{it.q}</span>
                  <div style={{
                    width: 32, height: 32, borderRadius: "50%",
                    background: isOpen ? "var(--navy-500)" : "var(--fog-200)",
                    color: isOpen ? "var(--fog-100)" : "var(--navy-500)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0, transition: "all 200ms var(--ease-out)",
                  }}>{isOpen ? <Minus size={16}/> : <Plus size={16}/>}</div>
                </button>
                {isOpen && (
                  <div style={{ padding: "0 32px 28px", fontSize: 15.5, lineHeight: 1.65,
                                color: "var(--muted-foreground)", maxWidth: 780 }}>
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const WaitlistCTA = () => {
  const [email, setEmail] = React.useState("");
  const [audience, setAudience] = React.useState("student");
  const [status, setStatus] = React.useState("idle");
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setStatus("loading");
    setTimeout(() => setStatus("success"), 700);
  };

  return (
    <section id="waitlist" data-nav-theme="dark" style={{
      padding: "140px 40px", background: "var(--navy-500)",
      color: "var(--fog-100)", position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <div data-parallax="0.12" data-float="slow" style={{ position: "absolute", top: "-20%", left: "50%", transform: "translateX(-50%)",
                      width: 900, height: 900,
                      background: "radial-gradient(circle, rgba(255,229,0,0.12), transparent 65%)",
                      filter: "blur(80px)" }}/>
      </div>

      <div data-reveal="up" style={{ position: "relative", maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <Eyebrow tint="gold" style={{ color: "var(--gold-500)", justifyContent: "center",
                                       display: "inline-flex", marginBottom: 24 }}>
          <GoldDot/> Your path starts here
        </Eyebrow>
        <h2 style={{
          fontFamily: "var(--font-heading)", fontSize: "clamp(44px, 5.5vw, 72px)",
          fontWeight: 600, color: "var(--fog-100)", letterSpacing: "-0.03em",
          lineHeight: 1.02, margin: "0 0 24px",
        }}>
          One profile.<br/>
          <HandWritten color="var(--gold-500)" variant={1}>Every Path.</HandWritten>
        </h2>
        <span data-path-anchor="right" data-path-offset-y="-40" aria-hidden style={{ display: "block", height: 1 }}/>
        <p style={{ fontSize: 19, color: "rgba(253,252,248,0.7)", lineHeight: 1.55,
                    maxWidth: 560, margin: "0 auto 44px" }}>
          Help us bridge the information asymmetry in education. Join the waitlist — we'll let you in first.
        </p>

        {status === "success" ? (
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10,
                        padding: "18px 28px", background: "rgba(255,229,0,0.12)",
                        border: "1px solid rgba(255,229,0,0.3)", borderRadius: 16,
                        color: "var(--gold-500)", fontWeight: 600, fontSize: 16 }}>
            <CheckCircle size={22}/> You're on the list. We'll be in touch soon.
          </div>
        ) : (
          <>
            {/* Audience tabs */}
            <div style={{ display: "inline-flex", padding: 5, background: "rgba(255,255,255,0.06)",
                          border: "1px solid rgba(255,255,255,0.12)", borderRadius: 999,
                          marginBottom: 20 }}>
              {[{k:"student",l:"I'm a Student"},{k:"institution",l:"I'm an Institution"}].map(t => (
                <button key={t.k} onClick={()=> setAudience(t.k)}
                        style={{ padding: "10px 22px", borderRadius: 999, border: 0,
                                 background: audience === t.k ? "var(--gold-500)" : "transparent",
                                 color: audience === t.k ? "var(--navy-500)" : "rgba(253,252,248,0.7)",
                                 fontSize: 13.5, fontWeight: 600, cursor: "pointer",
                                 fontFamily: "var(--font-body)",
                                 transition: "all 200ms var(--ease-out)" }}>
                  {t.l}
                </button>
              ))}
            </div>

            <form onSubmit={submit} style={{ display: "flex", gap: 10, maxWidth: 560,
                                              margin: "0 auto", flexWrap: "wrap",
                                              justifyContent: "center" }}>
              <input type="email" value={email} onChange={(e)=> setEmail(e.target.value)}
                     placeholder={audience === "student" ? "your@school.edu" : "you@institution.edu"}
                     style={{ flex: "1 1 300px", minWidth: 200, height: 58,
                              borderRadius: 999, border: "1px solid rgba(253,252,248,0.2)",
                              background: "rgba(19,36,67,0.6)", padding: "0 24px",
                              fontSize: 15, color: "var(--fog-100)",
                              fontFamily: "var(--font-body)", outline: "none" }}/>
              <Button variant="primary" size="lg" onClick={submit}
                      iconEnd={status === "loading" ? null : <ArrowRight size={18}/>}>
                {status === "loading" ? "…" : audience === "student" ? "Join the Waitlist" : "Request a Demo"}
              </Button>
            </form>
            <p style={{ fontSize: 13, color: "rgba(253,252,248,0.45)", margin: "20px 0 0" }}>
              No spam. No raw data selling. Ever.
            </p>
          </>
        )}
      </div>
    </section>
  );
};

const Footer = () => (
  <footer data-nav-theme="dark" style={{ background: "var(--navy-600)", color: "var(--fog-100)", padding: "72px 40px 48px",
                   borderTop: "1px solid rgba(253,252,248,0.08)" }}>
    <div style={{ maxWidth: 1360, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 48, marginBottom: 56 }}>
        <div>
          <Logo variant="dark" height={30}/>
          <p style={{ fontSize: 14.5, color: "rgba(253,252,248,0.6)",
                      margin: "20px 0 0", maxWidth: 300, lineHeight: 1.65 }}>
            Bridging the information asymmetry in education. One profile, every path —
            for students and institutions alike.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
            {["in","tw","yt"].map(s => (
              <div key={s} style={{ width: 36, height: 36, borderRadius: 10,
                                    background: "rgba(255,255,255,0.06)",
                                    border: "1px solid rgba(255,255,255,0.1)",
                                    display: "flex", alignItems: "center", justifyContent: "center",
                                    fontSize: 11, fontWeight: 700, color: "var(--fog-100)",
                                    textTransform: "uppercase", letterSpacing: ".05em" }}>{s}</div>
            ))}
          </div>
        </div>
        {[
          { t: "Students", items: ["Features", "Pricing", "Free trial", "FAQ"] },
          { t: "Institutions", items: ["Overview", "Pricing", "Partner program", "Request a demo"] },
          { t: "Platform", items: ["UniEngine", "Security", "Data practices", "Changelog"] },
          { t: "Company", items: ["About", "Contact", "Careers", "Press"] },
        ].map(c => (
          <div key={c.t}>
            <h5 style={{ fontSize: 13, fontWeight: 600, fontFamily: "var(--font-body)",
                         margin: "0 0 18px", color: "var(--fog-100)",
                         textTransform: "uppercase", letterSpacing: ".12em" }}>{c.t}</h5>
            <ul style={{ listStyle: "none", padding: 0, margin: 0,
                         display: "flex", flexDirection: "column", gap: 12 }}>
              {c.items.map(i => (
                <li key={i}>
                  <a href="#" style={{ fontSize: 14, color: "rgba(253,252,248,0.6)",
                                        textDecoration: "none" }}>{i}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 28, borderTop: "1px solid rgba(253,252,248,0.1)",
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    flexWrap: "wrap", gap: 16 }}>
        <div style={{ fontSize: 13, color: "rgba(253,252,248,0.45)" }}>
          © 2026 UniPaith. <em style={{ fontFamily: "var(--font-heading)" }}>Apply once, go anywhere.</em>
        </div>
        <div style={{ fontSize: 13, color: "rgba(253,252,248,0.45)" }}>
          Privacy · Terms · Security
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { FAQ, WaitlistCTA, Footer });
