import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { ArrowLeft, Mail, MapPin, Phone } from "lucide-react"
import { PublicLayout } from "@/components/Landing/PublicLayout"

export default function ContactPage() {
  return (
    <PublicLayout>
      <div className="bg-background text-foreground flex flex-col pt-24 pb-16 min-h-[70vh]">
        <main className="flex-1 flex flex-col items-center justify-center p-8">
        <h1 className="text-5xl font-bold tracking-tighter mb-4 text-center">Contact Us</h1>
        <p className="text-lg text-muted-foreground max-w-2xl text-center mb-12">
          Have a question or need support? We're here to help you ace your preparation.
        </p>

        <Card className="w-full max-w-md bg-secondary/10 border-border backdrop-blur-md rounded-3xl">
          <CardHeader>
            <CardTitle>Send us a message</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
               <label className="text-sm font-bold">Your Email</label>
               <input type="email" placeholder="student@example.com" className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" />
            </div>
            <div className="space-y-2">
               <label className="text-sm font-bold">Message</label>
               <textarea rows={4} placeholder="How can we help?" className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"></textarea>
            </div>
            <Button className="w-full rounded-xl h-12 font-bold text-base">Send Message</Button>
            
            <div className="pt-6 border-t border-border mt-6 space-y-3">
              <div className="flex items-center gap-3 text-sm text-muted-foreground font-medium">
                <Mail size={16} className="text-primary" /> support@pragativeer.com
              </div>
              <div className="flex items-center gap-3 text-sm text-muted-foreground font-medium mt-2">
                <MapPin size={16} className="text-primary" /> Pune, Maharashtra
              </div>
            </div>
          </CardContent>
        </Card>
      </main>
      </div>
    </PublicLayout>
  )
}