"use client";

import { useState } from "react";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);

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

  return (
    <main className="min-h-screen pt-16 md:pt-20">
      <Header />
      
      <section className="py-20 px-4">
        <div className="max-w-2xl mx-auto">
          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
            Contact Us
          </h1>
          
          <p className="text-foreground-muted text-center mb-12">
            Have questions? We'd love to hear from you.
          </p>
          
          {submitted ? (
            <div className="bg-green-50 text-green-700 p-6 text-center">
              <p className="text-lg">Thank you for your message!</p>
              <p className="mt-2">We'll get back to you soon.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium mb-2">
                  Name
                </label>
                <input
                  type="text"
                  id="name"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
                />
              </div>
              
              <div>
                <label htmlFor="email" className="block text-sm font-medium mb-2">
                  Email
                </label>
                <input
                  type="email"
                  id="email"
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
                />
              </div>
              
              <div>
                <label htmlFor="message" className="block text-sm font-medium mb-2">
                  Message
                </label>
                <textarea
                  id="message"
                  required
                  rows={5}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground resize-none"
                />
              </div>
              
              <button
                type="submit"
                className="w-full py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
              >
                Send Message
              </button>
            </form>
          )}
          
          <div className="mt-16 pt-8 border-t border-border/30">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
              <div>
                <h3 className="font-serif mb-2">Email</h3>
                <p className="text-foreground-muted">hello@manoonoils.com</p>
              </div>
              <div>
                <h3 className="font-serif mb-2">Shipping</h3>
                <p className="text-foreground-muted">Free over 3000 RSD</p>
              </div>
              <div>
                <h3 className="font-serif mb-2">Location</h3>
                <p className="text-foreground-muted">Serbia</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <Footer />
    </main>
  );
}