/* Lintie marketing + signup + onboarding site. Self-contained (brand tokens
   from /styles.css). Routes by location.pathname; navigation uses real links so
   Vercel rewrites serve this file and the page re-renders for the path.
   No payment/app logic here — links into the app live at /app/*. */
const { useState, useEffect } = React;

const S = {
  wrap: { maxWidth: 1080, margin: "0 auto", padding: "0 24px" },
  h1: { fontFamily: "var(--font-sans)", fontWeight: 800, letterSpacing: "-0.03em", color: "var(--text-strong)", margin: 0 },
  navy: "var(--navy)", coral: "var(--coral)", muted: "var(--text-muted)",
};
const Btn = ({ href, onClick, variant, children, big }) => {
  const base = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, height: big ? 54 : 46, padding: big ? "0 26px" : "0 20px", borderRadius: "var(--radius-md)", fontFamily: "var(--font-sans)", fontSize: big ? 17 : 15, fontWeight: 700, cursor: "pointer", border: "none", textDecoration: "none" };
  const styles = variant === "primary" ? { ...base, background: "var(--coral)", color: "#fff" }
    : variant === "navy" ? { ...base, background: "var(--navy)", color: "#fff" }
    : { ...base, background: "var(--white)", color: "var(--navy)", border: "1px solid var(--border-strong)" };
  return href ? <a href={href} style={styles}>{children}</a> : <button type="button" onClick={onClick} style={styles}>{children}</button>;
};

const validEmail = (e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(e || "").trim());
const apiBase = () => (window.LINTIE_API && window.LINTIE_API.baseUrl) || "";
const sandboxMode = () => { try { return new URLSearchParams(location.search).get("sandbox") === "1" || (window.LINTIE_API && window.LINTIE_API.demo === true); } catch (e) { return false; } };
async function postJson(url, data) { const r = await fetch(url, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(data) }); if (!r.ok) { const e = await r.json().catch(() => ({})); throw new Error(e.error || ("HTTP " + r.status)); } return r.json(); }
function roleHome(role) { return (role === "guardian" || role === "parent") ? "/app/parent" : role === "solo" ? "/app/solo" : "/app/org"; }
const fieldErr = { color: "var(--status-danger, #B00020)", fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 600, margin: "0 0 12px" };

/* ---- Smooth in-page section navigation (Features / Pricing) --------------
   Smooth scroll + brief soft-coral highlight + heading focus for a11y, and
   keeps the URL hash in sync. Respects prefers-reduced-motion. NOT a modal:
   sections are shown in full context. Shared by header + footer. */
function ltReducedMotion() { try { return !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches); } catch (e) { return false; } }
function ltSmoothJump(id, updateHash) {
  if (typeof document === "undefined") return false;
  const el = document.getElementById(id);
  if (!el) return false;
  el.scrollIntoView({ behavior: ltReducedMotion() ? "auto" : "smooth", block: "start" });
  const heading = el.querySelector("h1, h2, h3") || el;
  try { heading.setAttribute("tabindex", "-1"); heading.focus({ preventScroll: true }); } catch (e) {}
  try { el.classList.remove("lt-section-flash"); void el.offsetWidth; el.classList.add("lt-section-flash"); window.setTimeout(function () { el.classList.remove("lt-section-flash"); }, 1100); } catch (e) {}
  if (updateHash !== false) { try { history.replaceState(null, "", "/#" + id); } catch (e) {} }
  return true;
}
function ltSectionClick(e, id) { if (ltSmoothJump(id, true)) { if (e) e.preventDefault(); } }
function ltBackToTop(e) { if (e) e.preventDefault(); try { window.scrollTo({ top: 0, behavior: ltReducedMotion() ? "auto" : "smooth" }); history.replaceState(null, "", "/"); } catch (err) { try { window.scrollTo(0, 0); } catch (x) {} } }

function Nav() {
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 20, background: "rgba(255,255,255,.9)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="lt-nav" style={{ ...S.wrap, display: "flex", alignItems: "center", gap: 16, height: 78, padding: "0 32px" }}>
        <a href="/" aria-label="Lintie home" className="brand-lockup brand-lockup-lg"><img src="/assets/lintie-bird-trim.png" alt="" className="brand-lockup-bird" /><img src="/assets/lintie-wordmark-trim.png" alt="Lintie" className="brand-lockup-word" /></a>
        <div style={{ flex: 1 }} />
        <div className="lt-nav-links" style={{ display: "flex", alignItems: "center", gap: 26 }}>
          <a href="/#pricing" onClick={(e) => ltSectionClick(e, "pricing")} style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Pricing</a>
          <a href="/help" className="lt-nav-secondary" style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Help</a>
          <a href="/login" className="lt-nav-secondary" style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Log in</a>
          <Btn href="/signup" variant="primary">Start free</Btn>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  const [modal, setModal] = useState(null); // null | 'contact' | 'careers' | 'demo'
  const linkStyle = { display: "block", fontFamily: "var(--font-sans)", fontSize: 14.5, color: "var(--text-strong)", padding: "5px 0", textDecoration: "none", background: "transparent", border: "none", cursor: "pointer", textAlign: "left" };
  const A = (t, h) => <a key={t} href={h} style={linkStyle}>{t}</a>;
  const SA = (t, id) => <a key={t} href={"/#" + id} onClick={(e) => ltSectionClick(e, id)} style={linkStyle}>{t}</a>;
  const B = (t, on) => <button key={t} type="button" onClick={on} style={linkStyle}>{t}</button>;
  const col = (title, items) => (
    <div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--navy-300)", marginBottom: 12 }}>{title}</div>
      {items}
    </div>
  );
  return (
    <div style={{ background: "var(--surface-sunken)", borderTop: "1px solid var(--border-subtle)", marginTop: 40 }}>
      <div style={{ ...S.wrap, padding: "40px 24px" }}>
        <div style={{ display: "flex", gap: 48, flexWrap: "wrap", marginBottom: 28 }}>
          <div style={{ flex: "1 1 220px", minWidth: 200 }}>
            <img src="/assets/lintie-logo-trim.png" alt="Lintie" className="brand-logo-md" style={{ marginBottom: 14 }} />
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)", maxWidth: 260 }}>Activities, bookings, payments and attendance — in one place.</div>
          </div>
          {col("Product", [SA("Features", "how"), SA("Pricing", "pricing"), A("Help Centre", "/help")])}
          {col("Company", [B("Contact", () => setModal("contact")), B("Careers", () => setModal("careers")), B("Request a Demo", () => setModal("demo"))])}
          {col("Legal", [A("Privacy Policy", "/privacy"), A("Terms of Service", "/terms")])}
          {col("Support", [A("Help Centre", "/help"), B("Contact Support", () => setModal("contact"))])}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 8 }}>
          <a href="#top" onClick={ltBackToTop} style={{ ...linkStyle, color: "var(--coral-700)", fontWeight: 700, padding: 0 }}>Back to top ↑</a>
        </div>
        <div style={{ borderTop: "1px solid var(--border-subtle)", paddingTop: 18, fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)", lineHeight: 1.6 }}>
          © 2026 Lintie.<br />
          Lintie is a trading name and product of AirMonk Ltd, a technology company registered in England and Wales (Company No. 16916713).
        </div>
      </div>
      <ContactSupportModal open={modal === "contact"} onClose={() => setModal(null)} />
      <ContactSupportModal open={modal === "careers"} onClose={() => setModal(null)} presetSubject="Careers enquiry"
        intro={"We’re always looking for exceptional people who want to build technology that creates meaningful impact. If that sounds like you, send us a message."} />
      <DemoRequestModal open={modal === "demo"} onClose={() => setModal(null)} />
    </div>
  );
}

