import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { ContactHero } from "@/components/heroes/ContactHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
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 ─── */}
      <ContactHero />

      {/* ─── Map Section ─── */}
      <AnimatedSection>
      <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>
      </AnimatedSection>
    </PremiumPageShell>
  );
}
