import { AboutTemplate } from "@/components/ui/about-template"
import { BlockEm } from "@/components/ui/block-concept"

const nav = (current: string) =>
  [
    { label: "Product", href: "#product" },
    { label: "Customers", href: "#customers" },
    { label: "Blog", href: "#blog" },
    { label: "About", href: "#about" },
    { label: "Contact", href: "#contact" },
  ].map((link) => ({ ...link, current: link.label.toLowerCase() === current }));

const signIn = { label: "Sign in", href: "#" };

const frame = "h-[720px] w-full overflow-auto rounded-[14px] shadow-[0_0_0_1px_var(--border)]";

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

export function AboutDemo() {
  return (
    <div className={frame}>
      <AboutTemplate
        brand="Halden"
        nav={nav("about")}
        signIn={signIn}
        primary={heroes.primary!}
        intro={{ eyebrow: "About Halden", title: <>Finance teams should <BlockEm>review</BlockEm>, not search</>, lead: "We started Halden after watching good accountants spend the first week of every month matching bank lines by hand. We build the tool we wanted then." }}
        stats={[
          { value: "1,900", label: "finance teams close with Halden" },
          { value: "1.8 days", label: "median close, down from 6.4" },
          { value: "€41bn", label: "matched in the last twelve months" },
          { value: "14", label: "people in Lisbon and London" },
        ]}
        story={{
          title: "How we got here",
          body: (
            <>
              <p>Joana and Tom met at a freight company where the close took nine days. They wrote the first matching rules in a spreadsheet, then in a script, then in what became Halden.</p>
              <p>We are funded by our customers and a small seed round, and we intend to stay independent. Every feature starts with a finance team that asked for it.</p>
            </>
          ),
          milestones: [
            { year: "2022", title: "First rules in a spreadsheet", detail: "Built for one freight company's close." },
            { year: "2023", title: "Halden opens to ten teams", detail: "Xero and QuickBooks in both directions." },
            { year: "2024", title: "Lisbon office", detail: "Customer team and engineering under one roof." },
            { year: "2026", title: "NetSuite two-way sync", detail: "Our most requested feature, three years running." },
          ],
        }}
        values={[
          { title: "A person answers", detail: "Support is the people who build the product. No tiers, no bots, a reply within a working day." },
          { title: "Never guess with money", detail: "Halden suggests; people approve. Large entries always wait for a human." },
          { title: "Write it down", detail: "Decisions, incidents and pricing changes are public in our changelog and status page." },
          { title: "Small on purpose", detail: "Fourteen people, one product. We hire slowly and keep teams small enough to sit at one table." },
        ]}
        team={team}
        cta={{ ...ctas, eyebrow: "Work with us", title: "We are hiring a second support lead.", primary: { label: "See open roles", href: "#careers" }, reassurance: "Lisbon or London · four days a week in the office" }}
        footer={footers}
      />
    </div>
  );
}