"use client"

import { useState, useEffect, useMemo } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Building2,
  User,
  Mail,
  Phone,
  Calendar,
  CheckCircle2,
  Send,
  School,
  BookOpen,
  BarChart3,
  MonitorPlay,
  Sparkles,
  ArrowRight,
  Clock
} from "lucide-react"
import { trackEvent } from "@/utils/analytics"
import { getBackendUrl } from "@/lib/school-demo-api"

interface FormData {
  // Institution Type
  institutionType: string

  // Institution Information
  schoolName: string
  cityArea: string
  boardCurriculum: string
  otherBoard: string
  universityAffiliation: string
  otherUniversity: string
  programsOffered: string[]
  schoolAddress: string
  numberOfStudents: string
  numberOfTeachers: string
  smartBoardsAvailable: string
  numberOfSmartBoards: string

  // Management Details
  fullName: string
  designation: string
  mobileWhatsApp: string
  officialEmail: string
  roleInApproval: string

  // Areas of Interest
  areasOfInterest: string[]
  schoolPriority: string

  // Demo Preferences
  preferredDemo: string
  preferredDate: string
  preferredTime: string
  consideringSolution: string
  othersInDemo: string
}

// NOTE: `value` is what gets sent to the backend (must match VALID_INSTITUTION_TYPES).
//       `label` is what the user sees in the dropdown.
const institutionTypeOptions = [
  { value: "School (K-12)", label: "School" },
  { value: "College / University", label: "College / University" }
]

const boardOptions = [
  "Maharashtra State Board (SSC/HSC)",
  "CBSE",
  "ICSE / ISC (CISCE)",
  "IB",
  "Cambridge (IGCSE / A Levels)",
  "NIOS",
  "Other"
]

const universityOptions = [
  "Autonomous Institution",
  "Deemed-to-be University",
  "Private University",
  "State University",
  "Central University",
  "Affiliated to a University",
  "Other"
]

const programOptions = [
  "Undergraduate (UG)",
  "Postgraduate (PG)",
  "Diploma / Certificate",
  "PhD / Research"
]

const areaOfInterestOptions = [
  "Lesson planning & curriculum alignment",
  "Online assessments / tests",
  "Learning outcome & attainment tracking",
  "Student progress & institution reports",
  "Socratic Learning Framework"
]

const consideringOptions = [
  "Soon",
  "Within 1-3 months",
  "Exploring options"
]

