/* CPAcioli marketing site — conversion-optimized landing page.
 * Sections: Nav, Hero, TrustBar, Comparison ($4k courses), Features,
 * HowItWorks, Showcase (dashboard), Testimonials, Pricing, FAQ, CoralCTA,
 * Contact, Footer. Cream↔dark pacing; coral is the single action color.
 */
const { Button, Badge, Card, PricingCard, Stat } = window.CPAcioliDesignSystem_934cdc;
const MAX = 1200;

// Tracks whether the viewport is at or below a breakpoint (default 900px, so
// tablet-portrait widths like 768/820/834 get the fluid single-column layout
// instead of a desktop layout that would overflow horizontally).
function useIsMobile(bp = 900) {
  const [m, setM] = React.useState(() => typeof window !== "undefined" && window.innerWidth <= bp);
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${bp}px)`);
    const on = () => setM(mq.matches);
    on();
    mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); };
  }, [bp]);
  return m;
}

// Fires true after a short delay on mount — used for above-the-fold hero animations.
function useMount(delay = 60) {
  const [v, setV] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setV(true), delay); return () => clearTimeout(t); }, []);
  return v;
}

// Fires true once when the observed element enters the viewport.
function useReveal(threshold = 0.08) {
  const ref = React.useRef(null);
  const [v, setV] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setV(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, v];
}

// Returns inline transition styles for a reveal animation.
function rv(visible, { delay = 0, dir = "up", dist = 24 } = {}) {
  const hidden = {
    up: `translateY(${dist}px)`,
    left: `translateX(-${dist}px)`,
    right: `translateX(${dist}px)`,
    none: "none",
  }[dir] || `translateY(${dist}px)`;
  return {
    opacity: visible ? 1 : 0,
    transform: visible ? "none" : hidden,
    transition: `opacity 0.65s ease ${delay}ms, transform 0.65s ease ${delay}ms`,
    willChange: visible ? "auto" : "opacity, transform",
  };
}

function Container({ children, style = {} }) {
  const m = useIsMobile();
  return <div style={{ maxWidth: MAX, margin: "0 auto", padding: m ? "0 20px" : "0 32px", ...style }}>{children}</div>;
}

function Icon({ name, size = 20, color = "currentColor", stroke = 2 }) {
  return <i data-lucide={name} style={{ width: size, height: size, color, strokeWidth: stroke, display: "inline-flex" }} />;
}

function Eyebrow({ children, onDark }) {
  return (
    <div style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 12, letterSpacing: "1.5px", textTransform: "uppercase", color: onDark ? "var(--accent-amber)" : "var(--color-primary)", marginBottom: 16 }}>{children}</div>
  );
}

// A small row of coral stars used as social-proof garnish.
function Stars({ count = 5, size = 15, color = "var(--accent-amber)" }) {
  return (
    <span style={{ display: "inline-flex", gap: 2, color }}>
      {Array.from({ length: count }).map((_, i) => (
        <i key={i} data-lucide="star" style={{ width: size, height: size, fill: "currentColor", strokeWidth: 0, display: "inline-flex" }} />
      ))}
    </span>
  );
}

// Microcopy line under primary CTAs — the core risk-reversal signal.
function TrustLine({ onDark, center, style = {} }) {
  const items = ["7-day free trial", "No credit card", "Cancel anytime"];
  const color = onDark ? "var(--text-on-dark-muted)" : "var(--text-muted)";
  return (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: center ? "center" : "flex-start", ...style }}>
      {items.map((t) => (
        <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontSize: 13, color }}>
          <i data-lucide="check" style={{ width: 14, height: 14, color: "var(--accent-teal)", strokeWidth: 2.5, display: "inline-flex" }} />
          {t}
        </span>
      ))}
    </div>
  );
}

/* Injected hover / micro-interaction styles (inline styles can't do :hover). */
function Styles() {
  return (
    <style>{`
      .cpa-lift { transition: transform 180ms ease, box-shadow 180ms ease; }
      .cpa-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,20,19,0.10); }
      .cpa-cta { transition: transform 140ms ease, filter 140ms ease; }
      .cpa-cta:hover { transform: translateY(-2px); filter: brightness(1.04); }
      .cpa-faq-q { transition: background 140ms ease; }
      .cpa-faq-q:hover { background: var(--surface-1); }
      .cpa-foot-link { transition: color 140ms ease; }
      .cpa-foot-link:hover { color: var(--color-primary) !important; }
      .cpa-pricing-cta button { transition: transform 140ms ease, filter 140ms ease, background 140ms ease, border-color 140ms ease !important; }
      .cpa-pricing-cta button:hover { transform: translateY(-2px); filter: brightness(1.04); }
      @media (prefers-reduced-motion: reduce) {
        .cpa-lift, .cpa-cta, .cpa-pricing-cta button { transition: none !important; transform: none !important; }
      }
    `}</style>
  );
}

/* ---------------- Nav ---------------- */
function Nav({ onStart, scrollTo }) {
  const m = useIsMobile();
  const links = [
    { label: "Features", target: "features" },
    { label: "Reviews", target: "reviews" },
    { label: "Pricing", target: "pricing" },
    { label: "FAQ", target: "faq" },
    { label: "Contact", target: "contact" },
  ];
  return (
    <div style={{ position: "sticky", top: 0, zIndex: 20, background: "var(--surface-canvas)", borderBottom: "1px solid var(--border-hairline)" }}>
      <Container style={{ height: 64, display: "flex", alignItems: "center", gap: m ? 12 : 32 }}>
        <img src="/assets/cpacioli-wordmark.svg" alt="CPAcioli" height="28" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} style={{ height: m ? 24 : 28, cursor: "pointer" }} />
        {!m && (
          <nav style={{ display: "flex", gap: 4, marginLeft: 8 }}>
            {links.map((l) => (
              <a key={l.label} href={`#${l.target}`} onClick={(e) => { e.preventDefault(); scrollTo(l.target); }} style={{
                fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14, color: "var(--text-body)",
                textDecoration: "none", padding: "8px 12px", borderRadius: "var(--radius-md)", cursor: "pointer",
              }}>{l.label}</a>
            ))}
          </nav>
        )}
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: m ? 8 : 12 }}>
          <Button variant="ghost" size={m ? "sm" : "md"} onClick={onStart}>Sign in</Button>
          <Button className="cpa-cta" variant="primary" size={m ? "sm" : "md"} onClick={onStart}>{m ? "Start free" : "Start free trial"}</Button>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onStart, scrollTo }) {
  const m = useIsMobile();
  const visible = useMount(60);
  return (
    <Container style={{ paddingTop: m ? 32 : 56, paddingBottom: m ? 48 : 80 }}>
      <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 40 : 64, alignItems: "center" }}>
        <div>
          <div style={{ marginBottom: 20, ...rv(visible, { delay: 0 }) }}>
            <Badge variant="coral">2026 CPA Evolution ready</Badge>
          </div>
          <h1 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 36 : 60, lineHeight: 1.05, letterSpacing: m ? "-1px" : "-1.5px", color: "var(--text-heading)", margin: 0, ...rv(visible, { delay: 100 }) }}>
            Pass the CPA exam.<br />Without the $4,000 course.
          </h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: m ? 16 : 18, lineHeight: 1.55, color: "var(--text-strong)", margin: "24px 0 28px", maxWidth: 470, ...rv(visible, { delay: 180 }) }}>
            Thousands of practice questions, full-length simulated exams, and a tutor-grade explanation for every answer, across all six sections, for the price of a textbook.
          </p>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexDirection: m ? "column" : "row", ...rv(visible, { delay: 260 }) }}>
            <Button className="cpa-cta" variant="primary" size="lg" onClick={onStart} style={m ? { width: "100%" } : undefined}>Start studying free</Button>
            <Button variant="secondary" size="lg" onClick={() => scrollTo("pricing")} style={m ? { width: "100%" } : undefined}>See pricing</Button>
          </div>
          <div style={{ marginTop: 18, ...rv(visible, { delay: 320 }) }}>
            <TrustLine center={false} />
          </div>
          <div style={{ display: "flex", gap: m ? 24 : 32, marginTop: m ? 36 : 48, flexWrap: "wrap", ...rv(visible, { delay: 400 }) }}>
            <Stat value="1,000s" label="Practice questions" />
            <Stat value="$19" label="per month" accent />
            <Stat value="6/6" label="CPA sections covered" />
          </div>
        </div>
        <div style={rv(visible, { delay: 200, dir: "right", dist: 40 })}>
          <ExamPanel />
        </div>
      </div>
    </Container>
  );
}

