/* global React */
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

/* ---------- Founding 20 ---------- */
function Founding({ spots }) {
  const pct = Math.round(((20 - spots) / 20) * 100);
  return (
    <section
      id="founding"
      className="relative py-32"
      style={{ background: "var(--acid)", color: "#000" }}
    >
      <div className="max-w-[1360px] mx-auto px-8">
        <div className="flex justify-end mb-10">
          <div
            className="text-[11px] mono-feat uppercase tracking-[0.22em] flex items-center gap-3"
            style={{ color: "rgba(0,0,0,0.55)" }}
          >
            <span style={{ color: "#000" }}>04</span>
            <span className="h-px w-8" style={{ background: "rgba(0,0,0,0.4)" }} />
            <span>Founding 20</span>
          </div>
        </div>
      </div>
      <div className="max-w-[1360px] mx-auto px-8 grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-14 items-center">
        <div>
          <h2
            className="mt-6 font-bold tight"
            style={{ fontSize: "clamp(48px, 6vw, 96px)", lineHeight: 0.92 }}
          >
            The first 20 creators
            <br />
            pay{" "}
            <span
              style={{
                textDecoration: "underline",
                textDecorationThickness: "3px",
                textUnderlineOffset: "8px",
              }}
            >
              3% forever
            </span>
            .
          </h2>
          <p
            className="mt-6 max-w-[540px] text-[17px]"
            style={{ color: "rgba(0,0,0,0.72)" }}
          >
            Every platform we've named takes 10-30%. Founding 20 creators lock
            in a flat 3% fee on every dollar Clanry ever processes for them.
            Permanently.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3">
            <a
              href="#claim"
              className="inline-flex items-center h-9 px-4 rounded-full text-[16px] font-semibold cta-shine"
              style={{ background: "#000", color: "var(--acid)" }}
            >
              <span className="relative z-10">Reserve my spot →</span>
            </a>
            <span
              className="text-[14px] mono-feat uppercase tracking-[0.2em]"
              style={{ color: "rgba(0,0,0,0.6)" }}
            >
              No card required until launch
            </span>
          </div>
        </div>

        <div
          className="relative rounded-[22px] p-5 sm:p-8"
          style={{ background: "#0A0A0A", color: "var(--text)" }}
        >
          <div className="flex items-center justify-between mb-8">
            <span
              className="text-[11px] mono-feat uppercase tracking-[0.22em]"
              style={{ color: "var(--muted)" }}
            >
              Spots remaining
            </span>
            <span
              className="inline-flex items-center gap-2 text-[11px] mono-feat uppercase tracking-[0.22em]"
              style={{ color: "var(--acid)" }}
            >
              <span className="blink">●</span> LIVE
            </span>
          </div>
          <div className="flex items-baseline gap-3">
            <span
              className="mono-feat font-bold tick"
              key={spots}
              style={{
                fontSize: "clamp(90px, 12vw, 170px)",
                lineHeight: 0.9,
                letterSpacing: "-0.05em",
                color: "var(--acid)",
              }}
            >
              {spots}
            </span>
            <span
              className="mono-feat text-[32px]"
              style={{ color: "var(--muted)" }}
            >
              /20
            </span>
          </div>
          <div
            className="mt-6 h-2 rounded-full overflow-hidden"
            style={{ background: "var(--surface-2)" }}
          >
            <div
              className="h-full transition-all duration-1000"
              style={{ width: pct + "%", background: "var(--acid)" }}
            />
          </div>
          <div
            className="mt-3 flex justify-between text-[11px] mono-feat uppercase tracking-[0.22em]"
            style={{ color: "var(--muted)" }}
          >
            <span>{20 - spots} claimed</span>
            <span>{pct}% full</span>
          </div>

          <div className="mt-9 grid grid-cols-3 gap-2">
            {["3%", "∞", "0"].map((v, i) => (
              <div
                key={i}
                className="p-3 sm:p-4 rounded-xl"
                style={{
                  background: "var(--surface-2)",
                  border: "1px solid var(--border)",
                }}
              >
                <div
                  className="mono-feat font-bold text-[22px] sm:text-[28px]"
                  style={{ color: "var(--acid)", letterSpacing: "-0.03em" }}
                >
                  {v}
                </div>
                <div
                  className="mt-1 text-[8px] sm:text-[11px] mono-feat uppercase tracking-[0.04em] sm:tracking-[0.18em] whitespace-nowrap"
                  style={{ color: "var(--muted)" }}
                >
                  {["fee forever", "duration", "hidden costs"][i]}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing() {
  return (
    <section
      id="pricing"
      className="relative py-32 border-t"
      style={{ borderColor: "var(--border)" }}
    >
      <div className="max-w-[1360px] mx-auto px-8">
        <div className="reveal">
          <SectionLabel n="05">Pricing</SectionLabel>
        </div>
        <h2
          className="mt-6 font-semibold tight reveal"
          data-d="1"
          style={{ fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.96 }}
        >
          One plan. Flat fee. <br />
          No surprises.
        </h2>

        <div className="mt-14 grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-5">
          <div
            className="reveal-scale rounded-[22px] p-10 relative overflow-hidden"
            style={{
              background: "var(--surface)",
              border: "1px solid var(--border)",
            }}
          >
            <div className="flex items-start justify-between flex-wrap gap-4">
              <div>
                <div
                  className="text-[11px] mono-feat uppercase tracking-[0.22em]"
                  style={{ color: "var(--muted)" }}
                >
                  Creator
                </div>
                <div className="mt-3 flex items-baseline gap-3">
                  <span
                    className="mono-feat font-bold"
                    style={{
                      fontSize: "clamp(60px,9vw,120px)",
                      lineHeight: 0.9,
                      color: "var(--acid)",
                      letterSpacing: "-0.04em",
                    }}
                  >
                    3%
                  </span>
                  <span
                    className="text-[14px] line-through"
                    style={{ color: "var(--dim)" }}
                  >
                    vs. 10–30% elsewhere
                  </span>
                </div>
                <p
                  className="mt-3 text-[16px]"
                  style={{ color: "var(--muted)" }}
                >
                  Flat transaction fee. No monthly plan. No tiers.
                </p>
              </div>
              <div
                className="p-5 rounded-[16px] w-full max-w-[260px]"
                style={{
                  background: "var(--surface-2)",
                  border: "1px solid var(--border)",
                }}
              >
                <div
                  className="text-[11px] mono-feat uppercase tracking-[0.22em]"
                  style={{ color: "var(--muted)" }}
                >
                  Founding 20
                </div>
                <div
                  className="mt-2 mono-feat font-bold text-[38px]"
                  style={{ color: "var(--acid)", letterSpacing: "-0.03em" }}
                >
                  0% platform
                </div>
                <p
                  className="mt-1 text-[12px]"
                  style={{ color: "var(--muted)" }}
                >
                  Locked for life. Just 3% processing, forever.
                </p>
                <p
                  className="mt-2 text-[10px] mono-feat uppercase tracking-[0.18em]"
                  style={{ color: "var(--dim)" }}
                >
                  After 20 claimed · 5% all-in
                </p>
              </div>
            </div>

            <div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
              {[
                "Unlimited products, subs, and tiers",
                "USDC + BTC + ETH payouts (non-custodial)",
                "AI-first TOS — we defend your work",
                "Custom request inbox + order management",
                "Discovery in the Clanry index",
                "Fan DMs + gated content (at launch)",
                "Agency-mode with split payouts",
                "Human support · Instant payouts for Founding 20",
              ].map((f, i) => (
                <div key={i} className="flex items-start gap-3 text-[14.5px]">
                  <span
                    className="mt-1 w-4 h-4 flex items-center justify-center rounded-full flex-shrink-0"
                    style={{ background: "var(--acid)" }}
                  >
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
                      <path
                        d="M1 4l2 2 4-5"
                        stroke="#000"
                        strokeWidth="1.6"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </span>
                  <span>{f}</span>
                </div>
              ))}
            </div>

            <div className="mt-10 flex flex-wrap items-center gap-3">
              <a
                href="#claim"
                className="inline-flex items-center h-12 px-6 rounded-full text-[16px] font-semibold cta-acid"
              >
                Start selling →
              </a>
              <span
                className="text-[12px] mono-feat uppercase tracking-[0.2em]"
                style={{ color: "var(--muted)" }}
              >
                No credit card · No lock-in
              </span>
            </div>
          </div>

          <div
            className="rounded-[22px] p-8 reveal-scale"
            data-d="1"
            style={{
              background: "var(--surface)",
              border: "1px solid var(--border)",
            }}
          >
            <div
              className="text-[11px] mono-feat uppercase tracking-[0.22em]"
              style={{ color: "var(--muted)" }}
            >
              Takes vs. you keep
            </div>
            <div className="mt-5 space-y-4">
              {[
                { name: "Fanvue", take: 20, color: "#FF3B3B" },
                { name: "Gumroad", take: 13, color: "#FF3B3B" },
                { name: "Stripe + fees", take: 11, color: "#FF3B3B" },
                { name: "Patreon", take: 12, color: "#FF3B3B" },
                { name: "Clanry", take: 3, color: "var(--acid)" },
              ].map((r, i) => (
                <div key={i}>
                  <div className="flex items-center justify-between text-[13px]">
                    <span>{r.name}</span>
                    <span
                      className="mono-feat"
                      style={{
                        color:
                          r.name === "Clanry" ? "var(--acid)" : "var(--muted)",
                      }}
                    >
                      {r.name === "Clanry"
                        ? "You keep 97%"
                        : `Takes ${r.take}%`}
                    </span>
                  </div>
                  <div
                    className="mt-2 h-[6px] rounded-full overflow-hidden"
                    style={{ background: "var(--surface-2)" }}
                  >
                    <div
                      className="h-full transition-all duration-700"
                      style={{ width: r.take * 4 + "%", background: r.color }}
                    />
                  </div>
                </div>
              ))}
            </div>
            <div
              className="mt-8 pt-6 border-t"
              style={{ borderColor: "var(--border)" }}
            >
              <div
                className="text-[11px] mono-feat uppercase tracking-[0.22em]"
                style={{ color: "var(--muted)" }}
              >
                On $10k/mo, that's
              </div>
              <div
                className="mt-2 mono-feat font-bold"
                style={{
                  color: "var(--acid)",
                  letterSpacing: "-0.04em",
                  fontSize: "clamp(44px, 6vw, 64px)",
                  lineHeight: 1,
                }}
              >
                +$1,700
                <span
                  className="text-[18px]"
                  style={{ color: "var(--muted)", marginLeft: "4px" }}
                >
                  /mo
                </span>
              </div>
              <div
                className="mt-1 text-[12px]"
                style={{ color: "var(--muted)" }}
              >
                back in your pocket vs. average competitor.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    {
      q: "What exactly can I sell on Clanry?",
      a: "Personas (fine-tuned character models), LoRA packs, ComfyUI workflows, subscription tiers, one-off drops, custom request queues, fan DMs, and agency-style bundles. If it runs on pixels, you can price it.",
    },
    {
      q: "How fast do payouts hit my wallet?",
      a: "Founding 20 creators: instant. The second a buyer pays, USDC lands in your wallet — non-custodial, we never touch the funds. New creators: weekly after a 72h fraud review. Once released, funds go direct to your wallet and stay yours forever.",
    },
    {
      q: "What happens to my payouts if I'm flagged?",
      a: "We don't freeze funds on vibes. Reviews check fraud only — never NSFW, never AI content. Every review is human, time-boxed to 72 hours max, and has a real appeal process. Our TOS was written by people who've been banned everywhere, for you.",
    },
    {
      q: "What payment processors do you use?",
      a: "NOWPayments and Coinbase Commerce for crypto rails — both AI-content friendly by policy, not sufferance. Dedicated NSFW-tier merchant services are in place for Phase 4. No Stripe, no PayPal, no processor that can review and ban AI work.",
    },
    {
      q: "Is NSFW content allowed?",
      a: "Yes — clearly labeled, age-gated, and within the law. We treat adult AI work as legitimate creator labor, not a policy loophole to close next quarter.",
    },
    {
      q: "Why Founding 20 and not more?",
      a: "Because 3% forever only works if we're picky about who locks in. After 20, our standard launch rates apply (still lower than anywhere else). Founding 20 also gets instant payouts + direct product input.",
    },
    {
      q: "When does Clanry launch?",
      a: "Private beta: Q2. Public launch: Q3. Founding 20 get shop setup calls + migration help from banned platforms.",
    },
    {
      q: "Who is behind Clanry?",
      a: "Built by AI creators who've been banned by Stripe three times, quietly pulled from Patreon, and watched Fanvue and Gumroad tighten their AI rules every quarter. None of the platforms we'd trust our income with existed — so we built one. Every feature shipped is one we wished we had while our accounts were being shut down.",
    },
  ];
  const [open, setOpen] = useState2(0);
  return (
    <section
      id="faq"
      className="relative py-32 border-t"
      style={{ borderColor: "var(--border)" }}
    >
      <div className="max-w-[1360px] mx-auto px-8">
        <div className="flex justify-end mb-10 reveal">
          <SectionLabel n="06">FAQ</SectionLabel>
        </div>
      </div>
      <div className="max-w-[1360px] mx-auto px-8 grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-14">
        <div>
          <h2
            className="font-semibold tight reveal"
            data-d="1"
            style={{ fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 0.98 }}
          >
            Before you ask.
          </h2>
          <p
            className="mt-6 text-[15px] reveal"
            data-d="2"
            style={{ color: "var(--muted)" }}
          >
            Still not seeing your question? Email{" "}
            <a
              href="mailto:hey@clanry.com"
              className="underline decoration-[var(--acid)] underline-offset-4"
              style={{ color: "var(--text)" }}
            >
              hey@clanry.com
            </a>
            .
          </p>
        </div>
        <div className="divide-y" style={{ borderColor: "var(--border)" }}>
          {items.map((it, i) => {
            const on = open === i;
            return (
              <div
                key={i}
                className="faq-row border-t reveal"
                data-d={Math.min(i + 1, 5)}
                style={{ borderColor: "var(--border)" }}
              >
                <button
                  onClick={() => setOpen(on ? -1 : i)}
                  className="w-full py-6 flex items-start justify-between gap-5 text-left"
                >
                  <span
                    className="text-[19px] tight leading-snug"
                    style={{
                      color: on ? "var(--text)" : "rgba(242,242,242,0.9)",
                    }}
                  >
                    {it.q}
                  </span>
                  <span
                    className="mt-1 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center transition-all duration-300"
                    style={{
                      background: on ? "var(--acid)" : "transparent",
                      border:
                        "1px solid " + (on ? "var(--acid)" : "var(--border)"),
                      color: on ? "#000" : "var(--text)",
                      transform: on ? "rotate(45deg)" : "rotate(0)",
                    }}
                  >
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                      <path
                        d="M6 1v10M1 6h10"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                      />
                    </svg>
                  </span>
                </button>
                <div
                  className="overflow-hidden transition-all duration-500"
                  style={{ maxHeight: on ? "240px" : "0" }}
                >
                  <p
                    className="pb-6 pr-10 text-[15px] leading-[1.65]"
                    style={{ color: "var(--muted)" }}
                  >
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
          <div className="border-t" style={{ borderColor: "var(--border)" }} />
        </div>
      </div>
    </section>
  );
}

/* ---------- Claim / Final CTA ---------- */
function Claim({ spots }) {
  const [val, setVal] = useState2("");
  const [email, setEmail] = useState2("");
  const [done, setDone] = useState2(false);
  const [error, setError] = useState2("");
  const [submitting, setSubmitting] = useState2(false);
  const safe = val.replace(/[^a-zA-Z0-9_.-]/g, "").toLowerCase();
  const backendUrl = (window.__ENV__ && window.__ENV__.BACKEND_URL) || "";
  const requestsEndpoint = backendUrl
    ? `${backendUrl.replace(/\/$/, "")}/requests`
    : "/requests";

  async function handleSubmit(e) {
    e.preventDefault();
    setError("");

    const trimmedEmail = email.trim();

    if (!safe) {
      setError("Enter a valid handle using letters, numbers, ., _, or -.");
      return;
    }

    if (!trimmedEmail) {
      setError("Enter a valid email address.");
      return;
    }

    setSubmitting(true);

    try {
      const response = await fetch(requestsEndpoint, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: trimmedEmail,
          handle: safe,
        }),
      });

      const data = await response.json().catch(() => ({}));

      if (data && data.error) {
        setError(data.error);
        return;
      }

      if (!response.ok) {
        setError("Unable to reserve your handle right now.");
        return;
      }

      setDone(true);
      setEmail(trimmedEmail);
      setVal(safe);
    } catch (submitError) {
      setError("Unable to reach the waitlist service right now.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <section
      id="claim"
      className="relative py-36 border-t overflow-hidden"
      style={{ borderColor: "var(--border)" }}
    >
      <div className="mesh" />
      <div className="relative max-w-[1020px] mx-auto px-8 text-center">
        <div className="reveal">
          <SectionLabel n="07">Claim</SectionLabel>
        </div>
        <h2
          className="mt-6 font-bold tight reveal"
          data-d="1"
          style={{
            fontSize: "clamp(28px, 6.5vw, 92px)",
            lineHeight: 0.92,
            letterSpacing: "-0.035em",
          }}
        >
          <span className="whitespace-nowrap">Stripe doesn’t own you.</span>
          <div
            className="mt-4"
            style={{ fontSize: "32px", letterSpacing: "-0.02em" }}
          >
            <span style={{ color: "var(--text)" }}>Neither do we.</span>{" "}
            <span style={{ color: "var(--acid)" }} className="hl-under">
              Claim your link.
            </span>
          </div>
        </h2>
        <p
          className="mt-7 max-w-[560px] mx-auto text-[17px] reveal"
          data-d="2"
          style={{ color: "var(--muted)" }}
        >
          <span
            className="mono-feat tick"
            key={spots}
            style={{ color: "var(--acid)" }}
          >
            {spots}
          </span>{" "}
          spots left in Founding 20. Lock in 3% forever before the list closes.
        </p>

        {!done ? (
          <form
            onSubmit={handleSubmit}
            className="reveal mt-10 max-w-[560px] mx-auto space-y-4"
            data-d="3"
          >
            <div className="clan-field flex items-center rounded-full h-16 px-6 text-left">
              <input
                type="email"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value);
                  if (error) setError("");
                }}
                placeholder="email address"
                className="flex-1 text-[18px]"
                name="email"
                autoComplete="email"
                required
              />
            </div>

            <div className="clan-field flex items-center rounded-full h-16 px-6 text-left">
              <span
                className="mono-feat text-[14px]"
                style={{ color: "var(--muted)" }}
              >
                clanry.com/
              </span>
              <input
                value={val}
                onChange={(e) => {
                  setVal(e.target.value);
                  if (error) setError("");
                }}
                maxLength={22}
                placeholder="yourname"
                className="flex-1 ml-2 text-[18px]"
                name="handle"
                autoComplete="nickname"
                required
              />
            </div>

            <button
              type="submit"
              className="h-9 px-4 rounded-full cta-acid text-[16px] font-bold uppercase tracking-widest mx-auto block"
              disabled={submitting}
            >
              {submitting ? "Reserving..." : "Reserve →"}
            </button>

            {error ? (
              <div
                className="text-[12px] mono-feat uppercase tracking-[0.14em]"
                style={{ color: "var(--danger)" }}
              >
                {error}
              </div>
            ) : null}

            <div
              className="mt-3 text-[12px] mono-feat uppercase tracking-[0.2em]"
              style={{ color: "var(--dim)" }}
            >
              {safe ? (
                <>
                  Preview:{" "}
                  <span style={{ color: "var(--text)" }}>
                    clanry.com/{safe}
                  </span>
                </>
              ) : (
                "Letters, numbers, . _ -"
              )}
            </div>
          </form>
        ) : (
          <div
            className="mt-10 max-w-[640px] mx-auto rounded-[22px] px-8 py-10 text-center flex flex-col items-center justify-center min-h-[320px]"
            role="status"
            aria-live="polite"
            style={{
              background:
                "radial-gradient(circle at top, rgba(185,255,58,0.16), transparent 55%), var(--surface)",
              border: "1px solid var(--acid)",
              boxShadow: "0 0 0 6px rgba(185,255,58,0.08)",
            }}
          >
            <div className="flex justify-center">
              <div
                className="w-16 h-16 rounded-full flex items-center justify-center ring-pulse"
                style={{
                  background: "rgba(185,255,58,0.14)",
                  border: "1px solid rgba(185,255,58,0.45)",
                }}
              >
                <svg
                  width="28"
                  height="28"
                  viewBox="0 0 24 24"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M5 12.5l4.2 4.2L19 7"
                    stroke="var(--acid)"
                    strokeWidth="2.4"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
            </div>
            <div
              className="mt-5 text-[11px] mono-feat uppercase tracking-[0.24em]"
              style={{ color: "var(--acid)" }}
            >
              Submission received
            </div>
            <div
              className="mt-3 font-bold tight"
              style={{
                fontSize: "clamp(48px, 8vw, 88px)",
                lineHeight: 0.92,
                letterSpacing: "-0.04em",
              }}
            >
              Thank you.
            </div>

            <div
              className="mt-8 mx-auto w-full max-w-[520px] rounded-[18px] px-6 py-6"
              style={{
                background: "var(--surface-2)",
                border: "1px solid var(--border)",
                boxShadow: "inset 0 0 0 1px rgba(185,255,58,0.08)",
              }}
            >
              <div
                className="text-[10px] mono-feat uppercase tracking-[0.26em]"
                style={{ color: "var(--muted)" }}
              >
                Your handle &middot; locked
              </div>
              <div
                className="mt-3 font-bold tight break-all"
                style={{
                  color: "var(--acid)",
                  fontSize: "clamp(26px, 4.5vw, 40px)",
                  lineHeight: 1.05,
                  letterSpacing: "-0.035em",
                }}
              >
                clanry.com/{safe}
              </div>
            </div>

            <p className="mt-5 text-[14px]" style={{ color: "var(--muted)" }}>
              Confirmation sent to{" "}
              <span style={{ color: "var(--text)" }}>{email}</span>.
            </p>
            <p className="mt-1 text-[13px]" style={{ color: "var(--dim)" }}>
              We'll email you at launch. No card, no obligation, no bullshit.
            </p>
          </div>
        )}

        <div
          className="mt-8 inline-flex flex-wrap items-center justify-center gap-x-7 gap-y-2 text-[12px] mono-feat uppercase tracking-[0.18em]"
          style={{ color: "var(--muted)" }}
        >
          <span className="inline-flex items-center gap-2">
            <AcidDot />
            12 seconds
          </span>
          <span className="inline-flex items-center gap-2">
            <AcidDot />
            No card required
          </span>
          <span className="inline-flex items-center gap-2">
            <AcidDot />
            Yours to keep
          </span>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer
      className="pt-20 pb-10 border-t"
      style={{ borderColor: "var(--border)" }}
    >
      <div className="max-w-[1360px] mx-auto px-8 grid grid-cols-2 md:grid-cols-4 gap-10">
        <div className="col-span-2">
          <div className="flex items-center">
            <img src="assets/MainLogo.svg" alt="Clanry" className="w-32 h-32" />
          </div>
          <p
            className="mt-8 text-[40px] font-bold leading-[1.1] tight max-w-[800px]"
            style={{ color: "var(--text)" }}
          >
            The creator economy for AI artists. <br/>
            <span style={{ color: "var(--muted)" }}>Built ban-proof from day one.</span>
          </p>
        </div>
        {[
          {
            h: "Navigate",
            l: [
              { t: "How it works", h: "#how" },
              { t: "Pricing", h: "#pricing" },
              { t: "Founding 20", h: "#founding" },
            ],
          },
          {
            h: "More",
            l: [
              { t: "FAQ", h: "#faq" },
              { t: "Claim handle", h: "#claim" },
              { t: "hey@clanry.com", h: "mailto:hey@clanry.com" },
            ],
          },
        ].map((c, i) => (
          <div key={i}>
            <div
              className="text-[11px] mono-feat uppercase tracking-[0.22em] mb-5"
              style={{ color: "var(--muted)" }}
            >
              {c.h}
            </div>
            <ul className="space-y-2.5 text-[14px]">
              {c.l.map((x) => (
                <li key={x.t}>
                  <a
                    className="hover:text-white transition"
                    style={{ color: "rgba(242,242,242,0.75)" }}
                    href={x.h}
                  >
                    {x.t}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div
        className="max-w-[1360px] mx-auto px-8 mt-14 pt-6 border-t flex flex-wrap justify-between gap-4 text-[12px] mono-feat uppercase tracking-[0.18em]"
        style={{ borderColor: "var(--border)", color: "var(--dim)" }}
      >
        <span style={{ color: "var(--acid)" }}>© 2026 Clanry</span>
        <span className="flex items-center gap-2">
          <a
            href="/terms"
            className="hover:text-white transition"
            style={{ color: "var(--dim)" }}
          >
            Terms
          </a>
          <span>·</span>
          <a
            href="/privacy"
            className="hover:text-white transition"
            style={{ color: "var(--dim)" }}
          >
            Privacy
          </a>
          <span>·</span>
          <a
            href="/dmca"
            className="hover:text-white transition"
            style={{ color: "var(--dim)" }}
          >
            DMCA
          </a>
        </span>
        <span>
          Independent. Not affiliated with Stripe, Fanvue, Gumroad, or Patreon.
        </span>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */
function App() {
  useReveal();
  const spots = useSpots();
  return (
    <>
      <Nav />
      <Hero spots={spots} />
      <Problem />
      <Flips />
      <How />
      <Founding spots={spots} />
      <Pricing />
      <FAQ />
      <Claim spots={spots} />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
