"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Phone, EnvelopeSimple, MapPin, WhatsappLogo, CheckCircle } from "@phosphor-icons/react";
import Navbar from "@/components/sections/Navbar";
import Footer from "@/components/sections/Footer";

const CONTACT_ITEMS = [
  {
    icon: Phone,
    label: "Phone",
    value: "+91 8381-084990",
    subtext: "Mon – Sat, 9 AM – 7 PM",
    href: "tel:+918381084990",
    color: "bg-amber-50 text-amber-600 border-amber-200",
  },
  {
    icon: WhatsappLogo,
    label: "WhatsApp",
    value: "+91 8381-084990",
    subtext: "Quick replies within minutes",
    href: "https://wa.me/918381084990",
    color: "bg-emerald-50 text-emerald-600 border-emerald-200",
  },
  {
    icon: EnvelopeSimple,
    label: "Email",
    value: "sneha@cnergee.com",
    subtext: "Reply within 24 hours",
    href: "mailto:sneha@cnergee.com",
    color: "bg-sky-50 text-sky-600 border-sky-200",
  },
  {
    icon: MapPin,
    label: "Office",
    value: "Bengaluru, Karnataka",
    subtext: "Serving installations PAN India",
    href: "https://maps.google.com/?q=Bengaluru,Karnataka",
    color: "bg-rose-50 text-rose-600 border-rose-200",
  },
];

