/* global React */
const { useState, useEffect, useRef } = React;

// ====== Icons (lucide-style inline svg) ======
const Icon = ({ name, size = 20, stroke = "currentColor", strokeWidth = 1.75 }) => {
  const paths = {
    users: <><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /><circle cx="17" cy="7" r="3" /><path d="M21 21v-2a4 4 0 0 0-3-3.87" /></>,
    flame: <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></>,
    trophy: <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" /><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" /><path d="M4 22h16" /><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" /><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" /><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" /></>,
    sparkles: <><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /></>,
    chart: <><path d="M3 3v18h18" /><path d="M7 16l4-4 4 4 5-7" /></>,
    target: <><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>,
    heart: <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z" />,
    arrow: <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
    check: <path d="M20 6 9 17l-5-5" />,
    eye: <><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></>,
    zap: <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />,
    medal: <><path d="M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15" /><path d="M11 12 5.12 2.2" /><path d="m13 12 5.88-9.8" /><path d="M8 7h8" /><circle cx="12" cy="17" r="5" /><path d="M12 18v-2h-.5" /></>,
    handshake: <><path d="m11 17 2 2a1 1 0 1 0 3-3" /><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4" /><path d="m21 3 1 11h-2" /><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3" /><path d="M3 4h8" /></>,
    bolt: <path d="m13 2-2 2.5h3L11 9l9-7h-7l2-2zm0 0L4 13h5l-1 8 11-12h-6l1-7Z" />,
    activity: <path d="m22 12-4 0-3 9-6-18-3 9-4 0" />,
    smile: <><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></>,
    swords: <><polyline points="14.5,17.5 3,6 3,3 6,3 17.5,14.5" /><line x1="13" y1="19" x2="19" y2="13" /><line x1="16" y1="16" x2="20" y2="20" /><line x1="19" y1="21" x2="21" y2="19" /><polyline points="14.5,6.5 18,3 21,3 21,6 17.5,9.5" /><line x1="5" y1="14" x2="9" y2="18" /><line x1="7" y1="17" x2="4" y2="20" /><line x1="3" y1="19" x2="5" y2="21" /></>,
    brain: <><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" /><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" /></>,
    plus: <><path d="M5 12h14" /><path d="M12 5v14" /></>,
    log: <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 9h6M9 13h6M9 17h4" /></>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

// ====== Section helpers ======
const Eyebrow = ({ children, accent }) => (
  <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full border border-white/10 bg-white/[0.02] mb-6">
    <div className="w-1 h-1 rounded-full" style={{ background: accent }} />
    <span className="text-[10px] uppercase tracking-[0.18em] text-white/60 font-mono">{children}</span>
  </div>
);

const SectionTitle = ({ small, large, sub, accent, className = "" }) => (
  <div className={`max-w-3xl ${className}`}>
    {small && <Eyebrow accent={accent}>{small}</Eyebrow>}
    <h2
      className="text-white font-black leading-[0.95] tracking-[-0.04em]"
      style={{
        fontFamily: "'Bricolage Grotesque', sans-serif",
        fontSize: "clamp(32px, 5vw, 64px)",
        textWrap: "balance",
      }}
    >
      {large}
    </h2>
    {sub && (
      <p className="mt-5 text-white/55 text-[17px] leading-relaxed max-w-2xl" style={{ textWrap: "pretty" }}>
        {sub}
      </p>
    )}
  </div>
);

// ====== Navbar ======
const Navbar = ({ accent }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav
      className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
      style={{
        background: scrolled ? "rgba(10,10,10,0.7)" : "transparent",
        backdropFilter: scrolled ? "blur(20px)" : "none",
        borderBottom: scrolled ? "1px solid rgba(255,255,255,0.06)" : "1px solid transparent",
      }}
    >
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <div
            className="text-[22px] font-black leading-none"
            style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              letterSpacing: "-0.06em",
              color: accent,
            }}
          >
            XRPE
          </div>
          <div className="hidden sm:block text-[10px] uppercase tracking-[0.18em] text-white/30 font-mono pt-1">
            social fitness
          </div>
        </div>
        <div className="hidden md:flex items-center gap-7 text-[13px] text-white/60">
          <a href="#how" className="hover:text-white transition">How it works</a>
          <a href="#features" className="hover:text-white transition">Features</a>
          <a href="#community" className="hover:text-white transition">Community</a>
          <a href="#who" className="hover:text-white transition">Who it's for</a>
        </div>
        <a
          href="#waitlist"
          className="px-4 py-2 rounded-full text-[13px] font-semibold transition hover:scale-[1.02]"
          style={{ background: accent, color: "#0A0A0A" }}
        >
          Join waitlist
        </a>
      </div>
    </nav>
  );
};

