"use client";

import Image from "next/image";
import { useCallback, useEffect, useRef, useState } from "react";
import {
  Wifi,
  Smartphone,
  Building2,
  Lock,
  Wrench,
  Heart,
  Clock3,
  Lightbulb,
  Globe,
  Shield,
  Quote,
} 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() {
  // Sample company logos for the trusted by carousel
  const trustedCompanies = [
    { name: "Company 1", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 2", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 3", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 4", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 5", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 6", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 7", logo: "/assets/images/placeholder-logo.png" },
    { name: "Company 8", logo: "/assets/images/placeholder-logo.png" },
  ];

  const values = [
    {
      text: "Make technology accessible for everyone, regardless of language barriers.",
      icon: <Heart className="h-6 w-6" />,
      color: "bg-rose-50 text-rose-500 border-rose-100",
    },
    {
      text: "Save our customers time by handling Japanese bureaucracy and paperwork for them.",
      icon: <Clock3 className="h-6 w-6" />,
      color: "bg-amber-50 text-amber-500 border-amber-100",
    },
    {
      text: "Stay current with the latest technology to provide the best solutions for our clients.",
      icon: <Lightbulb className="h-6 w-6" />,
      color: "bg-sky-50 text-sky-500 border-sky-100",
    },
    {
      text: "Be a bridge between Japan's tech infrastructure and its international community.",
      icon: <Globe className="h-6 w-6" />,
      color: "bg-emerald-50 text-emerald-500 border-emerald-100",
    },
    {
      text: "Operate with transparency and integrity in all our customer relationships.",
      icon: <Shield className="h-6 w-6" />,
      color: "bg-violet-50 text-violet-500 border-violet-100",
    },
  ];

  const services = [
    {
      title: "Internet Plans",
      description:
        "High-speed NTT fiber with English support. We handle the Japanese paperwork so you don't have to.",
      icon: <Wifi className="h-7 w-7 text-primary" />,
    },
    {
      title: "Phone Plans",
      description:
        "SIM cards on Japan's best network. Foreign credit cards accepted, no hanko required.",
      icon: <Smartphone className="h-7 w-7 text-primary" />,
    },
    {
      title: "Business Solutions",
      description:
        "Enterprise IT for international companies. Dedicated internet, office networks, and data centers.",
      icon: <Building2 className="h-7 w-7 text-primary" />,
    },
    {
      title: "VPN",
      description: "Stream your favorite shows from home. Pre-configured router for US/UK content.",
      icon: <Lock className="h-7 w-7 text-primary" />,
    },
    {
      title: "Onsite Support",
      description: "English-speaking technicians at your door for setup and troubleshooting.",
      icon: <Wrench className="h-7 w-7 text-primary" />,
    },
  ];

  const carouselRef = useRef<HTMLDivElement>(null);
  const [scrollAmount, setScrollAmount] = useState(0);

  const computeScrollAmount = useCallback(() => {
    const container = carouselRef.current;
    if (!container) return;
    const card = container.querySelector<HTMLElement>("[data-business-card]");
    if (!card) return;
    const gap =
      Number.parseFloat(getComputedStyle(container).columnGap || "0") ||
      Number.parseFloat(getComputedStyle(container).gap || "0") ||
      24;
    setScrollAmount(card.clientWidth + gap);
  }, []);

  const scrollServices = useCallback(
    (direction: 1 | -1) => {
      const container = carouselRef.current;
      if (!container) return;
      const amount = scrollAmount || container.clientWidth;
      container.scrollBy({ left: direction * amount, behavior: "smooth" });
    },
    [scrollAmount]
  );

  useEffect(() => {
    computeScrollAmount();
    window.addEventListener("resize", computeScrollAmount);
    return () => window.removeEventListener("resize", computeScrollAmount);
  }, [computeScrollAmount]);

  return (
    <div className="space-y-0">
      {/* Hero with geometric pattern */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-gradient-to-br from-slate-50 to-sky-50/30 py-12 sm:py-16 overflow-hidden">
        {/* Dot grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.4]"
          style={{
            backgroundImage: `radial-gradient(circle, #0ea5e9 1px, transparent 1px)`,
            backgroundSize: "24px 24px",
          }}
        />
        {/* Subtle gradient overlay for depth */}
        <div className="absolute inset-0 bg-gradient-to-t from-white/80 via-transparent to-white/40" />
        <div className="relative max-w-6xl mx-auto px-6 sm:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[1.05fr_minmax(0,0.95fr)] gap-10 items-center">
            <div className="space-y-5">
              <h1 className="text-4xl sm:text-5xl font-extrabold text-primary leading-tight tracking-tight">
                About Us
              </h1>
              <div className="space-y-4 text-muted-foreground leading-relaxed text-base sm:text-lg">
                <p>
                  Since 2002, Assist Solutions has been the trusted IT partner for expats and
                  international businesses in Japan. We understand the unique challenges of living
                  and working in a country where language barriers can make simple tasks difficult.
                </p>
                <p>
                  Our bilingual team provides internet, mobile, VPN, and tech support services with
                  full English support. No Japanese required. We handle everything from contracts to
                  installation coordination, so you can focus on enjoying life in Japan.
                </p>
              </div>
            </div>
            <div className="relative h-full min-h-[420px]">
              <Image
                src="/assets/images/About us.png"
                alt="Assist Solutions team in Tokyo"
                fill
                priority
                className="object-contain drop-shadow-lg"
                sizes="(max-width: 1024px) 100vw, 45vw"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Trusted By Section - Infinite Carousel */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-white py-10 sm:py-12 overflow-hidden">
        {/* Gradient fade to next section */}
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-[#e8f5ff] pointer-events-none z-10" />

        <div className="max-w-6xl mx-auto px-6 sm:px-8 mb-8">
          <h2 className="text-center text-lg sm:text-xl font-semibold text-muted-foreground">
            Trusted by Leading Companies
          </h2>
        </div>

        {/* Infinite Carousel */}
        <div className="relative">
          {/* Gradient masks for fade effect on edges */}
          <div className="absolute left-0 top-0 bottom-0 w-24 sm:w-32 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none" />
          <div className="absolute right-0 top-0 bottom-0 w-24 sm:w-32 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none" />

          {/* Scrolling container */}
          <div className="flex overflow-hidden">
            <div className="flex animate-scroll-infinite gap-12 sm:gap-16">
              {/* First set of logos */}
              {trustedCompanies.map((company, index) => (
                <div
                  key={`logo-1-${index}`}
                  className="flex-shrink-0 w-28 h-16 sm:w-36 sm:h-20 flex items-center justify-center grayscale hover:grayscale-0 opacity-60 hover:opacity-100 transition-all duration-300"
                >
                  <Image
                    src={company.logo}
                    alt={company.name}
                    width={120}
                    height={60}
                    className="object-contain max-h-full"
                  />
                </div>
              ))}
              {/* Duplicate set for seamless loop */}
              {trustedCompanies.map((company, index) => (
                <div
                  key={`logo-2-${index}`}
                  className="flex-shrink-0 w-28 h-16 sm:w-36 sm:h-20 flex items-center justify-center grayscale hover:grayscale-0 opacity-60 hover:opacity-100 transition-all duration-300"
                >
                  <Image
                    src={company.logo}
                    alt={company.name}
                    width={120}
                    height={60}
                    className="object-contain max-h-full"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* CSS for infinite scroll animation */}
        <style jsx>{`
          @keyframes scroll-infinite {
            0% {
              transform: translateX(0);
            }
            100% {
              transform: translateX(-50%);
            }
          }
          .animate-scroll-infinite {
            animation: scroll-infinite 30s linear infinite;
          }
          .animate-scroll-infinite:hover {
            animation-play-state: paused;
          }
        `}</style>
      </section>

      {/* Business Solutions Carousel */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#e8f5ff] py-10">
        {/* Gradient fade to next section */}
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-white pointer-events-none" />
        <div className="mx-auto max-w-6xl px-6 sm:px-10">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-foreground">Business</h2>
          </div>
          <div className="relative">
            <div
              ref={carouselRef}
              className="flex gap-6 overflow-x-auto scroll-smooth pb-6 pr-20"
              style={{ scrollbarWidth: "none" }}
            >
              {services.map((service, idx) => (
                <article
                  key={`${service.title}-${idx}`}
                  data-business-card
                  className="flex-shrink-0 w-[240px] rounded-3xl bg-white px-6 py-7 shadow-md border border-white/60"
                >
                  <div className="mb-4">{service.icon}</div>
                  <h3 className="text-lg font-semibold text-foreground mb-2">{service.title}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">
                    {service.description}
                  </p>
                </article>
              ))}
            </div>
            <div className="absolute bottom-0 right-2 flex gap-3">
              <button
                type="button"
                onClick={() => scrollServices(-1)}
                className="h-9 w-9 rounded-full border border-black/15 bg-white text-foreground shadow-sm hover:bg-white/90"
                aria-label="Scroll business left"
              >
                ‹
              </button>
              <button
                type="button"
                onClick={() => scrollServices(1)}
                className="h-9 w-9 rounded-full border border-black/15 bg-white text-foreground shadow-sm hover:bg-white/90"
                aria-label="Scroll business right"
              >
                ›
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Our Values Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-white py-12 sm:py-14">
        {/* Gradient fade to next section */}
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-[#f7f7f7] pointer-events-none" />

        <div className="max-w-6xl mx-auto px-6 sm:px-8 space-y-8">
          <div className="text-center max-w-2xl mx-auto">
            <h2 className="text-2xl sm:text-3xl font-bold text-primary mb-3">Our Values</h2>
            <p className="text-muted-foreground leading-relaxed">
              These principles guide how we serve customers, support our community, and advance our
              craft every day.
            </p>
          </div>

          {/* Values Grid - 3 on top, 2 centered on bottom */}
          <div className="space-y-4">
            {/* Top row - 3 cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {values.slice(0, 3).map((value, index) => (
                <div
                  key={index}
                  className="group relative bg-white rounded-2xl border border-border/60 p-6 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300"
                >
                  {/* Icon */}
                  <div
                    className={`inline-flex items-center justify-center w-12 h-12 rounded-xl border mb-4 ${value.color}`}
                  >
                    {value.icon}
                  </div>
                  {/* Quote mark decoration */}
                  <Quote className="absolute top-4 right-4 h-8 w-8 text-muted-foreground/10 rotate-180" />
                  {/* Text */}
                  <p className="text-foreground font-medium leading-relaxed">{value.text}</p>
                </div>
              ))}
            </div>

            {/* Bottom row - 2 cards centered */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl mx-auto lg:max-w-none lg:grid-cols-2 lg:px-[16.666%]">
              {values.slice(3).map((value, index) => (
                <div
                  key={index + 3}
                  className="group relative bg-white rounded-2xl border border-border/60 p-6 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300"
                >
                  {/* Icon */}
                  <div
                    className={`inline-flex items-center justify-center w-12 h-12 rounded-xl border mb-4 ${value.color}`}
                  >
                    {value.icon}
                  </div>
                  {/* Quote mark decoration */}
                  <Quote className="absolute top-4 right-4 h-8 w-8 text-muted-foreground/10 rotate-180" />
                  {/* Text */}
                  <p className="text-foreground font-medium leading-relaxed">{value.text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Corporate Data Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] py-12 pb-16">
        <div className="max-w-6xl mx-auto px-6 sm:px-8 space-y-3">
          {/* Row 1: headings same level */}
          <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-x-10 gap-y-2 items-start">
            <h2 className="text-2xl font-bold text-foreground">Corporate Data</h2>
            <div>
              <h3 className="text-xl font-bold text-foreground mb-2">Address</h3>
              <p className="text-muted-foreground font-semibold leading-relaxed">
                3F Azabu Maruka Bldg., 3-8-2 Higashi Azabu,
                <br />
                Minato-ku, Tokyo 106-0044
                <br />
                Tel: 03-3560-1006 Fax: 03-3560-1007
              </p>
            </div>
          </div>

          {/* Row 2: corporate data list | map (no stretch, no extra space below left column) */}
          <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-x-10 gap-y-2 items-start">
            <div className="space-y-2">
              <div>
                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
                  <span className="h-6 w-1 rounded-full bg-primary" />
                  Representative Director
                </h3>
                <p className="text-muted-foreground font-semibold mt-0.5">Daisuke Nagakawa</p>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
                  <span className="h-6 w-1 rounded-full bg-primary" />
                  Employees
                </h3>
                <p className="text-muted-foreground font-semibold mt-0.5">
                  21 Staff Members (as of March 31st, 2025)
                </p>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
                  <span className="h-6 w-1 rounded-full bg-primary" />
                  Established
                </h3>
                <p className="text-muted-foreground font-semibold mt-0.5">March 8, 2002</p>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
                  <span className="h-6 w-1 rounded-full bg-primary" />
                  Paid in Capital
                </h3>
                <p className="text-muted-foreground font-semibold mt-0.5">40,000,000 JPY</p>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
                  <span className="h-6 w-1 rounded-full bg-primary" />
                  Business Hours
                </h3>
                <div className="text-muted-foreground font-semibold mt-0.5 space-y-0.5">
                  <p>Mon - Fri 9:30AM - 6:00PM — Customer Support Team</p>
                  <p>Mon - Fri 9:30AM - 6:00PM — In-office Tech Support Team</p>
                  <p>Mon - Sat 10:00AM - 9:00PM — Onsite Tech Support Team</p>
                </div>
              </div>
            </div>

            <div className="rounded-2xl overflow-hidden w-full min-h-[320px]">
              <iframe
                title="Assist Solutions Corp Map"
                src="https://www.google.com/maps?q=Assist+Solutions+Corp,+3-8-2+Higashi+Azabu,+Minato-ku,+Tokyo&output=embed"
                className="w-full h-[320px] block"
                loading="lazy"
                allowFullScreen
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default AboutUsView;
