import { useState } from 'react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { CheckCircle2 } from 'lucide-react';

const Contact = () => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      setSubmitted(true);
    }
  };

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <Navbar />

      <main className="flex-1 flex items-center justify-center px-6 pt-24 pb-16">
        <Card className="w-full max-w-md border border-border bg-card shadow-lg">
          <CardContent className="p-8 md:p-10">
            {!submitted ? (
              <div className="text-center">
                <div className="text-5xl mb-6">👋</div>
                <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-3 font-serif">
                  Say Hello
                </h1>
                <p className="text-muted-foreground text-sm mb-8 font-sans">
                  Interested in joining the Kite Wallet team or just want to
                  chat? Leave your email and we'll get back to you.
                </p>

                <form onSubmit={handleSubmit} className="space-y-4">
                  <Input
                    type="email"
                    placeholder="you@example.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                    className="h-12 text-base bg-background border-border focus:border-primary"
                  />
                  <Button
                    type="submit"
                    size="lg"
                    className="w-full rounded-full bg-primary text-primary-foreground hover:bg-primary/90 shadow-md text-base"
                  >
                    Submit
                  </Button>
                </form>
              </div>
            ) : (
              <div className="text-center py-6">
                <div className="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 mx-auto mb-6 flex items-center justify-center">
                  <CheckCircle2 className="h-10 w-10 text-green-500" />
                </div>
                <h2 className="text-2xl md:text-3xl font-bold text-foreground mb-3 font-serif">
                  Thank You!
                </h2>
                <p className="text-muted-foreground text-sm font-sans">
                  Thanks for reaching out! We appreciate your interest
                  in Kite Wallet. 🪁
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </main>

      <Footer />
    </div>
  );
};

export default Contact;