import * as React from "react";
import { cn } from "@/lib/utils";
import { Reveal } from "./reveal";

export function Container({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("mx-auto w-full max-w-6xl px-5 sm:px-8", className)} {...props} />;
}

export function Section({ id, className, children, tone = "default" }: { id?: string; className?: string; children: React.ReactNode; tone?: "default" | "subtle" }) {
  return (
    <section id={id} className={cn("scroll-mt-16 py-16 sm:py-24", tone === "subtle" && "border-y border-border bg-bg-subtle/60", className)}>
      <Container>{children}</Container>
    </section>
  );
}

export function Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <p className={cn("inline-flex items-center gap-2 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-fg-muted", className)}>
      <span className="size-1.5 rounded-full bg-accent" aria-hidden />
      {children}
    </p>
  );
}

export function SectionHeading({
  eyebrow,
  title,
  description,
  align = "left",
  className,
}: {
  eyebrow?: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  align?: "left" | "center";
  className?: string;
}) {
  return (
    <Reveal className={cn("max-w-2xl", align === "center" && "mx-auto text-center", className)}>
      {eyebrow ? <Eyebrow className={cn(align === "center" && "justify-center")}>{eyebrow}</Eyebrow> : null}
      <h2 className="mt-3 text-balance text-[28px] font-semibold leading-[1.1] tracking-tight sm:text-4xl">{title}</h2>
      {description ? <p className="mt-4 text-pretty text-[15px] leading-7 text-fg-muted sm:text-base">{description}</p> : null}
    </Reveal>
  );
}

/** Mock application window chrome used across the marketing visuals. */
export function Window({ title, className, children, tone = "elevated" }: { title?: string; className?: string; children: React.ReactNode; tone?: "elevated" | "bg" }) {
  return (
    <div className={cn("overflow-hidden rounded-xl border border-border shadow-lg", tone === "elevated" ? "bg-bg-elevated" : "bg-bg", className)}>
      <div className="flex h-9 items-center gap-2 border-b border-border bg-bg-subtle/80 px-3">
        <span className="flex gap-1.5" aria-hidden>
          <span className="size-2.5 rounded-full bg-border-strong" />
          <span className="size-2.5 rounded-full bg-border-strong" />
          <span className="size-2.5 rounded-full bg-border-strong" />
        </span>
        {title ? <span className="ml-2 truncate font-mono text-[11px] text-fg-subtle">{title}</span> : null}
      </div>
      {children}
    </div>
  );
}

export function Check({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 16 16" className={cn("size-4 shrink-0 text-success", className)} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <circle cx="8" cy="8" r="6.5" opacity="0.35" />
      <path d="m5.2 8.2 1.9 1.9 3.8-4.2" />
    </svg>
  );
}