/* ---- Reusable Contact Support modal (shared by Footer + Help) ------------- */
function ModalShell({ title, onClose, children }) {
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(17,24,39,.45)", zIndex: 50, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={title} style={{ width: "100%", maxWidth: 420, background: "var(--white)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-lg)", overflow: "hidden", maxHeight: "88vh", display: "flex", flexDirection: "column" }}>
        <div style={{ background: "var(--navy)", color: "#fff", padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between", fontFamily: "var(--font-sans)", fontWeight: 700, flex: "none" }}>{title}<button type="button" aria-label="Close" onClick={onClose} style={{ border: "none", background: "transparent", color: "#fff", cursor: "pointer", fontSize: 20, lineHeight: 1 }}>×</button></div>
        <div style={{ padding: 16, overflowY: "auto" }}>{children}</div>
      </div>
    </div>
  );
}
function ContactSupportModal({ open, onClose, presetSubject, intro }) {
  const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [msg, setMsg] = useState("");
  const [err, setErr] = useState(""); const [sent, setSent] = useState(false); const [busy, setBusy] = useState(false);
  if (!open) return null;
  const subject = presetSubject || "Contact support";
  const ci = { width: "100%", height: 46, padding: "0 12px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 15, boxSizing: "border-box", marginBottom: 10 };
  const submit = async (e) => {
    if (e) e.preventDefault(); setErr("");
    if (!name.trim() || !validEmail(email) || !msg.trim()) return setErr("Add your name, a valid email and a short message.");
    setBusy(true);
    try {
      const endpoint = window.LINTIE_FORMS_ENDPOINT;
      if (endpoint) { await postJson(endpoint, { kind: "support", subject, name, email, message: msg }); }
      else { window.location.href = "mailto:support@lintie.app?subject=" + encodeURIComponent(subject + " — " + name) + "&body=" + encodeURIComponent(msg + "\n\nFrom: " + email); }
      setSent(true);
    } catch (ex) { setErr("Couldn’t send just now — email support@lintie.app and we’ll help."); }
    finally { setBusy(false); }
  };
  return (
    <ModalShell title={subject} onClose={onClose}>
      {sent ? (
        <div role="status"><div style={{ fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 800, color: "var(--status-success, #1B7F4B)", marginBottom: 6 }}>Message sent</div><div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, color: "var(--text-strong)" }}>Thanks — your message has been sent to Lintie support.</div></div>
      ) : (
        <form onSubmit={submit}>
          {intro && intro.split("\n\n").map((para, i) => <p key={i} style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)", margin: "0 0 12px", lineHeight: 1.5 }}>{para}</p>)}
          {err && <div role="alert" style={{ color: "var(--status-danger, #B00020)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, marginBottom: 8 }}>{err}</div>}
          <input style={ci} aria-label="Your name" placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} />
          <input style={ci} type="email" aria-label="Email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
          <textarea aria-label="How can we help?" placeholder={presetSubject === "Careers enquiry" ? "Tell us about yourself" : "How can we help?"} value={msg} onChange={(e) => setMsg(e.target.value)} style={{ ...ci, height: 96, padding: "10px 12px", resize: "vertical" }} />
          <button type="submit" disabled={busy} style={{ width: "100%", height: 46, border: "none", borderRadius: "var(--radius-md)", cursor: busy ? "default" : "pointer", background: "var(--coral)", color: "#fff", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 15, opacity: busy ? 0.7 : 1 }}>{busy ? "Sending…" : "Send message"}</button>
        </form>
      )}
    </ModalShell>
  );
}

/* ---- Internal demo-request workflow (no external scheduling) -------------- */
function DemoRequestModal({ open, onClose }) {
  const [f, setF] = useState({ name: "", org: "", email: "", preferredDate: "", preferredTime: "", message: "" });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const [err, setErr] = useState(""); const [sent, setSent] = useState(false); const [busy, setBusy] = useState(false);
  if (!open) return null;
  const ci = { width: "100%", height: 46, padding: "0 12px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 15, boxSizing: "border-box", marginBottom: 10 };
  const submit = async (e) => {
    if (e) e.preventDefault(); setErr("");
    if (!f.name.trim() || !f.org.trim() || !validEmail(f.email)) return setErr("Please add your name, organisation and a valid email.");
    setBusy(true);
    try {
      const endpoint = window.LINTIE_FORMS_ENDPOINT || (apiBase() ? apiBase() + "/demo-request" : null);
      if (endpoint) { await postJson(endpoint, { kind: "demo", ...f }); }
      else { window.location.href = "mailto:support@lintie.app?subject=" + encodeURIComponent("Lintie demo request — " + f.org) + "&body=" + encodeURIComponent(`Name: ${f.name}
Organisation: ${f.org}
Email: ${f.email}
Preferred: ${f.preferredDate} ${f.preferredTime}

${f.message}`); }
      setSent(true);
    } catch (ex) { setErr("Couldn’t send just now — email support@lintie.app and we’ll arrange it."); }
    finally { setBusy(false); }
  };
  return (
    <ModalShell title={sent ? "Demo request received" : "Request a demo"} onClose={onClose}>
      {sent ? (
        <div role="status" style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, color: "var(--text-strong)", lineHeight: 1.55 }}>
          <div style={{ fontWeight: 800, fontSize: 17, marginBottom: 8, color: "var(--status-success, #1B7F4B)" }}>Demo request received</div>
          <p style={{ margin: 0 }}>Thanks for requesting a demo. We’ve emailed your confirmation and will contact you shortly to confirm or arrange the most suitable session.</p>
          <button type="button" onClick={onClose} style={{ marginTop: 16, width: "100%", height: 46, border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", background: "var(--navy)", color: "#fff", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 15 }}>Done</button>
        </div>
      ) : (
        <form onSubmit={submit}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)", margin: "0 0 12px" }}>Tell us a little and your preferred time — we’ll confirm by email.</p>
          {err && <div role="alert" style={{ color: "var(--status-danger, #B00020)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, marginBottom: 8 }}>{err}</div>}
          <input style={ci} aria-label="Your name" placeholder="Your name" value={f.name} onChange={(e) => set("name", e.target.value)} />
          <input style={ci} aria-label="Organisation" placeholder="Organisation" value={f.org} onChange={(e) => set("org", e.target.value)} />
          <input style={ci} type="email" aria-label="Email" placeholder="Email" value={f.email} onChange={(e) => set("email", e.target.value)} />
          <div style={{ display: "flex", gap: 10 }}>
            <input style={{ ...ci, flex: 1 }} type="date" aria-label="Preferred date" value={f.preferredDate} onChange={(e) => set("preferredDate", e.target.value)} />
            <input style={{ ...ci, flex: 1 }} type="time" aria-label="Preferred time" value={f.preferredTime} onChange={(e) => set("preferredTime", e.target.value)} />
          </div>
          <textarea aria-label="Message (optional)" placeholder="Anything you'd like us to cover? (optional)" value={f.message} onChange={(e) => set("message", e.target.value)} style={{ ...ci, height: 80, padding: "10px 12px", resize: "vertical" }} />
          <button type="submit" disabled={busy} style={{ width: "100%", height: 48, border: "none", borderRadius: "var(--radius-md)", cursor: busy ? "default" : "pointer", background: "var(--coral)", color: "#fff", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 16, opacity: busy ? 0.7 : 1 }}>{busy ? "Sending…" : "Request demo"}</button>
        </form>
      )}
    </ModalShell>
  );
}

function Page({ children }) {
  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <style>{"@keyframes ltFlash{0%{box-shadow:inset 0 0 0 0 rgba(244,114,94,0)}20%{box-shadow:inset 0 0 0 4px rgba(244,114,94,.30)}100%{box-shadow:inset 0 0 0 0 rgba(244,114,94,0)}}.lt-section-flash{animation:ltFlash 1.1s ease-out;border-radius:16px}@media(prefers-reduced-motion:reduce){.lt-section-flash{animation:none;outline:2px solid rgba(244,114,94,.55);outline-offset:3px}html{scroll-behavior:auto}}"}</style>
      <Nav /><div style={{ flex: 1 }}>{children}</div><Footer />
    </div>
  );
}

const FlowChip = ({ n, label, last }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10, background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-sm)", padding: "10px 14px" }}>
      <span style={{ width: 24, height: 24, borderRadius: "50%", background: "var(--navy)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 800, flex: "none" }}>{n}</span>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, fontWeight: 700, color: "var(--text-strong)", whiteSpace: "nowrap" }}>{label}</span>
    </div>
    {!last && <span style={{ color: "var(--coral)", fontWeight: 800 }}>→</span>}
  </div>
);

function MIcon({ name }) {
  const ic = {
    create: <><rect x="3" y="4" width="18" height="18" rx="3" /><path d="M16 2v4M8 2v4M3 10h18M12 14v4M10 16h4" /></>,
    book: <><circle cx="9" cy="8" r="3.2" /><path d="M3.5 20a5.5 5.5 0 0 1 11 0M16 5.5a3.2 3.2 0 0 1 0 5.6M21 20a5.5 5.5 0 0 0-3.5-5.1" /></>,
    collect: <><rect x="2.5" y="5" width="19" height="14" rx="3" /><path d="M2.5 9.5h19M7 15.5l2 2 4-4" /></>,
  }[name];
  return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{ic}</svg>;
}

/* Lightweight product preview built from CSS (no heavy assets). */
function HeroMock() {
  const tile = (label, value, link) => (
    <div style={{ flex: 1, background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: 10, padding: "8px 10px" }}>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 9, color: "var(--text-muted)" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 800, color: "var(--text-strong)", marginTop: 1 }}>{value}</div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 8.5, fontWeight: 700, color: "var(--coral-700)", marginTop: 2 }}>{link}</div>
    </div>
  );
  const sess = (n, t, b) => (
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 0", borderTop: "1px solid var(--border-subtle)" }}>
      <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--navy)", flex: "none" }} />
      <div style={{ flex: 1 }}><div style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 700, color: "var(--text-strong)" }}>{n}</div><div style={{ fontFamily: "var(--font-sans)", fontSize: 9, color: "var(--text-muted)" }}>{t}</div></div>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 9, color: "var(--text-muted)" }}>{b}</span>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 8.5, fontWeight: 700, color: "var(--status-success)", background: "var(--status-success-bg)", borderRadius: 999, padding: "2px 7px" }}>Open</span>
    </div>
  );
  const rail = ["Overview", "Activities", "Bookings", "Payments", "Attendance", "Reports", "Settings"];
  return (
    <div className="lt-heromock" style={{ position: "relative", width: "100%", maxWidth: 560, margin: "0 auto" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: "-8% -6% -12% -6%", background: "radial-gradient(60% 60% at 70% 30%, rgba(255,90,95,.12), transparent 70%), radial-gradient(60% 60% at 20% 80%, rgba(29,45,68,.10), transparent 70%)", filter: "blur(6px)", zIndex: 0 }} />
      {/* laptop screen */}
      <div style={{ position: "relative", zIndex: 1, background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: 18, boxShadow: "0 30px 64px rgba(29,45,68,.18), 0 10px 24px rgba(29,45,68,.08)", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderBottom: "1px solid var(--border-subtle)" }}>
          <img src="/assets/lintie-bird-trim.png" alt="" className="brand-icon brand-icon-sm" style={{ width: 18 }} />
          <div style={{ flex: 1 }} />
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--neutral-mid)" }} /><span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--neutral-mid)" }} /><span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--navy)" }} />
        </div>
        <div style={{ display: "flex" }}>
          <div style={{ width: 96, padding: "10px 8px", borderRight: "1px solid var(--border-subtle)", display: "flex", flexDirection: "column", gap: 7 }}>
            {rail.map((r, i) => <div key={r} style={{ fontFamily: "var(--font-sans)", fontSize: 9.5, fontWeight: i === 0 ? 800 : 600, color: i === 0 ? "var(--navy)" : "var(--text-muted)" }}>{r}</div>)}
          </div>
          <div style={{ flex: 1, padding: 12 }}>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 800, color: "var(--text-strong)", marginBottom: 8 }}>Today</div>
            <div style={{ display: "flex", gap: 8, marginBottom: 10 }}>{tile("Bookings", "24", "View bookings")}{tile("Payments", "£1,240", "View payments")}{tile("Attendance", "92%", "View register")}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 10, fontWeight: 700, color: "var(--text-muted)", marginBottom: 2 }}>Upcoming activities</div>
            {sess("After School Football", "3:30pm – 4:30pm", "12 / 20")}
            {sess("Street Dance", "4:45pm – 5:45pm", "8 / 15")}
            {sess("Holiday Camp", "9:00am – 3:00pm", "18 / 25")}
          </div>
        </div>
      </div>
      {/* phone overlay */}
      <div style={{ position: "absolute", right: -10, bottom: -26, width: 156, zIndex: 2, background: "var(--navy-900)", borderRadius: 24, padding: 5, boxShadow: "0 26px 54px rgba(29,45,68,.28), 0 8px 18px rgba(29,45,68,.14)" }}>
        <div style={{ background: "var(--white)", borderRadius: 18, overflow: "hidden" }}>
          <div style={{ height: 70, background: "linear-gradient(135deg,var(--navy),var(--navy-600))" }} />
          <div style={{ padding: 10 }}>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, fontWeight: 800, color: "var(--text-strong)" }}>After School Football</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 8.5, color: "var(--text-muted)", marginTop: 1 }}>Today 3:30pm – 4:30pm · £6.00</div>
            <div style={{ marginTop: 8, padding: "6px 8px", border: "1px solid var(--border-subtle)", borderRadius: 8, fontFamily: "var(--font-sans)", fontSize: 9.5, color: "var(--text-strong)" }}>Child · Jamie Smith</div>
            <div style={{ marginTop: 6, padding: "6px 8px", border: "1px solid var(--border-subtle)", borderRadius: 8, display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ flex: 1, fontFamily: "var(--font-sans)", fontSize: 9.5, color: "var(--text-strong)" }}>Pay by bank</span>
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--coral)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 9 }}>✓</span>
            </div>
            <div style={{ marginTop: 8, height: 28, borderRadius: 8, background: "var(--coral)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 700 }}>Book now</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Landing() {
  useEffect(() => {
    var raw = (window.location.hash || "").replace(/^#/, "");
    var id = raw === "features" ? "how" : raw;
    if (id === "how" || id === "pricing") {
      var t = setTimeout(function () { ltSmoothJump(id, false); }, 80);
      return function () { clearTimeout(t); };
    }
  }, []);
  const card = (icon, bg, fg, title, body) => (
    <div className="lt-card" style={{ flex: "1 1 240px", background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-md)", padding: "34px 28px", textAlign: "center" }}>
      <div style={{ width: 64, height: 64, borderRadius: 18, background: bg, color: fg, display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>{icon}</div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 19, fontWeight: 800, color: "var(--text-strong)" }}>{title}</div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--text-muted)", marginTop: 6, lineHeight: 1.5 }}>{body}</div>
    </div>
  );
  return (
    <Page>
      <style>{".lt-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}@media(max-width:880px){.lt-hero{grid-template-columns:1fr;gap:32px}.lt-heromock{display:none}.lt-hero-h1{font-size:52px!important}}@media(max-width:620px){.lt-nav{padding-left:16px!important;padding-right:16px!important;height:64px!important}.lt-nav-secondary{display:none!important}.lt-nav-links{gap:14px!important}}@media(max-width:480px){.lt-hero-h1{font-size:40px!important}}"}</style>

      {/* Hero — two columns */}
      <div style={{ background: "linear-gradient(180deg, var(--surface-canvas), var(--white))" }}>
        <div className="lt-hero" style={{ ...S.wrap, padding: "84px 32px 96px" }}>
          <div>
            <h1 className="lt-hero-h1" style={{ ...S.h1, fontSize: 66, lineHeight: 1.0, letterSpacing: "-0.04em" }}>Activities.<br />Bookings.<br />Payments.<br /><span style={{ color: "var(--coral)" }}>Sorted.</span></h1>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 19.5, color: "var(--text-muted)", maxWidth: 470, margin: "24px 0 34px", lineHeight: 1.55 }}>Create activities, take bookings, collect payments and run attendance from one place.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Btn href="/signup" variant="primary" big>Start free</Btn>
              <Btn href="/book-demo" variant="secondary" big>Book demo</Btn>
            </div>
          </div>
          <HeroMock />
        </div>
      </div>

      {/* What Lintie does */}
      <div id="how" style={{ background: "var(--surface-canvas)" }}>
        <div style={{ ...S.wrap, padding: "56px 24px" }}>
          <h2 style={{ ...S.h1, fontSize: 34, textAlign: "center", marginBottom: 38 }}>What Lintie does</h2>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            {card(<MIcon name="create" />, "var(--navy-50)", "var(--navy)", "Create", "Create activities in minutes.")}
            {card(<MIcon name="book" />, "var(--status-success-bg)", "var(--status-success)", "Book", "Parents book online.")}
            {card(<MIcon name="collect" />, "var(--coral-50)", "var(--coral-700)", "Collect", "Payments and attendance update automatically.")}
          </div>
        </div>
      </div>

      {/* Pricing */}
      <Pricing embedded />

      {/* Final CTA — soft coral band */}
      <div style={{ ...S.wrap, padding: "16px 24px 64px" }}>
        <div style={{ background: "var(--coral-50)", borderRadius: "var(--radius-xl)", padding: "52px 40px", display: "flex", alignItems: "center", justifyContent: "center", gap: 22, flexWrap: "wrap", textAlign: "center", position: "relative", overflow: "hidden" }}>
          <svg width="76" height="76" viewBox="0 0 24 24" fill="none" stroke="var(--coral)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: .8 }}><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z" /></svg>
          <div>
            <h2 style={{ ...S.h1, fontSize: 34, margin: 0 }}>Ready to create your first activity?</h2>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 20 }}>
              <Btn href="/signup" variant="primary" big>Start free</Btn>
              <Btn href="/book-demo" variant="secondary" big>Book demo</Btn>
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
}