function ExamPanel() {
  return (
    <div style={{ background: "var(--surface-inverse)", borderRadius: "var(--radius-xl)", padding: 28, boxShadow: "0 24px 60px rgba(20,20,19,0.18)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Badge variant="section">FAR</Badge>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-on-dark-muted)" }}>Question 14 of 30</span>
        </div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--accent-teal)" }}>24:18</span>
      </div>
      <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.55, color: "var(--text-on-dark)", margin: "0 0 20px" }}>
        On January 1, a company issues $500,000 of 6% bonds at 98. Using straight-line amortization over 10 years, what is the annual interest expense?
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {[
          { k: "A", t: "$30,000", state: "idle" },
          { k: "B", t: "$31,000", state: "correct" },
          { k: "C", t: "$29,000", state: "idle" },
          { k: "D", t: "$30,500", state: "wrong" },
        ].map((o) => {
          const correct = o.state === "correct", wrong = o.state === "wrong";
          return (
            <div key={o.k} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderRadius: "var(--radius-md)", background: correct ? "rgba(93,184,114,0.14)" : wrong ? "rgba(198,69,69,0.12)" : "var(--surface-inverse-elevated)", border: `1px solid ${correct ? "var(--status-success)" : wrong ? "var(--status-error)" : "transparent"}` }}>
              <span style={{ width: 24, height: 24, borderRadius: "50%", flex: "none", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, background: correct ? "var(--status-success)" : wrong ? "var(--status-error)" : "var(--surface-inverse-soft)", color: correct || wrong ? "#fff" : "var(--text-on-dark-muted)" }}>{o.k}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--text-on-dark)" }}>{o.t}</span>
              {correct ? <span style={{ marginLeft: "auto", color: "var(--status-success)" }}><Icon name="check" size={18} /></span> : null}
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 18, padding: 14, borderRadius: "var(--radius-md)", background: "var(--surface-inverse-soft)" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500, letterSpacing: "1px", textTransform: "uppercase", color: "var(--accent-amber)", marginBottom: 6 }}>Why B</div>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.55, color: "var(--text-on-dark-muted)", margin: 0 }}>Discount = $10,000 ÷ 10 = $1,000/yr. Cash interest = $30,000. Expense = $30,000 + $1,000 = $31,000.</p>
      </div>
    </div>
  );
}

