"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { KleapForm, KleapFormField } from "@/components/kleap-form";
import { useLanguage } from "@/context/language-provider";
import Image from "next/image";

export function ReportForm() {
  const { t } = useLanguage();

  const fields: KleapFormField[] = [
    {
      name: "incident_type",
      label: t("incident_type"),
      type: "select",
      required: true,
      options: [
        t("car_accident"),
        t("train_accident"),
        t("crime"),
        t("violent_crime"),
        t("emergency"),
        t("other"),
      ],
    },
    {
      name: "location",
      label: t("location"),
      type: "text",
      placeholder: t("placeholder_location"),
      required: true,
    },
    {
      name: "description",
      label: t("description"),
      type: "textarea",
      placeholder: t("placeholder_description"),
      required: true,
    },
    {
      name: "contact_info",
      label: t("contact_info"),
      type: "text",
      placeholder: t("placeholder_contact"),
    },
  ];

  return (
    <section id="report" className="py-20 bg-neutral-50">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          <div className="order-2 lg:order-1">
            <div className="mb-8">
              <Heading className="mb-4">{t("submit_report")}</Heading>
              <Subheading className="text-lg font-medium text-red-600 mb-4">
                {t("hero_title_1")} {t("hero_title_2")}
              </Subheading>
              <Subheading>{t("anonymous_note")}</Subheading>
            </div>
            <Card className="border-2 border-red-100">
              <CardHeader>
                <CardTitle>{t("incident_details")}</CardTitle>
                <CardDescription>
                  {t("accuracy_note")}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <KleapForm 
                  formId="incident-report" 
                  title={t("incident_details")} 
                  fields={fields} 
                />
              </CardContent>
            </Card>
          </div>
          <div className="order-1 lg:order-2 space-y-6">
            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
              <Image 
                src="https://images.unsplash.com/photo-1607264469190-4abbbd14f5ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
                alt="Ambulance Emergency"
                fill
                className="object-cover"
              />
            </div>
            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
              <Image 
                src="https://images.unsplash.com/photo-1713111392302-6b70d996a639?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxlbWVyZ2VuY3klMjByZXNwb25zZSUyMGFjY2lkZW50JTIwcmVwb3J0aW5nJTIwc2FmZXR5fGVufDB8fHx8MTc2ODU4MjM0NXww&ixlib=rb-4.1.0&q=80&w=1080"
                alt="Fire Truck Response"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}