function Pricing({ embedded }) {
  const plan = (name, who, price, cta, href, feat) => {
    const popular = name === "Organisation";
    return (
    <div style={{ flex: "1 1 260px", position: "relative", background: "var(--white)", border: "1px solid " + (popular ? "var(--coral-200)" : "var(--border-subtle)"), borderRadius: "var(--radius-lg)", boxShadow: popular ? "var(--shadow-md)" : "var(--shadow-sm)", padding: 26 }}>
      {popular && <span style={{ position: "absolute", top: -11, left: "50%", transform: "translateX(-50%)", background: "var(--coral)", color: "#fff", fontFamily: "var(--font-sans)", fontSize: 11.5, fontWeight: 700, padding: "3px 12px", borderRadius: 999 }}>Most popular</span>}
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 19, fontWeight: 800, color: "var(--text-strong)" }}>{name}</div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)", margin: "4px 0 12px" }}>{who}</div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 30, fontWeight: 800, color: "var(--text-strong)" }}>{price}</div>
      <div style={{ margin: "16px 0" }}><Btn href={href} variant={name === "Organisation" ? "primary" : "secondary"}>{cta}</Btn></div>
      <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)" }}>{feat}</div>
    </div>
    );
  };
  const inner = (
    <div id={embedded ? "pricing" : undefined} style={{ ...S.wrap, padding: embedded ? "44px 24px" : "72px 24px" }}>
      <h2 style={{ ...S.h1, fontSize: 30, textAlign: "center", marginBottom: 6 }}>Simple pricing</h2>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-muted)", textAlign: "center", margin: "0 0 24px" }}>Start free. Pay when you're collecting.</p>
      <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
        {plan("Solo", "For childminders and individual providers.", "£9 / month", "Start free", "/signup", "One person. One place to take bookings and payments.")}
        {plan("Organisation", "For schools, nurseries and activity providers.", "£29 / month", "Start free", "/signup", "Team, roles, registers, collections and receipts.")}
        {plan("Enterprise", "Multi-site organisations and trusts.", "Let's talk", "Contact sales", "/book-demo", "Multiple sites, central oversight and support.")}
      </div>
    </div>
  );
  return embedded ? inner : <Page>{inner}</Page>;
}