/* ---------------- Trust bar ---------------- */
function TrustBar() {
  const m = useIsMobile();
  const [ref, visible] = useReveal();
  const items = [
    { icon: "layers", label: "All 6 sections", sub: "FAR · BAR · AUD · REG · ISC · TCP" },
    { icon: "circle-help", label: "Thousands of MCQs", sub: "with worked explanations" },
    { icon: "timer", label: "Real exam timer", sub: "blueprint-accurate mocks" },
    { icon: "wallet", label: "From $19/mo", sub: "or $219 once, forever" },
  ];
  return (
    <div style={{ background: "var(--surface-soft)", borderTop: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)", padding: m ? "28px 0" : "32px 0" }}>
      <Container>
        <div ref={ref} style={{ display: "grid", gridTemplateColumns: m ? "1fr 1fr" : "repeat(4, 1fr)", gap: m ? 20 : 32 }}>
          {items.map((it, i) => (
            <div key={it.label} style={{ display: "flex", alignItems: "center", gap: 12, ...rv(visible, { delay: i * 90 }) }}>
              <div style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--surface-canvas)", border: "1px solid var(--border-hairline)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary)", flex: "none" }}>
                <Icon name={it.icon} size={18} />
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--text-heading)" }}>{it.label}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--text-muted)" }}>{it.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Comparison vs $4,000 courses ---------------- */
// Hoisted to module scope (NOT defined inside Comparison): a stable component
// identity so the reveal re-render reconciles cells in place instead of
// tearing down lucide-converted icon nodes, which would throw on scroll.
function ComparisonCell({ value, highlight, m }) {
  if (value === true) return <Icon name="check" size={18} color={highlight ? "var(--color-primary)" : "var(--status-success)"} stroke={2.5} />;
  if (value === false) return <Icon name="x" size={18} color="var(--text-faint)" stroke={2.5} />;
  return <span style={{ fontFamily: "var(--font-sans)", fontSize: m ? 12 : 13, fontWeight: highlight ? 600 : 400, color: highlight ? "var(--text-heading)" : "var(--text-muted)" }}>{value}</span>;
}

function Comparison({ onStart }) {
  const m = useIsMobile();
  const [headerRef, headerVisible] = useReveal();
  const [tableRef, tableVisible] = useReveal();
  const rows = [
    { label: "Price to pass all sections", us: "$19/month", them: "$2,000–$4,000" },
    { label: "All 6 CPA Evolution sections", us: true, them: "Often sold separately" },
    { label: "Thousands of practice questions", us: true, them: true },
    { label: "Tutor-grade explanation on every answer", us: true, them: "Hit or miss" },
    { label: "Full-length, timed mock exams", us: true, them: true },
    { label: "Flashcard review mode", us: true, them: "Add-on" },
    { label: "Free trial, no card required", us: true, them: false },
  ];

  return (
    <div style={{ padding: m ? "56px 0" : "96px 0" }}>
      <Container>
        <div ref={headerRef} style={{ textAlign: "center", marginBottom: m ? 32 : 48, maxWidth: m ? 640 : "none", marginLeft: "auto", marginRight: "auto" }}>
          <div style={rv(headerVisible, { delay: 0 })}><Eyebrow>The math</Eyebrow></div>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: 0, whiteSpace: m ? "normal" : "nowrap", ...rv(headerVisible, { delay: 80 }) }}>
            Same coverage. A fraction of the price.
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: m ? 15 : 17, color: "var(--text-muted)", margin: "14px auto 0", lineHeight: 1.55, maxWidth: m ? "none" : 540, ...rv(headerVisible, { delay: 140 }) }}>
            You're paying the big review courses for a brand, not better materials. Here's what you actually get.
          </p>
        </div>

        <div ref={tableRef} style={{ ...rv(tableVisible, { delay: 0, dist: 20 }), border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--surface-canvas)" }}>
          {/* Header row */}
          <div style={{ display: "grid", gridTemplateColumns: m ? "1.5fr 1fr 1fr" : "2fr 1fr 1fr", alignItems: "center" }}>
            <div style={{ padding: m ? "14px 14px" : "18px 24px" }} />
            <div style={{ padding: m ? "14px 8px" : "18px 16px", textAlign: "center", background: "var(--surface-2)", borderBottom: "2px solid var(--color-primary)" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: m ? 14 : 16, color: "var(--text-heading)" }}>CPAcioli</div>
            </div>
            <div style={{ padding: m ? "14px 8px" : "18px 16px", textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: m ? 13 : 15, color: "var(--text-muted)" }}>$4,000 courses</div>
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={r.label} style={{ display: "grid", gridTemplateColumns: m ? "1.5fr 1fr 1fr" : "2fr 1fr 1fr", alignItems: "center", borderTop: "1px solid var(--border-hairline)" }}>
              <div style={{ padding: m ? "12px 14px" : "16px 24px", fontFamily: "var(--font-sans)", fontSize: m ? 13 : 15, color: "var(--text-strong)" }}>{r.label}</div>
              <div style={{ padding: m ? "12px 8px" : "16px 16px", display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center", background: "var(--surface-2)" }}>
                <ComparisonCell value={r.us} highlight m={m} />
              </div>
              <div style={{ padding: m ? "12px 8px" : "16px 16px", display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center" }}>
                <ComparisonCell value={r.them} m={m} />
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: m ? 28 : 36 }}>
          <Button className="cpa-cta" variant="primary" size="lg" onClick={onStart} style={m ? { width: "100%" } : undefined}>Start your free trial</Button>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Features ---------------- */
function Features() {
  const items = [
    { icon: "target", title: "Adaptive practice", body: "The engine serves more of what you miss and less of what you've mastered — so every hour of study lands where it counts." },
    { icon: "file-check-2", title: "Full-length simulations", body: "Timed, blueprint-weighted mock exams that mirror test day — testlets, task-based simulations, and a real 4-hour clock." },
    { icon: "book-open", title: "Tutor-grade explanations", body: "Every answer comes with a worked explanation — the why behind the right choice and the trap in each wrong one." },
    { icon: "layers", title: "Flashcard review", body: "Quick flip-card review for every section to lock in the rules, ratios, and definitions you keep forgetting." },
    { icon: "line-chart", title: "Readiness dashboard", body: "A live readiness score per section, plus accuracy and a study streak, so you always know whether you're ready to sit." },
    { icon: "grid-2x2", title: "All six sections", body: "FAR, BAR, AUD, REG, ISC, and TCP — Core and Discipline — included in every plan, with no per-section upsell." },
  ];
  const m = useIsMobile();
  const [headerRef, headerVisible] = useReveal();
  const [cardsRef, cardsVisible] = useReveal();
  return (
    <div style={{ background: "var(--surface-soft)", padding: m ? "56px 0" : "96px 0", borderTop: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)" }}>
      <Container>
        <div ref={headerRef}>
          <div style={rv(headerVisible, { delay: 0 })}><Eyebrow>What you get</Eyebrow></div>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: m ? "0 0 28px" : "0 0 48px", maxWidth: m ? 620 : "none", whiteSpace: m ? "normal" : "nowrap", ...rv(headerVisible, { delay: 80 }) }}>
            Big-prep coverage, set like a textbook.
          </h2>
        </div>
        <div ref={cardsRef} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr 1fr", gap: 24 }}>
          {items.map((it, i) => (
            <div key={it.title} style={{ ...rv(cardsVisible, { delay: (i % 3) * 120 }), display: "flex" }}>
              <Card className="cpa-lift" variant="feature" style={{ flex: 1 }}>
                <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--surface-canvas)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary)", marginBottom: 20 }}>
                  <Icon name={it.icon} size={22} />
                </div>
                <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 18, color: "var(--text-heading)", margin: "0 0 8px" }}>{it.title}</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.55, color: "var(--text-body)", margin: 0 }}>{it.body}</p>
              </Card>
            </div>
          ))}
        </div>
      </Container>
    </div>
  );
}

