"use client";

import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { Mail, MapPin, MessageSquare, PhoneCall, Train } from "lucide-react";
import { ContactForm } from "@/features/support/components";

function ContactFormSection() {
  return (
    <div className="space-y-5">
      <div className="flex items-center gap-2 text-primary font-bold text-lg">
        <Mail className="h-5 w-5" />
        <span>By Online Form (Anytime)</span>
      </div>
      <ContactForm className="border-0 p-0 rounded-none bg-transparent" />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
        <div className="rounded-xl bg-muted/30 p-4 space-y-1.5">
          <div className="inline-flex items-center gap-2 text-primary font-semibold text-sm">
            <MessageSquare className="h-4 w-4" />
            <span>By Chat (Anytime)</span>
          </div>
          <p className="text-xs text-muted-foreground leading-relaxed">
            Click the &ldquo;Chat Button&rdquo; at the bottom right to reach our team.
          </p>
        </div>
        <div className="rounded-xl bg-muted/30 p-4 space-y-1.5">
          <div className="inline-flex items-center gap-2 text-primary font-semibold text-sm">
            <PhoneCall className="h-4 w-4" />
            <span>By Phone (9:30-18:00 JST)</span>
          </div>
          <div className="text-xs text-muted-foreground">
            <p className="font-medium text-foreground">
              Toll Free:{" "}
              <a href="tel:0120-660-470" className="text-sm font-bold text-primary hover:underline">
                0120-660-470
              </a>
            </p>
            <p className="font-medium text-foreground mt-0.5">
              Overseas:{" "}
              <a
                href="tel:+81-3-3560-1006"
                className="text-sm font-bold text-primary hover:underline"
              >
                +81-3-3560-1006
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function MapAndAddress() {
  return (
    <div className="space-y-5">
      <div className="w-full rounded-2xl overflow-hidden shadow-md border border-border/60 bg-card aspect-[4/3]">
        <iframe
          title="Assist Solutions Corp Map"
          src="https://www.google.com/maps?q=Assist+Solutions+Corp,+3-8-2+Higashi+Azabu,+Minato-ku,+Tokyo&output=embed"
          className="w-full h-full"
          loading="lazy"
          allowFullScreen
          referrerPolicy="no-referrer-when-downgrade"
        />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="rounded-2xl bg-card shadow-sm border border-border/60 p-5 space-y-2">
          <div className="inline-flex items-center gap-2 text-primary font-semibold">
            <Train className="h-5 w-5" />
            <span>Access</span>
          </div>
          <p className="text-sm text-muted-foreground">
            Subway Oedo Line / Nanboku Line
            <br />
            Short walk from Exit 6, Azabu-Juban Station
          </p>
        </div>
        <div className="rounded-2xl bg-card shadow-sm border border-border/60 p-5 space-y-2">
          <div className="inline-flex items-center gap-2 text-primary font-semibold">
            <MapPin className="h-5 w-5" />
            <span>Address</span>
          </div>
          <p className="text-sm text-muted-foreground">
            3F Azabu Maruka Bldg.,
            <br />
            3-8-2 Higashi Azabu, Minato-ku,
            <br />
            Tokyo 106-0044
          </p>
        </div>
      </div>
    </div>
  );
}

export function ContactSection() {
  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, amount: 0.1 });

  return (
    <motion.section
      id="contact"
      ref={ref}
      initial={{ opacity: 0, y: 32 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
      transition={{ duration: 0.7, ease: "easeOut" as const }}
      className="bg-surface-sunken/30 py-14 sm:py-16"
    >
      <div className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 space-y-6">
        <h2 className="text-2xl sm:text-3xl font-extrabold text-foreground font-heading">
          Tell Us What You Need
        </h2>
        <div className="rounded-2xl bg-card border border-border/60 shadow-sm p-5 sm:p-7">
          <div className="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] gap-8 lg:gap-10">
            <ContactFormSection />
            <MapAndAddress />
          </div>
        </div>
      </div>
    </motion.section>
  );
}
