import type { Metadata } from "next";
import { CalendarDays, Clock, Mail, MapPin, MessageCircle, Phone } from "lucide-react";
import { AnimatedSection } from "@/components/ui/AnimatedSection";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { ContactForm } from "@/components/sections/ContactForm";
import { LuxuryButton } from "@/components/ui/LuxuryButton";
import { buildWhatsAppUrl, serviceAreas } from "@/data/content";

export const metadata: Metadata = {
  title: "Contact & Consultation",
  description:
    "Book an interior design consultation with Aureva Studio for home interiors, villa interiors, office interiors, architecture planning, renovation, and turnkey execution.",
};

const contactItems = [
  { icon: Phone, label: "Phone", value: "+91 XXXXX XXXXX" },
  { icon: Mail, label: "Email", value: "hello@aurevastudio.com" },
  { icon: MapPin, label: "Location", value: "Studio location placeholder, India" },
  { icon: Clock, label: "Business Hours", value: "Mon - Sat, 10:00 AM - 7:00 PM" },
];

export default function ContactPage() {
  return (
    <>
      <section className="bg-ivory pt-36 md:pt-44">
        <div className="luxury-container pb-16">
          <AnimatedSection>
            <SectionHeader
              eyebrow="Contact / Consultation"
              title="Tell us about your space. We will help you plan the next move."
              copy="Share your property type, project timeline, budget range, and preferred consultation mode. Our design consultant will contact you shortly."
            />
          </AnimatedSection>
        </div>
      </section>

      <section className="section-y marble-surface pt-0">
        <div className="luxury-container grid gap-10 lg:grid-cols-[1.15fr_0.85fr]">
          <AnimatedSection>
            <ContactForm />
          </AnimatedSection>
          <AnimatedSection delay={0.1}>
            <aside className="space-y-5 lg:sticky lg:top-28">
              <div className="rounded-[34px] border border-charcoal/10 bg-charcoal p-6 text-warm-white shadow-[0_24px_70px_rgba(24,21,17,0.16)]">
                <MessageCircle className="h-8 w-8 text-champagne" aria-hidden="true" />
                <h2 className="mt-5 font-serif text-4xl font-semibold">
                  Prefer a faster enquiry?
                </h2>
                <p className="mt-3 text-sm leading-7 text-warm-white/70">
                  Use WhatsApp to share your project type, location, and timeline
                  directly with the design consultant.
                </p>
                <LuxuryButton
                  href={buildWhatsAppUrl()}
                  external
                  variant="light"
                  className="mt-6 w-full"
                  icon={<MessageCircle className="h-4 w-4" aria-hidden="true" />}
                >
                  Start WhatsApp Chat
                </LuxuryButton>
              </div>

              <div className="rounded-[34px] border border-charcoal/10 bg-warm-white/86 p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <h3 className="font-serif text-3xl font-semibold text-charcoal">
                  Studio Details
                </h3>
                <div className="mt-5 space-y-4">
                  {contactItems.map((item) => {
                    const Icon = item.icon;
                    return (
                      <div key={item.label} className="flex gap-3">
                        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-champagne/14 text-bronze">
                          <Icon className="h-5 w-5" aria-hidden="true" />
                        </span>
                        <div>
                          <p className="text-xs font-semibold uppercase text-muted">
                            {item.label}
                          </p>
                          <p className="mt-1 text-sm font-semibold text-charcoal">
                            {item.value}
                          </p>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              <div className="rounded-[34px] border border-charcoal/10 bg-warm-white/86 p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <h3 className="font-serif text-3xl font-semibold text-charcoal">
                  Service Areas
                </h3>
                <div className="mt-5 flex flex-wrap gap-2">
                  {serviceAreas.map((area) => (
                    <span
                      key={area}
                      className="rounded-full border border-charcoal/10 bg-white/70 px-3 py-2 text-xs font-semibold text-charcoal"
                    >
                      {area}
                    </span>
                  ))}
                </div>
              </div>

              <div className="min-h-64 rounded-[34px] border border-charcoal/10 bg-[linear-gradient(135deg,rgba(255,250,242,0.95),rgba(231,222,208,0.72))] p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <MapPin className="h-8 w-8 text-bronze" aria-hidden="true" />
                <h3 className="mt-4 font-serif text-3xl font-semibold text-charcoal">
                  Google Map Placeholder
                </h3>
                <p className="mt-3 text-sm leading-7 text-muted">
                  Embed the live studio map here once the final address is
                  available.
                </p>
              </div>

              <div className="rounded-[34px] border border-champagne/30 bg-champagne/10 p-6">
                <CalendarDays className="h-7 w-7 text-bronze" aria-hidden="true" />
                <p className="mt-4 text-sm leading-7 text-muted">
                  Trust note: Every enquiry is reviewed by a design consultant,
                  not routed through a fake chatbot.
                </p>
              </div>
            </aside>
          </AnimatedSection>
        </div>
      </section>
    </>
  );
}