/* ---------------- How it works ---------------- */
function HowItWorks({ onStart }) {
  const m = useIsMobile();
  const [headerRef, headerVisible] = useReveal();
  const [stepsRef, stepsVisible] = useReveal();
  const steps = [
    { icon: "compass", title: "Pick your section", body: "Choose any of the six CPA sections and jump straight in — no setup, no syllabus to assemble." },
    { icon: "pencil", title: "Practice the real exam", body: "Work multiple-choice and task-based simulations, then sit full-length timed mocks built to the blueprint." },
    { icon: "trophy", title: "Track your readiness", body: "Watch your accuracy and readiness score climb until the dashboard tells you you're ready to sit." },
  ];
  return (
    <div style={{ padding: m ? "56px 0" : "96px 0" }}>
      <Container>
        <div ref={headerRef} style={{ textAlign: "center", marginBottom: m ? 36 : 56, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>
          <div style={rv(headerVisible, { delay: 0 })}><Eyebrow>How it works</Eyebrow></div>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: 0, ...rv(headerVisible, { delay: 80 }) }}>
            From day one to pass day.
          </h2>
        </div>
        <div ref={stepsRef} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr 1fr", gap: m ? 28 : 32 }}>
          {steps.map((s, i) => (
            <div key={s.title} style={{ textAlign: m ? "left" : "center", ...rv(stepsVisible, { delay: i * 140 }) }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: m ? "flex-start" : "center", gap: 12, marginBottom: 16 }}>
                <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--surface-2)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary)", flex: "none" }}>
                  <Icon name={s.icon} size={22} />
                </div>
                <span style={{ fontFamily: "var(--font-serif)", fontSize: 28, color: "var(--text-faint)", letterSpacing: "-0.5px" }}>{`0${i + 1}`}</span>
              </div>
              <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 19, color: "var(--text-heading)", margin: "0 0 8px" }}>{s.title}</h3>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.55, color: "var(--text-body)", margin: "0 auto", maxWidth: m ? "none" : 280 }}>{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: m ? 32 : 48 }}>
          <Button className="cpa-cta" variant="primary" size="lg" onClick={onStart} style={m ? { width: "100%" } : undefined}>Start studying free</Button>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Showcase (all 6 sections) ---------------- */
