Hero Arch

import { ArrowRight, Sprout } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeroArchProps {
  eyebrow?: string;
  /** Headline; the `highlight` substring is set in italic sage. */
  title?: string;
  highlight?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  note?: string;
  className?: string;
}

function Landscape() {
  return (
    <svg aria-hidden viewBox="0 0 400 480" preserveAspectRatio="xMidYMax slice" className="size-full">
      <rect width="400" height="480" fill="var(--da-accent)" />
      <circle cx="285" cy="150" r="46" fill="var(--da-secondary)" />
      <path d="M0 300C70 250 140 262 210 290s130 30 190-10V480H0Z" fill="color-mix(in oklab, var(--da-primary) 35%, var(--da-accent))" />
      <path d="M0 350c80-40 150-30 230 0s120 28 170 6V480H0Z" fill="color-mix(in oklab, var(--da-primary) 65%, var(--da-accent))" />
      <path d="M0 410c90-30 180-26 260-4 60 16 110 14 140 4V480H0Z" fill="var(--da-primary)" />
      <g fill="var(--da-primary)">
        <path d="M92 300V262" stroke="var(--da-primary)" strokeWidth="3" />
        <ellipse cx="92" cy="252" rx="14" ry="22" />
        <path d="M122 296V270" stroke="var(--da-primary)" strokeWidth="3" />
        <ellipse cx="122" cy="262" rx="10" ry="16" />
      </g>
    </svg>
  );
}

/** Split hero: eyebrow with sprout icon, large serif headline with an italic sage highlight, calm copy, pill CTAs; on the right a tall arch-topped illustration (sun + rolling hills) with a floating stat chip. */
export function HeroArch({
  eyebrow = "Carbon accounting, made human",
  title = "Grow your business with a lighter footprint",
  highlight = "lighter",
  description = "Grove measures your company’s emissions from the tools you already use, shows where to cut first, and writes the report for you.",
  primary = { label: "Start measuring", href: "#start" },
  secondary = { label: "See how it works", href: "#how" },
  note = "Free for teams under 20 people.",
  className,
}: HeroArchProps) {
  const [a, b] = highlight && title.includes(highlight) ? title.split(highlight) : [title, ""];
  return (
    <section aria-labelledby="os-arch-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-[1.1fr_1fr]">
        <div>
          <p className="inline-flex items-center gap-2 rounded-da-pill bg-da-accent px-3 py-1 text-sm font-medium text-da-accent-fg">
            <Sprout aria-hidden className="size-4" />
            {eyebrow}
          </p>
          <h1 id="os-arch-title" className="mt-6 font-da-display text-[clamp(2.75rem,6.5vw,5rem)] leading-[1.02] tracking-da-display text-balance">
            {a}
            {b !== undefined && highlight && title.includes(highlight) && <em className="text-da-primary">{highlight}</em>}
            {b}
          </h1>
          <p className="mt-6 max-w-lg text-lg text-da-muted-fg">{description}</p>
          <div className="mt-9 flex flex-wrap items-center gap-3">
            <a
              href={primary.href}
              className="da-focus da-transition inline-flex h-12 items-center gap-2 rounded-da-pill bg-da-primary px-6 font-medium text-da-primary-fg hover:bg-da-primary/90"
            >
              {primary.label} <ArrowRight aria-hidden className="size-4" />
            </a>
            <a
              href={secondary.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill px-5 font-medium underline decoration-da-border-strong decoration-1 underline-offset-[6px] hover:decoration-da-fg"
            >
              {secondary.label}
            </a>
          </div>
          <p className="mt-5 text-sm text-da-muted-fg">{note}</p>
        </div>
        <div className="relative mx-auto w-full max-w-md">
          <div className="aspect-[5/6] overflow-hidden rounded-t-full rounded-b-da-lg shadow-da-lg">
            <Landscape />
          </div>
          <div className="absolute -bottom-5 -left-4 rounded-da-lg bg-da-surface px-5 py-4 text-da-surface-fg shadow-da-md sm:-left-10">
            <p className="text-sm text-da-muted-fg">Emissions this year</p>
            <p className="mt-0.5 font-da-display text-3xl">
              −18<span className="text-xl">%</span>
            </p>
            <p className="font-da-mono text-xs text-da-primary">412 tCO₂e avoided</p>
          </div>
        </div>
      </div>
    </section>
  );
}

export default HeroArch;