/* ---- Signup: account type -> account -> organisation -> onboarding -------- */
function Signup() {
  const [step, setStep] = useState(1);
  const [type, setType] = useState(null);
  const [err, setErr] = useState("");
  const types = [
    ["solo", "I run this myself", "Childminder, nanny or individual organiser"],
    ["provider", "Activity provider / club", "Sports, dance, music, camps"],
    ["school", "School", "Breakfast/after-school clubs, trips, wraparound"],
    ["nursery", "Nursery / childcare", "Sessions and wraparound care"],
    ["multi", "Multi-site organisation", "Trusts and groups"],
  ];
  const card = { background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 28 };
  const input = { width: "100%", height: 50, padding: "0 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 16, boxSizing: "border-box", marginBottom: 14 };
  const onboard = () => { if (apiBase() || sandboxMode()) { window.location.href = type === "solo" ? "/app/onboarding/solo" : "/app/onboarding/org"; } else { setErr("We couldn\u2019t start your setup just now. Please try again in a moment, or email support@lintie.app and we\u2019ll help you get set up."); } };
  return (
    <Page>
      <div style={{ maxWidth: 560, margin: "0 auto", padding: "48px 24px" }}>
        <h1 style={{ ...S.h1, fontSize: 30, marginBottom: 6 }}>Start free</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-muted)", marginTop: 0, marginBottom: 22 }}>{step === 1 ? "What best describes you?" : step === 2 ? "Create your account." : "A few details and you're in."}</p>
        {step === 1 && (
          <div>
            {types.map(([id, t, sub]) => (
              <button key={id} type="button" onClick={() => { setType(id); setStep(2); }} style={{ display: "flex", alignItems: "center", gap: 14, width: "100%", textAlign: "left", padding: 18, marginBottom: 12, borderRadius: "var(--radius-md)", cursor: "pointer", background: "var(--white)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-sm)" }}>
                <span style={{ flex: 1 }}><span style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: 16.5, fontWeight: 700, color: "var(--text-strong)" }}>{t}</span><span style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-muted)", marginTop: 2 }}>{sub}</span></span>
                <span style={{ color: "var(--coral)", fontWeight: 800 }}>→</span>
              </button>
            ))}
          </div>
        )}
        {step === 2 && (
          <div style={card}>
            <input style={input} aria-label="Your name" placeholder="Your name" />
            <input style={input} type="email" aria-label="Email" placeholder="Email" />
            <input style={input} type="password" aria-label="Create a password" placeholder="Create a password" />
            <Btn onClick={() => setStep(3)} variant="primary" big>Create account</Btn>
          </div>
        )}
        {step === 3 && (
          <div style={card}>
            {err && <div role="alert" style={fieldErr}>{err}</div>}
            <input style={input} placeholder={type === "solo" ? "Your name / business name" : "Organisation name"} />
            {type !== "solo" && <input style={input} placeholder="Location (town / postcode)" />}
            <Btn onClick={onboard} variant="primary" big>Continue to setup</Btn>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)", marginTop: 12, textAlign: "center" }}>Next: create your first activity.</div>
          </div>
        )}
        <div style={{ textAlign: "center", marginTop: 18, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)" }}>Already have an account? <a href="/login" style={{ color: "var(--coral-700)", fontWeight: 700 }}>Log in</a></div>
      </div>
    </Page>
  );
}