function Showcase({ onStart }) {
  const sections = [
    { code: "AUD", name: "Auditing & Attestation", pct: 78 },
    { code: "FAR", name: "Financial Accounting & Reporting", pct: 64 },
    { code: "REG", name: "Taxation & Regulation", pct: 71 },
    { code: "BAR", name: "Business Analysis & Reporting", pct: 58 },
    { code: "ISC", name: "Information Systems & Controls", pct: 52 },
    { code: "TCP", name: "Tax Compliance & Planning", pct: 45 },
  ];
  const m = useIsMobile();
  const [ref, visible] = useReveal();
  return (
    <div style={{ background: "var(--surface-inverse)", padding: m ? "56px 0" : "96px 0" }}>
      <Container>
        <div ref={ref} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 36 : 64, alignItems: "center" }}>
          <div style={rv(visible, { delay: 0, dir: "left", dist: 32 })}>
            <Eyebrow onDark>Your dashboard</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-on-dark)", margin: "0 0 20px" }}>Know exactly where you stand.</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.55, color: "var(--text-on-dark-muted)", margin: "0 0 28px", maxWidth: 420 }}>A live readiness score per section, built from every question you answer. No guessing whether you're ready to sit — and no money wasted on a re-take.</p>
            <Button className="cpa-cta" variant="secondary-on-dark" size="lg" onClick={onStart}>Tour the dashboard</Button>
          </div>
          <div style={rv(visible, { delay: 140, dir: "right", dist: 32 })}>
            <div style={{ background: "var(--surface-inverse-elevated)", borderRadius: "var(--radius-xl)", padding: 28 }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24 }}>
                <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16, color: "var(--text-on-dark)" }}>Exam readiness</span>
                <span style={{ fontFamily: "var(--font-serif)", fontSize: 32, letterSpacing: "-0.5px", color: "var(--accent-teal)" }}>61%</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {sections.map((s, i) => (
                  <div key={s.code}>
                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                      <Badge variant="section">{s.code}</Badge>
                      <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-on-dark)" }}>{s.name}</span>
                      <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-on-dark-muted)" }}>{s.pct}%</span>
                    </div>
                    <div style={{ height: 5, borderRadius: 3, background: "var(--surface-inverse-soft)" }}>
                      <div style={{
                        width: visible ? `${s.pct}%` : "0%",
                        height: "100%",
                        borderRadius: 3,
                        background: s.pct >= 70 ? "var(--status-success)" : "var(--color-primary)",
                        transition: `width 0.9s cubic-bezier(0.4,0,0.2,1) ${300 + i * 80}ms`,
                      }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Testimonials ---------------- */
function Testimonials() {
  const m = useIsMobile();
  const [headerRef, headerVisible] = useReveal();
  const [cardsRef, cardsVisible] = useReveal();
  const reviews = [
    { section: "FAR", quote: "I switched from a $3,000 course and passed all four sections. Same coverage, a tenth of the price.", author: "Priya N.", meta: "Licensed 2025" },
    { section: "AUD", quote: "The explanations are genuinely tutor-level. I finally understood why answers were right, not just that they were.", author: "Marcus T.", meta: "CPA candidate, 2025" },
    { section: "REG", quote: "Passed REG on my first try. The adaptive practice kept pointing me at exactly what I was getting wrong.", author: "Sarah K.", meta: "Licensed 2025" },
    { section: "TCP", quote: "The mock exams feel exactly like test day — same format, same difficulty, same time pressure. I was totally prepared.", author: "James L.", meta: "CPA candidate, 2026" },
    { section: "ISC", quote: "I practice on my lunch break and still see my stats update. It keeps me accountable every single day.", author: "Alexa M.", meta: "CPA candidate, 2026" },
    { section: "BAR", quote: "Honestly didn't expect this much depth at the price. The readiness score told me when I was actually ready to sit.", author: "Devon R.", meta: "Licensed 2026" },
  ];
  return (
    <div style={{ background: "var(--surface-soft)", padding: m ? "56px 0" : "96px 0", borderTop: "1px solid var(--border-hairline)", borderBottom: "1px solid var(--border-hairline)" }}>
      <Container>
        <div ref={headerRef} style={{ textAlign: "center", marginBottom: m ? 32 : 48 }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 14, ...rv(headerVisible, { delay: 0 }) }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <Stars />
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500, color: "var(--text-strong)" }}>Loved by CPA candidates</span>
            </div>
          </div>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: 0, ...rv(headerVisible, { delay: 80 }) }}>
            Candidates who left the $4,000 courses.
          </h2>
        </div>
        <div ref={cardsRef} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr 1fr", gap: 24 }}>
          {reviews.map((r, i) => (
            <div key={r.author} style={{ ...rv(cardsVisible, { delay: (i % 3) * 120 }), display: "flex" }}>
              <Card className="cpa-lift" variant="bordered" style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <Stars size={14} />
                  <Badge variant="section">{r.section}</Badge>
                </div>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-strong)", margin: 0, flex: 1 }}>"{r.quote}"</p>
                <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 4 }}>
                  <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--surface-2)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--color-primary)", flex: "none" }}>{r.author[0]}</div>
                  <div>
                    <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--text-heading)" }}>{r.author}</div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-muted)" }}>{r.meta}</div>
                  </div>
                </div>
              </Card>
            </div>
          ))}
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Pricing ---------------- */
function Pricing({ onStart }) {
  const m = useIsMobile();
  const [headerRef, headerVisible] = useReveal();
  const [cardsRef, cardsVisible] = useReveal();
  return (
    <div style={{ padding: m ? "56px 0" : "96px 0" }}>
      <Container>
        <div ref={headerRef} style={{ textAlign: "center", marginBottom: m ? 32 : 48 }}>
          <div style={rv(headerVisible, { delay: 0 })}><Eyebrow>Pricing</Eyebrow></div>
          <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: 0, ...rv(headerVisible, { delay: 80 }) }}>
            Independent-prep price. Big-prep coverage.
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: m ? 15 : 17, color: "var(--text-muted)", margin: "14px auto 0", maxWidth: 560, lineHeight: 1.55, ...rv(headerVisible, { delay: 140 }) }}>
            Every plan unlocks all six sections — thousands of questions, full-length mock exams, flashcards, and tutor-grade explanations. Start with a 7-day free trial.
          </p>
        </div>
        <div ref={cardsRef} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr 1fr", gap: 24, alignItems: "stretch" }}>
          {[
            { name: "Monthly", price: "$19", period: "/mo", blurb: "Full access, billed monthly. Cancel any time.", features: ["All 6 CPA sections", "Thousands of practice questions", "Full-length mock exams", "Flashcard review mode", "7-day free trial"], cta: "Start free trial" },
            { name: "Yearly", price: "$149", period: "/yr", blurb: "Just $12.42/mo — save $79 vs. monthly.", features: ["Everything in Monthly", "Best value — save $79 a year", "Tutor-grade explanations", "Readiness score predictor", "7-day free trial"], cta: "Start free trial", featured: true, badge: "Best value" },
            { name: "Lifetime", price: "$219", period: "once", blurb: "Pay once. Yours forever — every future update included.", features: ["Everything in Yearly", "One payment, no renewals", "All future questions & features", "Lifetime access"], cta: "Get lifetime access" },
          ].map((plan, i) => (
            <div key={plan.name} className="cpa-pricing-cta" style={rv(cardsVisible, { delay: i * 120 })}>
              <PricingCard {...plan} onSelect={onStart} />
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: m ? 24 : 32 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-muted)" }}>
            <Icon name="shield-check" size={16} color="var(--accent-teal)" />
            7-day free trial · No credit card required · Cancel anytime
          </div>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- FAQ ---------------- */
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--border-hairline)" }}>
      <button className="cpa-faq-q" onClick={onToggle} aria-expanded={open} style={{
        width: "100%", display: "flex", alignItems: "center", gap: 16, textAlign: "left",
        padding: "20px 16px", background: "none", border: "none", cursor: "pointer",
      }}>
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 17, color: "var(--text-heading)", flex: 1 }}>{q}</span>
        <span style={{ color: "var(--color-primary)", transform: open ? "rotate(45deg)" : "none", transition: "transform 200ms ease", flex: "none" }}>
          <Icon name="plus" size={20} />
        </span>
      </button>
      <div style={{ maxHeight: open ? 240 : 0, overflow: "hidden", transition: "max-height 280ms ease" }}>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.65, color: "var(--text-body)", margin: 0, padding: "0 16px 22px" }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const m = useIsMobile();
  const [open, setOpen] = React.useState(-1);
  const [ref, visible] = useReveal();
  const items = [
    { q: "Is CPAcioli enough to pass on its own?", a: "Yes. You get full coverage of all six CPA Evolution sections — thousands of practice questions, full-length blueprint-accurate mock exams, flashcards, and a worked explanation on every answer. It's a complete, self-contained prep course." },
    { q: "Which sections are included?", a: "All six: FAR, BAR, AUD, REG, ISC, and TCP — both the Core sections and the Discipline sections. Every plan unlocks all of them, with no per-section upsell." },
    { q: "Do I need a credit card to start?", a: "No. Your 7-day free trial starts with no credit card required. Explore the question bank, mock exams, and dashboard first, then choose a plan only if it's a fit." },
    { q: "Can I cancel anytime?", a: "Yes. Monthly and yearly plans can be cancelled at any time from the billing portal, and you keep access through the end of the period you've paid for." },
    { q: "What's the difference between the plans?", a: "Every plan includes the exact same full access. Monthly is $19/mo, Yearly is $149/yr (about $12.42/mo — the best value), and Lifetime is a one-time $219 with every future update included. Pick based on how long you expect to study." },
    { q: "Are you affiliated with the AICPA or NASBA?", a: "No. CPAcioli is an independent study tool and is not affiliated with, endorsed by, or sponsored by the AICPA or NASBA." },
  ];
  return (
    <div style={{ background: "var(--surface-soft)", padding: m ? "56px 0" : "96px 0", borderTop: "1px solid var(--border-hairline)" }}>
      <Container>
        <div ref={ref} style={{ maxWidth: 760, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: m ? 28 : 40 }}>
            <div style={rv(visible, { delay: 0 })}><Eyebrow>FAQ</Eyebrow></div>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: 0, ...rv(visible, { delay: 80 }) }}>
              Questions, answered.
            </h2>
          </div>
          <div style={{ background: "var(--surface-canvas)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-lg)", overflow: "hidden", ...rv(visible, { delay: 140, dist: 20 }) }}>
            {items.map((it, i) => (
              <FAQItem key={it.q} q={it.q} a={it.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Coral CTA ---------------- */
function CoralCTA({ onStart }) {
  const m = useIsMobile();
  const [ref, visible] = useReveal(0.2);
  return (
    <Container style={{ paddingTop: m ? 56 : 96, paddingBottom: m ? 56 : 96 }}>
      <div ref={ref} style={{
        background: "var(--color-primary)", borderRadius: "var(--radius-lg)", padding: m ? "40px 24px" : 64, textAlign: "center",
        ...rv(visible, { delay: 0, dist: 20 }),
      }}>
        <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 26 : 36, letterSpacing: "-0.5px", color: "var(--color-on-primary)", margin: "0 0 12px", ...rv(visible, { delay: 80 }) }}>
          7 days free. No credit card required.
        </h2>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: m ? 15 : 17, color: "rgba(255,255,255,0.9)", margin: "0 0 28px", ...rv(visible, { delay: 160 }) }}>
          See why candidates switch from the $4,000 courses — and keep the savings.
        </p>
        <div style={rv(visible, { delay: 240 })}>
          <Button className="cpa-cta" variant="on-coral" size="lg" onClick={onStart} style={m ? { width: "100%" } : undefined}>Start studying free</Button>
        </div>
        <div style={{ marginTop: 20, display: "flex", justifyContent: "center", ...rv(visible, { delay: 320 }) }}>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", justifyContent: "center" }}>
            {["7-day free trial", "No credit card", "Cancel anytime"].map((t) => (
              <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontSize: 13, color: "rgba(255,255,255,0.92)" }}>
                <i data-lucide="check" style={{ width: 14, height: 14, color: "#fff", strokeWidth: 2.5, display: "inline-flex" }} />
                {t}
              </span>
            ))}
          </div>
        </div>
      </div>
    </Container>
  );
}

