Contact Us

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import Image from "next/image";

export default function ContactUs() {
  return (
    <section className="py-12 px-6 bg-gradient-to-b from-blue-50 to-white">
      <div className="max-w-4xl mx-auto text-center mb-10">
        {/* Logo */}
        <div className="flex justify-center mb-6">
          <Image
            src="/logo.png" // replace with your actual logo path
            alt="Learning Counts Academy Logo"
            width={100}
            height={100}
          />
        </div>
        <h2 className="text-4xl font-extrabold text-blue-900 mb-4">
          Contact Learning Counts Academy
        </h2>
        <p className="text-gray-700 max-w-2xl mx-auto">
          We would love to hear from you! Whether you have questions about
          enrollment, curriculum, or our programs, our team is here to help.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
        {/* Contact Info */}
        <Card className="shadow-lg border border-blue-100">
          <CardContent className="p-6 text-gray-700">
            <h3 className="text-2xl font-semibold text-blue-800 mb-4">Get in Touch</h3>
            <p className="mb-2">📧 <strong>Email:</strong> info@learningcountsacademy.com</p>
            <p className="mb-2">📞 <strong>Phone:</strong> (123) 456-7890</p>
            <p className="mb-2">📍 <strong>Location:</strong> Your City, State</p>
            <p className="mt-4 text-sm text-gray-500">
              We typically respond within 1–2 business days.
            </p>
          </CardContent>
        </Card>

        {/* Contact Form */}
        <Card className="shadow-lg border border-blue-100">
          <CardContent className="p-6">
            <form className="space-y-4">
              <Input type="text" placeholder="Your Name" required className="border-blue-200 focus:ring-blue-400" />
              <Input type="email" placeholder="Your Email" required className="border-blue-200 focus:ring-blue-400" />
              <Input type="text" placeholder="Subject" className="border-blue-200 focus:ring-blue-400" />
              <Textarea placeholder="Your Message" rows={4} required className="border-blue-200 focus:ring-blue-400" />
              <Button type="submit" className="w-full bg-blue-700 hover:bg-blue-800 text-white rounded-xl">
                Send Message
              </Button>
            </form>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}