/* ============================================================
   B4IOU — Step 1 : Landing
   ============================================================ */

function Landing({ onStart }) {
  const props = [
    { icon: "💰", t: "See what you'll actually pay", d: "Real out-of-pocket cost after aid — not the sticker price." },
    { icon: "🎓", t: "Know if your degree is really accredited", d: "Institutional AND programmatic, in plain English." },
    { icon: "📊", t: "Compare schools side by side", d: "Two programs, head to head, no admissions spin." },
  ];

  return (
    <div className="screen">
      <div className="topbar">
        <div className="topbar-row">
          <Brand />
          <span className="pill accent"><Ico.bolt /> Free first report</span>
        </div>
      </div>

      <div className="pad-lg grow stack" style={{ gap: 0 }}>
        {/* hero */}
        <div className="fade-up" style={{ marginTop: 18 }}>
          <span className="eyebrow"><Ico.spark /> B4IOU.COM — Know before you owe.</span>
        </div>

        <h1 className="display fade-up d1" style={{ marginTop: 18 }}>
          Know<br/>before<br/>you <span style={{ color: "var(--accent)" }}>owe.</span>
        </h1>

        <p className="lede fade-up d2" style={{ marginTop: 20, maxWidth: 380 }}>
          Compare real program costs, aid eligibility, and accreditation — <span style={{ color: "var(--text)" }}>before you commit to anything.</span>
        </p>

        <div className="fade-up d3" style={{ marginTop: 26 }}>
          <Btn kind="accent" size="lg" arrow onClick={onStart}>Start My Comparison</Btn>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, justifyContent: "center" }}>
            <span className="mono" style={{ fontSize: 11.5, color: "var(--text-3)" }}>No login · No card · 60 seconds</span>
          </div>
        </div>

        {/* value props */}
        <div className="kicker-bar fade-up d3" style={{ marginTop: 34, marginBottom: 16 }}>
          <span className="ln" />
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", color: "var(--text-3)", textTransform: "uppercase" }}>What you get</span>
          <span className="ln" />
        </div>

        <div className="stack fade-up d4" style={{ gap: 10 }}>
          {props.map((p) => (
            <div className="vp" key={p.t}>
              <span className="ico">{p.icon}</span>
              <div>
                <div className="vp-t">{p.t}</div>
                <div className="vp-d">{p.d}</div>
              </div>
            </div>
          ))}
        </div>

        {/* trust strip */}
        <div className="fade-up d4" style={{ marginTop: 24, padding: "16px 0 0", borderTop: "1px solid var(--line)", display: "flex", gap: 18, flexWrap: "wrap" }}>
          <Stat n="$1.7T" l="U.S. student debt" />
          <Stat n="42M" l="borrowers" />
          <Stat n="0" l="reasons to guess" accent />
        </div>

        {/* legal footer */}
        <div className="fade-up d4 site-foot">
          <p>B4IOU is an independent student advocacy tool. For legal inquiries contact: <a href="mailto:hello@b4iou.com">hello@b4iou.com</a></p>
          <p className="copy">© 2026 B4IOU — All rights reserved.</p>
        </div>
      </div>

      <div className="sticky-cta">
        <Btn kind="accent" size="lg" arrow onClick={onStart}>Start My Comparison</Btn>
      </div>
    </div>
  );
}

function Stat({ n, l, accent }) {
  return (
    <div>
      <div className="figure" style={{ fontSize: 22, color: accent ? "var(--accent)" : "var(--text)" }}>{n}</div>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 2 }}>{l}</div>
    </div>
  );
}

Object.assign(window, { Landing });