import { motion } from "framer-motion";

interface Props {
  eyebrow?: string;
  title: React.ReactNode;
  description?: string;
}

export function PageHero({ eyebrow, title, description }: Props) {
  return (
    <section className="section-dark relative overflow-hidden">
      {/* Background gradients */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-gradient-to-r from-background via-background/85 to-background/30" />
        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-background/60" />
        <div className="absolute inset-0 bg-gradient-hero opacity-25 mix-blend-soft-light" />
      </div>

      <div className="container-regent relative pt-32 md:pt-40 pb-16 md:pb-20 min-h-[60svh] flex flex-col justify-between">
        {/* Top eyebrow row */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="flex items-center justify-between gap-6 flex-wrap"
        >
          <div className="flex items-center gap-3">
            <span className="h-px w-12 bg-brand-red" />
            {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          </div>
          <span className="eyebrow text-foreground/50 hidden md:inline">
            Classic Chemical Industries Ltd.
          </span>
        </motion.div>

        {/* Headline block */}
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.15 }}
          className="mt-14 lg:mt-20 max-w-5xl"
        >
          <h1
            className="font-display tracking-tight"
            style={{
              fontSize: "clamp(2.2rem, 6vw, 5.2rem)",
              lineHeight: 0.98,
              textWrap: "balance",
              fontWeight: 300,
            }}
          >
            {title}
          </h1>

          {description && (
            <p className="mt-8 text-base md:text-lg text-muted-foreground leading-relaxed extralight max-w-2xl">
              {description}
            </p>
          )}
        </motion.div>
      </div>
    </section>
  );
}