import Link from "next/link";

export default function Vision() {
  return (
    <div className="pt-20">
      <section className="mx-auto max-w-3xl px-6 py-24">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          Vision
        </p>
        <h1 className="font-serif text-4xl font-bold leading-tight md:text-5xl">
          A database for the personalized content ranking problem.
        </h1>
        <p className="mt-6 text-lg leading-relaxed text-muted">
          Every platform that serves personalized content eventually builds the
          same distributed system from scratch. We are building the database
          that replaces it.
        </p>
      </section>

      <section className="border-t border-border">
        <div className="mx-auto max-w-3xl px-6 py-24">
          <h2 className="font-serif text-3xl font-bold leading-tight">
            The thesis
          </h2>
          <p className="mt-6 text-lg leading-relaxed text-muted">
            Ranking is not a feature you bolt onto a general-purpose database. It
            is a primitive that belongs in the storage engine. Decay, velocity,
            windowed aggregation, diversity enforcement, feedback loops &mdash;
            these are not application logic. They are database operations.
          </p>
          <p className="mt-4 text-lg leading-relaxed text-muted">
            A database that models signals as first-class types, understands
            temporal decay natively, and executes ranking profiles as query
            operations can replace six systems with one.
          </p>
        </div>
      </section>

      <section className="border-t border-border">
        <div className="mx-auto max-w-3xl px-6 py-24">
          <h2 className="font-serif text-3xl font-bold leading-tight">
            What tidalDB models
          </h2>
          <div className="mt-10 space-y-8">
            <div className="border-l-2 border-border pl-6">
              <h3 className="font-mono text-sm font-medium uppercase tracking-wide">
                Entities
              </h3>
              <p className="mt-2 text-muted">
                Items, Users, Creators. Each with metadata, an embedding slot
                for vector search, and an attached signal ledger. Full-text
                indexed, filtered, and ANN-queryable.
              </p>
            </div>
            <div className="border-l-2 border-border pl-6">
              <h3 className="font-mono text-sm font-medium uppercase tracking-wide">
                Signals
              </h3>
              <p className="mt-2 text-muted">
                Views, likes, skips, hides, completions. Typed event streams
                with native decay, velocity, and windowed aggregation. You
                declare a signal type and query its 7-day velocity at ranking
                time. No pre-computation required.
              </p>
            </div>
            <div className="border-l-2 border-border pl-6">
              <h3 className="font-mono text-sm font-medium uppercase tracking-wide">
                Relationships
              </h3>
              <p className="mt-2 text-muted">
                Follows, blocks, interactions. Weighted, directional edges
                between entities. Traversable in queries for social graph
                scoping, blocked-creator exclusion, and collaborative filtering.
              </p>
            </div>
            <div className="border-l-2 border-border pl-6">
              <h3 className="font-mono text-sm font-medium uppercase tracking-wide">
                Ranking Profiles
              </h3>
              <p className="mt-2 text-muted">
                Named, versioned scoring functions that live in the database.
                Combine signal weights, relationship boosts, recency curves, and
                diversity rules. Swap profiles at query time by name. A/B test
                by version.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="border-t border-border">
        <div className="mx-auto max-w-3xl px-6 py-24">
          <h2 className="font-serif text-3xl font-bold leading-tight">
            Design principles
          </h2>
          <div className="mt-10 space-y-6">
            {[
              {
                title: "Temporal decay is a type, not a formula you write.",
                text: "Signal half-lives are declared in schema. The database applies them at query time.",
              },
              {
                title: "Negative signals are equal citizens.",
                text: "Skips, hides, blocks, downvotes — these are data, not the absence of positive engagement. They belong in the ranking function.",
              },
              {
                title: "All sort modes are native.",
                text: "Trending, hot, rising, controversial, hidden gems, shuffle — built-in, not formulas the application implements.",
              },
              {
                title: "Diversity is a query constraint.",
                text: '"No more than 2 items per creator" does not belong in your API layer. It belongs in the query.',
              },
              {
                title: "The write path and read path are one system.",
                text: "Engagement events and ranking queries share a storage model and signal ledger. No ETL between them.",
              },
              {
                title: "Single-node first.",
                text: "Embeddable. Runs in your process. Scales vertically before horizontally. Distribution is a later problem.",
              },
            ].map((principle) => (
              <div key={principle.title}>
                <p className="font-medium text-foreground">{principle.title}</p>
                <p className="mt-1 text-muted">{principle.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t border-border">
        <div className="mx-auto max-w-3xl px-6 py-24">
          <h2 className="font-serif text-3xl font-bold leading-tight">
            What tidalDB is not
          </h2>
          <div className="mt-8 space-y-4 text-lg text-muted">
            <p>
              Not a general-purpose document store. Not a replacement for
              PostgreSQL. Not trying to win the NewSQL wars.
            </p>
            <p>
              Not schema-free. Strong opinions about data shape enable strong
              guarantees about ranking correctness.
            </p>
            <p>
              Not an embedding generator. tidalDB retrieves and ranks over
              vectors. You bring your model.
            </p>
            <p>
              Not cloud-native first. Embeddable first. One process, one binary,
              your application.
            </p>
          </div>
        </div>
      </section>

      <section className="border-t border-border">
        <div className="mx-auto max-w-3xl px-6 py-24 text-center">
          <h2 className="font-serif text-3xl font-bold leading-tight">
            Open source.
          </h2>
          <p className="mt-4 text-lg text-muted">
            tidalDB is MIT licensed. Browse the code or read the engineering notes.
          </p>
          <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"
            >
              Notes
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}
