"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import type { Locale } from "@/config/i18n";
import { Button } from "@/components/ui/Button";

export type HeroCopy = {
  title: string;
  subtitle: string;
  cta_label?: string;
};

type HeroSectionProps = {
  locale: Locale;
  copy: HeroCopy;
};

export function HeroSection({ locale, copy }: HeroSectionProps) {
  const router = useRouter();

  const handleLoginClick = () => {
    router.push(`/${locale}/login`);
  };

  return (
    <section style={{ maxWidth: 720, textAlign: "center", display: "grid", gap: 24 }}>
      <div>
        <h1 style={{ fontSize: "3rem", lineHeight: 1.1, marginBottom: 16 }}>{copy.title}</h1>
        <p style={{ fontSize: "1.25rem", color: "var(--muted)" }}>{copy.subtitle}</p>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          gap: 12,
          flexWrap: "wrap"
        }}
      >
        <Button onClick={handleLoginClick}>{copy.cta_label ?? "Start creating"}</Button>
        <Button
          onClick={() => router.push(`/${locale}/pricing`)}
          style={{
            background: "var(--card)",
            color: "var(--accent)",
            border: "1px solid var(--accent)"
          }}
        >
          View pricing
        </Button>
      </div>
      <p style={{ fontSize: 14, color: "var(--muted)" }}>
        Trusted providers: RunwayML, Pika Labs, D-ID, Midjourney, Leonardo, ElevenLabs and more.
      </p>
      <p style={{ fontSize: 12, color: "var(--muted)" }}>
        Prefer direct navigation? <Link href={`/${locale}/login`}>Sign in</Link> <span>{`\u2022`}</span>{" "}
        <Link href={`/${locale}/pricing`}>Pricing</Link>
      </p>
    </section>
  );
}
