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

/**
 * PublicLandingView - Clean, Cohesive Landing Page
 *
 * Design Direction: Professional and trustworthy
 * - Consistent typography (display font for headings only)
 * - Primary color accent throughout
 * - Clean card styling
 * - Staggered entrance animations
 */
export function PublicLandingView() {
  return (
    <div className="space-y-20 pb-20">
      {/* ===== HERO SECTION ===== */}
      <section className="text-center pt-12 sm:pt-20">
        {/* Badge */}
        <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/10 border border-primary/20 px-4 py-2 text-sm font-medium text-primary mb-8">
            <Award className="h-4 w-4" />
            20+ Years Serving Japan&apos;s International Community
          </span>
        </div>

        {/* Headline */}
        <h1
          className="text-display-xl font-display font-bold text-foreground mb-6 animate-in fade-in slide-in-from-bottom-6 duration-700"
          style={{ animationDelay: "100ms" }}
        >
          Your One Stop Solution
          <br />
          <span className="text-primary">for Connectivity in Japan</span>
        </h1>

        {/* Subheadline */}
        <p
          className="text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "200ms" }}
        >
          Internet, mobile, TV — all in English.
          <br />
          Full support from setup to billing to technical assistance.
        </p>

        {/* CTAs */}
        <div
          className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "300ms" }}
        >
          <Link
            href="/services"
            className="group inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3.5 font-semibold text-primary-foreground shadow-sm hover:bg-primary-hover hover:shadow-md transition-all"
          >
            Browse Services
            <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-0.5" />
          </Link>
          <Link
            href="/contact"
            className="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-6 py-3.5 font-semibold text-foreground hover:bg-muted transition-colors"
          >
            <Phone className="h-5 w-5 text-muted-foreground" />
            Contact Us
          </Link>
        </div>

        {/* Trust Stats */}
        <div
          className="flex flex-wrap justify-center gap-10 sm:gap-16 pt-10 border-t border-border animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "400ms" }}
        >
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10">
              <Calendar className="h-5 w-5 text-primary" />
            </div>
            <div className="text-left">
              <div className="text-2xl font-bold text-foreground">20+</div>
              <div className="text-sm text-muted-foreground">Years in Japan</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10">
              <Globe className="h-5 w-5 text-primary" />
            </div>
            <div className="text-left">
              <div className="text-2xl font-bold text-foreground">10,000+</div>
              <div className="text-sm text-muted-foreground">Customers Served</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10">
              <Award className="h-5 w-5 text-primary" />
            </div>
            <div className="text-left">
              <div className="text-2xl font-bold text-foreground">NTT</div>
              <div className="text-sm text-muted-foreground">Authorized Partner</div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== WHY CHOOSE US ===== */}
      <section
        className="animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "500ms" }}
      >
        <div className="text-center mb-10">
          <h2 className="text-display-sm font-display font-bold text-foreground mb-3">
            Why Choose Us
          </h2>
          <p className="text-muted-foreground max-w-md mx-auto">
            We understand the challenges of living in Japan as an expat.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
          {/* Card 1 */}
          <div className="rounded-xl border border-border bg-card p-6 hover:shadow-md hover:border-primary/20 transition-all">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-4">
              <CheckCircle2 className="h-6 w-6 text-primary" />
            </div>
            <h3 className="text-lg font-semibold text-foreground mb-2">One Stop Solution</h3>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Internet, mobile, TV, VPN — all from one provider. One bill, one support team.
            </p>
          </div>

          {/* Card 2 */}
          <div className="rounded-xl border border-border bg-card p-6 hover:shadow-md hover:border-primary/20 transition-all">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-4">
              <Headphones className="h-6 w-6 text-primary" />
            </div>
            <h3 className="text-lg font-semibold text-foreground mb-2">Full English Support</h3>
            <p className="text-sm text-muted-foreground leading-relaxed">
              No language barrier. Our bilingual team handles everything in English.
            </p>
          </div>

          {/* Card 3 */}
          <div className="rounded-xl border border-border bg-card p-6 hover:shadow-md hover:border-primary/20 transition-all">
            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 mb-4">
              <Wrench className="h-6 w-6 text-primary" />
            </div>
            <h3 className="text-lg font-semibold text-foreground mb-2">Onsite Support</h3>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Our technicians come to you for setup, troubleshooting, and maintenance.
            </p>
          </div>
        </div>
      </section>

      {/* ===== OUR SERVICES ===== */}
      <section id="services">
        <div
          className="text-center mb-10 animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "500ms" }}
        >
          <h2 className="text-display-sm font-display font-bold text-foreground mb-3">
            Our Services
          </h2>
          <p className="text-muted-foreground max-w-md mx-auto">
            Connectivity solutions designed for Japan&apos;s international community.
          </p>
        </div>

        {/* Value Props */}
        <div className="flex flex-wrap justify-center gap-6 text-sm mb-10">
          <div className="flex items-center gap-2 text-muted-foreground">
            <CheckCircle2 className="h-4 w-4 text-primary" />
            <span>No hidden fees</span>
          </div>
          <div className="flex items-center gap-2 text-muted-foreground">
            <CheckCircle2 className="h-4 w-4 text-primary" />
            <span>English support</span>
          </div>
          <div className="flex items-center gap-2 text-muted-foreground">
            <CheckCircle2 className="h-4 w-4 text-primary" />
            <span>Fast setup</span>
          </div>
        </div>

        {/* Services Grid */}
        <div 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"
          />
        </div>

        <div className="text-center mt-8">
          <Link
            href="/services"
            className="inline-flex items-center gap-2 text-primary font-medium hover:underline underline-offset-4"
          >
            View all services
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </section>

      {/* ===== CTA ===== */}
      <section
        className="rounded-2xl bg-primary p-8 sm:p-12 text-center animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "700ms" }}
      >
        <h2 className="text-2xl sm:text-3xl font-bold text-primary-foreground mb-4">
          Ready to Get Connected?
        </h2>
        <p className="text-primary-foreground/80 mb-8 max-w-lg mx-auto">
          Our bilingual team is here to help you find the right solution for your needs.
        </p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            href="/contact"
            className="group inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3.5 font-semibold text-primary hover:bg-white/90 transition-colors"
          >
            Get Started
            <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-0.5" />
          </Link>
          <a
            href="tel:0120660470"
            className="inline-flex items-center gap-2 font-medium text-primary-foreground/90 hover:text-primary-foreground transition-colors"
            aria-label="Call us toll free at 0120-660-470"
          >
            <Phone className="h-5 w-5" aria-hidden="true" />
            0120-660-470 (Toll Free)
          </a>
        </div>
      </section>
    </div>
  );
}
