const { useEffect, useState } = React;

const TALLY_URL = "https://tally.so/r/Me8REk";
const TALLY_EMBED_BASE =
  "https://tally.so/embed/Me8REk?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1";

const NAV_ITEMS = [
  { label: "Home", page: "home", hash: "" },
  { label: "Content", page: "content", hash: "content" },
  { label: "Monetization", page: "monetization", hash: "monetization" },
  { label: "Operations", page: "operations", hash: "operations" },
  { label: "Insights", page: "blog", hash: "insights" },
  { label: "About", page: "about", hash: "about" }
];

const PAGE_HASHES = {
  home: "",
  content: "content",
  monetization: "monetization",
  operations: "operations",
  blog: "insights",
  about: "about",
  legal: "terms-privacy"
};

const HASH_TO_PAGE = {
  "": "home",
  home: "home",
  content: "content",
  monetization: "monetization",
  operations: "operations",
  insights: "blog",
  blog: "blog",
  about: "about",
  "terms-privacy": "legal",
  legal: "legal"
};

const PAGE_META = {
  home: {
    title: "KITSUNE AI — Creator Business OS for Content, Revenue & Operations",
    description:
      "KITSUNE AI is the Creator Business OS for serious creators scaling from content income into multi-revenue media businesses."
  },
  content: {
    title: "KITSUNE AI — AI Creative Director for Creators",
    description:
      "KITSUNE AI helps creators plan, shape, score, and repurpose better content with signal-driven creative direction."
  },
  monetization: {
    title: "KITSUNE AI — Creator Monetization Engine",
    description:
      "KITSUNE AI helps creators track platform earnings, price brand deals, grow revenue, and prepare for creator fintech."
  },
  operations: {
    title: "KITSUNE AI — Creator Operations, Compliance & Payout Infrastructure",
    description:
      "KITSUNE AI helps creators manage invoices, payouts, compliance, records, tax readiness, and global creator operations."
  },
  blog: {
    title: "KITSUNE AI Insights — Founder Notes on Creator Economy Infrastructure",
    description:
      "Founder notes on creator infrastructure, monetization, regulation, fintech, and the operating systems serious creators need."
  },
  about: {
    title: "About KITSUNE AI — Creator Business OS",
    description:
      "KITSUNE AI is built by operators who understand creator monetization, media, brand budgets, platform payouts, and creator business systems."
  },
  legal: {
    title: "KITSUNE AI — Terms & Privacy",
    description:
      "Terms and privacy information for KITSUNE AI’s website, early access waitlist, communications, and related product experience."
  }
};

const logos = {
  wide: "KS_Wide.png",
  app: "KSApplogo.png",
  favicon: "KS_Favicon.png",
  mark: "KSLogoMark.png"
};

const BLOG_POSTS = [
  {
    title: "The Creator Middle Class Needs Infrastructure",
    category: "Creator Economy",
    excerpt:
      "Top creators have teams. Hobbyists have tools. The fastest-growing creator class sits in the middle: earning real income, managing real complexity, and operating without a system.",
    url: "https://www.linkedin.com/in/memonali/recent-activity/articles/"
  },
  {
    title: "The Regulated Creator Economy Has Arrived",
    category: "Regulation",
    excerpt:
      "Creators are no longer just posting content. They are operating media businesses across markets, platforms, disclosures, licensing rules, and advertiser obligations.",
    url: "https://www.linkedin.com/in/memonali/recent-activity/articles/"
  },
  {
    title: "Brand Deal Pricing Needs a Data Layer",
    category: "Monetization",
    excerpt:
      "Creator pricing is still driven by guesswork, screenshots, fear, and negotiation imbalance. The next phase requires rate intelligence built on audience quality, scope, and commercial impact.",
    url: "https://www.linkedin.com/in/memonali/recent-activity/articles/"
  },
  {
    title: "Creator Fintech Starts with Verified Earnings",
    category: "Fintech",
    excerpt:
      "Advances, invoice factoring, equipment leasing, and global wallet liquidity all require one thing first: a trusted operating layer for verified creator income.",
    url: "https://www.linkedin.com/in/memonali/recent-activity/articles/"
  },
  {
    title: "The Back Office Will Decide the Next Creator Winners",
    category: "Operations",
    excerpt:
      "The next generation of creators will not win only through better content. They will win through cleaner operations, faster payouts, better records, and stronger business readiness.",
    url: "https://www.linkedin.com/in/memonali/recent-activity/articles/"
  },
  {
    title: "Why Creators Are Becoming Media Businesses",
    category: "Market Shift",
    excerpt:
      "The creator economy is formalizing. KITSUNE AI is built for creators scaling from content income into multi-channel, multi-revenue, operationally complex media businesses.",
    url: "https://www.linkedin.com/in/memonali/recent-activity/articles/"
  }
];

const TAILS = [
  {
    title: "Know What to Make",
    group: "Content",
    text:
      "Spot content signals before they become obvious, and understand what your audience is likely to care about next."
  },
  {
    title: "Shape the Idea",
    group: "Content",
    text:
      "Turn signals into hooks, scripts, formats, storyboards, and repurposing paths."
  },
  {
    title: "Learn What Worked",
    group: "Content",
    text:
      "Feed performance back into the next creative decision instead of starting from zero every week."
  },
  {
    title: "Track Every Dollar",
    group: "Monetization",
    text:
      "See platform, brand, affiliate, subscription, commerce, and audience income in one place."
  },
  {
    title: "Price with Confidence",
    group: "Monetization",
    text: "Know what a deal should be worth before a brand names the number."
  },
  {
    title: "Find New Revenue",
    group: "Monetization",
    text:
      "Surface monetization paths hiding inside your audience, content library, and commercial footprint."
  },
  {
    title: "Get Paid Cleanly",
    group: "Operations",
    text:
      "Track invoices, payouts, overdue payments, deliverables, and brand obligations."
  },
  {
    title: "Stay Compliant",
    group: "Operations",
    text:
      "Keep disclosures, licenses, campaign requirements, and market rules visible before they become problems."
  },
  {
    title: "Stay Business-Ready",
    group: "Operations",
    text:
      "Organize records, reserves, exports, tax-readiness files, and finance documents."
  }
];

const REGULATORY_MATRIX = [
  {
    country: "France",
    law: "Influencer Act",
    detail: "Law 2023-451",
    system: "Restricted category and contract scanner",
    risk: "High scrutiny"
  },
  {
    country: "Saudi Arabia",
    law: "Mawthoog Ad License",
    detail: "Creator advertising license",
    system: "License checklist and renewal automation",
    risk: "License required"
  },
  {
    country: "USA",
    law: "FTC Endorsement Guides",
    detail: "Material connection disclosure",
    system: "Disclosure checker and campaign proof trail",
    risk: "Disclosure risk"
  },
  {
    country: "Italy",
    law: "AGCOM Media Guidelines",
    detail: "Creator and broadcaster obligations",
    system: "Broadcaster compliance and fine-risk warning",
    risk: "Fine exposure"
  }
];

const CREATOR_QUOTES = [
  {
    quote:
      "I earn from YouTube, Facebook, brand deals, affiliates, and direct work — but every platform has its own dashboard, payout rules, screenshots, invoices, and tax mess.",
    person: "Creator operator",
    context: "on the reality of monetizing across platforms"
  },
  {
    quote:
      "Making content is the visible part. Running the business behind it is the part nobody sees — pricing, chasing payments, tracking deals, saving records, and staying compliant.",
    person: "Independent creator",
    context: "on the hidden workload behind creator income"
  },
  {
    quote:
      "The bigger you get, the messier it becomes. More platforms, more money, more brands, more obligations — but still no system built for how creators actually work.",
    person: "Multi-platform creator",
    context: "on scaling from creator income into business complexity"
  }
];

function getPageFromHash() {
  const rawHash = window.location.hash.replace("#", "").trim().toLowerCase();
  return HASH_TO_PAGE[rawHash] || "home";
}

function getHashForPage(page) {
  return PAGE_HASHES[page] || "";
}

