import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
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 (
    <PremiumPageShell>
      {/* ─── Contact Section ─── */}
      <section className="relative border-b border-[#6330D6]/10 px-4 py-10 md:px-6 md:py-12 lg:px-8 lg:py-14 xl:px-10 xl:py-16 2xl:px-12 2xl:py-20">
        
        {/* Subtle Map Grid/Location decoration behind left content */}
        <div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
          <svg className="w-full h-full text-[#6330D6]" stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 400 300">
            <path d="M0,50 L400,50 M0,130 L400,130 M0,210 L400,210 M80,0 L80,300 M200,0 L200,300 M320,0 L320,300" />
            <path d="M 80,130 C 120,90 160,170 200,130 C 240,90 280,170 320,130" strokeDasharray="3,3" />
            <circle cx="200" cy="130" r="4" fill="currentColor" />
            <circle cx="200" cy="130" r="14" strokeWidth="1" />
            <circle cx="80" cy="50" r="3" fill="currentColor" />
            <circle cx="320" cy="210" r="3" fill="currentColor" />
          </svg>
        </div>

        {/* <div className="w-full mx-auto relative z-10"> */}
       <div className="relative z-10 mx-auto w-full max-w-[1520px]"> 
          <div className="grid grid-cols-1 items-start gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:gap-12 xl:gap-16">
            
            {/* Left Column — Contact Info */}
            <div className="w-full max-w-[760px] py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
                Contact Us
              </span>
              <h1 className="font-display text-4xl font-black leading-[1.05] text-[#16001D] md:text-5xl lg:text-[58px] xl:text-[64px] 2xl:text-[70px]">
                We’re Here to <br />
                <span className="text-[#6330D6]">Help You.</span>
              </h1>
              <p className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#5E5866] md:text-base xl:text-lg">
                Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
              </p>

              {/* Info Rows */}
              <div className="mt-8 border-t border-[#6330D6]/10">
                {/* Call Us */}
                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
                    <MaterialIcon icon="phone" size={18} />
                  </div>
                  <div className="text-left">
                    <h4 className="text-[#16001D] text-sm font-black">Call Us</h4>
                    <p className="text-[#5E5866] text-sm font-semibold mt-0.5">+91 909 206 8666</p>
                  </div>
                </div>

                {/* Email Us */}
                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
                    <MaterialIcon icon="mail" size={18} />
                  </div>
                  <div className="text-left">
                    <h4 className="text-[#16001D] text-sm font-black">Email Us</h4>
                    <p className="text-[#5E5866] text-sm font-semibold mt-0.5">support@nearle.in • partners@nearle.in</p>
                  </div>
                </div>

                {/* Visit Us */}
                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
                    <MaterialIcon icon="location_on" size={18} />
                  </div>
                  <div className="text-left">
                    <h4 className="text-[#16001D] text-sm font-black">Visit Us</h4>
                    <p className="text-[#5E5866] text-sm font-semibold mt-0.5">424, DB Rd, R.S. Puram, Coimbatore, TN 641002</p>
                  </div>
                </div>

                {/* Helpdesk */}
                <div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
                  <div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
                    <MaterialIcon icon="support_agent" size={18} />
                  </div>
                  <div className="text-left">
                    <h4 className="text-[#16001D] text-sm font-black">Helpdesk</h4>
                    <p className="text-[#5E5866] text-sm font-semibold mt-0.5">24/7 Phone Helpdesk Active</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Column: Compact Form Card */}
          <div className="w-full max-w-[660px] justify-self-end pt-10 lg:pt-14 xl:pt-26">  
              <ContactForm />
            </div>

          </div>
        </div>
      </section>

      {/* ─── Map Section ─── */}
      <section className="bg-[#FAF7FD] px-4 py-8 md:px-6 lg:px-8 xl:px-10 2xl:px-12">
        <div className="mx-auto w-full ">
          <div className="relative h-[420px] overflow-hidden rounded-2xl border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
          <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]"
          />
          {/* Map Floating Info Badge */}
          <div className="absolute bottom-6 left-6 bg-white/95 backdrop-blur-sm rounded-xl p-3.5 border border-[#6330D6]/10 shadow-lg flex items-center gap-3 max-w-[280px]">
            <div className="w-8 h-8 rounded-lg bg-[#6330D6] flex items-center justify-center shrink-0">
              <MaterialIcon icon="store" size={16} className="text-white" />
            </div>
            <div className="text-left">
              <h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
              <p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
            </div>
          </div>
        </div>
        </div>
      </section>
    </PremiumPageShell>
  );
}