import Link from "next/link";
import {
  Wifi,
  Smartphone,
  ShieldCheck,
  ArrowRight,
  Phone,
  CheckCircle2,
  Globe,
  Headphones,
  Building2,
  Wrench,
  Tv,
} from "lucide-react";
import { ServiceCard } from "@/components/molecules/ServiceCard";

/**
 * PublicServicesOverview - Public-facing services landing page.
 *
 * Shows all available services with hero section, value propositions,
 * service cards grid, and contact CTA.
 */
export function PublicServicesOverview() {
  return (
    <div className="space-y-12 pb-16">
      {/* Hero */}
      <section className="text-center pt-8">
        <div
          className="animate-in fade-in slide-in-from-bottom-4 duration-500"
          style={{ animationDelay: "0ms" }}
        >
          <span className="inline-flex items-center gap-2 rounded-full bg-primary/8 border border-primary/15 px-4 py-2 text-sm text-primary font-medium mb-6">
            <CheckCircle2 className="h-4 w-4" />
            Full English Support
          </span>
        </div>

        <h1
          className="text-display-lg font-display font-bold text-foreground mb-4 animate-in fade-in slide-in-from-bottom-6 duration-700"
          style={{ animationDelay: "100ms" }}
        >
          Our Services
        </h1>

        <p
          className="text-lg text-muted-foreground max-w-xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "200ms" }}
        >
          Connectivity and support solutions for Japan&apos;s international community.
        </p>
      </section>

      {/* Value Props - Compact */}
      <section
        className="flex flex-wrap justify-center gap-6 text-sm animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "300ms" }}
      >
        <div className="flex items-center gap-2 text-muted-foreground">
          <Globe className="h-4 w-4 text-primary" />
          <span>One provider, all services</span>
        </div>
        <div className="flex items-center gap-2 text-muted-foreground">
          <Headphones className="h-4 w-4 text-success" />
          <span>English support</span>
        </div>
        <div className="flex items-center gap-2 text-muted-foreground">
          <CheckCircle2 className="h-4 w-4 text-info" />
          <span>No hidden fees</span>
        </div>
      </section>

      {/* All Services - Clean Grid with staggered animations */}
      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 cp-stagger-children">
        <ServiceCard
          href="/services/internet"
          icon={<Wifi className="h-6 w-6" />}
          title="Internet"
          description="NTT Optical Fiber for homes and apartments. Speeds up to 10Gbps with professional installation."
          price="¥3,200/mo"
          accentColor="blue"
        />

        <ServiceCard
          href="/services/sim"
          icon={<Smartphone className="h-6 w-6" />}
          title="SIM & eSIM"
          description="Data, voice & SMS on NTT Docomo network. Physical SIM or instant eSIM activation."
          price="¥1,100/mo"
          badge="1st month free"
          accentColor="green"
        />

        <ServiceCard
          href="/services/vpn"
          icon={<ShieldCheck className="h-6 w-6" />}
          title="VPN Router"
          description="Access US & UK streaming content with a pre-configured router. Simple plug-and-play."
          price="¥2,500/mo"
          accentColor="purple"
        />

        <ServiceCard
          href="/services/business"
          icon={<Building2 className="h-6 w-6" />}
          title="Business"
          description="Enterprise solutions for offices and commercial spaces. Dedicated support and SLAs."
          accentColor="orange"
        />

        <ServiceCard
          href="/services/onsite"
          icon={<Wrench className="h-6 w-6" />}
          title="Onsite Support"
          description="Professional technicians visit your location for setup, troubleshooting, and maintenance."
          accentColor="cyan"
        />

        <ServiceCard
          href="/services/tv"
          icon={<Tv className="h-6 w-6" />}
          title="TV"
          description="Streaming TV packages with international channels. Watch content from home countries."
          accentColor="pink"
        />
      </section>

      {/* CTA */}
      <section
        className="rounded-2xl bg-gradient-to-br from-muted/50 to-muted/80 p-8 text-center animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "500ms" }}
      >
        <h2 className="text-xl font-bold text-foreground font-display mb-3">Need help choosing?</h2>
        <p className="text-muted-foreground mb-6 max-w-md mx-auto">
          Our bilingual team can help you find the right solution.
        </p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
          <Link
            href="/contact"
            className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 font-medium text-primary-foreground hover:bg-primary-hover transition-colors"
          >
            Contact Us
            <ArrowRight className="h-4 w-4" />
          </Link>
          <a
            href="tel:0120660470"
            className="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
            aria-label="Call us toll free at 0120-660-470"
          >
            <Phone className="h-4 w-4" aria-hidden="true" />
            0120-660-470 (Toll Free)
          </a>
        </div>
      </section>
    </div>
  );
}