function Login() {
  const input = { width: "100%", height: 50, padding: "0 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 16, boxSizing: "border-box", marginBottom: 14 };
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const submit = async (e) => {
    if (e) e.preventDefault();
    setErr("");
    if (!validEmail(email)) return setErr("Enter a valid email address.");
    if (!pw) return setErr("Enter your password.");
    setBusy(true);
    try { const sess = await window.LintieAuth.login(email, pw); window.location.href = window.LintieAuth.roleHome(sess.role); }
    catch (ex) { setErr(ex.code === "not_configured" ? "Sign-in connects to your Lintie workspace once it\u2019s set up." : (/401/.test(ex.message) ? "Email or password is incorrect." : (ex.message || "Couldn\u2019t sign in just now."))); }
    finally { setBusy(false); }
  };
  return (
    <Page>
      <div style={{ maxWidth: 440, margin: "0 auto", padding: "56px 24px" }}>
        <h1 style={{ ...S.h1, fontSize: 28, marginBottom: 18 }}>Log in</h1>
        <form onSubmit={submit} style={{ background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 24 }}>
          {err && <div role="alert" style={fieldErr}>{err}</div>}
          <label style={{ display: "block" }}><span style={{ position: "absolute", left: -9999 }}>Email</span><input style={input} type="email" autoComplete="email" aria-label="Email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} /></label>
          <label style={{ display: "block" }}><span style={{ position: "absolute", left: -9999 }}>Password</span><input style={input} type="password" autoComplete="current-password" aria-label="Password" placeholder="Password" value={pw} onChange={(e) => setPw(e.target.value)} /></label>
          <button type="submit" disabled={busy} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "100%", height: 54, borderRadius: "var(--radius-md)", border: "none", cursor: busy ? "default" : "pointer", background: "var(--coral)", color: "#fff", fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 700, opacity: busy ? 0.7 : 1 }}>{busy ? "Signing in…" : "Continue"}</button>
        </form>
        <div style={{ textAlign: "center", marginTop: 16, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)" }}>New to Lintie? <a href="/signup" style={{ color: "var(--coral-700)", fontWeight: 700 }}>Start free</a></div>
      </div>
    </Page>
  );
}

