my-portfolio/src/pages/Contact.tsx

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import {
  ArrowRight, Mail, MapPin, Linkedin, Github, Twitter, CheckCircle2
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const faqs = [
  { q: "What is your typical project timeline?", a: "Most projects take 4-8 weeks depending on scope. I will provide a detailed timeline during our initial consultation." },
  { q: "What are your rates?", a: "I offer both project-based and retainer pricing. Rates depend on project scope and complexity. Let us chat to find the right fit." },
  { q: "Do you work with international clients?", a: "Absolutely! I work with clients worldwide and am comfortable with asynchronous communication across time zones." },
  { q: "What tools do you use?", a: "Figma for design, React/Next.js for development, and tools like Framer Motion, Tailwind CSS, and TypeScript for building modern interfaces." },
];

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-background text-foreground antialiased">
      <Header />

      <section className="pt-32 pb-24 px-6">
        <div className="mx-auto max-w-6xl">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4 animate-fade-up">Let's Work Together</h1>
          <p className="text-lg text-muted-foreground max-w-xl mb-16">Have a project in mind? I would love to hear about it. Send me a message and I will get back to you within 24 hours.</p>

          <div className="grid gap-12 lg:grid-cols-2">
            {/* ── LEFT: Contact info ── */}
            <div className="space-y-8">
              <div className="space-y-6">
                {[
                  { icon: Mail, label: "Email", value: "hello@alexrivera.dev" },
                  { icon: MapPin, label: "Location", value: "San Francisco, CA" },
                  { icon: Linkedin, label: "LinkedIn", value: "linkedin.com/in/alexrivera" },
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-4">
                    <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 shadow-lg shadow-primary/10">
                      <item.icon className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <div className="font-medium">{item.label}</div>
                      <div className="text-muted-foreground">{item.value}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="flex gap-3 pt-4">
                {[Github, Linkedin, Twitter].map((Icon, i) => (
                  <a key={i} href="#" className="h-10 w-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-colors">
                    <Icon className="h-4 w-4" />
                  </a>
                ))}
              </div>
            </div>

            {/* ── RIGHT: Form ── */}
            <Card className="border shadow-sm backdrop-blur-sm bg-card/80 border-border/50">
              <CardContent className="p-6">
                <form onSubmit={(e: React.FormEvent) => { e.preventDefault(); toast.success("Message sent! I'll get back to you within 24 hours."); (e.target as HTMLFormElement).reset(); }} className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium mb-1.5 block">Name</label>
                        <Input placeholder="Your name" required />
                      </div>
                      <div>
                        <label className="text-sm font-medium mb-1.5 block">Email</label>
                        <Input placeholder="your@email.com" type="email" required />
                      </div>
                    </div>
                    <div>
                      <label className="text-sm font-medium mb-1.5 block">Subject</label>
                      <Input placeholder="Project inquiry" />
                    </div>
                    <div>
                      <label className="text-sm font-medium mb-1.5 block">Message</label>
                      <Textarea placeholder="Tell me about your project..." className="min-h-[140px] resize-none" required />
                    </div>
                    <Button type="submit" className="w-full rounded-full active:scale-[0.98]">
                      Send Message <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                    <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground mt-3">
                      <CheckCircle2 className="h-4 w-4 text-green-500" />
                      <span>Response time: within 24 hours</span>
                    </div>
                  </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section className="py-24 bg-muted/30">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-center mb-12 animate-fade-up">Frequently Asked Questions</h2>
          <Accordion type="single" collapsible className="w-full stagger">
            {faqs.map((f, i) => (
              <AccordionItem key={i} value={\`faq-\${i}\`}>
                <AccordionTrigger className="text-left">{f.q}</AccordionTrigger>
                <AccordionContent className="text-muted-foreground">{f.a}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </section>

      <Footer />
    </div>
  );
}