"use client";

import { Mail, MapPin, Phone, Send } from "lucide-react";
import {
  GridOverlay,
  GradientText,
  ScrollReveal,
  GlassCard,
  GlowIcon,
} from "@/components/ui/primitives";

export default function SaasContacts1() {
  return (
    <section className="relative bg-white py-24 overflow-hidden">
      <GridOverlay type="dots" fade="radial" opacity={0.03} />

      <div className="relative mx-auto max-w-6xl px-6">
        {/* Header */}
        <ScrollReveal variant="blur-in">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-semibold tracking-tight text-gray-900 md:text-4xl">
              <GradientText from="indigo-500" to="violet-500">Contact</GradientText> Us
            </h2>
            <p className="mt-4 text-base leading-relaxed text-gray-500">
              Have a question or want to learn more? We'd love to hear from you.
              Our team typically responds within 24 hours.
            </p>
          </div>
        </ScrollReveal>

        {/* Split layout */}
        <div className="mt-14 grid gap-12 lg:grid-cols-2">
          {/* Left: Contact info */}
          <ScrollReveal variant="fade-left">
            <div className="space-y-8">
              <div className="flex items-start gap-4">
                <GlowIcon icon={Mail} color="indigo" size="md" />
                <div>
                  <h3 className="text-sm font-medium text-gray-900">Email</h3>
                  <p className="mt-1 text-sm text-gray-500">
                    hello@saasify.com
                  </p>
                  <p className="text-sm text-gray-500">
                    support@saasify.com
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <GlowIcon icon={Phone} color="indigo" size="md" />
                <div>
                  <h3 className="text-sm font-medium text-gray-900">Phone</h3>
                  <p className="mt-1 text-sm text-gray-500">
                    +1 (555) 000-0000
                  </p>
                  <p className="text-xs text-gray-400">
                    Mon–Fri, 9am–6pm EST
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-4">
                <GlowIcon icon={MapPin} color="indigo" size="md" />
                <div>
                  <h3 className="text-sm font-medium text-gray-900">Office</h3>
                  <p className="mt-1 text-sm text-gray-500">
                    100 Smith Street
                  </p>
                  <p className="text-sm text-gray-500">
                    San Francisco, CA 94107
                  </p>
                </div>
              </div>
            </div>
          </ScrollReveal>

          {/* Right: Form */}
          <ScrollReveal variant="fade-right">
            <GlassCard variant="light" hover={false} className="p-6">
              <form className="space-y-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <div>
                    <label
                      htmlFor="name"
                      className="mb-1.5 block text-sm font-medium text-gray-700"
                    >
                      Name
                    </label>
                    <input
                      type="text"
                      id="name"
                      placeholder="Your name"
                      className="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 outline-none transition-all placeholder:text-gray-400 focus:border-indigo-400/50 focus:bg-white focus:ring-2 focus:ring-indigo-400/20 focus:shadow-[0_0_15px_rgba(99,102,241,0.15)]"
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="email"
                      className="mb-1.5 block text-sm font-medium text-gray-700"
                    >
                      Email
                    </label>
                    <input
                      type="email"
                      id="email"
                      placeholder="you@company.com"
                      className="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 outline-none transition-all placeholder:text-gray-400 focus:border-indigo-400/50 focus:bg-white focus:ring-2 focus:ring-indigo-400/20 focus:shadow-[0_0_15px_rgba(99,102,241,0.15)]"
                    />
                  </div>
                </div>

                <div>
                  <label
                    htmlFor="message"
                    className="mb-1.5 block text-sm font-medium text-gray-700"
                  >
                    Message
                  </label>
                  <textarea
                    id="message"
                    rows={5}
                    placeholder="How can we help?"
                    className="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900 outline-none transition-all placeholder:text-gray-400 focus:border-indigo-400/50 focus:bg-white focus:ring-2 focus:ring-indigo-400/20 focus:shadow-[0_0_15px_rgba(99,102,241,0.15)]"
                  />
                </div>

                <button
                  type="submit"
                  className="inline-flex items-center gap-2 rounded-full bg-gray-900 px-6 py-3 text-sm font-medium text-white transition-all hover:bg-gray-800 hover:shadow-lg hover:shadow-indigo-500/25"
                >
                  <Send className="h-4 w-4" />
                  Send Message
                </button>
              </form>
            </GlassCard>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
}