/* ---------------- Contact ---------------- */
function Contact() {
  const m = useIsMobile();
  const [form, setForm] = React.useState({ name: "", email: "", message: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const set = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.value }));
  const [ref, visible] = useReveal();
  React.useEffect(() => { if (status === "sent" && window.lucide) window.lucide.createIcons(); }, [status]);

  const send = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) return;
    setStatus("sending");
    try {
      const res = await fetch("https://formsubmit.co/ajax/walter@cpacioli.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.message,
          _subject: "CPAcioli — Contact form submission",
          _replyto: form.email,
        }),
      });
      if (res.ok) { setStatus("sent"); setForm({ name: "", email: "", message: "" }); }
      else setStatus("error");
    } catch { setStatus("error"); }
  };

  const inputStyle = {
    width: "100%", boxSizing: "border-box", padding: "12px 14px",
    fontFamily: "var(--font-sans)", fontSize: 16, color: "var(--text-heading)",
    background: "var(--surface-canvas)", border: "1px solid var(--border-hairline)",
    borderRadius: "var(--radius-md)", outline: "none",
  };

  return (
    <div style={{ padding: m ? "56px 0" : "96px 0", background: "var(--surface-canvas)", borderTop: "1px solid var(--border-hairline)" }}>
      <Container>
        <div ref={ref} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? 40 : 80, alignItems: "start", maxWidth: 900, margin: "0 auto" }}>
          <div style={rv(visible, { delay: 0, dir: "left", dist: 28 })}>
            <Eyebrow>Contact</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: m ? 30 : 44, letterSpacing: "-1px", color: "var(--text-heading)", margin: "0 0 20px" }}>Get in touch.</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--text-body)", margin: "0 0 32px" }}>
              Have a question, feedback, or want to chat about CPAcioli? We'd love to hear from you.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {[
                { icon: "mail", label: "Email", value: "walter@cpacioli.com" },
                { icon: "clock", label: "Response time", value: "Within 24 hours" },
              ].map((item) => (
                <div key={item.label} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: "var(--radius-md)", background: "var(--surface-soft)", border: "1px solid var(--border-hairline)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-primary)", flex: "none" }}>
                    <Icon name={item.icon} size={16} />
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500, letterSpacing: "0.5px", textTransform: "uppercase", color: "var(--text-muted)" }}>{item.label}</div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-body)" }}>{item.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={rv(visible, { delay: 150, dir: "right", dist: 28 })}>
            {status === "sent" ? (
              <div style={{ textAlign: "center", padding: "48px 32px", background: "var(--surface-soft)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-xl)" }}>
                <div style={{ width: 52, height: 52, borderRadius: "50%", background: "rgba(93,184,114,0.12)", border: "1px solid var(--status-success)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px", color: "var(--status-success)" }}>
                  <Icon name="check" size={24} />
                </div>
                <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 400, fontSize: 24, color: "var(--text-heading)", margin: "0 0 8px" }}>Message sent!</h3>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--text-body)", margin: "0 0 20px" }}>Thanks for reaching out. We'll get back to you within 24 hours.</p>
                <button onClick={() => setStatus("idle")} style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-link)", background: "none", border: "none", cursor: "pointer" }}>Send another message</button>
              </div>
            ) : (
              <form onSubmit={send} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div>
                  <label style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, color: "var(--text-strong)", marginBottom: 6 }}>Name</label>
                  <input value={form.name} onChange={set("name")} placeholder="Your name" required style={inputStyle} />
                </div>
                <div>
                  <label style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, color: "var(--text-strong)", marginBottom: 6 }}>Email</label>
                  <input type="email" value={form.email} onChange={set("email")} placeholder="you@example.com" required style={inputStyle} />
                </div>
                <div>
                  <label style={{ display: "block", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, color: "var(--text-strong)", marginBottom: 6 }}>Message</label>
                  <textarea value={form.message} onChange={set("message")} placeholder="What's on your mind?" required rows={5} style={{ ...inputStyle, resize: "vertical" }} />
                </div>
                {status === "error" && (
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--status-error)", padding: "10px 14px", background: "rgba(198,69,69,0.08)", borderRadius: "var(--radius-md)" }}>
                    Something went wrong. Please try again or email us directly.
                  </div>
                )}
                <button type="submit" className="cpa-cta" disabled={status === "sending"} style={{
                  padding: "13px 24px", background: "var(--color-primary)", border: "none", borderRadius: "var(--radius-md)",
                  color: "var(--color-on-primary)", fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
                  cursor: status === "sending" ? "default" : "pointer", opacity: status === "sending" ? 0.7 : 1,
                }}>
                  {status === "sending" ? "Sending…" : "Send message"}
                </button>
              </form>
            )}
          </div>
        </div>
      </Container>
    </div>
  );
}

