/* Sections: Hero, Capabilities, Roadmap, Features, Pricing, Footer */

const { useState, useEffect, useRef, useMemo } = React;

/* ===== Hooks ===== */
const useMouseParallax = () => {
  const [m, setM] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const onMove = (e) => {
      setM({
        x: (e.clientX / window.innerWidth - 0.5) * 2,
        y: (e.clientY / window.innerHeight - 0.5) * 2,
      });
    };
    window.addEventListener("mousemove", onMove, { passive: true });
    return () => window.removeEventListener("mousemove", onMove);
  }, []);
  return m;
};

const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal]");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) e.target.classList.add("in");
      });
    }, { threshold: 0.18 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

const useSectionScroll = (ref) => {
  const [p, setP] = useState(0);
  useEffect(() => {
    if (!ref.current) return;
    const onScroll = () => {
      const r = ref.current.getBoundingClientRect();
      const total = window.innerHeight + r.height;
      const elapsed = window.innerHeight - r.top;
      setP(Math.max(0, Math.min(1, elapsed / total)));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [ref]);
  return p;
};

/* ===== Nav ===== */
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="brand">
        NovuRoy
      </div>
      <div className="nav-links">
        <a href="#capabilities">Product</a>
        <a href="#roadmap">How it works</a>
        <a href="#pricing">Pricing</a>
      </div>
      <div className="nav-cta">
        <a href="/login" className="btn btn-ghost">Log in</a>
        <a href="/onboarding" className="btn btn-primary">Get Started</a>
      </div>
    </nav>
  );
};

/* ===== Hero ===== */
const Hero = ({ accent, headline, onPlayDemo }) => {
  const ref = useRef(null);
  const progress = useSectionScroll(ref);
  const mouse = useMouseParallax();
  const words = headline.split(" ");

  return (
    <section className="section" ref={ref} style={{ minHeight: "100vh" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `
          radial-gradient(ellipse at 50% 100%, ${accent}1a 0%, transparent 50%),
          radial-gradient(ellipse at 20% 30%, #0e1c36 0%, transparent 60%),
          linear-gradient(180deg, #04060a 0%, #070b14 60%, #04060a 100%)
        `,
      }} />

      <window.HeroOrb scroll={progress} mouse={mouse} accent={accent} />

      <div className="container lp-hero-container" style={{ textAlign: "center", paddingTop: 120 }}>
        <div className="mono" data-reveal style={{ marginBottom: 24 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 18, height: 1, background: "currentColor", opacity: 0.6 }}></span>
            v1.0 — Now in early access
            <span style={{ width: 18, height: 1, background: "currentColor", opacity: 0.6 }}></span>
          </span>
        </div>

        <h1 style={{
          fontSize: "clamp(48px, 8.6vw, 132px)",
          lineHeight: 0.92,
          letterSpacing: "-0.04em",
          fontWeight: 700,
          color: "var(--ink)",
          maxWidth: 1100,
          margin: "0 auto",
          textWrap: "balance",
        }}>
          {words.map((w, i) => (
            <span key={i} data-reveal data-reveal-delay={Math.min(i, 6)} style={{
              display: "inline-block", marginRight: "0.22em",
            }}>{w}</span>
          ))}
        </h1>

        <p data-reveal data-reveal-delay="3" style={{
          marginTop: 36,
          fontSize: 18, lineHeight: 1.55,
          color: "var(--ink-3)",
          maxWidth: 560,
          margin: "36px auto 0",
        }}>
          Your personal AI counselor — building your college roadmap, keeping you on track,
          and sending you guidance while you sleep. Built for ambitious students 14–17.
        </p>

        <div data-reveal data-reveal-delay="4" className="lp-hero-cta" style={{
          marginTop: 40,
          display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap",
        }}>
          <a href="/onboarding" className="btn btn-primary" style={{ padding: "14px 26px", fontSize: 14 }}>
            Start for free →
          </a>
          <button className="btn" onClick={onPlayDemo} style={{ padding: "14px 26px", fontSize: 14 }}>
            Watch the demo
          </button>
        </div>

        <div style={{
          position: "absolute", left: "50%", bottom: 32, transform: "translateX(-50%)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
          opacity: 0.5, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase",
          fontFamily: "JetBrains Mono, monospace", color: "var(--ink-3)",
        }}>
          Scroll
          <span style={{
            width: 1, height: 36, background: "linear-gradient(180deg, var(--ink-3), transparent)",
            animation: "scrollCue 2s ease-in-out infinite",
          }} />
        </div>
      </div>
      <style>{`
        @keyframes scrollCue {
          0% { transform: scaleY(0.2); transform-origin: top; opacity: 0.2; }
          50% { transform: scaleY(1); opacity: 1; }
          100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0.2; }
        }
      `}</style>
    </section>
  );
};

/* ===== Capabilities (sticky) ===== */
const Capabilities = ({ accent }) => {
  const ref = useRef(null);
  const progress = useSectionScroll(ref);
  const items = [
    { kicker: "01 / The Counselor", title: "It actually knows you.", body: "Your goals, grades, target schools, and direction — held in context. Every answer comes from your profile, not a generic playbook." },
    { kicker: "02 / The Timeline", title: "Builds itself as you talk.", body: "Conversation generates milestones. Apps, essays, tests, deadlines — they appear, get updated, and check off as you go." },
    { kicker: "03 / The Agent", title: "Works while you sleep.", body: "Every morning, one focused email lands in your inbox with the single highest-leverage move for the day." },
  ];
  const idx = Math.floor(Math.min(progress * items.length, items.length - 0.001));
  const local = (progress * items.length) - idx;

  return (
    <section ref={ref} style={{
      position: "relative",
      width: "100%",
      minHeight: `${items.length * 90}vh`,
      display: "block",
    }}>
      <div style={{
        position: "sticky", top: 0,
        width: "100%", height: "100vh",
        display: "flex", alignItems: "center", justifyContent: "center",
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, #04060a 0%, #070b14 50%, #04060a 100%)",
        }} />

        <div className="lp-cap-glyph" style={{
          position: "absolute", left: "8%", top: "50%", transform: "translateY(-50%)",
          width: "min(36vw, 460px)", height: "min(36vw, 460px)",
        }}>
          <CapGlyph index={idx} local={local} accent={accent} />
        </div>

        <div className="container lp-cap-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div></div>
          <div className="lp-cap-text" style={{ position: "relative", minHeight: 320 }}>
            {items.map((it, i) => (
              <div key={i} style={{
                position: "absolute", inset: 0,
                opacity: i === idx ? 1 : 0,
                transform: i === idx ? "translateY(0)" : (i < idx ? "translateY(-24px)" : "translateY(24px)"),
                transition: "opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1)",
              }}>
                <div className="mono" style={{ marginBottom: 24, color: accent }}>{it.kicker}</div>
                <h2 style={{
                  fontSize: "clamp(36px, 5vw, 72px)",
                  lineHeight: 1.02, letterSpacing: "-0.03em",
                  marginBottom: 24, textWrap: "balance",
                }}>{it.title}</h2>
                <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-3)", maxWidth: 460 }}>{it.body}</p>
              </div>
            ))}

            <div style={{ position: "absolute", bottom: -64, left: 0, display: "flex", gap: 10 }}>
              {items.map((_, i) => (
                <span key={i} style={{
                  width: i === idx ? 28 : 8, height: 2, borderRadius: 2,
                  background: i === idx ? "var(--ink)" : "var(--line-2)",
                  transition: "all 400ms cubic-bezier(.2,.8,.2,1)",
                }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* CapGlyph */
const CapGlyph = ({ index, local, accent }) => {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf, start = performance.now();
    const loop = () => { setT((performance.now() - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div style={{ position: "relative", width: "100%", height: "100%", perspective: 1200 }}>
      <div style={{
        position: "absolute", inset: 0,
        opacity: index === 0 ? 1 : 0,
        transform: index === 0 ? "scale(1)" : "scale(0.92)",
        transition: "opacity 600ms, transform 800ms",
      }}>
        <div style={{ position: "absolute", inset: 0, transformStyle: "preserve-3d", transform: `rotateX(-12deg) rotateY(${t * 8}deg)` }}>
          {[0, 1, 2, 3, 4].map((i) => (
            <div key={i} style={{
              position: "absolute", left: "50%", top: "50%",
              width: 220 - i * 28, height: 140 - i * 18,
              marginLeft: -(220 - i * 28) / 2, marginTop: -(140 - i * 18) / 2,
              border: `1px solid ${i === 0 ? accent : "rgba(244,243,238,0.18)"}`,
              borderRadius: 14,
              background: i === 0 ? `${accent}10` : "rgba(244,243,238,0.02)",
              transform: `translateZ(${-i * 50}px) translateY(${i * 14}px)`,
              boxShadow: i === 0 ? `0 30px 60px rgba(0,0,0,0.4)` : "none",
              backdropFilter: "blur(10px)",
            }}>
              {i === 0 && (
                <div style={{ padding: 20, fontFamily: "JetBrains Mono", fontSize: 11, color: "var(--ink-3)" }}>
                  <div style={{ color: accent, marginBottom: 8 }}>profile.you</div>
                  <div>goal: stanford CS</div>
                  <div>grade: 11</div>
                  <div>focus: ML, robotics</div>
                  <div style={{ color: "var(--ink-4)" }}>updated 2m ago</div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      <div style={{
        position: "absolute", inset: 0,
        opacity: index === 1 ? 1 : 0,
        transform: index === 1 ? "scale(1)" : "scale(0.92)",
        transition: "opacity 600ms, transform 800ms",
      }}>
        <svg viewBox="0 0 400 400" style={{ width: "100%", height: "100%" }}>
          <defs>
            <linearGradient id="timelineLine" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor={accent} stopOpacity="0" />
              <stop offset="50%" stopColor={accent} stopOpacity="1" />
              <stop offset="100%" stopColor={accent} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M 40 200 Q 130 60 200 200 T 360 200" stroke="url(#timelineLine)" strokeWidth="1.5" fill="none" />
          <path d="M 40 200 Q 130 60 200 200 T 360 200" stroke="rgba(244,243,238,0.08)" strokeWidth="1" fill="none" strokeDasharray="2 4" />
          {[60, 130, 200, 270, 340].map((x, i) => {
            const y = 200 + Math.sin(((x - 40) / 320) * Math.PI * 2) * (60 - i * 4);
            const active = ((Math.floor(t * 1.2)) % 5) === i;
            return (
              <g key={i}>
                <circle cx={x} cy={y} r="6" fill={active ? accent : "rgba(244,243,238,0.2)"} />
                <circle cx={x} cy={y} r={active ? 14 : 0} fill="none" stroke={accent} strokeOpacity="0.4" />
                <text x={x} y={y - 18} fontSize="9" fill="rgba(244,243,238,0.5)" textAnchor="middle" fontFamily="JetBrains Mono">
                  {["SAT", "ESSAY", "APPS", "VISIT", "DEC"][i]}
                </text>
              </g>
            );
          })}
        </svg>
      </div>

      <div style={{
        position: "absolute", inset: 0,
        opacity: index === 2 ? 1 : 0,
        transform: index === 2 ? "scale(1)" : "scale(0.92)",
        transition: "opacity 600ms, transform 800ms",
      }}>
        <div style={{
          position: "absolute", left: "50%", top: "50%",
          width: 320, height: 200, marginLeft: -160, marginTop: -100,
          transformStyle: "preserve-3d",
          transform: `rotateX(${-15 + Math.sin(t) * 3}deg) rotateY(${Math.sin(t * 0.7) * 6}deg)`,
        }}>
          <div style={{
            position: "absolute", inset: 0,
            background: "rgba(244,243,238,0.04)",
            border: "1px solid rgba(244,243,238,0.18)",
            borderRadius: 12,
            padding: 20,
            fontFamily: "Inter",
            backdropFilter: "blur(10px)",
            boxShadow: "0 40px 80px rgba(0,0,0,0.5)",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14, fontSize: 10, fontFamily: "JetBrains Mono", color: "var(--ink-4)" }}>
              <span>From: NovuRoy</span><span>06:30 AM</span>
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Today's move →</div>
            <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.55 }}>
              Spend 25 min refining your "Why Stanford" essay opener.
              You shifted toward robotics yesterday — let's let that show.
            </div>
            <div style={{ marginTop: 16, display: "flex", gap: 6 }}>
              {[0,1,2].map(i => <span key={i} style={{
                width: 6, height: 6, borderRadius: "50%",
                background: accent, opacity: ((Math.floor(t*3)+i) % 3) === 0 ? 1 : 0.3,
              }} />)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ===== Roadmap ===== */
const Roadmap = ({ accent }) => {
  const ref = useRef(null);
  const progress = useSectionScroll(ref);
  useReveal();

  const steps = [
    { n: "01", t: "Tell NovuRoy about you", d: "A 2-minute onboarding. Goals, grades, direction." },
    { n: "02", t: "Talk. Watch your map appear.", d: "Milestones build themselves through conversation." },
    { n: "03", t: "Wake up to one focused move.", d: "Daily email with the single thing to do today." },
  ];

  return (
    <section className="section" id="roadmap" ref={ref} style={{ minHeight: "120vh" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `linear-gradient(180deg, #04060a 0%, #07101e 40%, #04060a 100%)`,
      }} />

      <svg viewBox="0 0 1200 700" preserveAspectRatio="none" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.7,
      }}>
        <defs>
          <linearGradient id="constLine" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor={accent} stopOpacity="0" />
            <stop offset="50%" stopColor={accent} stopOpacity="0.8" />
            <stop offset="100%" stopColor={accent} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path
          d="M 100 480 Q 300 120 600 380 T 1100 220"
          stroke="url(#constLine)"
          strokeWidth="1.2"
          fill="none"
          strokeDasharray="1200"
          strokeDashoffset={1200 - progress * 1200}
          style={{ transition: "stroke-dashoffset 200ms linear" }}
        />
        <path
          d="M 100 480 Q 300 120 600 380 T 1100 220"
          stroke="rgba(244,243,238,0.06)"
          strokeWidth="1"
          fill="none"
          strokeDasharray="2 6"
        />
      </svg>

      <div className="container">
        <div className="mono" data-reveal style={{ textAlign: "center", marginBottom: 18 }}>How it works</div>
        <h2 data-reveal style={{
          fontSize: "clamp(40px, 6vw, 88px)",
          textAlign: "center", lineHeight: 1, letterSpacing: "-0.03em",
          marginBottom: 96, textWrap: "balance",
        }}>
          Three steps. Then it just works.
        </h2>

        <div className="lp-steps-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, position: "relative" }}>
          {steps.map((s, i) => (
            <div key={i} data-reveal data-reveal-delay={i + 1} style={{
              position: "relative",
              padding: "32px 28px",
              border: "1px solid var(--line)",
              borderRadius: 18,
              background: "rgba(244,243,238,0.02)",
              backdropFilter: "blur(8px)",
            }}>
              <div style={{
                position: "absolute", top: -8, left: 28,
                width: 16, height: 16, borderRadius: "50%",
                background: accent,
                boxShadow: `0 0 24px ${accent}, 0 0 48px ${accent}80`,
              }} />
              <div className="mono" style={{ color: accent, marginBottom: 28 }}>{s.n}</div>
              <h3 style={{ fontSize: 22, marginBottom: 12, lineHeight: 1.1, textWrap: "balance" }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===== Tilt Cards (features) ===== */
const TiltCard = ({ children, accent }) => {
  const ref = useRef(null);
  const [tilt, setTilt] = useState({ x: 0, y: 0, h: false });
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    setTilt({ x: -y * 8, y: x * 10, h: true });
  };
  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={() => setTilt({ x: 0, y: 0, h: false })}
      style={{
        perspective: 1200,
        transformStyle: "preserve-3d",
      }}
    >
      <div style={{
        padding: "44px 32px",
        borderRadius: 20,
        border: "1px solid var(--line)",
        background: tilt.h
          ? `linear-gradient(140deg, rgba(244,243,238,0.06), rgba(244,243,238,0.02))`
          : "rgba(244,243,238,0.025)",
        transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg) translateZ(0)`,
        transition: tilt.h ? "transform 80ms ease-out, background 300ms" : "transform 600ms cubic-bezier(.2,.8,.2,1), background 300ms",
        boxShadow: tilt.h ? `0 40px 80px rgba(0,0,0,0.5), 0 0 60px ${accent}10` : "0 20px 40px rgba(0,0,0,0.3)",
        height: "100%",
        position: "relative",
        overflow: "hidden",
      }}>
        {tilt.h && (
          <div style={{
            position: "absolute", inset: 0,
            background: `radial-gradient(circle at ${(tilt.y / 10 + 0.5) * 100}% ${(-tilt.x / 8 + 0.5) * 100}%, ${accent}20, transparent 50%)`,
            pointerEvents: "none",
          }} />
        )}
        {children}
      </div>
    </div>
  );
};

const Features = ({ accent }) => {
  useReveal();
  const features = [
    { kicker: "Counselor", title: "Real advice. From your profile.", body: "Not generic tips. NovuRoy answers from what it knows about you — your stretch schools, your weak spots, your timeline.", icon: "chat" },
    { kicker: "Timeline", title: "Your map, alive.", body: "The roadmap rebuilds as your goals shift. Milestones move, complete themselves, or branch — without you ever opening a settings page.", icon: "map" },
    { kicker: "Overnight", title: "One email. Every morning.", body: "While you sleep, NovuRoy reviews your profile and timeline, decides what matters most today, and lands one focused email at 6:30am.", icon: "mail" },
  ];

  return (
    <section className="section" id="capabilities" style={{ background: "linear-gradient(180deg, #04060a, #0a1224)" }}>
      <div className="container">
        <div className="mono" data-reveal style={{ textAlign: "center", marginBottom: 18 }}>Everything you need</div>
        <h2 data-reveal style={{
          fontSize: "clamp(40px, 6vw, 88px)",
          textAlign: "center", lineHeight: 1, letterSpacing: "-0.03em",
          marginBottom: 80, textWrap: "balance",
        }}>
          Nothing you don't.
        </h2>

        <div className="lp-features-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {features.map((f, i) => (
            <div key={i} data-reveal data-reveal-delay={i + 1}>
              <TiltCard accent={accent}>
                <FeatureIcon kind={f.icon} accent={accent} />
                <div className="mono" style={{ color: accent, marginTop: 28, marginBottom: 12 }}>{f.kicker}</div>
                <h3 style={{ fontSize: 24, lineHeight: 1.1, marginBottom: 14, textWrap: "balance" }}>{f.title}</h3>
                <p style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.65 }}>{f.body}</p>
              </TiltCard>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FeatureIcon = ({ kind, accent }) => {
  const common = { width: 56, height: 56, viewBox: "0 0 56 56", fill: "none", stroke: accent, strokeWidth: 1.2 };
  if (kind === "chat") return (
    <svg {...common}><circle cx="28" cy="28" r="26" stroke="rgba(244,243,238,0.15)" /><path d="M14 22 h28 M14 28 h20 M14 34 h14" /><circle cx="28" cy="28" r="3" fill={accent} stroke="none" /></svg>
  );
  if (kind === "map") return (
    <svg {...common}><circle cx="28" cy="28" r="26" stroke="rgba(244,243,238,0.15)" /><path d="M10 36 L 22 18 L 32 30 L 46 14" /><circle cx="10" cy="36" r="3" fill={accent} stroke="none" /><circle cx="22" cy="18" r="2.5" fill={accent} stroke="none" /><circle cx="32" cy="30" r="2.5" fill={accent} stroke="none" /><circle cx="46" cy="14" r="3" fill={accent} stroke="none" /></svg>
  );
  return (
    <svg {...common}><circle cx="28" cy="28" r="26" stroke="rgba(244,243,238,0.15)" /><rect x="14" y="20" width="28" height="18" rx="2" /><path d="M14 22 L28 32 L42 22" /></svg>
  );
};

/* ===== Pricing ===== */
const Pricing = ({ accent }) => {
  useReveal();
  return (
    <section className="section" id="pricing" style={{ minHeight: "100vh" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, #04060a 0%, #070b14 100%)",
      }} />
      <div className="container">
        <div className="mono" data-reveal style={{ textAlign: "center", marginBottom: 18 }}>Pricing</div>
        <h2 data-reveal style={{
          fontSize: "clamp(40px, 6vw, 88px)",
          textAlign: "center", lineHeight: 1, letterSpacing: "-0.03em",
          marginBottom: 64, textWrap: "balance",
        }}>
          Free to begin. <br/>Pro when you're serious.
        </h2>

        <div className="lp-pricing-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 920, margin: "0 auto", marginBottom: 100 }}>
          <div data-reveal style={{
            border: "1px solid var(--line)",
            borderRadius: 22,
            padding: 40,
            background: "rgba(244,243,238,0.02)",
            display: "flex", flexDirection: "column", gap: 24, minHeight: 460,
          }}>
            <div className="mono">Free</div>
            <div>
              <span style={{ fontFamily: "Syne", fontSize: 64, fontWeight: 700, letterSpacing: "-0.03em" }}>$0</span>
              <span style={{ color: "var(--ink-4)", marginLeft: 6 }}>/month</span>
            </div>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 14, fontSize: 14, color: "var(--ink-3)" }}>
              {["Limited messages per day", "5 timeline items", "Weekly agent email"].map((l, i) =>
                <PriceLine key={i} accent={accent}>{l}</PriceLine>)}
            </div>
            <a href="/onboarding" className="btn" style={{ padding: "14px 26px", fontSize: 14, borderRadius: 999, border: "1px solid var(--line-2)", textAlign: "center" }}>Get started free</a>
          </div>

          <div data-reveal data-reveal-delay="1" style={{
            position: "relative",
            border: `1px solid ${accent}60`,
            borderRadius: 22,
            padding: 40,
            background: `radial-gradient(circle at 0% 0%, ${accent}18, rgba(244,243,238,0.02) 60%)`,
            display: "flex", flexDirection: "column", gap: 24, minHeight: 460,
            overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", top: 16, right: 16,
              padding: "4px 10px", borderRadius: 999,
              border: `1px solid ${accent}80`, color: accent,
              fontSize: 10, fontFamily: "JetBrains Mono", letterSpacing: "0.14em", textTransform: "uppercase",
            }}>Recommended</div>
            <div className="mono" style={{ color: accent }}>Pro</div>
            <div>
              <span style={{ fontFamily: "Syne", fontSize: 64, fontWeight: 700, letterSpacing: "-0.03em" }}>$19.99</span>
              <span style={{ color: "var(--ink-4)", marginLeft: 6 }}>/month</span>
            </div>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 14, fontSize: 14, color: "var(--ink-2)" }}>
              {["Unlimited messages", "Unlimited timeline", "Daily agent email", "Essay review", "Priority support"].map((l, i) =>
                <PriceLine key={i} accent={accent}>{l}</PriceLine>)}
            </div>
            <button className="btn btn-primary" style={{ padding: "14px 26px", fontSize: 14 }}>Coming soon</button>
          </div>
        </div>
      </div>
    </section>
  );
};

const PriceLine = ({ children, accent }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
    <span style={{ width: 6, height: 6, borderRadius: "50%", background: accent, boxShadow: `0 0 8px ${accent}` }} />
    <span>{children}</span>
  </div>
);

/* ===== Footer ===== */
const Footer = ({ accent }) => (
  <footer className="lp-footer" style={{
    borderTop: "1px solid var(--line)",
    padding: "40px 48px 40px",
    textAlign: "center",
    background: "var(--bg-0)",
    position: "relative",
  }}>
    <h3 style={{ fontSize: "clamp(32px, 4vw, 56px)", letterSpacing: "-0.03em", marginBottom: 12, textWrap: "balance" }}>
      The guide every <br />ambitious teen deserves.
    </h3>
    <a href="/onboarding" className="btn btn-primary" style={{ padding: "14px 32px", fontSize: 14, display: "inline-block", marginBottom: 48 }}>Start for free →</a>

    <div className="lp-footer-bar" style={{
      display: "flex", justifyContent: "flex-end", alignItems: "center",
      maxWidth: 1240, margin: "0 auto", paddingTop: 32, borderTop: "1px solid var(--line)",
      flexWrap: "wrap", gap: 16,
    }}>
      <div className="lp-footer-links" style={{ fontSize: 12, color: "var(--ink-4)", display: "flex", gap: 24 }}>
        <span>© 2026 NovuRoy</span>
        <a href="/privacy">Privacy</a><a href="/terms">Terms</a>
        <a href="https://www.tiktok.com/@novuroy" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center" }} aria-label="TikTok">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V9.02a8.18 8.18 0 0 0 4.78 1.53V7.1a4.85 4.85 0 0 1-1.01-.41z"/></svg>
        </a>
      </div>
    </div>
  </footer>
);

window.LP = { Nav, Hero, Capabilities, Roadmap, Features, Pricing, Footer };