"use client";

import { motion } from "framer-motion";
import { Phone, EnvelopeSimple, MapPin, WhatsappLogo, Clock } from "@phosphor-icons/react";
import { AnimatedSection, AnimatedItem } from "@/components/ui/AnimatedSection";
import EyebrowBadge from "@/components/ui/EyebrowBadge";

const CONTACT_ITEMS = [
  {
    icon: Phone,
    label: "Call Us",
    value: "+91 98765 43210",
    subtext: "Mon – Sat, 9 AM to 7 PM",
    href: "tel:+919876543210",
    color: "text-amber-400",
    bg: "bg-amber-500/15 border-amber-400/30",
  },
  {
    icon: WhatsappLogo,
    label: "WhatsApp",
    value: "+91 98765 43210",
    subtext: "Quick replies, usually in minutes",
    href: "https://wa.me/919876543210",
    color: "text-emerald-400",
    bg: "bg-emerald-500/15 border-emerald-400/30",
  },
  {
    icon: EnvelopeSimple,
    label: "Email",
    value: "hello@cloudhelio.in",
    subtext: "We respond within 24 hours",
    href: "mailto:hello@cloudhelio.in",
    color: "text-sky-400",
    bg: "bg-sky-500/15 border-sky-400/30",
  },
  {
    icon: MapPin,
    label: "Office",
    value: "Bengaluru, Karnataka",
    subtext: "Serving PAN India installations",
    href: "https://maps.google.com/?q=Bengaluru,Karnataka",
    color: "text-rose-400",
    bg: "bg-rose-500/15 border-rose-400/30",
  },
];

export default function ContactSection() {
  return (
    <section
      id="contact"
      className="relative z-10 overflow-hidden bg-zinc-950 px-6 py-24 md:px-8 md:py-32"
    >
      {/* Background Glow */}
      <div className="pointer-events-none absolute inset-0 z-0 bg-[radial-gradient(circle_at_50%_80%,rgba(245,158,11,0.07)_0%,transparent_70%)]" />

      <AnimatedSection className="relative z-10 mx-auto max-w-[1400px]">
        {/* Header */}
        <div className="mb-14 grid grid-cols-1 gap-8 lg:grid-cols-[1fr_1.6fr] lg:items-end">
          <div>
            <AnimatedItem>
              <EyebrowBadge tone="dark" className="mb-4">
                Get in touch
              </EyebrowBadge>
            </AnimatedItem>
            <AnimatedItem>
              <h2 className="text-3xl font-semibold tracking-tight text-white md:text-5xl">
                Let&apos;s talk about your roof.
              </h2>
            </AnimatedItem>
            <AnimatedItem>
              <p className="mt-4 max-w-[46ch] text-sm leading-relaxed text-zinc-400 md:text-base">
                Our solar engineers are available 6 days a week to answer technical queries,
                site visit requests, or anything else you need before making a decision.
              </p>
            </AnimatedItem>
          </div>

          {/* Business Hours Card */}
          <AnimatedItem>
            <div className="flex items-center gap-4 rounded-2xl border border-white/10 bg-zinc-900/60 px-6 py-5 backdrop-blur-md">
              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-500/20 border border-amber-400/30">
                <Clock size={20} className="text-amber-400" />
              </div>
              <div>
                <p className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Business Hours</p>
                <p className="mt-1 text-sm font-bold text-white">Monday – Saturday &nbsp;·&nbsp; 9:00 AM – 7:00 PM IST</p>
                <p className="text-xs text-zinc-500">WhatsApp available on Sundays for urgent queries</p>
              </div>
            </div>
          </AnimatedItem>
        </div>

        {/* Contact Cards Grid */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {CONTACT_ITEMS.map((item, i) => (
            <AnimatedItem key={item.label}>
              <motion.a
                href={item.href}
                target={item.href.startsWith("http") ? "_blank" : undefined}
                rel={item.href.startsWith("http") ? "noopener noreferrer" : undefined}
                whileHover={{ scale: 1.03, y: -4 }}
                whileTap={{ scale: 0.97 }}
                className={`group flex flex-col gap-4 rounded-2xl border p-6 transition-all duration-300 hover:shadow-[0_10px_30px_rgba(0,0,0,0.5)] ${item.bg} backdrop-blur-md`}
              >
                <div className="flex items-center justify-between">
                  <div className={`flex h-11 w-11 items-center justify-center rounded-xl border ${item.bg}`}>
                    <item.icon size={22} weight="fill" className={item.color} />
                  </div>
                  <span className="text-lg transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
                    ↗
                  </span>
                </div>

                <div>
                  <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-500">
                    {item.label}
                  </p>
                  <p className={`mt-1 text-base font-bold ${item.color}`}>
                    {item.value}
                  </p>
                  <p className="mt-1 text-xs leading-relaxed text-zinc-500">
                    {item.subtext}
                  </p>
                </div>
              </motion.a>
            </AnimatedItem>
          ))}
        </div>

        {/* Quick Contact Form Strip */}
        <AnimatedItem>
          <div className="mt-10 rounded-3xl border border-white/10 bg-zinc-900/60 p-8 backdrop-blur-md md:p-10">
            <h3 className="mb-6 text-lg font-bold text-white">Send us your details and we&apos;ll reach out</h3>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const t = e.target as HTMLFormElement;
                const name = (t.querySelector('[name="contact-name"]') as HTMLInputElement)?.value;
                const phone = (t.querySelector('[name="contact-phone"]') as HTMLInputElement)?.value;
                const email = (t.querySelector('[name="contact-email"]') as HTMLInputElement)?.value;
                const msg = `Hello CloudHelio! My name is ${name}. Phone: ${phone}. Email: ${email}.`;
                window.open(`https://wa.me/919876543210?text=${encodeURIComponent(msg)}`, "_blank");
              }}
              className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-4"
            >
              <label className="block">
                <span className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">Your Name</span>
                <input
                  name="contact-name"
                  type="text"
                  required
                  placeholder="Rajesh Kumar"
                  className="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white placeholder-zinc-600 focus:border-amber-400 focus:outline-none"
                />
              </label>
              <label className="block">
                <span className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">Phone Number</span>
                <input
                  name="contact-phone"
                  type="tel"
                  required
                  placeholder="+91 98765 43210"
                  className="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white placeholder-zinc-600 focus:border-amber-400 focus:outline-none"
                />
              </label>
              <label className="block">
                <span className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">Email Address</span>
                <input
                  name="contact-email"
                  type="email"
                  required
                  placeholder="rajesh@example.com"
                  className="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm text-white placeholder-zinc-600 focus:border-amber-400 focus:outline-none"
                />
              </label>
              <div className="flex items-end">
                <motion.button
                  type="submit"
                  whileHover={{ scale: 1.04 }}
                  whileTap={{ scale: 0.96 }}
                  className="w-full rounded-2xl bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-3 text-sm font-bold text-white shadow-[0_10px_24px_-8px_rgba(234,88,12,0.7)] transition-all duration-300 hover:shadow-[0_14px_28px_-8px_rgba(234,88,12,0.9)]"
                >
                  Send via WhatsApp ↗
                </motion.button>
              </div>
            </form>
          </div>
        </AnimatedItem>
      </AnimatedSection>
    </section>
  );
}