// ====== Hero ======
const Hero = ({ accent, headline }) => (
  <section className="relative pt-32 pb-20 lg:pt-40 lg:pb-32 overflow-hidden">
    {/* bg grid */}
    <div
      className="absolute inset-0 opacity-[0.04] pointer-events-none"
      style={{
        backgroundImage: `linear-gradient(${accent} 1px, transparent 1px), linear-gradient(90deg, ${accent} 1px, transparent 1px)`,
        backgroundSize: "60px 60px",
        maskImage: "radial-gradient(ellipse at center, black 30%, transparent 80%)",
      }}
    />
    {/* glow */}
    <div
      className="absolute top-0 left-1/2 -translate-x-1/2 w-[1200px] h-[600px] pointer-events-none"
      style={{
        background: `radial-gradient(ellipse at center, ${accent}25, transparent 60%)`,
        filter: "blur(60px)",
      }}
    />

    <div className="relative max-w-[1280px] mx-auto px-6 lg:px-10 grid lg:grid-cols-[1.05fr_1fr] gap-12 items-center">
      {/* Left */}
      <div>
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.03] mb-7">
          <div className="flex -space-x-1">
            {["#FF8B5A", "#A3E635", "#60A5FA"].map((c, i) => (
              <div key={i} className="w-4 h-4 rounded-full border-2 border-[#0A0A0A]" style={{ background: c }} />
            ))}
          </div>
          <span className="text-[11px] uppercase tracking-[0.15em] text-white/60 font-mono">
            building in public · founding cohort open
          </span>
        </div>

        <h1
          className="text-white font-black leading-[0.92] tracking-[-0.045em]"
          style={{
            fontFamily: "'Bricolage Grotesque', sans-serif",
            fontSize: "clamp(44px, 7vw, 92px)",
          }}
        >
          {headline.parts.map((p, i) =>
            p.accent ? (
              <span key={i} style={{ color: accent, fontStyle: "italic" }}>{p.text}</span>
            ) : (
              <span key={i}>{p.text}</span>
            )
          )}
        </h1>

        <p
          className="mt-7 text-white/60 text-[17px] lg:text-[19px] leading-relaxed max-w-[560px]"
          style={{ textWrap: "pretty" }}
        >
          XRPE is the AI-powered gym community where lifters share progress, find accountability,
          join challenges, and connect with people on the same fitness journey.
        </p>

        <div className="mt-9 flex flex-wrap gap-3">
          <a
            href="#waitlist"
            className="group inline-flex items-center gap-2 px-5 py-3.5 rounded-full text-[14px] font-bold transition hover:scale-[1.02]"
            style={{ background: accent, color: "#0A0A0A" }}
          >
            Join the waitlist
            <span className="transition group-hover:translate-x-0.5">
              <Icon name="arrow" size={16} strokeWidth={2.5} />
            </span>
          </a>
          <a
            href="#how"
            className="inline-flex items-center gap-2 px-5 py-3.5 rounded-full text-[14px] font-semibold text-white border border-white/15 hover:border-white/30 hover:bg-white/[0.04] transition"
          >
            See how it works
          </a>
        </div>

        {/* Social proof / cohort stats */}
        <div className="mt-12 grid grid-cols-3 gap-6 max-w-[460px]">
          {[
            { v: "2,481", l: "on waitlist" },
            { v: "94", l: "gyms · 12 cities" },
            { v: "Q3 '26", l: "founding cohort" },
          ].map((s) => (
            <div key={s.l}>
              <div
                className="text-[24px] font-black text-white leading-none tabular-nums"
                style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.03em" }}
              >
                {s.v}
              </div>
              <div className="text-[10px] uppercase tracking-[0.15em] text-white/40 font-mono mt-1.5">
                {s.l}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Right — phone mockup */}
      <div className="relative">
        <HeroMockup accent={accent} />
      </div>
    </div>
  </section>
);

// ====== Problem Section ======
const ProblemSection = ({ accent }) => {
  const pains = [
    {
      title: "Progress feels invisible",
      body: "You hit a PR. No one notices. Numbers in a notes app don't carry the same weight as a moment shared.",
      icon: "eye",
    },
    {
      title: "Motivation fades alone",
      body: "Discipline runs out. The people you used to train with drift. Showing up gets harder every quiet week.",
      icon: "heart",
    },
    {
      title: "Apps feel like spreadsheets",
      body: "Tracking apps log sets and reps. They don't celebrate, compare, comment, or hold you accountable.",
      icon: "log",
    },
  ];
  return (
    <section className="relative py-24 lg:py-32 border-t border-white/[0.06]">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <SectionTitle
          small="the problem"
          accent={accent}
          large={
            <>
              The gym is full of people.<br />
              <span className="text-white/40">The journey is still solo.</span>
            </>
          }
          sub="You show up, train, leave, and maybe log something privately. There's no easy way to find people like you, share progress meaningfully, or stay accountable when motivation runs low."
        />

        <div className="mt-16 grid md:grid-cols-3 gap-4">
          {pains.map((p, i) => (
            <div
              key={p.title}
              className="relative p-7 rounded-3xl bg-[#111] border border-white/[0.06] hover:border-white/15 transition group overflow-hidden"
            >
              <div
                className="absolute -top-12 -right-12 w-40 h-40 rounded-full blur-3xl opacity-0 group-hover:opacity-30 transition duration-500"
                style={{ background: accent }}
              />
              <div className="relative">
                <div
                  className="w-11 h-11 rounded-xl flex items-center justify-center mb-6 border border-white/10"
                  style={{ background: "rgba(255,255,255,0.02)", color: accent }}
                >
                  <Icon name={p.icon} size={20} />
                </div>
                <div className="text-[10px] uppercase tracking-[0.15em] text-white/30 font-mono mb-2">
                  pain · 0{i + 1}
                </div>
                <h3
                  className="text-[22px] font-bold text-white leading-tight mb-3"
                  style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.02em" }}
                >
                  {p.title}
                </h3>
                <p className="text-white/55 text-[14px] leading-relaxed" style={{ textWrap: "pretty" }}>
                  {p.body}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Solution Section ======
const SolutionSection = ({ accent }) => {
  const items = [
    { icon: "activity", label: "Share workouts and milestones" },
    { icon: "users", label: "Find similar gym-goers" },
    { icon: "handshake", label: "Join accountability circles" },
    { icon: "swords", label: "Compete in challenges" },
    { icon: "trophy", label: "Celebrate PRs and consistency" },
    { icon: "brain", label: "Learn from people on the journey" },
  ];

  return (
    <section className="relative py-24 lg:py-32">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-[1fr_1.1fr] gap-16 items-center">
          {/* Left: chat / community swarm illustration */}
          <div className="relative order-2 lg:order-1">
            <div className="relative aspect-[5/6] rounded-3xl border border-white/[0.06] bg-gradient-to-br from-[#0F0F0F] to-[#0A0A0A] overflow-hidden p-6">
              <div
                className="absolute inset-0 opacity-20"
                style={{
                  backgroundImage: `radial-gradient(circle at 30% 30%, ${accent}, transparent 50%), radial-gradient(circle at 70% 70%, #FF8B5A, transparent 50%)`,
                  filter: "blur(40px)",
                }}
              />
              <div className="relative space-y-3">
                {/* Activity items */}
                <div className="flex items-start gap-3 p-3.5 rounded-2xl bg-[#161616]/80 backdrop-blur border border-white/[0.06]">
                  <Avatar initials="JL" color="#FF8B5A" size={36} />
                  <div className="flex-1 min-w-0">
                    <div className="text-[13px] text-white">
                      <span className="font-semibold">Jordan</span>{" "}
                      <span className="text-white/50">posted a deadlift session</span>
                    </div>
                    <div className="mt-2 grid grid-cols-3 gap-1.5">
                      <StatPill label="Top" value="225kg" accent={accent} />
                      <StatPill label="Vol" value="8,420" />
                      <StatPill label="RPE" value="9.5" />
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3.5 rounded-2xl bg-[#161616]/80 backdrop-blur border border-white/[0.06] ml-6">
                  <Avatar initials="AS" color="#A3E635" size={36} />
                  <div className="flex-1">
                    <div className="text-[13px] text-white">
                      <span className="font-semibold">Asha</span>{" "}
                      <span className="text-white/50">joined</span>{" "}
                      <span className="font-semibold" style={{ color: accent }}>Push Pull Legs · 8 weeks</span>
                    </div>
                    <div className="mt-1.5 text-[11px] text-white/40 font-mono">12 lifters · ends Jul 12</div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3.5 rounded-2xl bg-[#161616]/80 backdrop-blur border border-white/[0.06]">
                  <Avatar initials="RV" color="#60A5FA" size={36} />
                  <div className="flex-1">
                    <div className="text-[13px] text-white">
                      <span className="font-semibold">Riya</span>{" "}
                      <span className="text-white/50">commented on your week</span>
                    </div>
                    <div className="mt-2 text-[13px] text-white/80 leading-snug italic">
                      "5 sessions and you still found time to answer my form check 🙏"
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3.5 rounded-2xl backdrop-blur border ml-10"
                  style={{ background: `${accent}10`, borderColor: `${accent}30` }}>
                  <div className="w-9 h-9 rounded-full flex items-center justify-center text-[18px]"
                    style={{ background: accent }}>
                    👑
                  </div>
                  <div className="flex-1">
                    <div className="text-[10px] uppercase tracking-[0.15em] font-mono" style={{ color: accent }}>
                      shoutout
                    </div>
                    <div className="text-[13px] text-white mt-0.5">
                      You hit a <span className="font-bold">12-week streak</span> — 4 people celebrated.
                    </div>
                  </div>
                </div>

                <div className="flex items-start gap-3 p-3.5 rounded-2xl bg-[#161616]/80 backdrop-blur border border-white/[0.06]">
                  <Avatar initials="DK" color="#F472B6" size={36} />
                  <div className="flex-1">
                    <div className="text-[13px] text-white">
                      <span className="font-semibold">Deniz</span>{" "}
                      <span className="text-white/50">checked in at</span>{" "}
                      <span className="font-mono text-white/70 text-[12px]">PURE GYM · WHITECHAPEL</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Right: copy */}
          <div className="order-1 lg:order-2">
            <SectionTitle
              small="the solution"
              accent={accent}
              large={
                <>
                  XRPE makes training{" "}
                  <span style={{ color: accent, fontStyle: "italic" }}>social.</span>
                </>
              }
              sub="Every workout, PR, check-in, and effort becomes part of a shared experience. Your gym stops being a quiet hour of headphones and turns into a community that sees your progress and trains alongside you."
            />

            <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-2">
              {items.map((it) => (
                <div
                  key={it.label}
                  className="flex items-center gap-3 px-4 py-3.5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] transition"
                >
                  <div
                    className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
                    style={{ background: `${accent}15`, color: accent }}
                  >
                    <Icon name={it.icon} size={16} />
                  </div>
                  <span className="text-[14px] text-white/80 font-medium">{it.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== Social Loops ======
const SocialLoopsSection = ({ accent }) => {
  const loops = [
    {
      tag: "check-ins",
      title: "Show up. Let your circle know.",
      body: "A simple tap when you start your session. Your accountability group sees you're in. It's the smallest gesture that keeps people coming back.",
      visual: "checkin",
    },
    {
      tag: "shoutouts",
      title: "Celebrate PRs and consistency.",
      body: "When someone hits a milestone, the people on their journey hear about it. Not a like. A shoutout that feels earned.",
      visual: "shoutout",
    },
    {
      tag: "challenges",
      title: "Compete weekly with friends or similar lifters.",
      body: "Bench volume. Session count. Total reps. Pick a metric, pick a week. Show up, climb the ladder, get bragging rights.",
      visual: "challenge",
    },
    {
      tag: "leaderboards",
      title: "Compare fairly, not randomly.",
      body: "Bodyweight, gender, training age, gym category. Stop measuring yourself against people three years and 30 kilos ahead of you.",
      visual: "leaderboard",
    },
    {
      tag: "progress posts",
      title: "Share effort, not mirror selfies.",
      body: "Your bench is up 18%. Your 5K row dropped 22 seconds. Tell that story with one tap, in numbers your friends actually read.",
      visual: "post",
    },
    {
      tag: "accountability groups",
      title: "Small circles that keep you coming back.",
      body: "4–6 people. Same goal window. Streaks, check-ins, and the quiet pressure of a group that notices when you go quiet.",
      visual: "group",
    },
  ];

  const renderVisual = (v) => {
    switch (v) {
      case "checkin":
        return (
          <div className="p-4 rounded-2xl bg-black/40 border border-white/5">
            <div className="text-[10px] uppercase tracking-wider text-white/40 font-mono mb-2">tap to check in</div>
            <div
              className="w-full py-4 rounded-xl flex items-center justify-center gap-2 text-[14px] font-bold"
              style={{ background: accent, color: "#0A0A0A" }}
            >
              <Icon name="bolt" size={16} stroke="#0A0A0A" /> I'm at the gym
            </div>
            <div className="mt-3 flex items-center gap-2">
              <AvatarStack
                size={20}
                people={[
                  { initials: "A", color: "#FF8B5A" },
                  { initials: "B", color: "#60A5FA" },
                  { initials: "C", color: "#F472B6" },
                ]}
              />
              <span className="text-[11px] text-white/50">3 already in</span>
            </div>
          </div>
        );
      case "shoutout":
        return (
          <div className="p-4 rounded-2xl bg-black/40 border border-white/5">
            <div className="flex items-center gap-2 mb-3">
              <div className="text-[20px]">👑</div>
              <div className="text-[11px] text-white/40 font-mono uppercase tracking-wider">shoutout · just now</div>
            </div>
            <div className="text-[13px] text-white leading-snug mb-3">
              <span className="font-semibold">Jack</span> hit a{" "}
              <span style={{ color: accent }} className="font-bold">405 lb squat PR</span>
            </div>
            <div className="flex gap-1.5">
              {["🔥 24", "💪 18", "👑 7"].map((e, i) => (
                <div key={i} className="px-2 py-1 rounded-full bg-white/5 text-[11px] text-white/70 font-mono">
                  {e}
                </div>
              ))}
            </div>
          </div>
        );
      case "challenge":
        return (
          <div className="p-4 rounded-2xl bg-black/40 border border-white/5">
            <div className="flex items-center justify-between mb-3">
              <div className="text-[11px] font-bold uppercase tracking-wider text-white">Bench Volume Week</div>
              <div className="text-[10px] text-white/40 font-mono">3d left</div>
            </div>
            {[
              { rank: "01", name: "Theo", val: "12,400", you: false, c: "#FF8B5A" },
              { rank: "02", name: "You", val: "11,850", you: true, c: accent },
              { rank: "03", name: "Sara", val: "10,200", you: false, c: "#F472B6" },
            ].map((r) => (
              <div
                key={r.rank}
                className="flex items-center gap-2 py-1.5 px-2 rounded-lg mb-1"
                style={{ background: r.you ? `${accent}15` : "transparent" }}
              >
                <span className="text-[10px] font-mono w-6" style={{ color: r.you ? accent : "rgba(255,255,255,0.4)" }}>
                  {r.rank}
                </span>
                <Avatar initials={r.name[0]} color={r.c} size={20} />
                <span className={`text-[12px] flex-1 ${r.you ? "text-white font-bold" : "text-white/70"}`}>{r.name}</span>
                <span className="text-[11px] font-mono text-white/60 tabular-nums">{r.val}</span>
              </div>
            ))}
          </div>
        );
      case "leaderboard":
        return (
          <div className="p-4 rounded-2xl bg-black/40 border border-white/5">
            <div className="text-[11px] uppercase tracking-wider text-white/40 font-mono mb-2">filter</div>
            <div className="flex flex-wrap gap-1.5 mb-3">
              {[
                ["73–77kg", true],
                ["male", true],
                ["2–3 yr", true],
                ["powerbuild", false],
              ].map(([t, on], i) => (
                <div
                  key={i}
                  className="text-[10px] px-2 py-1 rounded-md font-mono"
                  style={{
                    background: on ? `${accent}15` : "rgba(255,255,255,0.04)",
                    color: on ? accent : "rgba(255,255,255,0.5)",
                    border: on ? `1px solid ${accent}40` : "1px solid transparent",
                  }}
                >
                  {t}
                </div>
              ))}
            </div>
            <div className="text-[12px] text-white/70 leading-snug">
              <span className="font-bold text-white">128 lifters</span> match your profile.
            </div>
            <div className="mt-2 text-[11px] text-white/50">
              You rank <span className="font-bold" style={{ color: accent }}>#14</span> by total
            </div>
          </div>
        );
      case "post":
        return (
          <div className="p-4 rounded-2xl bg-black/40 border border-white/5">
            <div className="text-[10px] uppercase tracking-wider text-white/40 font-mono mb-2">your week</div>
            <div
              className="text-[36px] font-black leading-none tabular-nums"
              style={{
                fontFamily: "'Bricolage Grotesque', sans-serif",
                letterSpacing: "-0.04em",
                color: accent,
              }}
            >
              +18%
            </div>
            <div className="text-[12px] text-white/60 mt-1">bench volume vs last 4w</div>
            <div className="mt-3 flex gap-1">
              <div className="px-2 py-1 rounded-md bg-white/5 text-[10px] text-white/60 font-mono">5 sessions</div>
              <div className="px-2 py-1 rounded-md bg-white/5 text-[10px] text-white/60 font-mono">RPE 8.4 avg</div>
            </div>
            <div
              className="mt-3 w-full py-2.5 rounded-lg text-[11px] font-bold uppercase tracking-wider text-center font-mono"
              style={{ background: accent, color: "#0A0A0A" }}
            >
              share to feed
            </div>
          </div>
        );
      case "group":
        return (
          <div className="p-4 rounded-2xl bg-black/40 border border-white/5">
            <div className="flex items-center justify-between mb-3">
              <div className="text-[12px] font-bold text-white">Morning Lifters</div>
              <div className="text-[10px] text-white/40 font-mono">5 members</div>
            </div>
            <div className="space-y-2">
              {[
                { n: "Asha", c: "#A3E635", state: "checked in", d: false },
                { n: "Jordan", c: "#FF8B5A", state: "5h ago", d: false },
                { n: "Riya", c: "#60A5FA", state: "checked in", d: false },
                { n: "You", c: accent, state: "needed today", d: true },
              ].map((m) => (
                <div key={m.n} className="flex items-center gap-2">
                  <Avatar initials={m.n[0]} color={m.c} size={20} />
                  <span className="text-[12px] text-white/80 flex-1">{m.n}</span>
                  <span
                    className="text-[10px] font-mono"
                    style={{ color: m.d ? accent : "rgba(255,255,255,0.4)" }}
                  >
                    {m.state}
                  </span>
                </div>
              ))}
            </div>
          </div>
        );
    }
  };

  return (
    <section id="community" className="relative py-24 lg:py-32 border-t border-white/[0.06]">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <SectionTitle
          small="the social loops"
          accent={accent}
          large={
            <>
              Built around the social loops<br />
              <span className="text-white/40">that keep people consistent.</span>
            </>
          }
          sub="Showing up isn't a discipline problem — it's a context problem. Six tiny rituals do more for consistency than any 12-week program."
        />

        <div className="mt-16 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {loops.map((l, i) => (
            <div
              key={l.tag}
              className="group p-6 rounded-3xl bg-[#0F0F0F] border border-white/[0.06] hover:border-white/15 transition flex flex-col"
            >
              <div className="flex items-center justify-between mb-4">
                <div
                  className="text-[10px] font-bold uppercase tracking-[0.15em] px-2 py-1 rounded font-mono"
                  style={{ background: `${accent}15`, color: accent }}
                >
                  {l.tag}
                </div>
                <div className="text-[10px] font-mono text-white/30">
                  {String(i + 1).padStart(2, "0")} / 06
                </div>
              </div>
              <h3
                className="text-[20px] font-bold text-white leading-tight mb-3"
                style={{
                  fontFamily: "'Bricolage Grotesque', sans-serif",
                  letterSpacing: "-0.02em",
                  textWrap: "balance",
                }}
              >
                {l.title}
              </h3>
              <p className="text-white/55 text-[13px] leading-relaxed mb-5" style={{ textWrap: "pretty" }}>
                {l.body}
              </p>
              <div className="mt-auto">{renderVisual(l.visual)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Features ======
const FeaturesSection = ({ accent }) => {
  const features = [
    {
      icon: "users",
      title: "Community feed for gym progress",
      body: "A feed that's actually about training. PRs, sessions, check-ins, milestones — from people whose journey looks like yours.",
      span: 2,
    },
    {
      icon: "handshake",
      title: "Accountability circles",
      body: "Small groups, big effect.",
    },
    {
      icon: "medal",
      title: "Fair leaderboards",
      body: "Compare against lifters at your weight, age, level, and gym style — never the wrong fight.",
    },
    {
      icon: "swords",
      title: "Gym and goal-based challenges",
      body: "Weekly competitions for friends, gyms, or strangers chasing the same target.",
    },
    {
      icon: "log",
      title: "RPE & workout logging",
      body: "The engine under the feed: fast logging, RPE, sets, volume — built to power the social experience, not replace it.",
    },
    {
      icon: "sparkles",
      title: "AI-powered progress insights",
      body: "Trends, plateaus, and PR-worthy moments — surfaced and made shareable.",
      span: 2,
    },
  ];

  return (
    <section id="features" className="relative py-24 lg:py-32">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <SectionTitle
          small="feature set"
          accent={accent}
          large={
            <>
              Everything a gym community needs.<br />
              <span className="text-white/40">Nothing that turns it into a spreadsheet.</span>
            </>
          }
        />

        <div className="mt-14 grid md:grid-cols-3 gap-3 auto-rows-fr">
          {features.map((f, i) => (
            <div
              key={f.title}
              className={`relative p-7 rounded-3xl bg-[#0F0F0F] border border-white/[0.06] hover:border-white/15 transition overflow-hidden ${
                f.span === 2 ? "md:col-span-2" : ""
              }`}
            >
              <div className="flex items-start justify-between mb-5">
                <div
                  className="w-11 h-11 rounded-xl flex items-center justify-center border border-white/10"
                  style={{ background: "rgba(255,255,255,0.02)", color: accent }}
                >
                  <Icon name={f.icon} size={20} />
                </div>
                <div className="text-[10px] font-mono text-white/25">
                  /{String(i + 1).padStart(2, "0")}
                </div>
              </div>
              <h3
                className="text-[22px] font-bold text-white leading-tight mb-2.5"
                style={{
                  fontFamily: "'Bricolage Grotesque', sans-serif",
                  letterSpacing: "-0.02em",
                  textWrap: "balance",
                }}
              >
                {f.title}
              </h3>
              <p className="text-white/55 text-[14px] leading-relaxed max-w-md" style={{ textWrap: "pretty" }}>
                {f.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== AI Section ======
const AISection = ({ accent }) => {
  const items = [
    { t: "Match similar lifters", b: "Find people training like you, at your level." },
    { t: "Generate progress summaries", b: "Your week, in language you'd actually post." },
    { t: "Highlight PRs and trends", b: "Catch the win the moment it happens." },
    { t: "Suggest fair challenge groups", b: "Pair up with people you can actually race." },
    { t: "Detect plateaus and dips", b: "A nudge before motivation slips away." },
    { t: "Make progress shareable", b: "One-tap social fuel from raw training data." },
  ];

  return (
    <section className="relative py-24 lg:py-32 border-t border-white/[0.06] overflow-hidden">
      <div
        className="absolute inset-0 pointer-events-none opacity-40"
        style={{
          background: `radial-gradient(ellipse at 80% 30%, ${accent}15, transparent 50%)`,
        }}
      />
      <div className="relative max-w-[1280px] mx-auto px-6 lg:px-10 grid lg:grid-cols-[1fr_1.05fr] gap-16 items-center">
        <div>
          <SectionTitle
            small="ai · in service of community"
            accent={accent}
            large={
              <>
                AI turns training data into{" "}
                <span style={{ color: accent, fontStyle: "italic" }}>social fuel.</span>
              </>
            }
            sub="XRPE's AI highlights your wins, spots trends, and helps you connect with people progressing like you — quietly, in the background, so the community stays in the foreground."
          />

          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-3">
            {items.map((it) => (
              <div key={it.t} className="flex items-start gap-3">
                <div
                  className="w-5 h-5 rounded-md flex items-center justify-center shrink-0 mt-0.5"
                  style={{ background: accent }}
                >
                  <Icon name="check" size={11} stroke="#0A0A0A" strokeWidth={3} />
                </div>
                <div>
                  <div className="text-[14px] font-semibold text-white">{it.t}</div>
                  <div className="text-[12px] text-white/50 leading-relaxed mt-0.5">{it.b}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* AI summary mock */}
        <div className="relative">
          <div className="absolute inset-0 rounded-3xl blur-3xl opacity-30" style={{ background: accent }} />
          <div className="relative rounded-3xl bg-[#0F0F0F] border border-white/[0.08] p-7 lg:p-8">
            <div className="flex items-center gap-2 mb-5">
              <div
                className="w-7 h-7 rounded-lg flex items-center justify-center"
                style={{ background: accent }}
              >
                <Icon name="sparkles" size={14} stroke="#0A0A0A" strokeWidth={2.5} />
              </div>
              <div className="text-[11px] uppercase tracking-[0.15em] text-white/50 font-mono">
                weekly digest · auto-generated
              </div>
            </div>

            <div
              className="text-[20px] lg:text-[24px] font-bold text-white leading-snug mb-6"
              style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.02em", textWrap: "pretty" }}
            >
              You trained <span style={{ color: accent }}>5 times</span> this week — your bench
              volume is up <span style={{ color: accent }}>+18%</span>, and your squat 1RM trend is
              the highest it's been since February.
            </div>

            <div className="grid grid-cols-3 gap-2 mb-6">
              {[
                { l: "sessions", v: "5" },
                { l: "volume", v: "42.1k" },
                { l: "RPE avg", v: "8.4" },
              ].map((s) => (
                <div key={s.l} className="p-3 rounded-xl bg-black/40 border border-white/[0.04]">
                  <div className="text-[10px] uppercase tracking-wider text-white/40 font-mono">
                    {s.l}
                  </div>
                  <div
                    className="text-[22px] font-black tabular-nums mt-0.5"
                    style={{
                      fontFamily: "'Bricolage Grotesque', sans-serif",
                      letterSpacing: "-0.03em",
                      color: accent,
                    }}
                  >
                    {s.v}
                  </div>
                </div>
              ))}
            </div>

            <div className="space-y-2 mb-6">
              {[
                "Your bench volume topped 8 of your last 12 weeks.",
                "Plateau watch on overhead press — 3 weeks flat.",
                "4 lifters at your level beat your squat total. Challenge them?",
              ].map((line, i) => (
                <div key={i} className="flex items-start gap-2.5">
                  <div className="w-1 h-1 rounded-full mt-2.5 shrink-0" style={{ background: accent }} />
                  <div className="text-[13px] text-white/70 leading-relaxed">{line}</div>
                </div>
              ))}
            </div>

            <div className="flex flex-wrap gap-2">
              <button
                className="px-4 py-2.5 rounded-full text-[12px] font-bold flex items-center gap-1.5"
                style={{ background: accent, color: "#0A0A0A" }}
              >
                Share digest
              </button>
              <button className="px-4 py-2.5 rounded-full text-[12px] font-semibold text-white/70 bg-white/[0.04] border border-white/10">
                Start a challenge
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== How It Works ======
const HowItWorksSection = ({ accent }) => {
  const steps = [
    {
      n: "01",
      title: "Join your gym community or goal group",
      body: "Pick the gym you train at or the goal you're chasing. We'll match you with the people closest to your level and your story.",
      vis: (
        <div className="space-y-2">
          {[
            { n: "PURE GYM · Whitechapel", c: "#FF8B5A", count: "248 lifters" },
            { n: "Push Pull Legs · 12wk", c: accent, count: "joined" },
            { n: "Sub-3hr Marathon", c: "#60A5FA", count: "84 lifters" },
          ].map((g, i) => (
            <div
              key={i}
              className="flex items-center gap-2.5 p-2.5 rounded-xl bg-black/40 border"
              style={{
                borderColor: i === 1 ? `${accent}40` : "rgba(255,255,255,0.06)",
              }}
            >
              <div className="w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-black"
                style={{ background: g.c, color: "#0A0A0A", fontFamily: "'Bricolage Grotesque', sans-serif" }}>
                {g.n[0]}
              </div>
              <div className="text-[12px] text-white flex-1 truncate">{g.n}</div>
              <div className="text-[10px] font-mono" style={{ color: i === 1 ? accent : "rgba(255,255,255,0.5)" }}>
                {g.count}
              </div>
            </div>
          ))}
        </div>
      ),
    },
    {
      n: "02",
      title: "Log workouts, effort, PRs, and check-ins",
      body: "Fast logging built for the gym floor. Sets, reps, RPE, notes. Hit a PR? It gets flagged automatically. Show up? Tap once.",
      vis: (
        <div className="p-3 rounded-xl bg-black/40 border border-white/[0.06]">
          <div className="text-[10px] uppercase tracking-wider text-white/40 font-mono mb-2">today · push</div>
          {[
            { e: "Bench Press", s: "5 × 5", rpe: "8" },
            { e: "OHP", s: "4 × 6", rpe: "7.5" },
            { e: "Incline DB", s: "3 × 10", rpe: "9", pr: true },
          ].map((row, i) => (
            <div key={i} className="flex items-center gap-2 py-1.5 border-b border-white/[0.04] last:border-0">
              <div className="text-[12px] text-white flex-1">{row.e}</div>
              <div className="text-[11px] font-mono text-white/60 tabular-nums">{row.s}</div>
              <div className="text-[10px] font-mono px-1.5 py-0.5 rounded"
                style={{
                  background: row.pr ? accent : "rgba(255,255,255,0.05)",
                  color: row.pr ? "#0A0A0A" : "rgba(255,255,255,0.7)",
                }}>
                {row.pr ? "PR" : `RPE ${row.rpe}`}
              </div>
            </div>
          ))}
        </div>
      ),
    },
    {
      n: "03",
      title: "Get support, compete fairly, progress together",
      body: "Your circle reacts. AI surfaces the wins. Leaderboards rank you against your match group. You stop training in silence.",
      vis: (
        <div className="space-y-2">
          <div className="p-3 rounded-xl bg-black/40 border border-white/[0.06] flex items-center gap-2">
            <div className="text-[16px]">🔥</div>
            <div className="text-[12px] text-white/80 flex-1">
              <span className="font-semibold">+24 reactions</span> on your week
            </div>
          </div>
          <div className="p-3 rounded-xl border flex items-center gap-2"
            style={{ background: `${accent}10`, borderColor: `${accent}30` }}>
            <Icon name="trophy" size={14} stroke={accent} />
            <div className="text-[12px] flex-1" style={{ color: accent }}>
              <span className="font-bold">#14</span> in your match group
            </div>
          </div>
          <div className="p-3 rounded-xl bg-black/40 border border-white/[0.06] flex items-center gap-2">
            <AvatarStack
              size={18}
              people={[
                { initials: "A", color: "#FF8B5A" },
                { initials: "B", color: "#A3E635" },
                { initials: "C", color: "#60A5FA" },
              ]}
            />
            <div className="text-[12px] text-white/70 flex-1">3 friends checked in</div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <section id="how" className="relative py-24 lg:py-32 border-t border-white/[0.06]">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <SectionTitle
          small="how it works"
          accent={accent}
          large={
            <>
              Three steps to stop<br />
              <span className="text-white/40">training in silence.</span>
            </>
          }
        />

        <div className="mt-16 grid md:grid-cols-3 gap-4">
          {steps.map((s, i) => (
            <div key={s.n} className="relative">
              <div className="p-7 rounded-3xl bg-[#0F0F0F] border border-white/[0.06] h-full flex flex-col">
                <div className="flex items-center justify-between mb-6">
                  <div
                    className="text-[44px] font-black leading-none"
                    style={{
                      fontFamily: "'Bricolage Grotesque', sans-serif",
                      letterSpacing: "-0.05em",
                      color: accent,
                      fontStyle: "italic",
                    }}
                  >
                    {s.n}
                  </div>
                  <div className="text-[10px] uppercase tracking-[0.15em] text-white/30 font-mono">
                    step
                  </div>
                </div>
                <h3
                  className="text-[22px] font-bold text-white leading-tight mb-3"
                  style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.02em", textWrap: "balance" }}
                >
                  {s.title}
                </h3>
                <p className="text-white/55 text-[13px] leading-relaxed mb-5" style={{ textWrap: "pretty" }}>
                  {s.body}
                </p>
                <div className="mt-auto">{s.vis}</div>
              </div>
              {i < 2 && (
                <div className="hidden md:flex absolute top-1/2 -right-2 -translate-y-1/2 w-4 h-4 items-center justify-center text-white/20 z-10">
                  <Icon name="arrow" size={14} strokeWidth={2} />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Who It's For ======
const WhoSection = ({ accent }) => {
  const personas = [
    { t: "The beginner", sub: "who needs accountability", emoji: "🌱", tag: "month 1–6", c: "#A3E635" },
    { t: "The competitor", sub: "who wants fair fights", emoji: "🥇", tag: "matched ladders", c: "#FF8B5A" },
    { t: "The community lifter", sub: "who wants people", emoji: "🤝", tag: "circles & gyms", c: "#60A5FA" },
    { t: "The friend group", sub: "that wants challenges", emoji: "⚔️", tag: "private leagues", c: "#F472B6" },
    { t: "The serious tracker", sub: "who wants insights", emoji: "📈", tag: "AI summaries", c: accent },
  ];

  return (
    <section id="who" className="relative py-24 lg:py-32">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <SectionTitle
          small="who it's for"
          accent={accent}
          large={
            <>
              If you've ever felt the gym is quieter<br />
              <span className="text-white/40">than it should be —</span>
            </>
          }
          sub="XRPE is built for the lifters in between: too serious to ghost the gym, too social to enjoy the silence."
        />

        <div className="mt-16 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
          {personas.map((p, i) => (
            <div
              key={p.t}
              className="group p-5 rounded-3xl bg-[#0F0F0F] border border-white/[0.06] hover:border-white/20 transition relative overflow-hidden aspect-[3/4] flex flex-col"
            >
              <div
                className="absolute -bottom-10 -right-10 w-32 h-32 rounded-full blur-2xl opacity-0 group-hover:opacity-30 transition-opacity duration-500"
                style={{ background: p.c }}
              />
              <div className="relative flex-1 flex flex-col">
                <div className="text-[10px] font-mono uppercase tracking-[0.15em] text-white/30 mb-auto">
                  0{i + 1}
                </div>
                <div className="text-[40px] mb-3">{p.emoji}</div>
                <h3
                  className="text-[20px] font-bold text-white leading-tight"
                  style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.02em", textWrap: "balance" }}
                >
                  {p.t}
                </h3>
                <p className="text-[12px] text-white/50 mt-1 leading-snug">{p.sub}</p>
                <div
                  className="mt-3 text-[10px] font-mono uppercase tracking-wider px-2 py-1 rounded-md self-start"
                  style={{ background: `${p.c}15`, color: p.c, border: `1px solid ${p.c}30` }}
                >
                  {p.tag}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ====== Waitlist ======
const WaitlistSection = ({ accent }) => {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: "",
    email: "",
    level: "Intermediate",
    looking: [],
    trains: "Both",
  });

  const toggleLooking = (val) => {
    setForm((f) => ({
      ...f,
      looking: f.looking.includes(val) ? f.looking.filter((x) => x !== val) : [...f.looking, val],
    }));
  };

  const submit = (e) => {
    e.preventDefault();
    console.log("XRPE founding community signup:", form);
    setSubmitted(true);
  };

  return (
    <section id="waitlist" className="relative py-24 lg:py-32 border-t border-white/[0.06] overflow-hidden">
      <div
        className="absolute inset-0 pointer-events-none opacity-50"
        style={{
          background: `radial-gradient(ellipse at center, ${accent}15, transparent 60%)`,
        }}
      />
      <div className="relative max-w-[1280px] mx-auto px-6 lg:px-10 grid lg:grid-cols-[1fr_1.1fr] gap-12 items-start">
        <div className="lg:sticky lg:top-32">
          <Eyebrow accent={accent}>founding cohort</Eyebrow>
          <h2
            className="text-white font-black leading-[0.95] tracking-[-0.04em]"
            style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              fontSize: "clamp(36px, 5.5vw, 72px)",
              textWrap: "balance",
            }}
          >
            Join the founding{" "}
            <span style={{ color: accent, fontStyle: "italic" }}>XRPE community.</span>
          </h2>
          <p className="mt-6 text-white/60 text-[17px] leading-relaxed max-w-xl" style={{ textWrap: "pretty" }}>
            Be one of the first gym-goers helping shape the social fitness network built around
            effort, accountability, and progress. Early access, private cohort calls, and a permanent
            founders badge on your profile.
          </p>

          <div className="mt-8 space-y-2">
            {[
              "Early access before public launch",
              "Founders badge on your profile, forever",
              "Direct line to the team — your feedback ships",
              "Private founders' circle on day one",
            ].map((p) => (
              <div key={p} className="flex items-center gap-2.5 text-[14px] text-white/70">
                <div
                  className="w-4 h-4 rounded flex items-center justify-center"
                  style={{ background: accent }}
                >
                  <Icon name="check" size={10} stroke="#0A0A0A" strokeWidth={3} />
                </div>
                {p}
              </div>
            ))}
          </div>

          <div className="mt-10 flex items-center gap-3 pt-6 border-t border-white/[0.06]">
            <AvatarStack
              size={28}
              people={[
                { initials: "J", color: "#FF8B5A" },
                { initials: "A", color: "#A3E635" },
                { initials: "R", color: "#60A5FA" },
                { initials: "M", color: "#F472B6" },
              ]}
            />
            <div className="text-[12px] text-white/60">
              <span className="text-white font-bold">2,481 lifters</span> on the waitlist
            </div>
          </div>
        </div>

        {/* Form */}
        <div className="relative">
          <div className="absolute inset-0 rounded-3xl blur-3xl opacity-20" style={{ background: accent }} />
          {submitted ? (
            <div className="relative rounded-3xl bg-[#0F0F0F] border border-white/[0.08] p-10 lg:p-12 text-center">
              <div
                className="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-6"
                style={{ background: accent }}
              >
                <Icon name="check" size={28} stroke="#0A0A0A" strokeWidth={3} />
              </div>
              <h3
                className="text-[32px] font-black text-white leading-tight mb-3"
                style={{ fontFamily: "'Bricolage Grotesque', sans-serif", letterSpacing: "-0.03em" }}
              >
                You're in, {form.name.split(" ")[0] || "lifter"}.
              </h3>
              <p className="text-white/60 text-[15px] max-w-md mx-auto leading-relaxed">
                You'll hear from us before public launch. We'll match you with people on the same
                journey — and we'll listen hard to what you tell us.
              </p>
              <div
                className="mt-8 inline-flex items-center gap-2 px-4 py-2 rounded-full font-mono text-[11px] uppercase tracking-wider"
                style={{ background: `${accent}15`, color: accent }}
              >
                <div className="w-1.5 h-1.5 rounded-full" style={{ background: accent }} />
                founding member · #2482
              </div>
            </div>
          ) : (
            <form
              onSubmit={submit}
              className="relative rounded-3xl bg-[#0F0F0F] border border-white/[0.08] p-7 lg:p-9 space-y-6"
            >
              <div className="grid sm:grid-cols-2 gap-4">
                <Field label="Name" id="name">
                  <input
                    required
                    type="text"
                    placeholder="Your name"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    className="w-full bg-transparent text-white placeholder-white/30 text-[15px] outline-none"
                  />
                </Field>
                <Field label="Email" id="email">
                  <input
                    required
                    type="email"
                    placeholder="you@gym.com"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    className="w-full bg-transparent text-white placeholder-white/30 text-[15px] outline-none"
                  />
                </Field>
              </div>

              <Question label="Training level">
                <div className="flex flex-wrap gap-2">
                  {["Beginner", "Intermediate", "Advanced"].map((l) => (
                    <Chip
                      key={l}
                      label={l}
                      active={form.level === l}
                      accent={accent}
                      onClick={() => setForm({ ...form, level: l })}
                    />
                  ))}
                </div>
              </Question>

              <Question label="What are you looking for?" sub="pick all that apply">
                <div className="flex flex-wrap gap-2">
                  {["Accountability", "Competition", "Community", "Better tracking", "AI insights"].map((l) => (
                    <Chip
                      key={l}
                      label={l}
                      active={form.looking.includes(l)}
                      accent={accent}
                      onClick={() => toggleLooking(l)}
                    />
                  ))}
                </div>
              </Question>

              <Question label="Do you train alone or with others?">
                <div className="flex flex-wrap gap-2">
                  {["Alone", "With friends", "Both"].map((l) => (
                    <Chip
                      key={l}
                      label={l}
                      active={form.trains === l}
                      accent={accent}
                      onClick={() => setForm({ ...form, trains: l })}
                    />
                  ))}
                </div>
              </Question>

              <button
                type="submit"
                className="group w-full py-4 rounded-xl text-[15px] font-bold flex items-center justify-center gap-2 transition hover:scale-[1.01]"
                style={{ background: accent, color: "#0A0A0A" }}
              >
                Join the founding community
                <span className="transition group-hover:translate-x-0.5">
                  <Icon name="arrow" size={16} strokeWidth={2.5} />
                </span>
              </button>

              <p className="text-[11px] text-white/40 text-center font-mono uppercase tracking-wider">
                no spam · we'll only message about XRPE
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

const Field = ({ label, id, children }) => (
  <label htmlFor={id} className="block">
    <div className="text-[10px] uppercase tracking-[0.18em] text-white/40 font-mono mb-2">{label}</div>
    <div className="px-4 py-3.5 rounded-xl bg-black/40 border border-white/[0.08] focus-within:border-white/30 transition">
      {children}
    </div>
  </label>
);

const Question = ({ label, sub, children }) => (
  <div>
    <div className="flex items-baseline justify-between mb-3">
      <div className="text-[10px] uppercase tracking-[0.18em] text-white/40 font-mono">{label}</div>
      {sub && <div className="text-[10px] text-white/30 font-mono">{sub}</div>}
    </div>
    {children}
  </div>
);

const Chip = ({ label, active, accent, onClick }) => (
  <button
    type="button"
    onClick={onClick}
    className="px-3.5 py-2 rounded-full text-[13px] font-medium transition border"
    style={{
      background: active ? accent : "rgba(255,255,255,0.02)",
      color: active ? "#0A0A0A" : "rgba(255,255,255,0.7)",
      borderColor: active ? accent : "rgba(255,255,255,0.08)",
    }}
  >
    {label}
  </button>
);

// ====== Footer ======
const Footer = ({ accent }) => (
  <footer className="border-t border-white/[0.06] py-12">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div>
        <div className="flex items-end gap-2">
          <div
            className="text-[28px] font-black leading-none"
            style={{
              fontFamily: "'Bricolage Grotesque', sans-serif",
              letterSpacing: "-0.06em",
              color: accent,
            }}
          >
            XRPE
          </div>
          <div className="text-[10px] uppercase tracking-[0.18em] text-white/30 font-mono pb-1">
            social fitness · 2026
          </div>
        </div>
        <p className="text-[13px] text-white/40 mt-2 max-w-md">
          The community layer for your fitness journey. Built for gym-goers, by people who lift.
        </p>
      </div>
      <div className="flex flex-wrap gap-x-6 gap-y-2 text-[13px] text-white/50">
        <a href="#" className="hover:text-white transition">Privacy</a>
        <a href="#" className="hover:text-white transition">Terms</a>
        <a href="#" className="hover:text-white transition">Contact</a>
        <a href="#" className="hover:text-white transition">Instagram</a>
        <a href="#" className="hover:text-white transition">X</a>
      </div>
    </div>
  </footer>
);

// expose
Object.assign(window, {
  Navbar, Hero, ProblemSection, SolutionSection, SocialLoopsSection,
  FeaturesSection, AISection, HowItWorksSection, WhoSection,
  WaitlistSection, Footer, Icon,
});
