"use client";

import {
  Building2,
  Users,
  Calendar,
  CircleDollarSign,
  Phone,
  MapPin,
  Clock,
  CheckCircle,
} from "lucide-react";

/**
 * AboutUsView - Corporate profile and company information
 *
 * Displays company background, corporate data, business activities,
 * and mission statement for Assist Solutions.
 */
export function AboutUsView() {
  return (
    <div className="max-w-4xl mx-auto space-y-12">
      {/* Header */}
      <div className="text-center">
        <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: "0ms" }}
        >
          About Us
        </h1>
        <p
          className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700"
          style={{ animationDelay: "100ms" }}
        >
          We specialize in serving Japan&apos;s international community with the most reliable and
          cost-efficient IT solutions available.
        </p>
      </div>

      {/* Who We Are Section */}
      <section
        className="bg-card rounded-2xl border border-border p-8 sm:p-10 animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "200ms" }}
      >
        <div className="flex items-center gap-3 mb-6">
          <div className="h-12 w-12 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center">
            <Building2 className="h-6 w-6 text-primary" />
          </div>
          <h2 className="text-display-sm font-display font-bold text-foreground">Who We Are</h2>
        </div>
        <div className="space-y-4 text-muted-foreground leading-relaxed">
          <p>
            Assist Solutions Corp. is a privately-owned entrepreneurial IT service company. We
            specialize in serving Japan&apos;s international community with the most reliable and
            cost-efficient IT & TV solutions available.
          </p>
          <p>
            We are dedicated to providing comfortable support for our customer&apos;s diverse needs
            in both English and Japanese. We believe that our excellent bi-lingual support and
            flexible service along with our knowledge and experience in the field are what sets us
            apart from the rest of the information technology and broadcasting industry.
          </p>
        </div>
      </section>

      {/* Corporate Data Section */}
      <section
        className="bg-card rounded-2xl border border-border p-8 sm:p-10 animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "300ms" }}
      >
        <div className="flex items-center gap-3 mb-6">
          <div className="h-12 w-12 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center">
            <Users className="h-6 w-6 text-primary" />
          </div>
          <h2 className="text-display-sm font-display font-bold text-foreground">Corporate Data</h2>
        </div>
        <p className="text-muted-foreground mb-6">
          Assist Solutions is a privately-owned entrepreneurial IT supporting company, focused on
          the international community in Japan.
        </p>

        <div className="divide-y divide-border">
          {/* Company Name */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground">Name</div>
            <div className="sm:col-span-2 text-muted-foreground">
              Assist Solutions Corp.
              <br />
              <span className="text-sm">(Notified Telecommunication Carrier: A-19-9538)</span>
            </div>
          </div>

          {/* Address */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground flex items-center gap-2">
              <MapPin className="h-4 w-4 text-primary" />
              Address
            </div>
            <div className="sm:col-span-2 text-muted-foreground">
              3F Azabu Maruka Bldg., 3-8-2 Higashi Azabu,
              <br />
              Minato-ku, Tokyo 106-0044
            </div>
          </div>

          {/* Phone/Fax */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground flex items-center gap-2">
              <Phone className="h-4 w-4 text-primary" />
              Tel / Fax
            </div>
            <div className="sm:col-span-2 text-muted-foreground">
              Tel: 03-3560-1006
              <br />
              Fax: 03-3560-1007
            </div>
          </div>

          {/* Business Hours */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground flex items-center gap-2">
              <Clock className="h-4 w-4 text-primary" />
              Business Hours
            </div>
            <div className="sm:col-span-2 text-muted-foreground space-y-1">
              <div>Mon - Fri 9:30AM - 6:00PM — Customer Support Team</div>
              <div>Mon - Fri 9:30AM - 6:00PM — In-office Tech Support Team</div>
              <div>Mon - Sat 10:00AM - 9:00PM — Onsite Tech Support Team</div>
            </div>
          </div>

          {/* Representative */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground">Representative Director</div>
            <div className="sm:col-span-2 text-muted-foreground">Daisuke Nagakawa</div>
          </div>

          {/* Employees */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground">Employees</div>
            <div className="sm:col-span-2 text-muted-foreground">
              21 Staff Members (as of March 31st, 2025)
            </div>
          </div>

          {/* Established */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground flex items-center gap-2">
              <Calendar className="h-4 w-4 text-primary" />
              Established
            </div>
            <div className="sm:col-span-2 text-muted-foreground">March 8, 2002</div>
          </div>

          {/* Capital */}
          <div className="py-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
            <div className="font-medium text-foreground flex items-center gap-2">
              <CircleDollarSign className="h-4 w-4 text-primary" />
              Paid-in Capital
            </div>
            <div className="sm:col-span-2 text-muted-foreground">40,000,000 JPY</div>
          </div>
        </div>
      </section>

      {/* Business Activities Section */}
      <section
        className="bg-card rounded-2xl border border-border p-8 sm:p-10 animate-in fade-in slide-in-from-bottom-8 duration-700"
        style={{ animationDelay: "400ms" }}
      >
        <h2 className="text-display-sm font-display font-bold text-foreground mb-6">
          Business Activities
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {[
            "IT Consulting Services",
            "TV Consulting Services",
            "Internet Connection Service Provision (SonixNet ISP)",
            "VPN Connection Service Provision (SonixNet US/UK Remote Access)",
            "Agent for Telecommunication Services",
            "Agent for Internet Services",
            "Agent for TV Services",
            "Onsite Support Service for IT",
            "Onsite Support Service for TV",
            "Server Management Service",
            "Network Management Service",
          ].map((activity, index) => (
            <div key={index} className="flex items-start gap-2">
              <CheckCircle className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
              <span className="text-muted-foreground">{activity}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Mission Statement Section */}
      <section
        className="bg-gradient-to-br from-primary/5 to-transparent rounded-2xl border border-primary/20 p-8 sm:p-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-6">
          Mission Statement
        </h2>
        <p className="text-muted-foreground mb-6 leading-relaxed">
          We will achieve business success by pursuing the following:
        </p>
        <ul className="space-y-4">
          {[
            "Provide the most customer-oriented service in this industry in Japan.",
            "Through our service, we save client's time and enrich customers' lives.",
            "We always have the latest and most efficient knowledge required for our service.",
            "Be a responsible participant in Japan's international community.",
            "Maintain high ethical standards in all business activities.",
          ].map((mission, index) => (
            <li key={index} className="flex items-start gap-3">
              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold flex-shrink-0">
                {index + 1}
              </span>
              <span className="text-foreground leading-relaxed">{mission}</span>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}

export default AboutUsView;