export default function InstitutionDemoRegistrationPage() {
  const [formData, setFormData] = useState<FormData>({
    institutionType: "",
    schoolName: "",
    cityArea: "",
    boardCurriculum: "",
    otherBoard: "",
    universityAffiliation: "",
    otherUniversity: "",
    programsOffered: [],
    schoolAddress: "",
    numberOfStudents: "",
    numberOfTeachers: "",
    smartBoardsAvailable: "",
    numberOfSmartBoards: "",
    fullName: "",
    designation: "",
    mobileWhatsApp: "",
    officialEmail: "",
    roleInApproval: "",
    areasOfInterest: [],
    schoolPriority: "",
    preferredDemo: "",
    preferredDate: "",
    preferredTime: "",
    consideringSolution: "",
    othersInDemo: ""
  })

  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)

  const institutionBenefits = useMemo(
    () => [
      {
        icon: BookOpen,
        title: "Curriculum Alignment",
        description: "Tailored to Maharashtra State Board, CBSE, ICSE, IB, Cambridge, and university frameworks."
      },
      {
        icon: MonitorPlay,
        title: "Smart Classroom Ready",
        description: "Interactive AI-driven teaching tools built for digital whiteboards and smart screens."
      },
      {
        icon: BarChart3,
        title: "Attainment & Analytics",
        description: "Track student progress, question banks, and learning outcomes in real time."
      },
      {
        icon: Sparkles,
        title: "Socratic Framework",
        description: "Foster deep inquiry, concept retention, and critical thinking across all grades and semesters."
      }
    ],
    []
  )

  // Still check the backend value so conditional fields work correctly
  const isSchool = formData.institutionType === "School (K-12)"
  const isCollege = formData.institutionType === "College / University"

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  const handleInstitutionTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newType = e.target.value
    setFormData(prev => ({
      ...prev,
      institutionType: newType,
      // Reset type-specific fields when switching
      boardCurriculum: "",
      otherBoard: "",
      universityAffiliation: "",
      otherUniversity: "",
      programsOffered: []
    }))
  }

  const handleCheckboxChange = (area: string) => {
    setFormData(prev => ({
      ...prev,
      areasOfInterest: prev.areasOfInterest.includes(area)
        ? prev.areasOfInterest.filter(a => a !== area)
        : [...prev.areasOfInterest, area]
    }))
  }

  const handleProgramChange = (program: string) => {
    setFormData(prev => ({
      ...prev,
      programsOffered: prev.programsOffered.includes(program)
        ? prev.programsOffered.filter(p => p !== program)
        : [...prev.programsOffered, program]
    }))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setErrorMessage(null)

    // Frontend-only guard: preferredDemo is enforced here (backend still treats it as optional)
    if (!formData.preferredDemo) {
      setErrorMessage("Please select a preferred demo format.")
      return
    }

    setIsSubmitting(true)

    try {
      const response = await fetch(`${getBackendUrl()}/api/school-demo-registrations`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(formData)
      })

      const data = await response.json().catch(() => ({}))

      if (!response.ok || !data?.success) {
        setErrorMessage(data?.message || "Failed to submit registration")
        return
      }

      trackEvent('school_demo_submission', {
        institution_type: formData.institutionType,
        school_name: formData.schoolName,
        board: formData.boardCurriculum,
        university: formData.universityAffiliation
      })
      setSubmitted(true)
      if (typeof window !== "undefined") {
        window.scrollTo({ top: 0, behavior: "smooth" })
      }
    } catch (error) {
      console.error("Error submitting registration:", error)
      setErrorMessage("Network error. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

  useEffect(() => {
    if (submitted && typeof window !== "undefined") {
      window.scrollTo({ top: 0, behavior: "smooth" })
    }
  }, [submitted])

  if (submitted) {
    return (
      <main className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-20">
          <div className="max-w-2xl mx-auto text-center">
            <div className="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle2 className="w-10 h-10 text-primary" />
            </div>
            <h1 className="text-3xl font-bold text-foreground mb-4">
              Demo Registration Submitted!
            </h1>
            <p className="text-muted-foreground text-lg mb-8 leading-relaxed">
              Thank you for your interest in CodeframeAI for your institution. Our Business Development team will contact you within 24 hours to confirm the demo schedule and discuss your requirements in detail.
            </p>
            <div className="flex justify-center">
              <Button asChild size="lg" className="h-11 px-8 font-semibold">
                <Link href="/">Return to Homepage</Link>
              </Button>
            </div>
          </div>
        </div>
      </main>
    )
  }

  return (
    <main className="min-h-screen bg-background">
      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-background to-accent/5 py-8 sm:py-12 lg:py-16 min-h-[calc(100vh-4rem)]">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
        </div>

        <div className="container mx-auto px-4 max-w-6xl relative z-10">
          <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">
            {/* Left Column: Institution Value Proposition & Benefits */}
            <div className="lg:col-span-5 space-y-6 lg:sticky lg:top-8">
              <div className="space-y-4">
                <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider">
                  <School className="w-3.5 h-3.5" />
                  Institution Demo
                </div>
                <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-foreground leading-tight text-balance">
                  Empower Your Institution with CodeframeAI
                </h1>
                <p className="text-base text-muted-foreground leading-relaxed text-pretty">
                  Transform lesson planning, smart board teaching, and outcome assessments. Book a personalized consultation for your institution's leadership and teaching faculty — whether you run a school, college, or university.
                </p>
              </div>

              <div className="space-y-4 border-t border-border/60 pt-6">
                {institutionBenefits.map((benefit, index) => (
                  <div key={index} className="flex items-start gap-3.5">
                    <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <benefit.icon className="w-5 h-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-bold text-foreground text-sm sm:text-base mb-0.5">{benefit.title}</h3>
                      <p className="text-muted-foreground text-xs sm:text-sm leading-relaxed">{benefit.description}</p>
                    </div>
                  </div>
                ))}
              </div>

              {/* Switch to Individual Demo Card */}
              <div className="rounded-xl border border-primary/20 bg-primary/5 p-4 flex items-center justify-between gap-3">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0">
                    <User className="w-4 h-4" />
                  </div>
                  <div>
                    <p className="text-xs font-semibold text-foreground">Need an individual demo?</p>
                    <p className="text-[11px] text-muted-foreground">For researchers and single educators</p>
                  </div>
                </div>
                <Button
                  asChild
                  variant="outline"
                  size="sm"
                  className="h-8 text-xs font-semibold text-primary border-primary/30 hover:bg-primary/10 hover:text-primary hover:border-primary shrink-0"
                >
                  <Link href="/register-demo" className="flex items-center gap-1">
                    <span>Individual Demo</span>
                    <ArrowRight className="w-3 h-3" />
                  </Link>
                </Button>
              </div>
            </div>

            {/* Right Column: Registration Form */}
            <div className="lg:col-span-7">
              <div className="bg-card/90 backdrop-blur-sm border border-border rounded-2xl p-6 sm:p-8 shadow-xl shadow-primary/5">
                <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-1">
                  Register Your Institution
                </h2>
                <p className="text-muted-foreground text-sm mb-6">
                  Fill in your institution details and our education team will reach out within 24 hours.
                </p>

                {errorMessage && (
                  <div className="mb-6 text-sm text-destructive bg-destructive/10 border border-destructive/20 p-3.5 rounded-lg">
                    {errorMessage}
                  </div>
                )}

                <form onSubmit={handleSubmit} className="space-y-8">
                  {/* Section 1: Institution Information */}
                  <div className="space-y-4">
                    <div className="flex items-center gap-2.5 pb-2 border-b border-border/60">
                      <div className="w-7 h-7 rounded-md bg-primary/10 text-primary flex items-center justify-center shrink-0">
                        <Building2 className="w-4 h-4" />
                      </div>
                      <h3 className="text-base font-semibold text-foreground">
                        Institution Information
                      </h3>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {/* Institution Type – drives conditional fields */}
                      <div className="md:col-span-2 space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Institution Type *
                        </label>
                        <select
                          name="institutionType"
                          value={formData.institutionType}
                          onChange={handleInstitutionTypeChange}
                          required
                          disabled={isSubmitting}
                          className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        >
                          <option value="">Select institution type</option>
                          {institutionTypeOptions.map(option => (
                            <option key={option.value} value={option.value}>{option.label}</option>
                          ))}
                        </select>
                      </div>

                      <div className="md:col-span-2 space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Institution Name *
                        </label>
                        <Input
                          type="text"
                          name="schoolName"
                          value={formData.schoolName}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          City / Area *
                        </label>
                        <Input
                          type="text"
                          name="cityArea"
                          value={formData.cityArea}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      {/* SCHOOL-SPECIFIC: Board / Curriculum */}
                      {isSchool && (
                        <div className="space-y-1.5">
                          <label className="block text-xs font-semibold text-foreground">
                            Board / Curriculum
                          </label>
                          <select
                            name="boardCurriculum"
                            value={formData.boardCurriculum}
                            onChange={handleInputChange}
                            disabled={isSubmitting}
                            className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                          >
                            <option value="">Select board</option>
                            {boardOptions.map(option => (
                              <option key={option} value={option}>{option}</option>
                            ))}
                          </select>
                        </div>
                      )}

                      {isSchool && formData.boardCurriculum === "Other" && (
                        <div className="md:col-span-2 space-y-1.5">
                          <label className="block text-xs font-semibold text-foreground">
                            Please specify other board
                          </label>
                          <Input
                            type="text"
                            name="otherBoard"
                            value={formData.otherBoard}
                            onChange={handleInputChange}
                            disabled={isSubmitting}
                            className="h-10"
                          />
                        </div>
                      )}

                      {/* COLLEGE-SPECIFIC: University / Affiliating Body */}
                      {isCollege && (
                        <div className="space-y-1.5">
                          <label className="block text-xs font-semibold text-foreground">
                            University / Affiliating Body
                          </label>
                          <select
                            name="universityAffiliation"
                            value={formData.universityAffiliation}
                            onChange={handleInputChange}
                            disabled={isSubmitting}
                            className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                          >
                            <option value="">Select option</option>
                            {universityOptions.map(option => (
                              <option key={option} value={option}>{option}</option>
                            ))}
                          </select>
                        </div>
                      )}

                      {isCollege && formData.universityAffiliation === "Other" && (
                        <div className="md:col-span-2 space-y-1.5">
                          <label className="block text-xs font-semibold text-foreground">
                            Please specify university
                          </label>
                          <Input
                            type="text"
                            name="otherUniversity"
                            value={formData.otherUniversity}
                            onChange={handleInputChange}
                            disabled={isSubmitting}
                            className="h-10"
                          />
                        </div>
                      )}

                      {/* COLLEGE-SPECIFIC: Programs Offered */}
                      {isCollege && (
                        <div className="md:col-span-2 space-y-1.5">
                          <label className="block text-xs font-semibold text-foreground">
                            Programs Offered
                          </label>
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                            {programOptions.map(program => (
                              <label
                                key={program}
                                className={`flex items-center space-x-3 p-2.5 rounded-lg border transition-all cursor-pointer ${
                                  formData.programsOffered.includes(program)
                                    ? "border-primary bg-primary/5 text-foreground font-medium"
                                    : "border-border/70 hover:border-primary/40 text-foreground"
                                }`}
                              >
                                <input
                                  type="checkbox"
                                  checked={formData.programsOffered.includes(program)}
                                  onChange={() => handleProgramChange(program)}
                                  disabled={isSubmitting}
                                  className="w-4 h-4 text-primary border-input rounded focus:ring-primary accent-primary"
                                />
                                <span className="text-xs">{program}</span>
                              </label>
                            ))}
                          </div>
                        </div>
                      )}

                      <div className="md:col-span-2 space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Institution Address (for campus visit)
                        </label>
                        <textarea
                          name="schoolAddress"
                          value={formData.schoolAddress}
                          onChange={handleInputChange}
                          rows={2}
                          disabled={isSubmitting}
                          className="w-full min-h-[70px] px-3 py-2 rounded-md border border-input bg-background text-foreground text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Approx. No. of Students
                        </label>
                        <Input
                          type="text"
                          name="numberOfStudents"
                          value={formData.numberOfStudents}
                          onChange={handleInputChange}
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Approx. No. of Teachers / Faculty
                        </label>
                        <Input
                          type="text"
                          name="numberOfTeachers"
                          value={formData.numberOfTeachers}
                          onChange={handleInputChange}
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Smart boards / digital classrooms available? *
                        </label>
                        <select
                          name="smartBoardsAvailable"
                          value={formData.smartBoardsAvailable}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        >
                          <option value="">Select option</option>
                          <option value="Yes">Yes</option>
                          <option value="No">No</option>
                        </select>
                      </div>

                      {formData.smartBoardsAvailable === "Yes" && (
                        <div className="space-y-1.5">
                          <label className="block text-xs font-semibold text-foreground">
                            If yes, how many?
                          </label>
                          <Input
                            type="text"
                            name="numberOfSmartBoards"
                            value={formData.numberOfSmartBoards}
                            onChange={handleInputChange}
                            disabled={isSubmitting}
                            className="h-10"
                          />
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Section 2: Management Details */}
                  <div className="space-y-4">
                    <div className="flex items-center gap-2.5 pb-2 border-b border-border/60">
                      <div className="w-7 h-7 rounded-md bg-primary/10 text-primary flex items-center justify-center shrink-0">
                        <User className="w-4 h-4" />
                      </div>
                      <h3 className="text-base font-semibold text-foreground">
                        Management Details
                      </h3>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="md:col-span-2 space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Full Name *
                        </label>
                        <Input
                          type="text"
                          name="fullName"
                          value={formData.fullName}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Designation
                        </label>
                        <Input
                          type="text"
                          name="designation"
                          value={formData.designation}
                          onChange={handleInputChange}
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Your role in approval
                        </label>
                        <select
                          name="roleInApproval"
                          value={formData.roleInApproval}
                          onChange={handleInputChange}
                          disabled={isSubmitting}
                          className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        >
                          <option value="">Select role</option>
                          <option value="Final decision-maker">Final decision-maker</option>
                          <option value="Part of decision-making team">Part of decision-making team</option>
                        </select>
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Mobile / WhatsApp *
                        </label>
                        <Input
                          type="tel"
                          name="mobileWhatsApp"
                          value={formData.mobileWhatsApp}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Official Email *
                        </label>
                        <Input
                          type="email"
                          name="officialEmail"
                          value={formData.officialEmail}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Section 3: Areas of Interest */}
                  <div className="space-y-4">
                    <div className="flex items-center gap-2.5 pb-2 border-b border-border/60">
                      <div className="w-7 h-7 rounded-md bg-primary/10 text-primary flex items-center justify-center shrink-0">
                        <Sparkles className="w-4 h-4" />
                      </div>
                      <div>
                        <h3 className="text-base font-semibold text-foreground">
                          Areas of Interest
                        </h3>
                        <p className="text-xs text-muted-foreground">Select all that apply</p>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                      {areaOfInterestOptions.map(area => (
                        <label
                          key={area}
                          className={`flex items-center space-x-3 p-2.5 rounded-lg border transition-all cursor-pointer ${
                            formData.areasOfInterest.includes(area)
                              ? "border-primary bg-primary/5 text-foreground font-medium"
                              : "border-border/70 hover:border-primary/40 text-foreground"
                          }`}
                        >
                          <input
                            type="checkbox"
                            checked={formData.areasOfInterest.includes(area)}
                            onChange={() => handleCheckboxChange(area)}
                            disabled={isSubmitting}
                            className="w-4 h-4 text-primary border-input rounded focus:ring-primary accent-primary"
                          />
                          <span className="text-xs">{area}</span>
                        </label>
                      ))}
                    </div>

                    <div className="space-y-1.5 pt-1">
                      <label className="block text-xs font-semibold text-foreground">
                        Institution's main priority / challenge (optional)
                      </label>
                      <textarea
                        name="schoolPriority"
                        value={formData.schoolPriority}
                        onChange={handleInputChange}
                        rows={2}
                        disabled={isSubmitting}
                        className="w-full min-h-[70px] px-3 py-2 rounded-md border border-input bg-background text-foreground text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                      />
                    </div>
                  </div>

                  {/* Section 4: Demo Preferences */}
                  <div className="space-y-4">
                    <div className="flex items-center gap-2.5 pb-2 border-b border-border/60">
                      <div className="w-7 h-7 rounded-md bg-primary/10 text-primary flex items-center justify-center shrink-0">
                        <Calendar className="w-4 h-4" />
                      </div>
                      <h3 className="text-base font-semibold text-foreground">
                        Demo Preferences & Timeline
                      </h3>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Preferred Demo Format *
                        </label>
                        <select
                          name="preferredDemo"
                          value={formData.preferredDemo}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        >
                          <option value="">Select option</option>
                          <option value="At our institution">At our institution (In-person)</option>
                          <option value="Online">Online (Video conference)</option>
                        </select>
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Considering a solution
                        </label>
                        <select
                          name="consideringSolution"
                          value={formData.consideringSolution}
                          onChange={handleInputChange}
                          disabled={isSubmitting}
                          className="w-full h-10 px-3 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        >
                          <option value="">Select timeline</option>
                          {consideringOptions.map(option => (
                            <option key={option} value={option}>{option}</option>
                          ))}
                        </select>
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Preferred Date *
                        </label>
                        <Input
                          type="date"
                          name="preferredDate"
                          value={formData.preferredDate}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Preferred Time *
                        </label>
                        <Input
                          type="time"
                          name="preferredTime"
                          value={formData.preferredTime}
                          onChange={handleInputChange}
                          required
                          disabled={isSubmitting}
                          className="h-10"
                        />
                      </div>

                      <div className="md:col-span-2 space-y-1.5">
                        <label className="block text-xs font-semibold text-foreground">
                          Others to include in the demo (if any)
                        </label>
                        <textarea
                          name="othersInDemo"
                          value={formData.othersInDemo}
                          onChange={handleInputChange}
                          rows={2}
                          disabled={isSubmitting}
                          className="w-full min-h-[70px] px-3 py-2 rounded-md border border-input bg-background text-foreground text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all disabled:opacity-60"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Action Buttons */}
                  <div className="space-y-3 pt-2">
                    <Button
                      type="submit"
                      size="lg"
                      disabled={isSubmitting}
                      className="w-full h-11 text-sm font-semibold bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm flex items-center justify-center gap-2"
                    >
                      {isSubmitting ? (
                        <>
                          <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
                          <span>Submitting Registration...</span>
                        </>
                      ) : (
                        <>
                          <Send className="w-4 h-4" />
                          <span>Submit Registration</span>
                        </>
                      )}
                    </Button>

                    <p className="text-[11px] text-muted-foreground text-center">
                      By submitting this form, you agree to our Privacy Policy and Terms of Service.
                    </p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}