Margin Note Stats

"use client";

import * as React from "react";

import { MarginNote, type MarginNoteNote } from "@/components/ui/margin-note";

/* ── Content ─────────────────────────────────────────────────
 * Everything you'd change to make the section yours: the copy,
 * the series the chart reads with its notes, and the three
 * numbers under it.
 * ─────────────────────────────────────────────────────────── */

/** The one accent: the reading line, the notes and their markers. */
const ACCENT = { light: "#5b54d6", dark: "#a49dff" };

const EYEBROW = "Fare watch";
const HEADLINE = "We read the fares so you don't have to.";
const SUBLINE =
  "Meander checks every route on your trip twice a day and tells you why a price moved, not just that it did. Here's the last three months to Porto Lume.";

const CHART = {
  title: "Return fares to Porto Lume",
  caption: "Lowest economy fare, every five days",
  status: "Watching",
  /** What screen readers hear before the values. */
  label: "Return fares to Porto Lume over the last 90 days",
};

const DAYS = [
  "Aug 1", "Aug 6", "Aug 11", "Aug 16", "Aug 21", "Aug 26", "Aug 31", "Sep 5", "Sep 10",
  "Sep 15", "Sep 20", "Sep 25", "Sep 30", "Oct 5", "Oct 10", "Oct 15", "Oct 20", "Oct 25",
];
const FARES = [184, 179, 188, 176, 137, 131, 134, 140, 158, 247, 262, 236, 152, 146, 149, 168, 189, 214];

const NOTES: MarginNoteNote[] = [
  { at: 4, title: "A second daily flight", body: "Lumeair added a morning departure; fares fell within a week.", delta: "−22%" },
  { at: 9, to: 11, title: "Harvest festival", body: "Fares rose for the wine harvest weekend and the week around it.", delta: "+41%" },
  { at: 15, to: 17, title: "Inside 14 days", body: "From two weeks out, this route gets dearer by about 3% a day.", delta: "+3%/day" },
];
const SUMMARY = "Book by Thursday: from 14 days out this route only gets dearer.";

const formatFare = (value: number) => `€${Math.round(value)}`;

const STATS = [
  { value: "€74", label: "saved on the average return fare, against booking on the day you plan" },
  { value: "2×", label: "a day, every route on your trip is checked again" },
  { value: "9 days", label: "ahead: the alert that tells you when to book" },
];

/* ── Section ─────────────────────────────────────────────── */

export function MarginNoteStats() {
  return (
    <section
      aria-labelledby="margin-note-stats-title"
      style={{ "--accent-light": ACCENT.light, "--accent-dark": ACCENT.dark } as React.CSSProperties}
      className="bg-[#f3f1ec] text-zinc-950 dark:bg-zinc-950 dark:text-white"
    >
      <div className="mx-auto max-w-6xl px-6 py-24 sm:py-32">
        <div className="grid items-end gap-6 lg:grid-cols-[1.2fr_1fr] lg:gap-16">
          <div>
            <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">{EYEBROW}</p>
            <h2
              id="margin-note-stats-title"
              className="mt-3 max-w-[16ch] text-4xl/[1.05] font-medium tracking-[-0.035em] text-balance sm:text-5xl/[1.02]"
            >
              {HEADLINE}
            </h2>
          </div>
          <p className="max-w-md text-base/7 text-pretty text-zinc-600 lg:pb-1.5 dark:text-zinc-400">{SUBLINE}</p>
        </div>

        <div className="mt-12 rounded-[2rem] bg-white p-5 shadow-sm ring-1 ring-zinc-950/[0.06] sm:p-8 dark:bg-zinc-900 dark:ring-white/10">
          <div className="mb-6 flex flex-wrap items-start justify-between gap-3">
            <div>
              <h3 className="text-[15px] font-medium tracking-tight">{CHART.title}</h3>
              <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">{CHART.caption}</p>
            </div>
            <p className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-400">
              <span aria-hidden className="size-1.5 rounded-full bg-emerald-500" />
              {CHART.status}
            </p>
          </div>
          <MarginNote
            label={CHART.label}
            data={FARES}
            labels={DAYS}
            notes={NOTES}
            summary={SUMMARY}
            format={formatFare}
            className="[--margin-note-accent:var(--accent-light)] dark:[--margin-note-accent:var(--accent-dark)]"
          />
        </div>

        <dl className="mt-10 grid gap-8 border-t border-zinc-950/10 pt-8 sm:grid-cols-3 dark:border-white/10">
          {STATS.map((stat) => (
            <div key={stat.value} className="flex flex-col">
              <dt className="order-2 mt-2 max-w-60 text-sm/6 text-pretty text-zinc-600 dark:text-zinc-400">{stat.label}</dt>
              <dd className="order-1 text-4xl font-medium tracking-[-0.035em] tabular-nums">{stat.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}