function BookDemo() {
  const input = { width: "100%", height: 50, padding: "0 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 16, boxSizing: "border-box", marginBottom: 14 };
  const [sent, setSent] = useState(false);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [org, setOrg] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const submit = async (e) => {
    if (e) e.preventDefault();
    setErr("");
    if (!name.trim() || !validEmail(email) || !org.trim()) return setErr("Please add your name, a valid work email and your organisation.");
    const endpoint = window.LINTIE_FORMS_ENDPOINT;
    setBusy(true);
    try {
      if (endpoint) { await postJson(endpoint, { kind: "demo", name, email, org }); }
      else { window.location.href = "mailto:support@lintie.app?subject=" + encodeURIComponent("Lintie demo request") + "&body=" + encodeURIComponent(`Name: ${name}\nEmail: ${email}\nOrganisation: ${org}`); }
      setSent(true);
    } catch (ex) { setErr("Couldn't send just now — please email support@lintie.app and we'll arrange it."); }
    finally { setBusy(false); }
  };
  return (
    <Page>
      <div style={{ maxWidth: 480, margin: "0 auto", padding: "56px 24px" }}>
        <h1 style={{ ...S.h1, fontSize: 28, marginBottom: 6 }}>Book a demo</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-muted)", marginTop: 0, marginBottom: 18 }}>See Lintie set up an activity in minutes.</p>
        {sent ? (
          <div role="status" style={{ background: "var(--status-success-bg)", color: "var(--status-success)", borderRadius: "var(--radius-md)", padding: 20, fontFamily: "var(--font-sans)", fontWeight: 700 }}>Thanks — we'll be in touch to arrange your demo. If your email client opened, send the message to confirm.</div>
        ) : (
          <form onSubmit={submit} style={{ background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 24 }}>
            {err && <div role="alert" style={fieldErr}>{err}</div>}
            <input style={input} aria-label="Your name" placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} />
            <input style={input} type="email" aria-label="Work email" placeholder="Work email" value={email} onChange={(e) => setEmail(e.target.value)} />
            <input style={input} aria-label="Organisation" placeholder="Organisation" value={org} onChange={(e) => setOrg(e.target.value)} />
            <button type="submit" disabled={busy} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: "100%", height: 54, borderRadius: "var(--radius-md)", border: "none", cursor: busy ? "default" : "pointer", background: "var(--coral)", color: "#fff", fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 700, opacity: busy ? 0.7 : 1 }}>{busy ? "Sending…" : "Request demo"}</button>
          </form>
        )}
      </div>
    </Page>
  );
}

function Help() {
  const [open, setOpen] = useState(false);
  const faqs = [["How do parents pay?", "By bank transfer through Open Banking — no card needed."], ["Do I need an account to set up?", "Childminders can start solo; schools and providers create an organisation."], ["Can I upload an existing flyer?", "Yes — Lintie drafts the activity from your flyer for you to review."]];
  return (
    <Page>
      <div style={{ maxWidth: 700, margin: "0 auto", padding: "48px 24px" }}>
        <h1 style={{ ...S.h1, fontSize: 30, marginBottom: 8 }}>Help Centre</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, color: "var(--text-muted)", marginTop: 0 }}>Need help setting this up? We’re happy to help.</p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", margin: "8px 0 24px" }}>
          <Btn onClick={() => setOpen(true)} variant="primary">Contact support</Btn>
        </div>
        {faqs.map(([q, a]) => (
          <div key={q} style={{ background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", padding: 18, marginBottom: 12 }}>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 700, color: "var(--text-strong)" }}>{q}</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, color: "var(--text-muted)", marginTop: 4 }}>{a}</div>
          </div>
        ))}
      </div>
      <ContactSupportModal open={open} onClose={() => setOpen(false)} />
    </Page>
  );
}

function LegalDoc({ title, updated, lines }) {
  const out = []; let bullets = [];
  const flush = (key) => { if (bullets.length) { out.push(<ul key={"ul" + key} style={{ margin: "0 0 14px 20px", padding: 0, color: "var(--text-strong)", fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.65 }}>{bullets.map((b, j) => <li key={j} style={{ marginBottom: 4 }}>{b}</li>)}</ul>); bullets = []; } };
  lines.forEach((ln, i) => {
    if (ln.startsWith("- ")) { bullets.push(ln.slice(2)); return; }
    flush(i);
    if (ln.startsWith("## ")) out.push(<h3 key={i} style={{ fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 800, color: "var(--text-strong)", margin: "18px 0 6px" }}>{ln.slice(3)}</h3>);
    else if (ln.startsWith("# ")) out.push(<h2 key={i} style={{ fontFamily: "var(--font-sans)", fontSize: 21, fontWeight: 800, color: "var(--text-strong)", margin: "26px 0 8px" }}>{ln.slice(2)}</h2>);
    else if (ln === "") out.push(<div key={i} style={{ height: 4 }} />);
    else out.push(<p key={i} style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-strong)", lineHeight: 1.65, margin: "0 0 12px" }}>{ln}</p>);
  });
  flush("end");
  return (
    <Page>
      <div style={{ maxWidth: 760, margin: "0 auto", padding: "48px 24px 64px" }}>
        <h1 style={{ ...S.h1, fontSize: 32, marginBottom: 6 }}>{title}</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-muted)", marginTop: 0, marginBottom: 24 }}>Last Updated: {updated}</p>
        {out}
        <div style={{ borderTop: "1px solid var(--border-subtle)", marginTop: 28, paddingTop: 18, fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)", lineHeight: 1.6 }}>© 2026 Lintie. Lintie is a trading name and product of AirMonk Ltd, a technology company registered in England and Wales (Company No. 16916713).</div>
      </div>
    </Page>
  );
}

