Hero Browser

import { cn } from "@/lib/utils";

export interface HeroBrowserProps {
  label?: string;
  title?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  url?: string;
  className?: string;
}

/** Split hero: copy on the left, a large monochrome browser frame on the right showing a mock studio portfolio (nav, giant name, image grid with mono captions) and a signal-dot “Published” badge. */
export function HeroBrowser({
  label = "Portfolio sites · no code",
  title = "Publish your studio in an afternoon.",
  description = "Drop in your projects; Frame handles the grid, the typography and the speed. Custom domain included.",
  primary = { label: "Start free", href: "#start" },
  secondary = { label: "Watch the 90-second demo", href: "#demo" },
  url = "studionord.com",
  className,
}: HeroBrowserProps) {
  return (
    <section aria-labelledby="mc-browser-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-center gap-14 lg:grid-cols-12">
        <div className="lg:col-span-5">
          <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
          <h1 id="mc-browser-title" className="mt-5 font-da-display text-[clamp(2.75rem,6vw,4.75rem)] leading-[0.95] font-medium tracking-da-display">
            {title}
          </h1>
          <p className="mt-7 max-w-md text-lg text-da-muted-fg">{description}</p>
          <div className="mt-9 flex flex-wrap items-center gap-6">
            <a
              href={primary.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-sm bg-da-primary px-6 font-medium text-da-primary-fg hover:opacity-85"
            >
              {primary.label}
            </a>
            <a href={secondary.href} className="da-focus rounded-da-sm text-[15px] underline underline-offset-4 hover:no-underline">
              {secondary.label}
            </a>
          </div>
        </div>
        <div aria-hidden className="relative lg:col-span-7">
          <div className="border border-da-border-strong bg-da-surface text-da-surface-fg">
            <div className="flex items-center gap-3 border-b border-da-border-strong px-3 py-2">
              <span className="flex gap-1.5">
                {[0, 1, 2].map((i) => (
                  <span key={i} className="size-2.5 rounded-full border border-da-border-strong" />
                ))}
              </span>
              <span className="mx-auto font-da-mono text-[11px] text-da-muted-fg">{url}</span>
            </div>
            <div className="p-5 sm:p-7">
              <div className="flex justify-between font-da-mono text-[10px] tracking-da-label uppercase">
                <span>Studio Nord</span>
                <span className="text-da-muted-fg">Work · About · Contact</span>
              </div>
              <p className="mt-8 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-none font-medium tracking-da-display">Studio Nord</p>
              <div className="mt-6 grid grid-cols-3 gap-3">
                {["Kiln Coffee", "Arkiv", "Oslo Opera", "Moss", "Tidal", "Vale"].map((p, i) => (
                  <div key={p}>
                    <div className={cn("aspect-[4/3]", i % 3 === 1 ? "bg-da-muted" : "bg-da-surface-2")} />
                    <p className="mt-1.5 font-da-mono text-[10px] text-da-muted-fg">
                      {String(i + 1).padStart(2, "0")} {p}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <span className="absolute -bottom-4 left-6 flex items-center gap-2 rounded-da-pill bg-da-fg px-3 py-1.5 font-da-mono text-[11px] tracking-da-label text-da-bg uppercase shadow-da-md">
            <span className="size-1.5 rounded-full bg-da-accent" /> Published
          </span>
        </div>
      </div>
    </section>
  );
}

export default HeroBrowser;