Assist_Design/apps/portal/src/features/landing-page/views/PublicLandingView.tsx

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

/**
 * PublicLandingView - Clean Landing Page
 *
 * Design Direction: Matches services page style
 * - Clean, centered layout
 * - Consistent card styling with colored accents
 * - Simple value propositions
 * - Staggered entrance animations
 */
export function PublicLandingView() {
  return (
    <div className="space-y-16 pb-16">
      {/* ===== HERO SECTION ===== */}
      <section className="text-center pt-12 sm:pt-16">
        <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" />
            20+ Years Serving Japan
          </span>
        </div>

        <h1
          className="text-display-lg sm:text-display-xl font-display font-bold text-foreground mb-5 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>

        <p
          className="text-lg text-muted-foreground max-w-xl mx-auto mb-8 animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "200ms" }}
        >
          Full English support for all your connectivity needs — from setup to billing to technical
          assistance.
        </p>

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

        {/* Trust Stats */}
        <div
          className="flex flex-wrap justify-center gap-8 pt-8 border-t border-border/50 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-10 w-10 items-center justify-center rounded-lg bg-primary/8">
              <Calendar className="h-5 w-5 text-primary" />
            </div>
            <div className="text-left">
              <div className="text-lg 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-10 w-10 items-center justify-center rounded-lg bg-success/10">
              <Users className="h-5 w-5 text-success" />
            </div>
            <div className="text-left">
              <div className="text-lg 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-10 w-10 items-center justify-center rounded-lg bg-info/10">
              <Shield className="h-5 w-5 text-info" />
            </div>
            <div className="text-left">
              <div className="text-lg 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 unique challenges of living in Japan as an expat.
          </p>
        </div>

        <div className="flex flex-wrap justify-center gap-6 text-sm">
          <div className="flex items-center gap-3 rounded-xl border bg-card px-5 py-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
              <CheckCircle2 className="h-5 w-5 text-blue-600" />
            </div>
            <div>
              <div className="font-semibold text-foreground">One Stop Solution</div>
              <div className="text-muted-foreground">We handle everything for you</div>
            </div>
          </div>
          <div className="flex items-center gap-3 rounded-xl border bg-card px-5 py-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-green-500/10">
              <Headphones className="h-5 w-5 text-green-600" />
            </div>
            <div>
              <div className="font-semibold text-foreground">English Support</div>
              <div className="text-muted-foreground">No language barrier</div>
            </div>
          </div>
          <div className="flex items-center gap-3 rounded-xl border bg-card px-5 py-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10">
              <Globe className="h-5 w-5 text-purple-600" />
            </div>
            <div>
              <div className="font-semibold text-foreground">Onsite Support</div>
              <div className="text-muted-foreground">We come to you</div>
            </div>
          </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 and support solutions 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">
            <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>
        </div>

        {/* Services Grid - uses cp-stagger-children for consistent card animations */}
        <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-gradient-to-br from-muted/50 to-muted/80 p-8 sm:p-10 text-center animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "700ms" }}
      >
        <h2 className="text-xl font-bold text-foreground font-display mb-3">
          Ready to get connected?
        </h2>
        <p className="text-muted-foreground mb-6 max-w-md 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-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>
  );
}