import { ArrowRight } from "lucide-react";

/* Brand colour only. Add once to globals.css:
@keyframes breathe { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.08); opacity: 1; } }
*/

const links = [
  { label: "Selected work", href: "/work", arrow: true },
  { label: "Studio", href: "/studio" },
  { label: "Start a project", href: "/contact" },
];

export function HeroDuotone() {
  return (
    <section aria-labelledby="duo-title" className="relative isolate overflow-hidden bg-bg px-5 pb-24 pt-5 font-sans text-fg sm:px-10">
      <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden bg-[color-mix(in_srgb,var(--tst-primary)_4%,var(--tst-bg))]">
        <span className="absolute -right-[20%] -top-[40%] aspect-square w-[max(72%,460px)] rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_66%,transparent),color-mix(in_srgb,var(--tst-primary)_22%,transparent)_58%,transparent)] will-change-transform animate-[breathe_11s_ease-in-out_infinite_alternate] motion-reduce:animate-none" />
        <span className="absolute -bottom-[60%] -left-[24%] aspect-square w-[max(64%,420px)] rounded-full bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_34%,transparent),transparent)] will-change-transform animate-[breathe_14s_ease-in-out_-5s_infinite_alternate] motion-reduce:animate-none" />
      </div>

      <header className="mx-auto mb-16 flex max-w-[1080px] flex-wrap justify-between gap-x-5 gap-y-1.5 border-b border-fg/15 pb-3.5 text-[13px] text-fg-muted sm:mb-28">
        <b className="font-semibold tracking-tight text-fg">Atelier Vos</b>
        <span>Architecture &amp; interiors — Rotterdam</span>
      </header>

      <div className="mx-auto max-w-[1080px]">
        <h1 id="duo-title" className="max-w-[12ch] text-balance text-[clamp(40px,8vw,100px)] font-light leading-[.98] tracking-[-0.055em] animate-rise motion-reduce:animate-none">
          Buildings that age well, and <span className="text-primary">rooms that feel it.</span>
        </h1>
        <div className="mt-8 grid gap-6 md:mt-16 md:grid-cols-[minmax(0,380px)_1fr] md:items-end animate-rise [animation-delay:100ms] motion-reduce:animate-none">
          <p className="text-pretty text-[15px] leading-relaxed text-fg-muted">
            A small studio designing homes, schools and workshops in brick, timber and daylight since 2009.
          </p>
          <nav aria-label="Studio" className="flex flex-wrap gap-x-6 gap-y-2 text-sm md:justify-end">
            {links.map((l) => (
              <a key={l.label} href={l.href} className="inline-flex items-center gap-1.5 border-b border-fg/30 pb-0.5 transition hover:border-fg">
                {l.label} {l.arrow && <ArrowRight className="size-3.5" aria-hidden />}
              </a>
            ))}
          </nav>
        </div>
      </div>
    </section>
  );
}