import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Hero as HeroType } from "@/types/content";
import { cn } from "@/lib/utils";
import { OptimizedImage } from "@/components/ui/optimized-image";
import { useState } from "react";
import { Link } from "react-router-dom";
import PriceCheckWizard from "@/components/PriceCheckWizard";
interface HomeHeroProps {
  data: HeroType;
  className?: string;
}

export default function HomeHero({ data, className }: HomeHeroProps) {
  const [isVideoOpen, setIsVideoOpen] = useState(false);

  return (
    <section className={cn(
      "relative overflow-hidden pt-24 sm:pt-28 lg:pt-32 xl:pt-36 px-4 sm:px-6 pb-8 sm:pb-12 lg:pb-16",
      className
    )}>
      <div className="absolute inset-0 bg-primary" />
      
      <div className="container relative">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 items-center">
          {/* Text content */}
          <div className="text-center md:text-left">
            {data.eyebrow && (
              <div className="mb-4 sm:mb-6">
                <span className="inline-flex items-center rounded-full bg-primary-foreground/15 px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-primary-foreground">
                  Made & Supported in Britain
                </span>
              </div>
            )}
            
            <h1 className="font-semibold tracking-tight text-primary-foreground text-3xl sm:text-5xl md:text-6xl lg:text-6xl xl:text-7xl leading-tight">
              {data.h1}
            </h1>
            
            {data.sub && (
              <p className="mt-4 sm:mt-6 text-primary-foreground/80 max-w-xl text-base sm:text-lg lg:text-xl leading-relaxed mx-auto md:mx-0">
                {data.sub}
              </p>
            )}
            
            {/* CTA + Trustpilot */}
            <div className="mt-6 sm:mt-8 space-y-4">
              <div className="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
                <PriceCheckWizard ctaId="home.hero.check_prices">
                  <Button variant="secondary" size="lg" className="min-w-[200px] bg-primary-foreground text-primary hover:bg-primary-foreground/90 shadow-[0_8px_30px_0_rgba(0,0,0,0.15)] hover:shadow-[0_12px_40px_0_rgba(0,0,0,0.2)]">
                    Check Prices
                  </Button>
                </PriceCheckWizard>
                <Link to="/roi-calculator">
                  <Button variant="outline" size="lg" className="min-w-[200px] border-primary-foreground text-primary-foreground bg-transparent hover:bg-primary-foreground/10">
                    ROI Calculator
                  </Button>
                </Link>
              </div>

              <div className="inline-flex items-center gap-3">
                <div className="flex items-center gap-1">
                  {[...Array(4)].map((_, i) => (
                    <svg key={i} className="w-4 h-4 text-primary-foreground fill-current" viewBox="0 0 20 20">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  ))}
                  <svg className="w-4 h-4 text-primary-foreground" viewBox="0 0 20 20">
                    <defs>
                      <linearGradient id="half-star">
                        <stop offset="50%" stopColor="currentColor" />
                        <stop offset="50%" stopColor="transparent" />
                      </linearGradient>
                    </defs>
                    <path 
                      fill="url(#half-star)" 
                      d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" 
                    />
                  </svg>
                </div>
                <p className="text-sm font-medium text-primary-foreground">Rated 4.2/5 by customers</p>
              </div>
            </div>
          </div>

          {/* Hero image — hidden on small screens */}
          {data.media.length > 0 && (
            <div className="hidden md:block">
              <OptimizedImage
                src="/lovable-uploads/gulehjelm.png"
                alt="Contractor using PaperDrop mobile app on site with job scheduling checklist and task management interface"
                className="w-full h-auto"
                priority={true}
                width={1200}
                height={750}
                objectFit="contain"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>
          )}
        </div>
      </div>
    </section>
  );
}