import { Mail, MapPin, Phone, MessageSquare, Clock, Send, ExternalLink } from "lucide-react";
import { ContactForm } from "@/features/support/components";

/**
 * PublicContactView - Focused contact page with form + sidebar info
 */
function ContactSidebar() {
  return (
    <div className="space-y-4">
      <a
        href="tel:0120-660-470"
        className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4 hover:border-primary/40 hover:shadow-md transition-all duration-200"
      >
        <div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors shrink-0">
          <Phone className="h-5 w-5" />
        </div>
        <div>
          <h3 className="font-bold text-foreground text-sm group-hover:text-primary transition-colors">
            Call Us
          </h3>
          <p className="text-base font-bold text-primary">0120-660-470</p>
          <p className="text-xs text-muted-foreground">Toll-free in Japan</p>
        </div>
      </a>

      <div className="flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4">
        <div className="h-10 w-10 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
          <MessageSquare className="h-5 w-5" />
        </div>
        <div>
          <h3 className="font-bold text-foreground text-sm">Live Chat</h3>
          <p className="text-sm text-muted-foreground">Available during business hours</p>
        </div>
      </div>

      <a
        href="mailto:support@assist-solutions.jp"
        className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4 hover:border-emerald-500/40 hover:shadow-md transition-all duration-200"
      >
        <div className="h-10 w-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white transition-colors shrink-0">
          <Mail className="h-5 w-5" />
        </div>
        <div>
          <h3 className="font-bold text-foreground text-sm group-hover:text-emerald-500 transition-colors">
            Email Us
          </h3>
          <p className="text-sm text-muted-foreground">support@assist-solutions.jp</p>
        </div>
      </a>

      <div className="bg-muted/30 rounded-2xl p-4">
        <div className="flex items-center gap-3 mb-3">
          <Clock className="h-5 w-5 text-muted-foreground" />
          <h3 className="font-bold text-foreground text-sm">Business Hours</h3>
        </div>
        <p className="text-sm text-muted-foreground">Mon - Fri, 9:30 AM - 6:00 PM JST</p>
      </div>

      <div className="bg-card rounded-2xl border border-border/60 p-4">
        <div className="flex items-center gap-3 mb-3">
          <MapPin className="h-5 w-5 text-primary" />
          <h3 className="font-bold text-foreground text-sm">Our Office</h3>
        </div>
        <address className="text-sm text-muted-foreground leading-relaxed not-italic mb-3">
          3F Azabu Maruka Bldg., 3-8-2 Higashi Azabu,
          <br />
          Minato-ku, Tokyo 106-0044
        </address>
        <p className="text-xs text-muted-foreground mb-3">
          5 min walk from Exit 6, Azabu-Juban Station
        </p>
        <a
          href="https://www.google.com/maps/dir//Assist+Solutions+Corp,+3-8-2+Higashi+Azabu,+Minato-ku,+Tokyo"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1.5 text-primary text-sm font-medium hover:underline"
        >
          Get Directions <ExternalLink className="h-3.5 w-3.5" />
        </a>
      </div>

      <div className="rounded-2xl overflow-hidden border border-border/60 h-[200px]">
        <iframe
          title="Assist Solutions Corp Office"
          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>
  );
}

export function PublicContactView() {
  return (
    <div className="max-w-6xl mx-auto px-4 pb-0">
      <div className="text-center mb-10 pt-8">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-4 text-primary">
          <Send className="h-8 w-8" />
        </div>
        <h1 className="text-4xl sm:text-5xl font-extrabold text-foreground mb-3 tracking-tight">
          Get in Touch
        </h1>
        <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
          Our English-speaking team is here to help. Fill out the form below or reach us through any
          of the channels listed.
        </p>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-14">
        <div className="lg:col-span-2">
          <ContactForm />
        </div>
        <ContactSidebar />
      </div>
    </div>
  );
}
