"use client";
import { Container } from "@/components/container";
import { KleapForm } from "@/components/kleap-form";
import { motion } from "framer-motion";

export function LeadForm() {
  const fields = [
    {
      name: "full_name",
      label: "Full Name / পূর্ণ নাম",
      type: "text" as const,
      required: true,
      placeholder: "Enter your full name"
    },
    {
      name: "phone",
      label: "Phone Number / ফোন নম্বর",
      type: "tel" as const,
      required: true,
      placeholder: "+880 1XXX XXXXXX"
    },
    {
      name: "preferred_country",
      label: "Preferred Country / পছন্দের দেশ",
      type: "select" as const,
      required: true,
      options: [
        "Saudi Arabia",
        "UAE",
        "Qatar",
        "Kuwait",
        "Oman",
        "Malaysia",
        "Singapore",
        "Other"
      ]
    },
    {
      name: "skill_interest",
      label: "Skill Interest / দক্ষতার আগ্রহ",
      type: "select" as const,
      required: true,
      options: [
        "Construction",
        "Hospitality",
        "Healthcare",
        "Technical/IT",
        "Manufacturing",
        "Agriculture",
        "Other"
      ]
    }
  ];

  return (
    <section id="lead-form" className="py-20 bg-gradient-to-b from-neutral-50 to-white">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="max-w-2xl mx-auto"
        >
          {/* Section Header */}
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold text-[#7A1F2B] mb-4">
              আজই শুরু করুন আপনার গ্লোবাল ক্যারিয়ার
            </h2>
            <h3 className="text-2xl md:text-3xl font-semibold text-neutral-700 mb-4">
              Start Your Global Career Today
            </h3>
            <p className="text-neutral-600">
              বিনামূল্যে পরামর্শের জন্য ফর্মটি পূরণ করুন • Fill the form for free consultation
            </p>
          </div>
          
          {/* Form Card */}
          <div className="bg-white rounded-2xl shadow-2xl p-8 md:p-10 border-t-4 border-[#7A1F2B]">
            <KleapForm
              formId="global-career-lead"
              title="Start Your Global Career Today"
              fields={fields}
              submitButtonText="Get Free Consultation"
              submitButtonClassName="bg-[#7A1F2B] hover:bg-[#5a1620] text-white font-semibold py-6 text-lg"
            />
          </div>
          
          {/* Trust Badge */}
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3 }}
            className="text-center mt-8"
          >
            <p className="text-neutral-600 text-sm">
              🔒 আপনার তথ্য সম্পূর্ণ নিরাপদ এবং গোপনীয় থাকবে
            </p>
            <p className="text-neutral-500 text-xs mt-1">
              Your information is completely safe and confidential
            </p>
          </motion.div>
        </motion.div>
      </Container>
    </section>
  );
}