"use client";

import { motion } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function SplitGradientHero() {
  return (
    <section className="relative min-h-screen flex items-center overflow-hidden bg-background">
      <div className="container mx-auto px-6 py-20 lg:py-0 max-w-5xl grid lg:grid-cols-[3fr_2fr] gap-12 lg:gap-20 items-center">
        {/* Left: Text content */}
        <motion.div
          initial={{ opacity: 0, x: -40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.7, ease: "easeOut" }}
          className="flex flex-col gap-6"
        >
          <span className="inline-flex items-center gap-2 text-sm font-medium text-primary bg-primary/10 rounded-full px-4 py-1.5 w-fit">
            <Sparkles className="w-4 h-4" />
            Now in public beta
          </span>

          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-foreground leading-[1.1]">
            The Website Your
            <br />
            <span className="bg-gradient-to-r from-primary to-violet-500 bg-clip-text text-transparent">
              Brand Deserves
            </span>
          </h1>

          <p className="text-lg text-muted-foreground max-w-md leading-relaxed">
            The modern platform for brands who demand more from their workflow.
            Beautiful by default, infinitely flexible, and built to scale.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 pt-2">
            <Button size="lg" className="gap-2 text-base">
              Get started free
              <ArrowRight className="w-4 h-4" />
            </Button>
            <Button size="lg" variant="outline" className="text-base">
              View demo
            </Button>
          </div>

          <p className="text-sm text-muted-foreground">
            No credit card required · Free forever plan available
          </p>
        </motion.div>

        {/* Right: Blob photo with animated blobs behind */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.9, ease: "easeOut", delay: 0.2 }}
          className="relative flex items-center justify-center h-[400px] lg:h-[560px]"
        >
          {/* Outer glow blob — largest, most diffuse */}
          <div
            style={{ borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%" }}
            className="absolute inset-0 bg-gradient-to-br from-primary via-violet-500 to-fuchsia-500 opacity-60 blur-xl"
          />

          {/* Mid blob — tighter, offset color */}
          <div
            style={{ borderRadius: "40% 60% 70% 30% / 40% 60% 30% 70%" }}
            className="absolute inset-6 bg-gradient-to-tl from-sky-400 via-primary to-indigo-600 opacity-50 blur-lg"
          />

          {/* Accent blob — small, vivid, behind the photo */}
          <div
            style={{ borderRadius: "50% 50% 60% 40% / 50% 40% 60% 50%" }}
            className="absolute inset-12 bg-gradient-to-br from-fuchsia-400 via-rose-400 to-orange-300 opacity-40 blur-md"
          />

          {/* Photo — clipped to static blob shape */}
          <div
            style={{ borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%" }}
            className="relative z-10 w-full aspect-square max-w-[400px] overflow-hidden shadow-2xl"
          >
            <img
              src="/bp-hero-blob.png"
              alt="Your site, beautifully rebuilt"
              className="w-full h-full object-cover"
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
}