import React from "react";
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 (
    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
      <div className="page-frame">
        {/* ─── Redesigned Hero/Contact Section ─── */}
        <section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
          {/* Subtle decorative blurred purple glow behind left content */}
          <div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
          
          <div className="w-full mx-auto relative z-10">
            <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
              
              {/* Left Column — MUST BE VISIBLE */}
              <div className="relative z-10 text-white max-w-[580px] text-left">
                <span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
                  LET’S CONNECT
                </span>
                <h1 className="mt-4 font-display text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] text-white">
                  Let’s Build Better Neighbourhoods Together.
                </h1>
                <p className="text-white/70 text-lg leading-relaxed mt-6">
                  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-10 border-t border-white/10">
                  {/* Row 1 */}
                  <div className="flex gap-4 py-5 border-b border-white/10 items-center">
                    <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
                      <MaterialIcon icon="location_on" size={20} />
                    </div>
                    <div className="text-left">
                      <h4 className="text-white font-bold">Based in Coimbatore</h4>
                      <p className="text-white/60 text-sm mt-0.5">Building neighbourhood commerce, one local store at a time.</p>
                    </div>
                  </div>

                  {/* Row 2 */}
                  <div className="flex gap-4 py-5 border-b border-white/10 items-center">
                    <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
                      <MaterialIcon icon="schedule" size={20} />
                    </div>
                    <div className="text-left">
                      <h4 className="text-white font-bold">Talk to Our Team</h4>
                      <p className="text-white/60 text-sm mt-0.5">Monday to Saturday, 9:30 AM to 6:30 PM.</p>
                    </div>
                  </div>

                  {/* Row 3 */}
                  <div className="flex gap-4 py-5 border-b border-white/10 items-center">
                    <div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
                      <MaterialIcon icon="support_agent" size={20} />
                    </div>
                    <div className="text-left">
                      <h4 className="text-white font-bold">Quick Support</h4>
                      <p className="text-white/60 text-sm mt-0.5">Share your details and our team will get back to you.</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Right Column: Form Card */}
              <div className="w-full max-w-[520px] lg:ml-auto relative z-10">
                <ContactForm />
              </div>

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

        {/* ─── Four Contact Info Cards ─── */}
        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 px-6 md:px-12">
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            
            {/* Card 1: Location */}
            <div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 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 Section ─── */}
        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
          <div className="relative w-full 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]"
            />
            {/* 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 max-w-sm">
              <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 className="text-left">
                <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>
        </section>
      </div>
    </main>
  );
}
