// components/portfolio/PortfolioHero.tsx
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { GridPattern } from "../GridPattern";
import { ImageWithFallback } from "../figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";

interface PortfolioHeroProps {
  badgeText?: string;
  title: string;
  subtitle: string;
  subtitleTwo?: string;
  imageUrl: string;
  imageAlt: string;
}

export const PortfolioHero = ({
  badgeText = "Portfolio",
  title,
  subtitle,
  subtitleTwo,
  imageUrl,
  imageAlt,
}: PortfolioHeroProps) => {
  const navigate = useNavigate();

  return (
    <section className="relative pt-32 pb-24 bg-background overflow-hidden">
      <GridPattern strokeDasharray="4 2" />

      <div className="relative z-10 container mx-auto px-4 lg:px-6">
        {/* Back Button */}
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6 }}
          className="mb-12"
        >
          <Button
            variant="ghost"
            onClick={() => navigate("/case-studies")}
            className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Portfolio
          </Button>
        </motion.div>

        <div className="grid lg:grid-cols-12 gap-16 items-center">
          {/* Content - Left Aligned */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="lg:col-span-7"
          >
            <div className="mb-6">
              <Badge variant="secondary" className="text-accent border-accent/20 bg-accent/10">
                {badgeText}
              </Badge>
            </div>

            <h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
              {title}
            </h1>

            <p className="text-xl text-muted-foreground mb-6 leading-relaxed max-w-2xl">
              {subtitle}
            </p>
            <p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
              {subtitleTwo}
            </p>
          </motion.div>

          {/* Project Image */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="lg:col-span-5"
          >
            <div className="relative aspect-[4/3] overflow-hidden bg-card/30 rounded-2xl border border-border/50 p-4">
              <ImageWithFallback
                src={imageUrl}
                alt={imageAlt}
                className="w-full h-full object-contain object-center rounded-xl"
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};