function updateMetaForPage(page) {
  const meta = PAGE_META[page] || PAGE_META.home;

  document.title = meta.title;

  const descriptionTag = document.querySelector('meta[name="description"]');
  if (descriptionTag) {
    descriptionTag.setAttribute("content", meta.description);
  }

  const ogTitle = document.querySelector('meta[property="og:title"]');
  if (ogTitle) {
    ogTitle.setAttribute("content", meta.title);
  }

  const ogDescription = document.querySelector(
    'meta[property="og:description"]'
  );
  if (ogDescription) {
    ogDescription.setAttribute("content", meta.description);
  }

  const twitterTitle = document.querySelector('meta[name="twitter:title"]');
  if (twitterTitle) {
    twitterTitle.setAttribute("content", meta.title);
  }

  const twitterDescription = document.querySelector(
    'meta[name="twitter:description"]'
  );
  if (twitterDescription) {
    twitterDescription.setAttribute("content", meta.description);
  }
}

function getCurrentPageUrl(page) {
  const hash = getHashForPage(page);
  const baseUrl = `${window.location.origin}${window.location.pathname}`;
  return hash ? `${baseUrl}#${hash}` : baseUrl;
}

function trackEvent(eventName, eventData = {}) {
  const payload = {
    ...eventData,
    page_url: window.location.href,
    timestamp: new Date().toISOString()
  };

  if (typeof window !== "undefined" && typeof window.gtag === "function") {
    window.gtag("event", eventName, payload);
  }

  if (typeof window !== "undefined" && typeof window.plausible === "function") {
    window.plausible(eventName, { props: payload });
  }

  if (typeof window !== "undefined" && window.location.hostname === "localhost") {
    console.log("[KITSUNE analytics]", eventName, payload);
  }
}

