Story

import {
  Avatar,
  AvatarFallback,
  Badge,
  Card,
  CardContent,
} from "@cronus-ui/ui";
import { Quote } from "lucide-react";

const storyStats = [
  { label: "Founded in Copenhagen", value: "2019" },
  { label: "Teammates in 12 countries", value: "48" },
  { label: "Teams building on Aurora", value: "4,000+" },
  { label: "Uptime, trailing 12 months", value: "99.99%" },
] as const;

const milestones = [
  {
    year: "2019",
    title: "A weekend prototype",
    description:
      "Aurora begins as a side project — a faster way to ship internal dashboards without fighting the front end.",
  },
  {
    year: "2021",
    title: "Seed round",
    description:
      "A $4.5M seed led by Meridian Ventures turns the prototype into a product — and a team of nine.",
  },
  {
    year: "2023",
    title: "Aurora 2.0",
    description:
      "A rebuilt editor, live theming, and multiplayer editing bring in the first 1,000 paying teams.",
  },
  {
    year: "2025",
    title: "Series B",
    description:
      "$32M to go deeper on the platform, open the Lisbon hub, and keep the free tier generous.",
  },
  {
    year: "2026",
    title: "4,000 teams and counting",
    description: "Aurora powers products at startups and public companies in 60 countries.",
  },
] as const;

export function AboutStoryBlock() {
  return (
    <section aria-label="About Aurora" className="mx-auto flex w-full max-w-4xl flex-col gap-12">
      <header className="flex max-w-2xl flex-col gap-4">
        <Badge variant="primary" className="w-fit">
          Our story
        </Badge>
        <h2 className="font-display text-3xl font-semibold leading-tight tracking-tight text-fg sm:text-4xl">
          We believe great software should feel calm, not clever.
        </h2>
        <p className="text-lg leading-8 text-fg-secondary">
          Aurora started with a simple frustration: the tools teams relied on every day demanded
          more attention than the work itself. We build the opposite.
        </p>
      </header>

      <div className="grid grid-cols-2 gap-6 lg:grid-cols-4">
        {storyStats.map((stat) => (
          <div key={stat.label} className="flex flex-col gap-1">
            <span className="font-display text-3xl font-semibold text-fg">{stat.value}</span>
            <span className="text-sm text-fg-secondary">{stat.label}</span>
          </div>
        ))}
      </div>

      <Card className="shadow-lg">
        <CardContent className="flex flex-col gap-6">
          <Quote className="size-8 text-primary" aria-hidden="true" />
          <blockquote className="font-display text-2xl font-medium leading-snug text-fg">
            “We don’t ship features to win demos. We ship them so a designer in Lagos or a PM in
            Porto ends the day a little less tired.”
          </blockquote>
          <div className="flex items-center gap-3">
            <Avatar className="size-10">
              <AvatarFallback className="bg-surface-overlay text-sm text-fg-secondary">
                AO
              </AvatarFallback>
            </Avatar>
            <div className="flex flex-col">
              <span className="text-sm font-medium text-fg">Amara Okafor</span>
              <span className="text-xs text-fg-tertiary">Co-founder &amp; CEO</span>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="flex flex-col gap-6">
        <h3 className="font-display text-xl font-semibold text-fg">Milestones</h3>
        <ol className="flex flex-col">
          {milestones.map((milestone, index) => (
            <li key={milestone.year} className="flex gap-4">
              <div className="flex flex-col items-center">
                <span
                  aria-hidden="true"
                  className="mt-1.5 size-2.5 shrink-0 rounded-full bg-primary"
                />
                {index < milestones.length - 1 ? (
                  <span aria-hidden="true" className="w-px flex-1 bg-border" />
                ) : null}
              </div>
              <div className="flex flex-col gap-1 pb-8">
                <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
                  {milestone.year}
                </span>
                <span className="font-medium text-fg">{milestone.title}</span>
                <p className="text-sm leading-6 text-fg-secondary">{milestone.description}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}