"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function SampleForm() {
  const [agreed, setAgreed] = useState(false)

  return (
    <Card className="max-w-xl">
      <CardHeader>
        <CardTitle className="font-serif text-xl">Request a Consultation</CardTitle>
        <CardDescription className="font-sans">
          Tell us about your operational requirements. We&apos;ll assess whether a contained 
          AI system can help.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
          {/* Name */}
          <div className="space-y-2">
            <Label htmlFor="name" className="font-sans text-sm font-medium">
              Full Name
            </Label>
            <Input id="name" placeholder="Enter your name" />
          </div>

          {/* Email */}
          <div className="space-y-2">
            <Label htmlFor="email" className="font-sans text-sm font-medium">
              Work Email
            </Label>
            <Input id="email" type="email" placeholder="you@company.com" />
            <p className="font-sans text-xs text-muted-foreground">
              We&apos;ll use this to schedule a call.
            </p>
          </div>

          {/* Organization */}
          <div className="space-y-2">
            <Label htmlFor="organization" className="font-sans text-sm font-medium">
              Organization
            </Label>
            <Input id="organization" placeholder="Company or team name" />
          </div>

          {/* Industry */}
          <div className="space-y-2">
            <Label htmlFor="industry" className="font-sans text-sm font-medium">
              Industry
            </Label>
            <Select>
              <SelectTrigger id="industry">
                <SelectValue placeholder="Select your industry" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="finance">Finance & Banking</SelectItem>
                <SelectItem value="healthcare">Healthcare</SelectItem>
                <SelectItem value="manufacturing">Manufacturing</SelectItem>
                <SelectItem value="logistics">Logistics & Supply Chain</SelectItem>
                <SelectItem value="government">Government</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Project Description */}
          <div className="space-y-2">
            <Label htmlFor="description" className="font-sans text-sm font-medium">
              Project Description
            </Label>
            <Textarea 
              id="description" 
              placeholder="Describe the process or workflow you want to improve. What are the current pain points?"
              className="min-h-[120px]"
            />
            <p className="font-sans text-xs text-muted-foreground">
              Be specific about constraints: data sensitivity, existing systems, compliance requirements.
            </p>
          </div>

          {/* Agreement */}
          <div className="flex items-start gap-3">
            <Checkbox 
              id="agreement" 
              checked={agreed}
              onCheckedChange={(checked) => setAgreed(checked as boolean)}
            />
            <div className="space-y-1">
              <Label htmlFor="agreement" className="font-sans text-sm leading-relaxed">
                I understand that Greyhaven builds custom systems. Initial consultations 
                focus on technical feasibility.
              </Label>
            </div>
          </div>

          {/* Submit */}
          <div className="flex gap-3">
            <Button type="submit" disabled={!agreed}>
              Submit Request
            </Button>
            <Button type="button" variant="outline">
              Cancel
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}