/* ---- Onboarding (ends in: create your first activity) -------------------- */
function OnboardingShell({ title, sub, children, primaryHref, primaryLabel }) {
  const input = { width: "100%", height: 50, padding: "0 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 16, boxSizing: "border-box", marginBottom: 14 };
  return (
    <Page>
      <div style={{ maxWidth: 560, margin: "0 auto", padding: "48px 24px" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--coral-700)", marginBottom: 6 }}>Welcome to Lintie</div>
        <h1 style={{ ...S.h1, fontSize: 28, marginBottom: 6 }}>{title}</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-muted)", marginTop: 0, marginBottom: 20 }}>{sub}</p>
        <div style={{ background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 24 }}>{children(input)}</div>
        <div style={{ marginTop: 18 }}><Btn href={primaryHref} variant="primary" big>{primaryLabel}</Btn></div>
      </div>
    </Page>
  );
}
function OnboardingSolo() {
  return (
    <OnboardingShell title="Set up in a minute" sub="Tell us a little, then create your first activity." primaryHref="/app/solo" primaryLabel="Create your first activity">
      {(input) => (<div>
        <input style={input} placeholder="Your name / business name" />
        <input style={input} placeholder="What do you offer? (e.g. after-school care)" />
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <Btn href="/app/solo" variant="secondary">Upload a flyer</Btn>
          <Btn href="/app/solo" variant="secondary">Start blank</Btn>
        </div>
      </div>)}
    </OnboardingShell>
  );
}
function OnboardingOrg() {
  return (
    <OnboardingShell title="Set up your organisation" sub="A few details, then create your first activity." primaryHref="/app/org" primaryLabel="Create your first activity">
      {(input) => (<div>
        <input style={input} placeholder="Organisation name" />
        <input style={input} placeholder="Type (school, club, nursery…)" />
        <input style={input} placeholder="Location (town / postcode)" />
        <input style={input} placeholder="Invite a team member by email (optional)" />
      </div>)}
    </OnboardingShell>
  );
}

/* ---- Router -------------------------------------------------------------- */
function ResetPassword() {
  const input = { width: "100%", height: 50, padding: "0 14px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-strong)", fontFamily: "var(--font-sans)", fontSize: 16, boxSizing: "border-box", marginBottom: 14 };
  const token = (function () { try { return new URLSearchParams(location.search).get("token") || ""; } catch (e) { return ""; } })();
  const [pw, setPw] = useState(""); const [done, setDone] = useState(false); const [err, setErr] = useState(""); const [busy, setBusy] = useState(false);
  const submit = async (e) => { if (e) e.preventDefault(); setErr(""); if (pw.length < 8) return setErr("Use at least 8 characters."); if (!token) return setErr("This reset link is missing its token."); setBusy(true); try { await window.LintieAuth.resetPassword(token, pw); setDone(true); } catch (ex) { setErr(ex.message || "Couldn't reset your password."); } finally { setBusy(false); } };
  return (
    <Page><div style={{ maxWidth: 440, margin: "0 auto", padding: "56px 24px" }}>
      <h1 style={{ ...S.h1, fontSize: 28, marginBottom: 18 }}>Set a new password</h1>
      {done ? (
        <div role="status" style={{ background: "var(--status-success-bg)", color: "var(--status-success)", borderRadius: "var(--radius-md)", padding: 20, fontFamily: "var(--font-sans)", fontWeight: 700 }}>Password updated. <a href="/login" style={{ color: "var(--coral-700)" }}>Log in</a></div>
      ) : (
        <form onSubmit={submit} style={{ background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 24 }}>
          {err && <div role="alert" style={fieldErr}>{err}</div>}
          <input style={input} type="password" aria-label="New password" placeholder="New password" value={pw} onChange={(e) => setPw(e.target.value)} />
          <button type="submit" disabled={busy} style={{ width: "100%", height: 54, border: "none", borderRadius: "var(--radius-md)", background: "var(--coral)", color: "#fff", fontFamily: "var(--font-sans)", fontSize: 17, fontWeight: 700, cursor: busy ? "default" : "pointer", opacity: busy ? 0.7 : 1 }}>{busy ? "Saving…" : "Update password"}</button>
        </form>
      )}
    </div></Page>
  );
}

function VerifyEmail() {
  const token = (function () { try { return new URLSearchParams(location.search).get("token") || ""; } catch (e) { return ""; } })();
  const [state, setState] = useState("working");
  useState(() => { if (!token) { setState("error"); return; } window.LintieAuth.verifyEmail(token).then(() => setState("ok")).catch(() => setState("error")); });
  return (
    <Page><div style={{ maxWidth: 440, margin: "0 auto", padding: "64px 24px", textAlign: "center" }}>
      <h1 style={{ ...S.h1, fontSize: 26, marginBottom: 10 }}>{state === "ok" ? "Email confirmed" : state === "error" ? "Link invalid or expired" : "Confirming your email…"}</h1>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--text-muted)" }}>{state === "ok" ? "You're all set." : state === "error" ? "Please request a new link." : "One moment."}</p>
      {state !== "working" && <Btn href="/login" variant="primary">Continue to log in</Btn>}
    </div></Page>
  );
}

