import Image from "next/image";
import type { CSSProperties } from "react";
import conversation from "@/assets/visuals/standing-desk-conversation.jpg";
import { HeroBackdrop } from "@/components/home/HeroBackdrop";
import { SignalMapHorizontal, SignalMapVertical } from "@/components/home/SignalMap";
import { ButtonLink } from "@/components/ui/Button";
import { MagneticButton } from "@/components/ui/MagneticButton";
import { SvgAnimationGate } from "@/components/ui/SvgAnimationGate";
import { hero } from "@/content/home";
import { routes } from "@/lib/routes";

const delay = (ms: number) => ({ "--delay": `${ms}ms` }) as CSSProperties;

function MapHeader() {
  return (
    <div className="mb-4 flex flex-wrap items-center justify-between gap-2 text-label uppercase text-muted">
      <span className="flex items-center gap-2">
        <span aria-hidden="true" className="size-1.5 rounded-full bg-signal" />
        Signal map
      </span>
      <span className="font-mono text-data tracking-[0.1em]">Schematic · not live data</span>
    </div>
  );
}

export function Hero() {
  return (
    <section aria-labelledby="hero-title" className="relative overflow-hidden">
      {/* < xl: the photograph opens the page as a band above the headline (shorter from lg so the headline stays in the first screen). ≥ xl: it fills the first screen behind the text, people on the right. */}
      <div className="relative isolate xl:flex xl:aspect-[16/9] xl:items-center">
        <div className="relative aspect-[4/3] overflow-hidden bg-paper-deep sm:aspect-[16/9] lg:aspect-[3/1] xl:absolute xl:inset-0 xl:-z-10 xl:aspect-auto">
          <HeroBackdrop>
            <Image
              src={conversation}
              alt=""
              fill
              sizes="(min-width: 640px) 100vw, 134vw"
              placeholder="blur"
              loading="eager"
              fetchPriority="high"
              className="object-cover object-[82%_center] sm:object-center lg:object-[center_30%] xl:object-center"
            />
          </HeroBackdrop>
          {/* Paper veil under the text column; the people on the right stay clear. */}
          <div
            aria-hidden="true"
            className="absolute inset-0 hidden bg-[linear-gradient(90deg,rgb(244_242_237/0.62)_0%,rgb(244_242_237/0.42)_38%,rgb(244_242_237/0)_60%)] xl:block"
          />
        </div>

        <div className="container-page w-full pb-12 pt-9 sm:pb-14 sm:pt-12 xl:pb-28 xl:pt-12">
          <div className="xl:max-w-[46rem]">
            <p className="fade-rise flex items-center gap-3 text-label uppercase text-muted xl:text-ink-soft">
              <span aria-hidden="true" className="h-px w-6 bg-current opacity-60" />
              {hero.eyebrow}
            </p>

            <h1 id="hero-title" className="mt-7 text-display-xl text-ink xl:text-[length:clamp(4.25rem,1rem+4.1vw,4.625rem)]">
              {hero.headline.map((line, lineIndex) => (
                <span key={lineIndex} className="headline-line" style={{ "--line-index": lineIndex } as CSSProperties}>
                  <span>
                    {line.map((part, partIndex) =>
                      part.accent ? (
                        <em key={partIndex} className="accent-underline font-serif font-normal italic tracking-[-0.02em]">
                          {part.text}
                        </em>
                      ) : (
                        <span key={partIndex}>{part.text}</span>
                      ),
                    )}
                  </span>
                </span>
              ))}
            </h1>

            <div className="mt-9 grid gap-8 lg:grid-cols-12 lg:items-end xl:grid-cols-1">
              <p className="fade-rise text-lead text-ink-soft lg:col-span-6 xl:col-span-1 xl:max-w-[34rem]" style={delay(380)}>
                {hero.intro}
              </p>
              <div
                className="fade-rise flex flex-col gap-3 sm:flex-row lg:col-span-6 lg:justify-end xl:col-span-1 xl:justify-start"
                style={delay(480)}
              >
                <MagneticButton className="inline-flex w-full sm:w-auto">
                  <ButtonLink href={routes.audit} size="lg" className="w-full sm:w-auto">
                    {hero.primaryCta}
                  </ButtonLink>
                </MagneticButton>
                <ButtonLink href="#revenue-circuit" variant="secondary" size="lg" className="w-full sm:w-auto">
                  {hero.secondaryCta}
                </ButtonLink>
              </div>
            </div>

            <div className="fade-rise mt-10 border-t border-line pt-5 xl:max-w-[44rem]" style={delay(560)}>
              <p className="sr-only">What we do:</p>
              <ul className="flex flex-wrap gap-x-2 gap-y-1 text-sm text-ink-soft">
                {hero.disciplines.map((discipline, index) => (
                  <li key={discipline} className="flex items-center gap-2">
                    {discipline}
                    {index < hero.disciplines.length - 1 ? (
                      <span aria-hidden="true" className="text-line-strong">
                        /
                      </span>
                    ) : null}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div className="container-page pb-16 xl:pb-4">
        {/* ≥ xl: the signal map docks over the photograph's lower edge. */}
        <div
          className="fade-rise relative z-10 mx-auto -mt-20 hidden w-[93%] rounded-lg border border-line bg-surface/[0.96] px-7 pb-6 pt-5 shadow-[0_32px_64px_-40px_rgba(16,16,20,0.45)] xl:block"
          style={delay(640)}
        >
          <MapHeader />
          <SvgAnimationGate>
            <SignalMapHorizontal idPrefix="hero-map-wide" />
          </SvgAnimationGate>
        </div>

        {/* < xl: the vertical signal map under the text. */}
        <div className="rounded-lg border border-line bg-surface p-5 sm:p-6 md:max-w-xl xl:hidden">
          <MapHeader />
          <SvgAnimationGate>
            <SignalMapVertical idPrefix="hero-map-tall" className="mx-auto max-w-[420px]" />
          </SvgAnimationGate>
        </div>
      </div>
    </section>
  );
}