/* ---------------- Footer ---------------- */
function FooterLink({ href, onClick, children }) {
  const style = {
    fontFamily: "var(--font-sans)", fontSize: 14,
    color: "var(--text-on-dark-muted)", textDecoration: "none", cursor: "pointer",
    background: "none", border: "none", padding: 0, textAlign: "left",
  };
  // mailto / in-page links open in place; external policy pages in a new tab.
  if (href) {
    const external = /^https?:/i.test(href);
    return <a className="cpa-foot-link" href={href} style={style} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{children}</a>;
  }
  return <button className="cpa-foot-link" onClick={onClick} style={style}>{children}</button>;
}

function FooterCol({ heading, children }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 12, letterSpacing: "1.2px", textTransform: "uppercase", color: "var(--text-on-dark)", marginBottom: 18 }}>{heading}</div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>{children}</ul>
    </div>
  );
}

function Footer({ scrollTo, onStart }) {
  const m = useIsMobile();
  const SECTIONS = ["FAR", "AUD", "REG", "BAR", "ISC", "TCP"];
  return (
    <footer style={{ background: "var(--surface-inverse)", padding: m ? "48px 0 36px" : "72px 0 40px" }}>
      <Container>
        {/* Top row */}
        <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "2.2fr 1fr 1fr 1fr", gap: m ? 36 : 48, marginBottom: m ? 36 : 56 }}>
          {/* Brand */}
          <div style={{ maxWidth: m ? "none" : 320 }}>
            <img src="/assets/cpacioli-wordmark-on-dark.svg" alt="CPAcioli" height="28"
              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
              style={{ height: 28, marginBottom: 16, cursor: "pointer" }} />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.7, color: "var(--text-on-dark-muted)", margin: "0 0 18px" }}>
              CPA exam prep you can actually afford.
            </p>
            {/* Section coverage — a trust signal, not a nav heading */}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 24 }}>
              {SECTIONS.map((s) => (
                <span key={s} style={{
                  fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 600, letterSpacing: "1px",
                  textTransform: "uppercase", color: "var(--text-on-dark-muted)",
                  padding: "4px 10px", borderRadius: "var(--radius-xs)", background: "rgba(255,255,255,0.06)",
                }}>{s}</span>
              ))}
            </div>
            <button onClick={onStart} className="cpa-cta" style={{
              display: "inline-flex", alignItems: "center", gap: 8, padding: "11px 20px",
              background: "var(--color-primary)", border: "none", borderRadius: "var(--radius-md)",
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14, color: "#fff", cursor: "pointer",
            }}>Start free trial <Icon name="arrow-right" size={16} /></button>
            <div style={{ marginTop: 12, fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--text-on-dark-muted)" }}>
              7-day free trial · No credit card required
            </div>
          </div>

          {/* Product */}
          <FooterCol heading="Product">
            <li><FooterLink onClick={() => scrollTo("features")}>Features</FooterLink></li>
            <li><FooterLink onClick={() => scrollTo("reviews")}>Reviews</FooterLink></li>
            <li><FooterLink onClick={() => scrollTo("pricing")}>Pricing</FooterLink></li>
          </FooterCol>

          {/* Support */}
          <FooterCol heading="Support">
            <li><FooterLink onClick={() => scrollTo("faq")}>FAQ</FooterLink></li>
            <li><FooterLink onClick={() => scrollTo("contact")}>Contact</FooterLink></li>
            <li><FooterLink href="mailto:walter@cpacioli.com">Email us</FooterLink></li>
          </FooterCol>

          {/* Legal */}
          <FooterCol heading="Legal">
            <li><FooterLink href="/terms">Terms of Service</FooterLink></li>
            <li><FooterLink href="/privacy">Privacy Policy</FooterLink></li>
            <li><FooterLink href="/refunds">Refund Policy</FooterLink></li>
          </FooterCol>
        </div>

        {/* Bottom bar */}
        <div style={{ paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-on-dark-muted)" }}>© 2026 Johnson Ecommerce LLC. Not affiliated with AICPA or NASBA.</span>
          <div style={{ display: "flex", gap: 20 }}>
            <FooterLink href="/terms">Terms</FooterLink>
            <FooterLink href="/privacy">Privacy</FooterLink>
            <FooterLink href="/refunds">Refund</FooterLink>
          </div>
        </div>
      </Container>
    </footer>
  );
}

function MarketingApp() {
  const onStart = () => window.open("/app", "_blank");
  const scrollTo = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);
  return (
    <div>
      <Styles />
      <Nav onStart={onStart} scrollTo={scrollTo} />
      <Hero onStart={onStart} scrollTo={scrollTo} />
      <TrustBar />
      <Comparison onStart={onStart} />
      <div id="features"><Features /></div>
      <HowItWorks onStart={onStart} />
      <div id="sections"><Showcase onStart={onStart} /></div>
      <div id="reviews"><Testimonials /></div>
      <div id="pricing"><Pricing onStart={onStart} /></div>
      <div id="faq"><FAQ /></div>
      <CoralCTA onStart={onStart} />
      <div id="contact"><Contact /></div>
      <Footer scrollTo={scrollTo} onStart={onStart} />
    </div>
  );
}

window.MarketingApp = MarketingApp;