function PrivacyPolicy() {
  return <LegalDoc title="Privacy Policy" updated="25 June 2026" lines={["This Privacy Policy explains how Lintie collects, uses and protects your information when you use our platform.", "By using Lintie, you agree to this Privacy Policy.", "# 1. Who We Are", "Lintie is a trading name and product of AirMonk Ltd, a technology company registered in England and Wales (Company No. 16916713).", "If you have any questions about this Privacy Policy, please contact us through the Contact Support page on our website.", "# 2. Information We Collect", "Depending on how you use Lintie, we may collect:", "## Account Information", "- Name", "- Email address", "- Organisation name", "- Account role (for example provider, staff or parent)", "## Activity & Booking Information", "- Activities you create or book", "- Attendance records", "- Booking history", "- Payment references", "- Receipts and invoices", "## Child Information", "Where necessary to provide the Service, activity providers and parents may store information relating to children, including:", "- Name", "- Age or school year", "- Emergency or attendance information where required by the activity provider", "We expect organisations using Lintie to collect and manage children’s information lawfully and with appropriate consent where required.", "## Technical Information", "We may automatically collect:", "- Device information", "- Browser type", "- IP address", "- Log data", "- Basic analytics about how the Service is used", "# 3. How We Use Your Information", "We use your information to:", "- provide and operate Lintie", "- process bookings and payments", "- generate receipts and invoices", "- manage attendance and registers", "- communicate about bookings and activities", "- provide customer support", "- improve the reliability, security and performance of the platform", "- comply with legal obligations", "We do not sell your personal information.", "# 4. Payments", "Payments made through Lintie are processed by trusted third-party payment providers.", "We do not store your full payment card or bank credentials.", "Payment providers process payment information in accordance with their own privacy policies.", "# 5. Sharing Information", "We only share information where necessary to operate the Service.", "This may include:", "- the organisation running an activity", "- parents or guardians linked to a booking", "- payment providers", "- infrastructure and technology providers that help us operate Lintie", "- regulators or law enforcement where legally required", "We do not sell personal information to advertisers or data brokers.", "# 6. Keeping Information Safe", "We use appropriate technical and organisational measures to help protect personal information.", "No online service can guarantee absolute security, but we continually work to protect the information entrusted to us.", "# 7. Data Retention", "We keep information only for as long as it is reasonably necessary to provide the Service, meet legal obligations, resolve disputes and maintain financial records.", "Some financial records, receipts and transaction information may be retained for longer where required by law.", "# 8. Your Rights", "Depending on where you live, you may have rights to:", "- access your personal information", "- correct inaccurate information", "- request deletion of information where applicable", "- object to or restrict certain processing", "- request a copy of your information", "To exercise these rights, please contact us through the Contact Support page.", "# 9. Children’s Information", "Lintie is designed to help organisations manage activities involving children.", "Information relating to children is provided by parents, guardians or authorised organisations for the purpose of delivering those activities.", "We expect organisations using Lintie to ensure they have the appropriate legal basis for collecting and processing children’s information.", "# 10. Changes to this Policy", "We may update this Privacy Policy from time to time.", "Where changes are significant, we will notify users through the platform or by email.", "Your continued use of Lintie after those changes take effect means you accept the updated Privacy Policy.", "# Contact", "If you have any questions about this Privacy Policy or how we process personal information, please contact us through the Contact Support page on the Lintie website."]} />;
}
function TermsOfService() {
  return <LegalDoc title="Terms of Service" updated="25 June 2026" lines={["Welcome to Lintie.", "These Terms govern your use of the Lintie platform and services. By creating an account or using Lintie, you agree to these Terms. If you do not agree, please do not use the Service.", "# 1. What Lintie Is", "Lintie is a software platform that helps activity providers manage activities, bookings, attendance, payments, invoicing and parent communications in one place.", "Depending on your role, you may use Lintie as:", "- an activity provider", "- a school", "- a nursery", "- a club", "- an organisation", "- a member of staff", "- a parent or guardian", "Lintie provides software only. We are not responsible for the activities or services offered by organisations using the platform.", "# 2. Who Can Use Lintie", "You must be at least 18 years old to create an organisation account.", "Parents and guardians may use Lintie to manage bookings and payments for children in their care.", "You are responsible for ensuring that any information you provide is accurate and up to date.", "# 3. Your Responsibilities", "You agree to:", "- keep your account secure", "- provide accurate information", "- only use Lintie for lawful purposes", "- only manage children you are authorised to act for", "- comply with all applicable laws and safeguarding requirements", "You must not:", "- attempt to access accounts that are not yours", "- interfere with the operation or security of the platform", "- upload malicious software", "- misuse payment services", "- attempt to copy, reverse engineer or exploit the platform", "# 4. Payments", "Activity providers control the activities, pricing, invoices and payment plans offered through Lintie.", "Where payments are processed through integrated payment providers, those providers’ terms will also apply.", "Receipts issued through Lintie record the payment received at that point in time. Where an invoice or payment plan exists, receipts may also display the original amount due, the amount paid to date and the remaining balance.", "# 5. Subscriptions", "Some features of Lintie require a paid subscription.", "Subscription pricing is available on our Pricing page.", "Subscriptions renew automatically unless cancelled.", "Unless required by law, fees already paid are not refundable.", "# 6. Your Data", "You retain ownership of the information you upload to Lintie.", "You are responsible for ensuring that you have the necessary rights and permissions to upload and process personal information.", "We process personal data in accordance with our Privacy Policy.", "# 7. Availability", "We aim to keep Lintie available and reliable, but we cannot guarantee uninterrupted service.", "We may perform maintenance, updates or security work from time to time.", "# 8. Liability", "Lintie is provided on an \"as is\" and \"as available\" basis.", "To the maximum extent permitted by law, AirMonk Ltd is not liable for indirect or consequential losses arising from your use of the Service.", "Nothing in these Terms limits liability that cannot legally be excluded.", "# 9. Changes", "We may update these Terms from time to time.", "Where changes are material, we will provide reasonable notice through the platform or by email.", "Continued use of Lintie after changes take effect constitutes acceptance of the updated Terms.", "# 10. Governing Law", "These Terms are governed by the laws of England and Wales.", "Any disputes shall be subject to the courts of England and Wales.", "# Contact", "If you have questions about these Terms, please contact us through the Contact Support page available on the Lintie website."]} />;
}

function Site() {
  const path = (window.location.pathname || "/").replace(/\/+$/, "") || "/";
  switch (path) {
    case "/": return <Landing />;
    case "/pricing": return <Pricing />;
    case "/signup": return <Signup />;
    case "/login": return <Login />;
    case "/reset": return <ResetPassword />;
    case "/verify-email": return <VerifyEmail />;
    case "/book-demo": return <BookDemo />;
    case "/help": return <Help />;
    case "/terms": return <TermsOfService />;
    case "/privacy": return <PrivacyPolicy />;
    case "/app/onboarding/solo": return <OnboardingSolo />;
    case "/app/onboarding/org": return <OnboardingOrg />;
    case "/app/onboarding": return <OnboardingOrg />;
    default: return <Landing />;
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(<Site />);
window.LintieSite = Site;