import React from "react";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Contact Us",
  description: "Get in touch with Nearle's team. Reach out for support, merchant partnerships, delivery, or general hyperlocal neighborhood inquiries.",
};

export default function ContactPage() {
  return (
    <div className="relative min-h-screen bg-background">
      {/* ─── Breadcrumbs & Hero Page Header ─── */}
      <section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
        {/* Background Image with Overlay */}
        <div className="hero-background select-none pointer-events-none">
          <Image
            src="/contect.png"
            alt="Contact Nearle Background"
            fill
            sizes="100vw"
            className="object-cover object-right"
            priority
          />
        </div>

        <div className="hero-content relative z-10 mx-auto max-w-container-max">
          {/* Header Title */}
          <p className="text-label-sm font-black uppercase tracking-[0.2em] text-brand-accent">
            Get in touch
          </p>
          <h1 className="mt-4 font-display text-4xl font-black text-white md:text-6xl tracking-tight">
            Talk to the Nearle Team
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
            Have questions about orders, partner onboardings, or neighborhood launches? Reach out and we&apos;ll help you.
          </p>
        </div>
      </section>

      {/* ─── Four Contact Info Cards ─── */}
      <section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          
          {/* Card 1: Location */}
          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
            <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
              <MaterialIcon icon="location_on" size={28} className="text-primary" />
            </div>
            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
            <p className="text-body-sm text-on-surface-variant leading-relaxed">
              Nearle HQ, 424, Diwan Bahadur Rd,<br />
              Opposite To Sri Krishna Sweets, R.S. Puram,<br />
              Coimbatore, Tamil Nadu 641002
            </p>
            <a 
              href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
              target="_blank"
              rel="noopener noreferrer"
              className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
            >
              Get Directions 
              <MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
            </a>
          </div>

          {/* Card 2: Phones */}
          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
            <div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
              <MaterialIcon icon="call" size={28} className="text-secondary" />
            </div>
            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
            <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
              <span>+91 80 4912 3456</span>
              <span>+91 422 491 2345</span>
            </p>
            <div className="mt-auto pt-4 flex gap-4">
              <a 
                href="tel:+918049123456"
                className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
              >
                Helpdesk 
                <MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
              </a>
            </div>
          </div>

          {/* Card 3: Email */}
          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
            <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
              <MaterialIcon icon="mail" size={28} className="text-primary" />
            </div>
            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
            <p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
              <a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
              <a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
            </p>
            <a 
              href="mailto:support@nearle.in"
              className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
            >
              Write to us 
              <MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
            </a>
          </div>

          {/* Card 4: Working Hours */}
          <div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
            <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
              <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
            </div>
            <h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
            <p className="text-body-sm text-on-surface-variant leading-relaxed">
              Monday - Saturday<br />
              9:00 AM - 6:00 PM<br />
              <span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
            </p>
            <div className="mt-auto pt-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
                <span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
                Helpdesk Active
              </span>
            </div>
          </div>

        </div>
      </section>

      {/* ─── Map & Form Section ─── */}
      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
          
          {/* Left: Google Map (5 Cols) */}
          <div className="lg:col-span-5 w-full">
            <div className="relative bg-white rounded-3xl overflow-hidden shadow-xl border border-outline-variant/20 group h-[450px]">
              <iframe
                title="Nearle Coimbatore Location Map"
                src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="filter contrast-[1.05] saturate-[0.9] hover:scale-[1.02] transition-transform duration-700"
              />
              {/* Map Floating Info Badge */}
              <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
                  <MaterialIcon icon="store" size={20} className="text-white" />
                </div>
                <div>
                  <h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
                  <p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
                </div>
              </div>
            </div>
          </div>

          {/* Right: Message Form (7 Cols) */}
          <ContactForm />

        </div>
      </section>
    </div>
  );
}