function App() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [page, setPage] = useState(getPageFromHash);
  const [waitlistOpen, setWaitlistOpen] = useState(false);

  useEffect(() => {
    const handleHashChange = () => {
      const nextPage = getPageFromHash();
      setPage(nextPage);
      setMobileOpen(false);
      window.scrollTo({ top: 0, behavior: "smooth" });
    };

    window.addEventListener("hashchange", handleHashChange);
    return () => window.removeEventListener("hashchange", handleHashChange);
  }, []);

  useEffect(() => {
    updateMetaForPage(page);
    trackEvent("page_view", {
      page,
      page_hash: getHashForPage(page),
      page_title: PAGE_META[page]?.title || PAGE_META.home.title
    });
  }, [page]);

  const goToPage = (nextPage) => {
    const nextHash = getHashForPage(nextPage);
    setMobileOpen(false);

    if (nextPage === "home") {
      if (window.location.hash) {
        window.history.pushState(
          "",
          document.title,
          `${window.location.pathname}${window.location.search}`
        );
        setPage("home");
        window.scrollTo({ top: 0, behavior: "smooth" });
      } else {
        setPage("home");
        window.scrollTo({ top: 0, behavior: "smooth" });
      }
      return;
    }

    if (window.location.hash.replace("#", "") !== nextHash) {
      window.location.hash = nextHash;
    } else {
      setPage(nextPage);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  const openWaitlist = (sourceOverride) => {
    const source = sourceOverride || page;
    trackEvent("waitlist_opened", {
      source,
      page
    });
    setWaitlistOpen(true);
  };

  const closeWaitlist = () => {
    trackEvent("waitlist_closed", {
      source: page
    });
    setWaitlistOpen(false);
  };

  return (
    <div className="min-h-screen overflow-hidden bg-[#FAF5F0] text-neutral-950">
      <BackgroundDepth />

      <div className="relative z-10">
        <Header
          page={page}
          goToPage={goToPage}
          mobileOpen={mobileOpen}
          setMobileOpen={setMobileOpen}
          openWaitlist={openWaitlist}
        />

        <main>
          {page === "home" && (
            <HomePage goToPage={goToPage} openWaitlist={openWaitlist} />
          )}
          {page === "content" && <ContentPage openWaitlist={openWaitlist} />}
          {page === "monetization" && (
            <MonetizationPage openWaitlist={openWaitlist} />
          )}
          {page === "operations" && (
            <OperationsPage openWaitlist={openWaitlist} />
          )}
          {page === "blog" && <BlogPage openWaitlist={openWaitlist} />}
          {page === "about" && <AboutPage openWaitlist={openWaitlist} />}
          {page === "legal" && <LegalPage />}
        </main>

        <Footer goToPage={goToPage} openWaitlist={openWaitlist} />
      </div>

      {waitlistOpen && (
        <WaitlistModal
          closeModal={closeWaitlist}
          sourcePage={page}
          pageUrl={getCurrentPageUrl(page)}
        />
      )}
    </div>
  );
}

function Header({
  page,
  goToPage,
  mobileOpen,
  setMobileOpen,
  openWaitlist
}) {
  return (
    <header className="sticky top-0 z-40 border-b border-black/10 bg-[#FAF5F0]/82 backdrop-blur-xl">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 lg:px-8">
        <button
          onClick={() => goToPage("home")}
          className="flex items-center"
          aria-label="Go to KITSUNE AI home"
        >
          <img
            src={logos.wide}
            alt="KITSUNE AI"
            className="h-10 w-auto max-w-[170px] object-contain sm:h-12 sm:max-w-none"
          />
        </button>

        <nav className="hidden items-center gap-8 lg:flex" aria-label="Primary">
          {NAV_ITEMS.map((item) => (
            <button
              key={item.label}
              onClick={() => goToPage(item.page)}
              aria-current={page === item.page ? "page" : undefined}
              className={`text-[11px] font-bold uppercase tracking-[0.2em] transition ${
                page === item.page
                  ? "text-neutral-950"
                  : "text-neutral-600 hover:text-neutral-950"
              }`}
            >
              {item.label}
            </button>
          ))}
        </nav>

        <div className="hidden items-center gap-3 lg:flex">
          <PrimaryButton onClick={() => openWaitlist("nav")}>
            Join Waitlist
          </PrimaryButton>
        </div>

        <button
          onClick={() => setMobileOpen(!mobileOpen)}
          className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-black/20 bg-transparent text-neutral-950 lg:hidden"
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}
        >
          <span className="text-xl">{mobileOpen ? "×" : "≡"}</span>
        </button>
      </div>

      {mobileOpen && (
        <div className="border-t border-black/10 bg-[#FAF5F0]/95 lg:hidden">
          <div className="mx-auto flex max-w-7xl flex-col gap-4 px-5 py-5">
            {NAV_ITEMS.map((item) => (
              <button
                key={item.label}
                onClick={() => goToPage(item.page)}
                aria-current={page === item.page ? "page" : undefined}
                className={`text-left text-[11px] font-bold uppercase tracking-[0.2em] ${
                  page === item.page ? "text-neutral-950" : "text-neutral-700"
                }`}
              >
                {item.label}
              </button>
            ))}

            <div className="mt-3">
              <PrimaryButton onClick={() => openWaitlist("mobile_nav")}>
                Join Waitlist
              </PrimaryButton>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

function HomePage({ goToPage, openWaitlist }) {
  return (
    <>
      <section className="relative mx-auto grid max-w-7xl grid-cols-1 gap-12 px-5 pb-16 pt-12 lg:grid-cols-[1.03fr_0.97fr] lg:items-center lg:px-8 lg:pb-24 lg:pt-16">
        <div className="relative z-10 max-w-[780px]">
          <div className="inline-flex items-center gap-3 rounded-full border border-black/10 bg-white/50 px-4 py-2 text-xs font-bold uppercase tracking-[0.3em] text-neutral-700 shadow-sm backdrop-blur-xl">
            <span className="inline-block h-2.5 w-2.5 rounded-full bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1]" />
            Creator Operating System
          </div>

          <h1 className="mt-7 max-w-[13.8ch] font-serif text-[2.3rem] leading-[0.9] tracking-[-0.04em] text-neutral-950 sm:text-[3.35rem] lg:text-[4.05rem] xl:text-[4.35rem]">
            Creators are becoming media businesses.
            <span className="block bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1] bg-clip-text text-transparent">
              KITSUNE AI
            </span>
            helps them run it.
          </h1>

          <p className="mt-7 max-w-[42rem] text-lg leading-8 text-neutral-600 sm:text-xl">
            The operating system for creators scaling from content income into
            multi-revenue media businesses.
          </p>

          <div className="mt-8 flex flex-wrap items-center gap-4">
            <PrimaryButton onClick={() => openWaitlist("home_hero")}>
              ↓ Join Waitlist
            </PrimaryButton>
          </div>
        </div>

        <div className="relative z-10">
          <CockpitMockup />
        </div>
      </section>

      <HomeProblemRoll />
      <HomeNineTailsRoll />
      <HomeProductPromiseRoll goToPage={goToPage} openWaitlist={openWaitlist} />
    </>
  );
}

function HomeProblemRoll() {
  return (
    <section className="border-t border-black/8 bg-white/35 py-24 backdrop-blur-sm">
      <div className="mx-auto grid max-w-7xl gap-12 px-5 lg:grid-cols-[0.9fr_1.1fr] lg:px-8">
        <div>
          <h2 className="font-serif text-4xl tracking-[-0.03em] text-neutral-950 sm:text-5xl">
            The creator business is still being run on screenshots,
            spreadsheets, and hope.
          </h2>

          <p className="mt-5 text-lg leading-8 text-neutral-600">
            Creators in the middle class of the economy already have income,
            audience, leverage, and complexity. But the business layer around
            them is still fragmented — dashboards for performance, chats for
            brand deals, screenshots for pricing, invoices for payouts, and
            mental notes for compliance, tax, and operations.
          </p>

          <div className="mt-8 rounded-[1.8rem] border border-white/70 bg-white/45 p-6 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl">
            <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-neutral-500">
              The core truth
            </p>
            <p className="mt-3 text-2xl font-bold leading-tight tracking-tight text-neutral-950">
              Creators have become businesses. The systems around them have not.
            </p>
          </div>
        </div>

        <div className="grid gap-4 sm:grid-cols-2">
          {[
            [
              "Platform dashboards",
              "Revenue, reach, views, watch time, and engagement scattered across every platform."
            ],
            [
              "Brand deal chaos",
              "Briefs, deliverables, usage rights, negotiations, and payment status trapped inside messages."
            ],
            [
              "Pricing guesswork",
              "Too many creators still price from screenshots, fear, or whatever someone else said they charged."
            ],
            [
              "Operational drag",
              "Invoices, contracts, disclosures, payout records, reserves, and tax admin become invisible workload."
            ]
          ].map(([title, text]) => (
            <div
              key={title}
              className="rounded-[1.6rem] border border-white/70 bg-white/45 p-6 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl"
            >
              <div className="mb-5 h-2 w-16 rounded-full bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1]" />
              <h3 className="text-xl font-bold tracking-tight text-neutral-950">
                {title}
              </h3>
              <p className="mt-3 text-sm leading-7 text-neutral-600">{text}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="mx-auto mt-16 max-w-7xl px-5 lg:px-8">
        <div className="mb-6 flex items-center gap-3">
          <span className="h-2.5 w-2.5 rounded-full bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1]" />
          <p className="text-[11px] font-bold uppercase tracking-[0.26em] text-neutral-500">
            What creators are actually saying
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-3">
          {CREATOR_QUOTES.map((item) => (
            <div
              key={item.quote}
              className="rounded-[1.8rem] border border-white/70 bg-white/50 p-7 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl"
            >
              <p className="font-serif text-3xl leading-tight tracking-[-0.03em] text-neutral-950">
                “{item.quote}”
              </p>
              <div className="mt-6 border-t border-black/10 pt-4">
                <p className="text-sm font-bold text-neutral-950">
                  {item.person}
                </p>
                <p className="mt-1 text-xs leading-6 text-neutral-500">
                  {item.context}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeNineTailsRoll() {
  return (
    <section className="border-t border-black/8 py-24">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="flex flex-col justify-between gap-8 lg:flex-row lg:items-end">
          <SectionHeader
            eyebrow="The Nine Operating Tails"
            title="One Creator OS. Nine operating tails."
            body="KITSUNE AI organizes the creator business into nine operating layers across content, monetization, and business operations."
          />

          <div className="max-w-sm rounded-[1.5rem] border border-white/70 bg-white/45 p-5 text-sm leading-7 text-neutral-600 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl">
            Each tail is a business function creators usually handle manually.
            KITSUNE brings them into one operating system.
          </div>
        </div>

        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {TAILS.map((tail, index) => (
            <div
              key={tail.title}
              className="rounded-[1.75rem] border border-white/70 bg-white/45 p-6 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl"
            >
              <div className="mb-5 flex items-center justify-between">
                <span className="text-[10px] font-bold uppercase tracking-[0.22em] text-black/40">
                  {tail.group}
                </span>
                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1] text-xs font-bold text-white">
                  {index + 1}
                </span>
              </div>
              <h3 className="text-xl font-bold tracking-tight text-neutral-950">
                {tail.title}
              </h3>
              <p className="mt-3 text-sm leading-7 text-neutral-600">
                {tail.text}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeProductPromiseRoll({ goToPage, openWaitlist }) {
  return (
    <section className="border-t border-black/8 bg-white/35 py-24 backdrop-blur-sm">
      <div className="mx-auto max-w-7xl px-5 lg:px-8">
        <div className="rounded-[2.5rem] border border-white/70 bg-white/45 p-8 shadow-[0_20px_80px_rgba(0,0,0,0.06)] backdrop-blur-xl md:p-12">
          <div className="grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
                Product Promise
              </p>
              <h2 className="mt-5 font-serif text-3xl leading-[0.95] tracking-[-0.04em] text-neutral-950 md:text-5xl">
                Run content, revenue, and operations in one app.
              </h2>
              <p className="mt-6 text-lg leading-8 text-neutral-600">
                KITSUNE AI helps serious creators make better content, grow
                revenue, and manage the business layer behind their work —
                without needing a full team before they are ready to hire one.
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <PrimaryButton onClick={() => openWaitlist("product_promise")}>
                  Join Waitlist
                </PrimaryButton>
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
              {[
                [
                  "01",
                  "Better Content",
                  "Know what to make and why it matters.",
                  "content"
                ],
                [
                  "02",
                  "More Money",
                  "Understand, grow, and optimize creator revenue.",
                  "monetization"
                ],
                [
                  "03",
                  "Smoother Ops",
                  "Run invoices, records, readiness, and workflows.",
                  "operations"
                ]
              ].map(([num, title, text, targetPage]) => (
                <button
                  key={title}
                  onClick={() => goToPage(targetPage)}
                  className="rounded-[1.6rem] border border-white/70 bg-white/50 p-6 text-left shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl transition hover:-translate-y-1"
                >
                  <div className="text-[10px] font-bold uppercase tracking-[0.22em] text-black/35">
                    {num}
                  </div>
                  <h3 className="mt-8 text-xl font-bold tracking-tight text-neutral-950">
                    {title}
                  </h3>
                  <p className="mt-3 text-sm leading-7 text-neutral-600">
                    {text}
                  </p>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CockpitMockup() {
  return (
    <div className="relative mx-auto w-full max-w-[430px] sm:max-w-[620px]">
      <div className="absolute -inset-4 rounded-[2.5rem] bg-[radial-gradient(circle_at_30%_20%,rgba(217,70,29,0.18),transparent_32%),radial-gradient(circle_at_78%_70%,rgba(35,55,241,0.18),transparent_36%)] blur-2xl sm:-inset-8 sm:rounded-[3.5rem]" />

      <div className="relative rounded-[2rem] border border-white/60 bg-white/20 p-2.5 shadow-[0_30px_110px_rgba(20,37,227,0.08)] backdrop-blur-3xl sm:rounded-[3rem] sm:p-4">
        <div className="rounded-[1.7rem] border border-white/70 bg-white/50 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] backdrop-blur-xl sm:rounded-[2.5rem] sm:p-6">
          <div className="mb-5 flex items-center justify-between gap-3 sm:mb-6">
            <div className="flex min-w-0 items-center gap-3">
              <img
                src={logos.app}
                alt="KITSUNE AI app logo"
                className="h-10 w-10 shrink-0 rounded-[0.8rem] object-cover shadow-[0_8px_20px_rgba(86,66,169,0.15)] sm:h-11 sm:w-11 sm:rounded-[0.9rem]"
              />
              <div className="min-w-0">
                <div className="text-[9px] font-bold uppercase tracking-[0.28em] text-black sm:text-[10px] sm:tracking-[0.35em]">
                  KITSUNE AI
                </div>
                <div className="mt-0.5 text-base font-semibold tracking-tight text-black/50 sm:text-lg">
                  Creator OS
                </div>
              </div>
            </div>

            <div className="hidden rounded-full border border-black/5 bg-white/60 px-3 py-1.5 text-[9px] font-bold uppercase tracking-[0.2em] text-black/40 shadow-sm backdrop-blur-xl sm:block">
              Live OS
            </div>
          </div>

          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
            <GlassPanel className="sm:col-span-2">
              <ContentMiniMockup />
            </GlassPanel>

            <GlassPanel>
              <MonetizationMiniMockup />
            </GlassPanel>

            <GlassPanel>
              <OperationsMiniMockup />
            </GlassPanel>
          </div>
        </div>
      </div>
    </div>
  );
}

function GlassPanel({ children, className = "" }) {
  return (
    <div
      className={`rounded-[1.45rem] border border-white/60 bg-white/40 p-4 shadow-[0_8px_32px_rgba(0,0,0,0.04)] backdrop-blur-2xl sm:rounded-[2rem] sm:p-6 ${className}`}
    >
      {children}
    </div>
  );
}

function PanelLabel({ children }) {
  return (
    <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-black/40">
      {children}
    </div>
  );
}

function ContentMiniMockup() {
  return (
    <div className="flex h-full flex-col justify-between">
      <div className="mb-4 flex items-start justify-between gap-4">
        <div>
          <PanelLabel>Content</PanelLabel>
          <div className="mt-1 text-2xl font-bold tracking-tight text-black sm:text-3xl">
            Trend Pulse
          </div>
        </div>

        <div className="mt-1 rounded-full bg-green-100 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-green-700">
          +23%
        </div>
      </div>

      <div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-[1.3fr_0.7fr] sm:gap-6">
        <div className="flex flex-col justify-end">
          <PanelLabel>Live Signal</PanelLabel>
          <PrecisionAreaChart />
        </div>

        <div className="border-t border-black/5 pt-4 sm:flex sm:flex-col sm:justify-center sm:border-l sm:border-t-0 sm:pl-6 sm:pt-0">
          <PanelLabel>Next Best Move</PanelLabel>
          <div className="mt-2 text-lg font-bold leading-tight tracking-tight text-black sm:text-xl">
            Deep-dive carousel
          </div>
          <p className="mt-2 text-xs leading-relaxed text-black/50">
            Repurpose YT short into 4 slides.
          </p>
          <div className="mt-4 flex flex-wrap gap-2">
            <TinyChip>Carousel</TinyChip>
          </div>
        </div>
      </div>
    </div>
  );
}

function MonetizationMiniMockup() {
  return (
    <div className="flex h-full flex-col justify-between">
      <div>
        <PanelLabel>Monetization</PanelLabel>

        <div className="mt-3 flex items-start justify-between gap-4">
          <div>
            <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-black/40">
              Safe to Spend
            </div>
            <div className="mt-1 text-3xl font-bold tracking-tight text-black">
              $7.6K
            </div>
            <div className="mt-1 text-[9px] font-medium uppercase tracking-wider text-black/40">
              after reserves
            </div>
          </div>

          <RevenueDonut />
        </div>

        <div className="mt-6 flex flex-col gap-1 border-t border-black/5 pt-4">
          <MixRow color="#1425E3" label="Brand" value="38%" />
          <MixRow color="#5642A9" label="Platform" value="29%" />
          <MixRow color="#D9461D" label="Affiliate" value="21%" />
        </div>
      </div>
    </div>
  );
}

function OperationsMiniMockup() {
  return (
    <div className="flex h-full flex-col justify-between">
      <div>
        <PanelLabel>Operations</PanelLabel>

        <div className="mt-3 flex items-start justify-between gap-4">
          <div>
            <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-black/40">
              Active Compliance
            </div>
            <div className="mt-1 text-3xl font-bold tracking-tight text-black">
              2/3
            </div>
          </div>

          <div className="mt-1 rounded-full bg-orange-100 px-3 py-1 text-[9px] font-bold uppercase tracking-widest text-orange-700">
            1 review
          </div>
        </div>

        <div className="mt-6 flex flex-col gap-1 border-t border-black/5 pt-4">
          <CheckRow text="Disclosure checklist" done />
          <CheckRow text="Brand contract saved" done />
          <CheckRow text="Tax reserve review" />
        </div>
      </div>
    </div>
  );
}

function ContentPage({ openWaitlist }) {
  return (
    <ProductPageShell
      eyebrow="Make Better Content"
      title="Your AI creative director."
      body="KITSUNE helps creators move from guessing what to post to knowing what to make, how to shape it, where to publish it, and how to improve it before it goes live."
      openWaitlist={openWaitlist}
      source="content_page"
      sections={[
        {
          title: "Predictive Signal Engine",
          text:
            "Track platform movement, audience behavior, content formats, and creator-category momentum to surface what is likely to matter next."
        },
        {
          title: "Blueprints, Hooks & Scripts",
          text:
            "Turn signals into creative direction: hooks, titles, scripts, storyboards, repurposing plans, and platform-specific content prompts."
        },
        {
          title: "Pre-Production Scoring",
          text:
            "Assess content ideas before they go live using audience fit, platform fit, monetization relevance, and brand-safety cues."
        },
        {
          title: "Collaboration & Matchmaking",
          text:
            "Identify creator partners, brand fits, location opportunities, and collaboration paths that can make the idea bigger."
        }
      ]}
      mockup={<CreativeDirectorMockup />}
    />
  );
}

function MonetizationPage({ openWaitlist }) {
  return (
    <ProductPageShell
      eyebrow="Make More Money"
      title="Your monetization engine."
      body="KITSUNE helps creators understand, grow, price, and optimize income across every place they earn, while building the verified financial layer for future creator fintech."
      openWaitlist={openWaitlist}
      source="monetization_page"
      sections={[
        {
          title: "Platform Monetization Layer",
          text:
            "Bring platform earnings into one view across YouTube, Meta, TikTok, X, affiliates, commerce, subscriptions, and audience support."
        },
        {
          title: "Brand Rate Engine",
          text:
            "Estimate fair deal value using audience quality, scope, category, content format, usage rights, and campaign complexity."
        },
        {
          title: "Revenue Opportunity Discovery",
          text:
            "Surface underused income streams and show creators where revenue can be expanded, diversified, or better optimized."
        },
        {
          title: "Creator Capital Readiness",
          text:
            "Turn verified creator earnings into unlocked advances, invoice factoring, equipment leasing, and global wallet liquidity."
        }
      ]}
      mockup={<MonetizationEngineMockup />}
    />
  );
}

function OperationsPage({ openWaitlist }) {
  return (
    <>
      <section className="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-[0.92fr_1.08fr] lg:items-center lg:px-8 lg:py-28">
        <div>
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
            Run Business Operations
          </p>
          <h1 className="mt-5 max-w-[12ch] font-serif text-5xl leading-[0.92] tracking-[-0.04em] text-neutral-950 md:text-7xl">
            The global regulatory wedge.
          </h1>
          <p className="mt-7 max-w-2xl text-xl leading-9 text-neutral-600">
            Creator regulation is fragmenting market by market. KITSUNE turns
            that fragmentation into guided workflows creators can actually
            follow.
          </p>
          <div className="mt-8 flex flex-wrap gap-4">
            <PrimaryButton onClick={() => openWaitlist("operations_page")}>
              Join Waitlist
            </PrimaryButton>
          </div>
        </div>

        <GlobalRegulatoryMatrix />
      </section>

      <section className="border-t border-black/8 bg-white/35 py-20 backdrop-blur-sm">
        <div className="mx-auto max-w-7xl px-5 lg:px-8">
          <div className="grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-start">
            <SectionHeader
              eyebrow="Global Liquidity"
              title="Creator payouts should move as fast as creator income."
              body="KITSUNE turns operational records into payout infrastructure, connecting creators to fiat rails, global virtual accounts, and Web3 settlement paths."
            />

            <div className="grid gap-6 md:grid-cols-2">
              <div className="rounded-[2rem] border border-white/60 bg-white/40 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.06)] backdrop-blur-xl">
                <div className="mb-6 h-2 w-20 rounded-full bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1]" />
                <p className="text-xs font-bold uppercase tracking-[0.24em] text-neutral-500">
                  Fiat Rails
                </p>
                <h2 className="mt-4 text-3xl font-bold tracking-tight text-neutral-950">
                  Global Virtual Accounts
                </h2>
                <p className="mt-4 text-base leading-8 text-neutral-600">
                  Receive, reconcile, and document earnings through localized
                  account rails, payout tracking, and accountant-ready records.
                </p>
              </div>

              <div className="rounded-[2rem] border border-white/60 bg-white/40 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.06)] backdrop-blur-xl">
                <div className="mb-6 h-2 w-20 rounded-full bg-gradient-to-r from-[#2337F1] via-[#5642A9] to-[#D9461D]" />
                <p className="text-xs font-bold uppercase tracking-[0.24em] text-neutral-500">
                  Web3 Rails
                </p>
                <h2 className="mt-4 text-3xl font-bold tracking-tight text-neutral-950">
                  Stablecoin Settlement
                </h2>
                <p className="mt-4 text-base leading-8 text-neutral-600">
                  Support instant, borderless settlement paths where creators,
                  clients, and markets are ready for digital payment rails.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function GlobalRegulatoryMatrix() {
  return (
    <div className="relative">
      <div className="absolute -inset-8 rounded-[3.5rem] bg-[radial-gradient(circle_at_30%_20%,rgba(217,70,29,0.18),transparent_32%),radial-gradient(circle_at_78%_70%,rgba(35,55,241,0.18),transparent_36%)] blur-2xl" />
      <div className="relative rounded-[3rem] border border-white/70 bg-white/35 p-5 shadow-[0_30px_110px_rgba(20,37,227,0.12)] backdrop-blur-2xl">
        <div className="rounded-[2.5rem] border border-white/80 bg-white/40 p-6 backdrop-blur-xl">
          <div className="mb-6 flex items-center gap-3">
            <img
              src={logos.app}
              alt="KITSUNE AI"
              className="h-12 w-12 rounded-xl object-cover"
            />
            <div>
              <div className="text-[11px] font-bold uppercase tracking-[0.35em] text-black">
                KITSUNE AI
              </div>
              <div className="mt-1 text-xl font-semibold tracking-tight text-black/50">
                Regulatory Matrix
              </div>
            </div>
          </div>

          <div className="grid gap-4">
            {REGULATORY_MATRIX.map((item) => (
              <div
                key={item.country}
                className="rounded-[2rem] border border-white/60 bg-white/40 p-5 shadow-[0_8px_32px_rgba(0,0,0,0.04)] backdrop-blur-xl"
              >
                <div className="flex flex-wrap items-start justify-between gap-4">
                  <div>
                    <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-black/40">
                      {item.country}
                    </p>
                    <h3 className="mt-2 text-xl font-bold tracking-tight text-black">
                      {item.law}
                    </h3>
                    <p className="mt-1 text-sm font-medium text-black/45">
                      {item.detail}
                    </p>
                  </div>
                  <span className="rounded-full bg-orange-100 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-orange-700">
                    {item.risk}
                  </span>
                </div>

                <div className="mt-5 rounded-2xl border border-white/60 bg-white/45 px-4 py-3 text-sm font-semibold text-black/60 backdrop-blur-xl">
                  {item.system}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ProductPageShell({
  eyebrow,
  title,
  body,
  openWaitlist,
  source,
  sections,
  mockup
}) {
  return (
    <>
      <section className="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-[0.92fr_1.08fr] lg:items-center lg:px-8 lg:py-28">
        <div>
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
            {eyebrow}
          </p>
          <h1 className="mt-5 max-w-[12ch] font-serif text-5xl leading-[0.92] tracking-[-0.04em] text-neutral-950 md:text-7xl">
            {title}
          </h1>
          <p className="mt-7 max-w-2xl text-xl leading-9 text-neutral-600">
            {body}
          </p>
          <div className="mt-8 flex flex-wrap gap-4">
            <PrimaryButton onClick={() => openWaitlist(source)}>
              Join Waitlist
            </PrimaryButton>
          </div>
        </div>

        {mockup}
      </section>

      <section className="border-t border-black/8 bg-white/35 py-20 backdrop-blur-sm">
        <div className="mx-auto grid max-w-7xl gap-6 px-5 md:grid-cols-2 lg:px-8">
          {sections.map((section) => (
            <div
              key={section.title}
              className="rounded-[2rem] border border-white/70 bg-white/45 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl"
            >
              <div className="mb-6 h-2 w-20 rounded-full bg-gradient-to-r from-[#D9461D] via-[#5642A9] to-[#2337F1]" />
              <h2 className="text-2xl font-bold tracking-tight text-neutral-950">
                {section.title}
              </h2>
              <p className="mt-4 text-base leading-8 text-neutral-600">
                {section.text}
              </p>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

function CreativeDirectorMockup() {
  return (
    <MockupShell label="Creative Director">
      <div className="grid gap-4">
        <GlassPanel>
          <PanelLabel>Signal Brief</PanelLabel>
          <h3 className="text-2xl font-bold tracking-tight text-black">
            Creator business tips are rising
          </h3>
          <p className="mt-3 text-sm leading-7 text-black/55">
            Audience questions around pricing, invoices, and brand deals are up
            31% this week.
          </p>
        </GlassPanel>
        <div className="grid gap-4 sm:grid-cols-2">
          <GlassPanel>
            <PanelLabel>Suggested Format</PanelLabel>
            <div className="text-3xl font-bold tracking-tight">Carousel</div>
            <p className="mt-2 text-sm text-black/50">8-slide breakdown</p>
          </GlassPanel>
          <GlassPanel>
            <PanelLabel>Repurpose</PanelLabel>
            <div className="text-3xl font-bold tracking-tight">3 clips</div>
            <p className="mt-2 text-sm text-black/50">Short-form cutdowns</p>
          </GlassPanel>
        </div>
      </div>
    </MockupShell>
  );
}

function MonetizationEngineMockup() {
  return (
    <MockupShell label="Monetization Engine">
      <div className="grid gap-4">
        <div className="grid gap-4 sm:grid-cols-2">
          <GlassPanel>
            <PanelLabel>Total Revenue</PanelLabel>
            <div className="text-4xl font-bold tracking-tight">$12.8K</div>
            <p className="mt-2 text-sm text-green-700">+18.4% vs last 30d</p>
          </GlassPanel>
          <GlassPanel>
            <PanelLabel>Suggested Rate</PanelLabel>
            <div className="text-4xl font-bold tracking-tight">$1.9K</div>
            <p className="mt-2 text-sm text-black/50">Avg brand benchmark</p>
          </GlassPanel>
        </div>
        <GlassPanel>
          <PanelLabel>Capital Readiness</PanelLabel>
          <h3 className="text-2xl font-bold tracking-tight text-black">
            Verified earnings layer
          </h3>
          <p className="mt-3 text-sm leading-7 text-black/55">
            Advances, factoring, equipment leasing, wallet liquidity, and
            creator credit products start with verified income data.
          </p>
        </GlassPanel>
      </div>
    </MockupShell>
  );
}

function MockupShell({ label, children }) {
  return (
    <div className="relative">
      <div className="absolute -inset-8 rounded-[3.5rem] bg-[radial-gradient(circle_at_30%_20%,rgba(217,70,29,0.18),transparent_32%),radial-gradient(circle_at_78%_70%,rgba(35,55,241,0.18),transparent_36%)] blur-2xl" />
      <div className="relative rounded-[3rem] border border-white/70 bg-white/35 p-5 shadow-[0_30px_110px_rgba(20,37,227,0.12)] backdrop-blur-2xl">
        <div className="rounded-[2.5rem] border border-white/80 bg-white/40 p-6 backdrop-blur-xl">
          <div className="mb-6 flex items-center gap-3">
            <img
              src={logos.app}
              alt="KITSUNE AI"
              className="h-12 w-12 rounded-xl object-cover"
            />
            <div>
              <div className="text-[11px] font-bold uppercase tracking-[0.35em] text-black">
                KITSUNE AI
              </div>
              <div className="mt-1 text-xl font-semibold tracking-tight text-black/50">
                {label}
              </div>
            </div>
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}

function BlogPage({ openWaitlist }) {
  return (
    <>
      <section className="mx-auto max-w-7xl px-5 py-20 lg:px-8 lg:py-28">
        <div className="max-w-4xl">
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
            Insights
          </p>
          <h1 className="mt-5 font-serif text-5xl leading-[0.92] tracking-[-0.04em] text-neutral-950 md:text-7xl">
            Founder notes on the business layer behind the creator economy.
          </h1>
          <p className="mt-7 max-w-3xl text-xl leading-9 text-neutral-600">
            Thinking on creator infrastructure, monetization, regulation,
            fintech, and the operating systems serious creators will need as
            they scale into media businesses.
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2">
          {BLOG_POSTS.map((post) => (
            <a
              key={post.title}
              href={post.url}
              target="_blank"
              rel="noreferrer"
              onClick={() =>
                trackEvent("founder_articles_clicked", {
                  article_theme: post.title,
                  category: post.category,
                  source: "insights_page"
                })
              }
              className="group rounded-[2rem] border border-white/70 bg-white/45 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl transition hover:-translate-y-1 hover:bg-white/60"
            >
              <p className="text-[10px] font-bold uppercase tracking-[0.22em] text-neutral-500">
                {post.category}
              </p>
              <h2 className="mt-5 text-3xl font-bold tracking-tight text-neutral-950">
                {post.title}
              </h2>
              <p className="mt-4 text-base leading-8 text-neutral-600">
                {post.excerpt}
              </p>
              <div className="mt-6 text-sm font-bold text-[#D9461D] transition group-hover:translate-x-1">
                View founder articles →
              </div>
            </a>
          ))}
        </div>
      </section>

      <section className="border-t border-black/8 bg-white/35 py-20 backdrop-blur-sm">
        <div className="mx-auto max-w-4xl px-5 text-center lg:px-8">
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
            Early Access
          </p>
          <h2 className="mt-4 font-serif text-4xl tracking-[-0.04em] text-neutral-950 md:text-6xl">
            Help shape the Creator Business OS.
          </h2>
          <p className="mx-auto mt-5 max-w-2xl text-lg leading-8 text-neutral-600">
            Join the KITSUNE AI waitlist for early access, beta testing,
            investor conversations, or brand and advertiser partnerships.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-4">
            <PrimaryButton onClick={() => openWaitlist("insights_page")}>
              Join Waitlist
            </PrimaryButton>
          </div>
        </div>
      </section>
    </>
  );
}

function AboutPage({ openWaitlist }) {
  return (
    <>
      <section className="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:px-8 lg:py-28">
        <div>
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
            About KITSUNE AI
          </p>
          <h1 className="mt-5 font-serif text-5xl leading-[0.92] tracking-[-0.04em] text-neutral-950 md:text-7xl">
            Built by people who understand the systems creators now have to
            navigate.
          </h1>
          <p className="mt-7 text-xl leading-9 text-neutral-600">
            KITSUNE AI sits close to the money flow: platform payouts, brand
            deal management, audience revenue, compliance records, invoicing,
            and future financial products.
          </p>
        </div>

        <div className="grid gap-5">
          <div className="rounded-[2.5rem] border border-white/70 bg-white/45 p-8 shadow-[0_20px_80px_rgba(0,0,0,0.06)] backdrop-blur-xl">
            <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
              Total Addressable Market
            </p>
            <div className="mt-5 font-serif text-7xl leading-none tracking-[-0.05em] text-neutral-950">
              $250B
            </div>
            <p className="mt-5 text-base leading-8 text-neutral-600">
              A global creator economy spanning platform payouts, brand
              investment, audience revenue, commerce, and the services creators
              need to operate as businesses.
            </p>
          </div>

          <div className="rounded-[2.5rem] border border-white/70 bg-white/45 p-8 shadow-[0_20px_80px_rgba(0,0,0,0.06)] backdrop-blur-xl">
            <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
              Addressable Flow
            </p>
            <div className="mt-5 font-serif text-7xl leading-none tracking-[-0.05em] text-neutral-950">
              $105B
            </div>
            <div className="mt-8 grid gap-3">
              <MarketFlowRow label="Platform payouts" value="$55B" />
              <MarketFlowRow label="Brand deals" value="$35B" />
              <MarketFlowRow label="Audience support" value="$15B" />
            </div>
          </div>
        </div>
      </section>

      <section className="border-t border-black/8 bg-white/35 py-20 backdrop-blur-sm">
        <div className="mx-auto max-w-7xl px-5 lg:px-8">
          <SectionHeader
            eyebrow="Leadership"
            title="Founder-market fit across media, brands, platforms, and operating infrastructure."
            body="KITSUNE AI combines creator-economy commercial depth with technology architecture built for repeatable creator workflows."
          />

          <div className="mt-12 grid gap-6 lg:grid-cols-2">
            <FounderCard
              name="Ali Imran Memon"
              role="Founder & CEO"
              points={[
                "23+ years across media, marketing, technology, and creator economy",
                "Worked inside the systems creators now have to navigate: brand budgets, media buying, platform monetization, and creator partnerships",
                "Helped scale Walee into one of Pakistan’s leading creator-economy platforms",
                "YouTube and Facebook Partner Program veteran"
              ]}
            />
            <FounderCard
              name="Agha Fasihullah"
              role="Co-Founder & COO"
              points={[
                "24+ years across content, marketing, media, and venture building",
                "Former Chief Commercial Officer at Interflow Group and Agency Head at GroupM",
                "Bridges content and influence with capital, demand, and scalable commercial systems",
                "Drives GTM, partnerships, and revenue pathways for KITSUNE AI’s creator business engine"
              ]}
            />
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto max-w-4xl px-5 text-center lg:px-8">
          <h2 className="font-serif text-4xl tracking-[-0.04em] text-neutral-950 md:text-6xl">
            Be part of the early Creator Business OS.
          </h2>
          <p className="mx-auto mt-5 max-w-2xl text-lg leading-8 text-neutral-600">
            Join the waitlist for early access, beta testing, investor
            conversations, or brand and advertiser partnerships.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-4">
            <PrimaryButton onClick={() => openWaitlist("about_page")}>
              Join Waitlist
            </PrimaryButton>
          </div>
        </div>
      </section>
    </>
  );
}

function MarketFlowRow({ label, value }) {
  return (
    <div className="flex items-center justify-between rounded-2xl border border-white/60 bg-white/40 px-4 py-3 backdrop-blur-xl">
      <span className="text-sm font-semibold text-black/55">{label}</span>
      <span className="text-lg font-bold tracking-tight text-black">
        {value}
      </span>
    </div>
  );
}

function FounderCard({ name, role, points }) {
  return (
    <div className="rounded-[2rem] border border-white/70 bg-white/45 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl">
      <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-neutral-500">
        {role}
      </p>
      <h3 className="mt-4 text-3xl font-bold tracking-tight text-neutral-950">
        {name}
      </h3>
      <div className="mt-6 grid gap-3">
        {points.map((point) => (
          <div
            key={point}
            className="rounded-2xl border border-white/60 bg-white/40 px-4 py-3 text-sm font-medium leading-6 text-black/60 backdrop-blur-xl"
          >
            {point}
          </div>
        ))}
      </div>
    </div>
  );
}

function LegalPage() {
  return (
    <>
      <section className="mx-auto max-w-7xl px-5 py-20 lg:px-8 lg:py-28">
        <div className="max-w-4xl">
          <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
            Terms & Privacy
          </p>
          <h1 className="mt-5 font-serif text-5xl leading-[0.92] tracking-[-0.04em] text-neutral-950 md:text-7xl">
            Clear rules for using KITSUNE AI.
          </h1>
          <p className="mt-7 max-w-3xl text-xl leading-9 text-neutral-600">
            This page explains the basic terms for using KITSUNE AI’s website,
            early access experience, waitlist, and related communications.
          </p>
          <p className="mt-4 text-sm text-neutral-500">Effective: May 2026</p>
        </div>
      </section>

      <section className="border-t border-black/8 bg-white/35 py-20 backdrop-blur-sm">
        <div className="mx-auto grid max-w-7xl gap-6 px-5 lg:grid-cols-[0.85fr_1.15fr] lg:px-8">
          <div className="rounded-[2rem] border border-white/70 bg-white/45 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl">
            <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
              Summary
            </p>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-neutral-950">
              KITSUNE AI is an early-stage creator business operating system.
            </h2>
            <p className="mt-5 text-base leading-8 text-neutral-600">
              By using this website, joining the waitlist, or engaging with
              KITSUNE AI communications, you agree to use the service
              responsibly and understand that early access features may evolve
              as the product develops.
            </p>
          </div>

          <div className="grid gap-6">
            <LegalBlock
              title="1. Use of this Website"
              text="This website is provided for informational, early access, and product communication purposes. You may browse the site, submit interest forms, and contact KITSUNE AI about the product, partnerships, or early testing opportunities."
            />
            <LegalBlock
              title="2. Early Access and Waitlist Participation"
              text="Joining the waitlist does not guarantee product access, timing, availability, or acceptance into any private testing program. KITSUNE AI may prioritize access based on creator fit, market, product readiness, operational requirements, or business priorities."
            />
            <LegalBlock
              title="3. Product Information"
              text="Descriptions of product features, workflows, dashboards, compliance tools, monetization tools, fintech readiness, and business operations functionality are provided to explain the intended direction of KITSUNE AI. Features may be modified, delayed, expanded, or removed as the product evolves."
            />
            <LegalBlock
              title="4. No Professional Advice"
              text="KITSUNE AI may help creators organize business information, operational records, compliance reminders, tax-readiness materials, invoices, payout records, and monetization data. The service does not provide legal, tax, accounting, investment, or financial advice. Creators should consult qualified professionals for decisions requiring regulated advice."
            />
            <LegalBlock
              title="5. User Submissions"
              text="When you submit your name, email, creator handle, website, role, interest type, or comments, you confirm that the information is accurate to the best of your knowledge and that you have the right to share it."
            />
            <LegalBlock
              title="6. Privacy and Data Use"
              text="KITSUNE AI may collect information you submit through forms, email, or early access communications. This may include your name, email address, creator handle, website, role, stated interests, and comments. This information is used to manage early access, evaluate fit, communicate launch information, and improve the KITSUNE AI experience."
            />
            <LegalBlock
              title="7. Communications"
              text="By submitting a waitlist form, you agree that KITSUNE AI may contact you about early access, beta testing, investor or partner conversations, brand opportunities, launch announcements, and related opportunities. You may request to stop receiving communications at any time."
            />
            <LegalBlock
              title="8. Third-Party Platforms"
              text="KITSUNE AI may reference or integrate with third-party platforms, including social networks, creator platforms, payment providers, analytics services, compliance resources, or publishing tools. KITSUNE AI is not responsible for the terms, policies, data practices, or availability of third-party services."
            />
            <LegalBlock
              title="9. Intellectual Property"
              text="The KITSUNE AI name, brand, logo, visual identity, website design, product concepts, interface concepts, copy, and related materials are owned by KITSUNE AI or its licensors. You may not copy, reproduce, modify, distribute, or use these materials without permission."
            />
            <LegalBlock
              title="10. Limitation of Liability"
              text="This website and any early access materials are provided on an as-is and as-available basis. KITSUNE AI does not guarantee uninterrupted availability, error-free operation, commercial outcomes, regulatory outcomes, revenue growth, or platform performance."
            />
            <LegalBlock
              title="11. Changes to these Terms"
              text="KITSUNE AI may revise these Terms & Privacy provisions as the product, website, and early access program evolve. Continued use of the website or participation in early access communications after revisions means you accept the revised terms."
            />
            <LegalBlock
              title="12. Contact"
              text="Questions about these Terms & Privacy provisions can be sent to hello@kitsuneai.co."
            />
          </div>
        </div>
      </section>
    </>
  );
}

function LegalBlock({ title, text }) {
  return (
    <div className="rounded-[2rem] border border-white/70 bg-white/45 p-8 shadow-[0_8px_32px_rgba(0,0,0,0.05)] backdrop-blur-xl">
      <h2 className="text-2xl font-bold tracking-tight text-neutral-950">
        {title}
      </h2>
      <p className="mt-4 text-base leading-8 text-neutral-600">{text}</p>
    </div>
  );
}

function WaitlistModal({ closeModal, sourcePage, pageUrl }) {
  const iframeSrc = `${TALLY_EMBED_BASE}&source=${encodeURIComponent(
    sourcePage || "unknown"
  )}&page_url=${encodeURIComponent(pageUrl || window.location.href)}`;

  const directUrl = `${TALLY_URL}?source=${encodeURIComponent(
    sourcePage || "unknown"
  )}&page_url=${encodeURIComponent(pageUrl || window.location.href)}`;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/35 px-3 py-4 backdrop-blur-md sm:px-4 sm:py-6">
      <div className="relative flex h-[92vh] w-full max-w-3xl flex-col overflow-hidden rounded-[1.5rem] border border-white/70 bg-[#FAF5F0]/96 shadow-[0_35px_120px_rgba(0,0,0,0.28)] backdrop-blur-2xl sm:rounded-[2rem]">
        <button
          onClick={closeModal}
          className="absolute right-3 top-3 z-20 flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-white/85 text-xl text-black shadow-sm transition hover:bg-white sm:right-4 sm:top-4 sm:h-10 sm:w-10"
          aria-label="Close waitlist form"
        >
          ×
        </button>

        <div className="shrink-0 border-b border-black/8 px-4 pb-4 pt-5 sm:px-8 sm:pt-6">
          <div className="flex items-center gap-3 pr-11 sm:pr-12">
            <img
              src={logos.app}
              alt="KITSUNE AI"
              className="h-11 w-11 shrink-0 rounded-xl object-cover shadow-[0_8px_20px_rgba(86,66,169,0.15)] sm:h-12 sm:w-12"
            />
            <div className="min-w-0">
              <p className="text-[9px] font-bold uppercase tracking-[0.22em] text-neutral-500 sm:text-[10px] sm:tracking-[0.25em]">
                Join Waitlist
              </p>
              <h2 className="text-xl font-bold leading-tight tracking-tight text-neutral-950 sm:text-2xl">
                Get early access to KITSUNE AI.
              </h2>
            </div>
          </div>
          <p className="mt-3 max-w-2xl text-xs leading-5 text-neutral-600 sm:mt-4 sm:text-sm sm:leading-6">
            Tell us who you are and what you’re interested in. Your submission
            is captured securely through our waitlist form.
          </p>
        </div>

        <div className="min-h-0 flex-1 overflow-hidden bg-white/25">
          <iframe
            src={iframeSrc}
            width="100%"
            height="100%"
            title="KITSUNE AI Waitlist"
            className="h-full min-h-0 w-full border-0"
            loading="lazy"
          />
        </div>

        <div className="shrink-0 border-t border-black/8 px-4 py-3 text-[11px] leading-5 text-neutral-500 sm:flex sm:items-center sm:justify-between sm:gap-3 sm:px-8 sm:py-4 sm:text-xs sm:leading-6">
          <span className="block">Trouble loading the form?</span>
          <a
            href={directUrl}
            target="_blank"
            rel="noreferrer"
            onClick={() =>
              trackEvent("waitlist_direct_opened", {
                source: sourcePage || "unknown"
              })
            }
            className="mt-1 block font-bold text-[#D9461D] underline-offset-4 hover:underline sm:mt-0"
          >
            Open waitlist form →
          </a>
        </div>
      </div>
    </div>
  );
}

function BackgroundDepth() {
  return (
    <>
      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
        <div className="animate-orb-1 absolute left-[-12%] top-[-14%] h-[620px] w-[620px] rounded-full bg-[#D9461D]/10 blur-[120px]" />
        <div className="animate-orb-2 absolute bottom-[-18%] right-[-14%] h-[720px] w-[720px] rounded-full bg-[#2337F1]/10 blur-[120px]" />
        <div className="animate-orb-3 absolute right-[18%] top-[18%] h-[520px] w-[520px] rounded-full bg-[#5642A9]/10 blur-[120px]" />
        <div className="animate-orb-4 absolute bottom-[8%] left-[18%] h-[480px] w-[480px] rounded-full bg-[#D9461D]/8 blur-[120px]" />
      </div>

      <div
        className="pointer-events-none fixed inset-0 z-0 opacity-5"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E\")"
        }}
      />
    </>
  );
}

function PrimaryButton({
  children,
  onClick,
  as = "button",
  type = "button",
  href = "#"
}) {
  const className =
    "inline-flex items-center justify-center rounded-full bg-[#D9461D] px-6 py-3.5 text-sm font-semibold text-white shadow-[0_0_15px_rgba(217,70,29,0.4)] transition hover:-translate-y-0.5 hover:bg-[#c83f1a]";

  if (as === "button") {
    return (
      <button type={type} onClick={onClick} className={className}>
        {children}
      </button>
    );
  }

  return (
    <a href={href} onClick={onClick} className={className}>
      {children}
    </a>
  );
}

function PrecisionAreaChart() {
  return (
    <svg viewBox="0 0 360 150" className="mt-3 h-[120px] w-full">
      <defs>
        <linearGradient id="premiumLine" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#D9461D" />
          <stop offset="52%" stopColor="#5642A9" />
          <stop offset="100%" stopColor="#2337F1" />
        </linearGradient>
        <linearGradient id="premiumFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(86,66,169,0.18)" />
          <stop offset="100%" stopColor="rgba(86,66,169,0.00)" />
        </linearGradient>
      </defs>

      {[28, 58, 88, 118].map((y) => (
        <line
          key={y}
          x1="0"
          y1={y}
          x2="360"
          y2={y}
          stroke="rgba(0,0,0,0.04)"
          strokeWidth="1"
        />
      ))}

      <path
        d="M8,125 C34,120 48,105 72,98 C96,90 116,96 140,77 C160,61 181,70 202,51 C226,29 249,42 270,30 C302,12 326,25 350,14 L350,140 L8,140 Z"
        fill="url(#premiumFill)"
      />

      <path
        d="M8,125 C34,120 48,105 72,98 C96,90 116,96 140,77 C160,61 181,70 202,51 C226,29 249,42 270,30 C302,12 326,25 350,14"
        fill="none"
        stroke="url(#premiumLine)"
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      {[
        22, 42, 62, 82, 102, 122, 142, 162, 182, 202, 222, 242, 262, 282,
        302, 322
      ].map((x, i) => (
        <rect
          key={x}
          x={x}
          y={112 - ((i * 9) % 42)}
          width="2"
          height={16 + ((i * 7) % 30)}
          rx="1"
          fill="rgba(35,55,241,0.12)"
        />
      ))}

      <circle cx="350" cy="14" r="5" fill="#D9461D" />
    </svg>
  );
}

function RevenueDonut() {
  const size = 80;
  const radius = 32;
  const circumference = 2 * Math.PI * radius;

  return (
    <div className="relative h-[80px] w-[80px]">
      <svg
        viewBox={`0 0 ${size} ${size}`}
        className="h-[80px] w-[80px] -rotate-90"
      >
        <circle
          cx="40"
          cy="40"
          r={radius}
          fill="none"
          stroke="rgba(0,0,0,0.06)"
          strokeWidth="6"
        />
        <circle
          cx="40"
          cy="40"
          r={radius}
          fill="none"
          stroke="#1425E3"
          strokeWidth="6"
          strokeLinecap="round"
          strokeDasharray={`${circumference * 0.38} ${circumference}`}
        />
        <circle
          cx="40"
          cy="40"
          r={radius}
          fill="none"
          stroke="#5642A9"
          strokeWidth="6"
          strokeLinecap="round"
          strokeDasharray={`${circumference * 0.28} ${circumference}`}
          strokeDashoffset={-circumference * 0.42}
        />
        <circle
          cx="40"
          cy="40"
          r={radius}
          fill="none"
          stroke="#D9461D"
          strokeWidth="6"
          strokeLinecap="round"
          strokeDasharray={`${circumference * 0.18} ${circumference}`}
          strokeDashoffset={-circumference * 0.73}
        />
      </svg>

      <div className="absolute inset-0 flex items-center justify-center text-center">
        <div>
          <div className="mt-1 text-lg font-bold leading-none text-black">4</div>
          <div className="mt-0.5 text-[7px] font-bold uppercase tracking-[0.16em] text-black/40">
            streams
          </div>
        </div>
      </div>
    </div>
  );
}

function MixRow({ color, label, value }) {
  return (
    <div className="flex items-center justify-between py-1.5 text-sm">
      <div className="flex items-center gap-2">
        <span
          className="h-2 w-2 rounded-full"
          style={{ backgroundColor: color }}
        />
        <span className="font-medium text-black/60">{label}</span>
      </div>
      <span className="font-bold text-black">{value}</span>
    </div>
  );
}

function CheckRow({ text, done }) {
  return (
    <div className="flex items-center justify-between py-1.5 text-sm">
      <span className="font-medium text-black/60">{text}</span>
      <span
        className={`flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold ${
          done ? "bg-green-100 text-green-700" : "bg-orange-100 text-orange-700"
        }`}
      >
        {done ? "✓" : "!"}
      </span>
    </div>
  );
}

function TinyChip({ children }) {
  return (
    <span className="rounded-md bg-black/5 px-2 py-1 text-[10px] font-bold uppercase tracking-widest text-black/50">
      {children}
    </span>
  );
}

function SectionHeader({ eyebrow, title, body }) {
  return (
    <div className="max-w-3xl">
      <p className="text-xs font-bold uppercase tracking-[0.28em] text-neutral-500">
        {eyebrow}
      </p>
      <h2 className="mt-4 font-serif text-4xl tracking-[-0.03em] text-neutral-950 sm:text-5xl">
        {title}
      </h2>
      <p className="mt-5 text-lg leading-8 text-neutral-600">{body}</p>
    </div>
  );
}

function Footer({ goToPage, openWaitlist }) {
  return (
    <footer className="border-t border-black/8">
      <div className="mx-auto grid max-w-7xl gap-10 px-5 py-10 md:grid-cols-[1.1fr_0.9fr_0.9fr_0.9fr] lg:px-8">
        <div>
          <div className="flex items-center">
            <button onClick={() => goToPage("home")}>
              <img
                src={logos.wide}
                alt="KITSUNE AI"
                className="h-10 w-auto object-contain"
              />
            </button>
          </div>
          <p className="mt-4 max-w-sm text-sm leading-7 text-neutral-600">
            Creator OS: better content, clearer monetization, smoother business
            operations.
          </p>
        </div>

        <div>
          <h3 className="text-sm font-semibold text-neutral-900">Product</h3>
          <ul className="mt-4 space-y-3 text-sm text-neutral-600">
            <li>
              <button onClick={() => goToPage("content")}>Content</button>
            </li>
            <li>
              <button onClick={() => goToPage("monetization")}>
                Monetization
              </button>
            </li>
            <li>
              <button onClick={() => goToPage("operations")}>Operations</button>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="text-sm font-semibold text-neutral-900">Company</h3>
          <ul className="mt-4 space-y-3 text-sm text-neutral-600">
            <li>
              <button onClick={() => goToPage("blog")}>Insights</button>
            </li>
            <li>
              <button onClick={() => goToPage("about")}>About</button>
            </li>
            <li>
              <button onClick={() => goToPage("legal")}>
                Terms & Privacy
              </button>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="text-sm font-semibold text-neutral-900">
            Early Access
          </h3>
          <p className="mt-4 text-sm leading-7 text-neutral-600">
            Join the waitlist for early access, beta testing, investor
            conversations, or brand partnerships.
          </p>
          <div className="mt-4">
            <PrimaryButton onClick={() => openWaitlist("footer")}>
              Join Waitlist
            </PrimaryButton>
          </div>
        </div>
      </div>
    </footer>
  );
}

const rootElement = document.getElementById("root");

if (rootElement) {
  rootElement.innerHTML = "";
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
}