"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/badge";
import { AlertTriangle, ShieldCheck, Camera } from "lucide-react";
import { useLanguage } from "@/context/language-provider";
import Image from "next/image";

export function Hero() {
  const { t, language } = useLanguage();

  return (
    <section className="relative pt-20 pb-16 md:pt-32 md:pb-24 overflow-hidden">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="flex flex-col items-center lg:items-start text-center lg:text-left max-w-2xl mx-auto lg:mx-0">
            <Badge className="mb-4 bg-red-100 text-red-700 border-red-200">
              <AlertTriangle className="w-3 h-3 mr-1" /> {t("hero_badge")}
            </Badge>
            <Heading as="h1" className="text-4xl md:text-6xl font-bold tracking-tight mb-6">
              {t("hero_title_1")} <span className="text-red-600">{t("hero_title_2")}</span>
            </Heading>
            <Subheading className="text-lg md:text-xl text-neutral-600 mb-10 max-w-2xl">
              {t("hero_sub")}
            </Subheading>
            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
              <Button size="lg" className="bg-red-600 hover:bg-red-700 text-white px-8 h-12 text-lg" onClick={() => document.getElementById('report')?.scrollIntoView({ behavior: 'smooth' })}>
                <Camera className="w-5 h-5 mr-2" /> {t("report_now")}
              </Button>
              <Button size="lg" variant="outline" className="px-8 h-12 text-lg">
                <ShieldCheck className="w-5 h-5 mr-2" /> {t("how_it_works")}
              </Button>
            </div>
          </div>
          <div className="relative aspect-video lg:aspect-square rounded-2xl overflow-hidden shadow-2xl border-4 border-white">
            <Image 
              src="https://images.unsplash.com/photo-1689471335701-904874c90bbf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
              alt="Emergency Response"
              fill
              className="object-cover"
              priority
            />
          </div>
        </div>
      </Container>
      
      {/* Background Decoration */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-10 pointer-events-none">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-gradient-to-b from-red-500 to-transparent rounded-full blur-3xl" />
      </div>
    </section>
  );
}