const TEAM = [
  {
    name: "Anoop Naidu",
    phone: "9769996785",
    email: "anoop@cnergee.com",
    initials: "AN",
    color: "bg-amber-100 text-amber-700",
  },
  {
    name: "Sujal Phalak",
    phone: "9403394630",
    email: "sujal@cnergee.com",
    initials: "SP",
    color: "bg-sky-100 text-sky-700",
  },
  {
    name: "Sneha Tandel",
    phone: "8381084990",
    email: "sneha@cnergee.com",
    initials: "ST",
    color: "bg-emerald-100 text-emerald-700",
  },
];


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

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

  return (
    <>
      <Navbar />
      <main className="flex-1" style={{ background: "#f8f4ee" }}>
        {/* Page Header — full bleed background image */}
        <div
          className="relative overflow-hidden border-b border-white/10 px-6 pt-28 pb-20 md:px-8"
          style={{
            backgroundImage: `url('/images/contact-hero.jpg')`,
            backgroundSize: "cover",
            backgroundPosition: "center 40%",
          }}
        >
          {/* Dark overlay for text legibility */}
          <div className="absolute inset-0 bg-gradient-to-b from-black/65 via-black/50 to-black/70" />
          <div className="relative z-10 mx-auto max-w-[1200px]">
            <p className="mb-2 text-xs font-semibold uppercase tracking-widest text-amber-400">
              Get in touch
            </p>
            <h1 className="text-4xl font-bold tracking-tight text-white md:text-5xl">
              Contact Us
            </h1>
            <p className="mt-3 max-w-[50ch] text-base text-zinc-300">
              Have a question about solar installation, pricing, or subsidies? Our team is ready to help.
            </p>
          </div>
        </div>

        {/* Main Content */}
        <div
          className="relative px-6 py-16 md:px-8 md:py-20"
          style={{
            backgroundImage: `url('/images/savings/bg.jpg')`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundAttachment: "fixed",
          }}
        >
          <div className="absolute inset-0 pointer-events-none" style={{ background: "rgba(248,244,238,0.92)" }} />
          <div className="relative z-10 mx-auto grid max-w-[1200px] grid-cols-1 gap-12 lg:grid-cols-[1fr_1.4fr]">

            {/* Left: Contact Info */}
            <div>
              <h2 className="mb-6 text-xl font-bold text-zinc-900">Our Team</h2>

              {/* Team Members — TOP */}
              <div className="space-y-3">
                {TEAM.map((member) => (
                  <div
                    key={member.name}
                    className="flex items-center gap-4 rounded-2xl border border-zinc-100 bg-white p-4 shadow-sm"
                  >
                    {/* Avatar */}
                    <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold ${member.color}`}>
                      {member.initials}
                    </div>
                    {/* Info */}
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-bold text-zinc-900">{member.name}</p>
                      <p className="text-xs text-zinc-500 truncate">{member.email}</p>
                    </div>
                    {/* Quick actions */}
                    <div className="flex items-center gap-2">
                      <a
                        href={`tel:+91${member.phone}`}
                        title={`Call ${member.name}`}
                        className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-50 text-amber-600 hover:bg-amber-100 transition-colors"
                      >
                        <Phone size={15} weight="fill" />
                      </a>
                      <a
                        href={`https://wa.me/91${member.phone}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        title={`WhatsApp ${member.name}`}
                        className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition-colors"
                      >
                        <WhatsappLogo size={15} weight="fill" />
                      </a>
                      <a
                        href={`mailto:${member.email}`}
                        title={`Email ${member.name}`}
                        className="flex h-8 w-8 items-center justify-center rounded-full bg-sky-50 text-sky-600 hover:bg-sky-100 transition-colors"
                      >
                        <EnvelopeSimple size={15} weight="fill" />
                      </a>
                    </div>
                  </div>
                ))}
              </div>

              {/* Business Hours */}
              <div className="mt-8 rounded-2xl border border-zinc-100 bg-zinc-50 p-5">
                <h3 className="mb-3 text-sm font-bold text-zinc-800">Business Hours</h3>
                <div className="space-y-1.5 text-sm text-zinc-600">
                  <div className="flex justify-between">
                    <span>Monday – Friday</span>
                    <span className="font-medium text-zinc-900">9:00 AM – 7:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Saturday</span>
                    <span className="font-medium text-zinc-900">10:00 AM – 5:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Sunday</span>
                    <span className="font-medium text-zinc-900">WhatsApp only</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Right: Contact Form */}
            <div>
              <div className="rounded-3xl border border-zinc-100 bg-white p-8 shadow-sm md:p-10">
                {!submitted ? (
                  <>
                    <h2 className="mb-1 text-xl font-bold text-zinc-900">Send us a message</h2>
                    <p className="mb-8 text-sm text-zinc-500">
                      Fill in your details and we&apos;ll get back to you shortly.
                    </p>

                    <form onSubmit={handleSubmit} className="space-y-5">
                      {/* Name */}
                      <label className="block">
                        <span className="mb-1.5 block text-xs font-semibold text-zinc-600">
                          Full Name <span className="text-red-400">*</span>
                        </span>
                        <input
                          type="text"
                          required
                          value={form.name}
                          onChange={(e) => setForm({ ...form, name: e.target.value })}
                          placeholder="Rajesh Kumar"
                          className="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400/20 transition-colors"
                        />
                      </label>

                      {/* Phone */}
                      <label className="block">
                        <span className="mb-1.5 block text-xs font-semibold text-zinc-600">
                          Phone Number <span className="text-red-400">*</span>
                        </span>
                        <input
                          type="tel"
                          required
                          value={form.phone}
                          onChange={(e) => setForm({ ...form, phone: e.target.value })}
                          placeholder="+91 98765 43210"
                          className="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400/20 transition-colors"
                        />
                      </label>

                      {/* Email */}
                      <label className="block">
                        <span className="mb-1.5 block text-xs font-semibold text-zinc-600">
                          Email Address <span className="text-red-400">*</span>
                        </span>
                        <input
                          type="email"
                          required
                          value={form.email}
                          onChange={(e) => setForm({ ...form, email: e.target.value })}
                          placeholder="rajesh@example.com"
                          className="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400/20 transition-colors"
                        />
                      </label>

                      {/* Message */}
                      <label className="block">
                        <span className="mb-1.5 block text-xs font-semibold text-zinc-600">
                          Message
                        </span>
                        <textarea
                          rows={4}
                          value={form.message}
                          onChange={(e) => setForm({ ...form, message: e.target.value })}
                          placeholder="Tell us about your roof, monthly electricity bill, or any questions..."
                          className="w-full resize-none rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400/20 transition-colors"
                        />
                      </label>

                      <motion.button
                        type="submit"
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                        className="w-full rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-3.5 text-sm font-bold text-white shadow-[0_8px_20px_-6px_rgba(234,88,12,0.6)] transition-all duration-300 hover:shadow-[0_12px_24px_-6px_rgba(234,88,12,0.8)]"
                      >
                        Submit Enquiry →
                      </motion.button>

                      <p className="text-center text-xs text-zinc-400">
                        We&apos;ll respond within one business day. No spam.
                      </p>
                    </form>
                  </>
                ) : (
                  <div className="flex flex-col items-center py-12 text-center">
                    <CheckCircle size={56} weight="fill" className="text-emerald-500" />
                    <h3 className="mt-5 text-2xl font-bold text-zinc-900">Message Received!</h3>
                    <p className="mt-3 max-w-[40ch] text-sm text-zinc-500">
                      Thank you, <strong>{form.name}</strong>. We&apos;ll get back to you on{" "}
                      <strong>{form.phone}</strong> or <strong>{form.email}</strong> within one business day.
                    </p>
                    <button
                      onClick={() => { setForm({ name: "", phone: "", email: "", message: "" }); setSubmitted(false); }}
                      className="mt-8 rounded-full border border-zinc-200 px-5 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-50 transition-colors"
                    >
                      Send another message
                    </button>
                  </div>
                )}
              </div>
            </div>

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