"use client"

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select } from "@/components/ui/select"
import { TrendingUp, Shield, Zap } from "lucide-react"

export default function ApplyPage() {
  return (
    <div className="space-y-8 max-w-3xl">
      <div className="text-center space-y-4">
        <h1 className="text-3xl font-extrabold text-gray-900">
          Fractional Head of Technology
        </h1>
        <p className="text-lg text-muted-foreground max-w-xl mx-auto">
          Get expert technology leadership for your charity — without the full-time cost.
        </p>
      </div>

      {/* Benefits */}
      <div className="grid sm:grid-cols-3 gap-4">
        {[
          { icon: TrendingUp, title: "Optimise Your Stack", desc: "Reduce costs, improve donor experience, integrate tools" },
          { icon: Shield, title: "Data & Compliance", desc: "GDPR, consent management, security best practices" },
          { icon: Zap, title: "Automate Everything", desc: "Connect your CRM, comms, payments, and reporting" },
        ].map((b, i) => (
          <Card key={i}>
            <CardContent className="pt-6 text-center space-y-2">
              <b.icon className="h-8 w-8 text-trust-blue mx-auto" />
              <h3 className="font-bold">{b.title}</h3>
              <p className="text-xs text-muted-foreground">{b.desc}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Application form */}
      <Card>
        <CardHeader>
          <CardTitle>Apply</CardTitle>
          <CardDescription>Tell us about your charity&apos;s tech needs</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid sm:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>Your Name</Label>
              <Input placeholder="Full name" />
            </div>
            <div className="space-y-2">
              <Label>Email</Label>
              <Input type="email" placeholder="you@charity.org" />
            </div>
          </div>
          <div className="grid sm:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>Organisation</Label>
              <Input placeholder="Charity name" />
            </div>
            <div className="space-y-2">
              <Label>Annual Budget (approx)</Label>
              <Select>
                <option value="">Select...</option>
                <option>Under £100k</option>
                <option>£100k - £500k</option>
                <option>£500k - £1M</option>
                <option>£1M - £5M</option>
                <option>Over £5M</option>
              </Select>
            </div>
          </div>
          <div className="space-y-2">
            <Label>Current Tech Stack</Label>
            <Textarea placeholder="e.g. Salesforce CRM, Mailchimp, WordPress, manual spreadsheets..." />
          </div>
          <div className="space-y-2">
            <Label>Biggest Tech Challenge</Label>
            <Textarea placeholder="What's the biggest technology pain point you're facing?" />
          </div>
          <Button size="lg" className="w-full">
            Submit Application
          </Button>
          <p className="text-xs text-muted-foreground text-center">
            We&apos;ll review your application and get back within 48 hours.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
