import Link from "next/link";

export default function Home() {
  return (
    <div className="pt-20">
      <Hero />
      <Problem />
      <OneQuery />
      <HowItWorks />
      <Signals />
      <GetStarted />
    </div>
  );
}

function Hero() {
  return (
    <section className="relative mx-auto max-w-5xl px-6 pb-32 pt-24 text-center">
      <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-border px-4 py-1.5">
        <span className="font-mono text-xs uppercase tracking-widest text-accent">
          Open Source
        </span>
        <span className="text-xs text-subtle">MIT Licensed</span>
      </div>

      <h1 className="mx-auto max-w-4xl font-serif text-5xl font-bold leading-tight tracking-tight md:text-7xl md:leading-[1.1]">
        Ranking is not a feature.
        <br />
        It is a{" "}
        <span className="text-accent">primitive.</span>
      </h1>

      <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-muted md:text-xl">
        Replace Elasticsearch + Redis + Kafka + feature store + vector DB +
        ranking service with a single process, a single query, and a single
        operational model.
      </p>

      <div className="mx-auto mt-12 max-w-md">
        <div className="rounded-lg border border-border bg-code-bg px-6 py-4">
          <code className="font-mono text-sm text-code-text">
            cargo add tidaldb
          </code>
        </div>
      </div>

      <div className="mt-8 flex items-center justify-center gap-4">
        <a
          href="https://github.com/orchard9/tidalDB"
          target="_blank"
          rel="noopener noreferrer"
          className="rounded-full bg-foreground px-6 py-2.5 text-sm font-medium text-background transition-colors hover:bg-foreground/90"
        >
          View on GitHub
        </a>
        <a
          href="/vision"
          className="rounded-full border border-border px-6 py-2.5 text-sm font-medium text-muted transition-colors hover:border-accent hover:text-foreground"
        >
          Read the Vision
        </a>
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section className="border-t border-border">
      <div className="mx-auto max-w-3xl px-6 py-32">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          The Problem
        </p>
        <h2 className="font-serif text-3xl font-bold leading-tight md:text-4xl">
          Every content platform builds the same distributed system from
          scratch.
        </h2>
        <p className="mt-6 text-lg leading-relaxed text-muted">
          Elasticsearch for retrieval. Redis for hot signals. Kafka for event
          ingestion. A feature store for user profiles. A vector database for
          semantic search. A ranking service to stitch it all together.
        </p>
        <p className="mt-4 text-lg leading-relaxed text-muted">
          The seams between these systems are where correctness dies &mdash;
          stale signals, inconsistent ranking, cache invalidation bugs, and an
          operational burden that consumes entire engineering teams.
        </p>

        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {[
            { count: "6", label: "Systems to operate" },
            { count: "N", label: "Seams where data drifts" },
            { count: "0", label: "Of them built for ranking" },
          ].map((stat) => (
            <div
              key={stat.label}
              className="rounded-lg border border-border bg-surface p-6 text-center"
            >
              <p className="font-serif text-3xl font-bold text-accent">
                {stat.count}
              </p>
              <p className="mt-1 text-sm text-muted">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OneQuery() {
  return (
    <section className="border-t border-border">
      <div className="mx-auto max-w-3xl px-6 py-32">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          One Query
        </p>
        <h2 className="font-serif text-3xl font-bold leading-tight md:text-4xl">
          This is what 6 systems currently produce.
        </h2>
        <p className="mt-6 text-lg leading-relaxed text-muted">
          Candidate retrieval, filtering, personalized ranking, and diversity
          enforcement &mdash; in a single operation.
        </p>

        <div className="mt-10 overflow-hidden rounded-lg border border-border bg-code-bg">
          <div className="flex items-center gap-2 border-b border-border px-4 py-3">
            <span className="h-3 w-3 rounded-full bg-[#333]" />
            <span className="h-3 w-3 rounded-full bg-[#333]" />
            <span className="h-3 w-3 rounded-full bg-[#333]" />
          </div>
          <pre className="overflow-x-auto p-6 font-mono text-sm leading-relaxed text-code-text">
            {`RETRIEVE items
FOR USER @user_id
CONTEXT feed
USING PROFILE for_you
FILTER unseen, unblocked, format:video, duration:short
DIVERSITY max_per_creator:2, format_mix:true
LIMIT 50`}
          </pre>
        </div>

        <p className="mt-6 text-sm text-subtle">
          One query. One process. No network hops, no stale caches, no
          distributed coordination.
        </p>
      </div>
    </section>
  );
}

function HowItWorks() {
  const primitives = [
    {
      title: "Entities",
      description:
        "Items, Users, Creators. Each with metadata, an embedding slot, and an attached signal ledger. Indexed for full-text, filtered, and vector search.",
    },
    {
      title: "Signals",
      description:
        "Typed, timestamped event streams with native decay, velocity, and windowed aggregation. Not fields you compute — primitives the database maintains.",
    },
    {
      title: "Ranking Profiles",
      description:
        "Named, versioned scoring functions declared in schema. Reference signals, relationships, recency curves, and diversity rules. Swap at query time by name.",
    },
    {
      title: "Diversity",
      description:
        "Post-scoring constraints enforced by the database. Max per creator, format mix, topic diversity. Not application logic — a query parameter.",
    },
  ];

  return (
    <section className="border-t border-border">
      <div className="mx-auto max-w-3xl px-6 py-32">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          Primitives
        </p>
        <h2 className="font-serif text-3xl font-bold leading-tight md:text-4xl">
          Built for how ranking actually works.
        </h2>
        <p className="mt-6 text-lg leading-relaxed text-muted">
          Existing databases bolt ranking on top. tidalDB models it as first-class
          infrastructure.
        </p>

        <div className="mt-12 space-y-8">
          {primitives.map((p) => (
            <div key={p.title} className="border-l-2 border-border pl-6">
              <h3 className="font-mono text-sm font-medium uppercase tracking-wide text-foreground">
                {p.title}
              </h3>
              <p className="mt-2 text-muted">{p.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Signals() {
  return (
    <section className="border-t border-border">
      <div className="mx-auto max-w-3xl px-6 py-32">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          Feedback Loop
        </p>
        <h2 className="font-serif text-3xl font-bold leading-tight md:text-4xl">
          Engagement is a write path, not an afterthought.
        </h2>
        <p className="mt-6 text-lg leading-relaxed text-muted">
          When a user views, likes, skips, or hides content, the signal is
          written to the database. The item&apos;s signal ledger, the user&apos;s
          preference vector, and the relationship weight between user and creator
          update atomically. The next query reflects this immediately.
        </p>

        <div className="mt-10 overflow-hidden rounded-lg border border-border bg-code-bg">
          <div className="flex items-center gap-2 border-b border-border px-4 py-3">
            <span className="h-3 w-3 rounded-full bg-[#333]" />
            <span className="h-3 w-3 rounded-full bg-[#333]" />
            <span className="h-3 w-3 rounded-full bg-[#333]" />
          </div>
          <pre className="overflow-x-auto p-6 font-mono text-sm leading-relaxed text-code-text">
            {`db.signal(Signal {
    kind: "view",
    item: "item_abc",
    user: "user_123",
    timestamp: Utc::now(),
    weight: 1.0,
})?;

// The next query — even 100ms later —
// reflects the updated state.`}
          </pre>
        </div>

        <p className="mt-8 text-lg leading-relaxed text-muted">
          No Kafka consumer to lag. No feature store sync to schedule. No cache
          to invalidate. Negative signals &mdash; skips, hides, blocks &mdash;
          are equal citizens.
        </p>
      </div>
    </section>
  );
}

function GetStarted() {
  return (
    <section className="border-t border-border">
      <div className="mx-auto max-w-3xl px-6 py-32 text-center">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          Get Started
        </p>
        <h2 className="font-serif text-3xl font-bold leading-tight md:text-4xl">
          One database. One query. One answer.
        </h2>
        <p className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-muted">
          tidalDB is open source, embeddable, and purpose-built for the
          personalized content ranking problem.
        </p>

        <div className="mx-auto mt-10 max-w-md">
          <div className="rounded-lg border border-border bg-code-bg px-6 py-4">
            <code className="font-mono text-sm text-code-text">
              cargo add tidaldb
            </code>
          </div>
        </div>

        <div className="mt-8 flex items-center justify-center gap-4">
          <a
            href="https://github.com/orchard9/tidalDB"
            target="_blank"
            rel="noopener noreferrer"
            className="rounded-full bg-foreground px-6 py-2.5 text-sm font-medium text-background transition-colors hover:bg-foreground/90"
          >
            GitHub
          </a>
          <Link
            href="/blog"
            className="rounded-full border border-border px-6 py-2.5 text-sm font-medium text-muted transition-colors hover:border-accent hover:text-foreground"
          >
            Read the Blog
          </Link>
        </div>
      </div>
    </section>
  );
}
