"use client";

import React from "react"

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Mail } from "lucide-react";

export function ContactSection() {
  const [submitted, setSubmitted] = useState(false);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSubmitted(true);
  }

  return (
    <section className="bg-muted py-24">
      <div className="mx-auto grid max-w-7xl gap-16 px-6 lg:grid-cols-2">
        <div>
          <p className="text-sm font-semibold uppercase tracking-wider text-[hsl(var(--accent))]">
            Get in touch
          </p>
          <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl font-serif">
            Ready to secure your practice?
          </h2>
          <p className="mt-6 leading-relaxed text-muted-foreground">
            Schedule a free HIPAA readiness assessment with our team. We will
            evaluate your current infrastructure and provide a clear roadmap
            to full compliance.
          </p>

          <div className="mt-10 flex flex-col gap-6">
            <div className="flex items-center gap-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <Mail className="h-5 w-5 text-primary" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Email us</p>
                <p className="font-medium text-foreground">
                  sales@cyberdefenderIQpro.com
                </p>
              </div>
            </div>
          </div>
        </div>

        <div className="rounded-2xl border border-border bg-card p-8">
          {submitted ? (
            <div className="flex h-full flex-col items-center justify-center text-center">
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-[hsl(var(--accent))]/10">
                <Mail className="h-8 w-8 text-[hsl(var(--accent))]" />
              </div>
              <h3 className="mt-6 text-xl font-semibold text-card-foreground font-serif">
                Thank you for reaching out
              </h3>
              <p className="mt-3 text-muted-foreground">
                Our team will be in touch within 24 hours to schedule your
                free HIPAA assessment.
              </p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="flex flex-col gap-5" suppressHydrationWarning>
              <div className="grid gap-5 sm:grid-cols-2">
                <div className="flex flex-col gap-2">
                  <Label htmlFor="first-name">First name</Label>
                  <Input id="first-name" placeholder="Jane" required suppressHydrationWarning />
                </div>
                <div className="flex flex-col gap-2">
                  <Label htmlFor="last-name">Last name</Label>
                  <Input id="last-name" placeholder="Smith" required suppressHydrationWarning />
                </div>
              </div>

              <div className="flex flex-col gap-2">
                <Label htmlFor="email">Work email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="jane@hospital.org"
                  required
                  suppressHydrationWarning
                />
              </div>

              <div className="flex flex-col gap-2">
                <Label htmlFor="organization">Organization</Label>
                <Input
                  id="organization"
                  placeholder="Riverside Medical Center"
                  required
                  suppressHydrationWarning
                />
              </div>

              <div className="flex flex-col gap-2">
                <Label htmlFor="org-type">Organization type</Label>
                <Select>
                  <SelectTrigger id="org-type" suppressHydrationWarning>
                    <SelectValue placeholder="Select type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="hospital">Hospital</SelectItem>
                    <SelectItem value="clinic">Clinic / Practice</SelectItem>
                    <SelectItem value="dental">Dental Office</SelectItem>
                    <SelectItem value="pharmacy">Pharmacy</SelectItem>
                    <SelectItem value="insurance">Health Insurance</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="flex flex-col gap-2">
                <Label htmlFor="message">How can we help?</Label>
                <Textarea
                  id="message"
                  rows={4}
                  placeholder="Tell us about your IT challenges or compliance needs..."
                  suppressHydrationWarning
                />
              </div>

              <Button type="submit" size="lg" className="mt-2" suppressHydrationWarning>
                Request Free Assessment
              </Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}