"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { ServiceCard } from "@/components/molecules";
import type { LucideIcon } from "lucide-react";
import {
  Wifi,
  Smartphone,
  Building2,
  Lock,
  Wrench,
  Heart,
  Clock3,
  Lightbulb,
  Globe,
  Shield,
  MapPin,
  Phone,
  Users,
  Calendar,
  Banknote,
  BriefcaseBusiness,
} from "lucide-react";

const staggerContainerVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.05 } },
};

const fadeUpItemVariants = {
  hidden: { opacity: 0, y: 16 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease: "easeOut" as const } },
};

/* ─── Data ─── */

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 />,
    accentColor: "blue" as const,
  },
  {
    title: "Phone Plans",
    description:
      "SIM cards on Japan's best network. Foreign credit cards accepted, no hanko required.",
    icon: <Smartphone />,
    accentColor: "green" as const,
  },
  {
    title: "Business Solutions",
    description:
      "Enterprise IT for international companies. Dedicated internet, office networks, and data centers.",
    icon: <Building2 />,
    accentColor: "purple" as const,
  },
  {
    title: "VPN",
    description: "Stream your favorite shows from home. Pre-configured router for US/UK content.",
    icon: <Lock />,
    accentColor: "orange" as const,
  },
  {
    title: "Onsite Support",
    description: "English-speaking technicians at your door for setup and troubleshooting.",
    icon: <Wrench />,
    accentColor: "cyan" as const,
  },
];

const values: {
  title: string;
  text: string;
  icon: LucideIcon;
  accent: string;
}[] = [
  {
    title: "Accessibility",
    text: "Make technology accessible for everyone, regardless of language barriers.",
    icon: Heart,
    accent: "text-rose-500 bg-rose-500/10",
  },
  {
    title: "Time-Saving",
    text: "Save our customers time by handling Japanese bureaucracy and paperwork for them.",
    icon: Clock3,
    accent: "text-amber-500 bg-amber-500/10",
  },
  {
    title: "Innovation",
    text: "Stay current with the latest technology to provide the best solutions for our clients.",
    icon: Lightbulb,
    accent: "text-sky-500 bg-sky-500/10",
  },
  {
    title: "Connection",
    text: "Be a bridge between Japan's tech infrastructure and its international community.",
    icon: Globe,
    accent: "text-emerald-500 bg-emerald-500/10",
  },
  {
    title: "Integrity",
    text: "Operate with transparency and integrity in all our customer relationships.",
    icon: Shield,
    accent: "text-violet-500 bg-violet-500/10",
  },
];

const corporateDetails: { label: string; value: string; icon: LucideIcon }[] = [
  {
    label: "Representative Director",
    value: "Daisuke Nagakawa",
    icon: Users,
  },
  {
    label: "Employees",
    value: "21 Staff Members (as of March 31st, 2025)",
    icon: BriefcaseBusiness,
  },
  { label: "Established", value: "March 8, 2002", icon: Calendar },
  { label: "Paid in Capital", value: "40,000,000 JPY", icon: Banknote },
];

const businessHours = [
  { team: "Customer Support Team", hours: "Mon \u2013 Fri 9:30AM \u2013 6:00PM" },
  { team: "In-office Tech Support Team", hours: "Mon \u2013 Fri 9:30AM \u2013 6:00PM" },
  { team: "Onsite Tech Support Team", hours: "Mon \u2013 Sat 10:00AM \u2013 9:00PM" },
];

const HERO_GLOW_STYLE = {
  background: "radial-gradient(circle, oklch(0.7 0.12 234.4 / 0.35), transparent 70%)",
} as const;

/* ─── Section components ─── */

function HeroSection() {
  return (
    <section className="full-bleed overflow-hidden bg-surface-sunken">
      <div
        className="pointer-events-none absolute -top-1/3 right-0 h-[600px] w-[600px] opacity-30"
        style={HERO_GLOW_STYLE}
      />
      <div className="relative mx-auto max-w-6xl px-6 py-16 sm:px-8 sm:py-20 lg:py-24">
        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
          <motion.div
            className="space-y-6"
            initial="hidden"
            animate="visible"
            variants={staggerContainerVariants}
          >
            <motion.span
              className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-semibold tracking-wide text-primary"
              variants={fadeUpItemVariants}
            >
              Since 2002
            </motion.span>
            <motion.h1
              className="text-display-lg font-extrabold leading-[1.1] tracking-tight font-heading text-foreground"
              variants={fadeUpItemVariants}
            >
              Your Trusted IT Partner <span className="cp-gradient-text">in Japan</span>
            </motion.h1>
            <motion.div
              className="max-w-lg space-y-4 text-base leading-relaxed text-muted-foreground sm:text-lg"
              variants={fadeUpItemVariants}
            >
              <p>
                Assist Solutions has been the go-to IT partner for expats and international
                businesses in Japan for over two decades. We understand the unique challenges of
                living and working where language barriers can make simple tasks difficult.
              </p>
              <p>
                Our bilingual team provides internet, mobile, VPN, and tech support with full
                English service. No Japanese required — we handle everything from contracts to
                installation.
              </p>
            </motion.div>
          </motion.div>
          <div className="relative mx-auto h-[380px] w-full max-w-md lg:h-[440px] lg:max-w-none">
            <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) 90vw, 45vw"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  return (
    <section className="full-bleed bg-background py-16 sm:py-20">
      <div className="mx-auto max-w-6xl px-6 sm:px-8">
        <motion.div
          className="mb-10 max-w-xl"
          initial="hidden"
          animate="visible"
          variants={staggerContainerVariants}
        >
          <motion.h2
            className="text-display-sm font-bold font-heading text-foreground"
            variants={fadeUpItemVariants}
          >
            What We Do
          </motion.h2>
          <motion.p
            className="mt-3 leading-relaxed text-muted-foreground"
            variants={fadeUpItemVariants}
          >
            End-to-end IT services designed for the international community in Japan — all in
            English.
          </motion.p>
        </motion.div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {services.map(service => (
            <ServiceCard
              key={service.title}
              variant="bento-md"
              icon={service.icon}
              title={service.title}
              description={service.description}
              accentColor={service.accentColor}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function ValuesSection() {
  return (
    <section className="full-bleed bg-surface-sunken py-16 sm:py-20">
      <div className="mx-auto max-w-6xl px-6 sm:px-8">
        <motion.div
          className="mb-10 text-center"
          initial="hidden"
          animate="visible"
          variants={staggerContainerVariants}
        >
          <motion.h2
            className="text-display-sm font-bold font-heading text-foreground"
            variants={fadeUpItemVariants}
          >
            Our Values
          </motion.h2>
          <motion.p
            className="mx-auto mt-3 max-w-lg leading-relaxed text-muted-foreground"
            variants={fadeUpItemVariants}
          >
            These principles guide how we serve customers, support our community, and advance our
            craft every day.
          </motion.p>
        </motion.div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
          {values.map(value => {
            const Icon = value.icon;
            return (
              <motion.div
                key={value.title}
                className="group rounded-2xl border border-border/40 bg-card p-5"
                whileHover={{ y: -2 }}
                transition={{ duration: 0.2, ease: "easeOut" as const }}
              >
                <div
                  className={`mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg ${value.accent}`}
                >
                  <Icon className="h-5 w-5" />
                </div>
                <h3 className="mb-1.5 text-sm font-bold uppercase tracking-wide text-foreground/80">
                  {value.title}
                </h3>
                <p className="text-sm leading-relaxed text-muted-foreground">{value.text}</p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CorporateSection() {
  return (
    <section className="full-bleed bg-background py-16 sm:py-20">
      <div className="mx-auto max-w-6xl px-6 sm:px-8">
        <motion.div
          className="mb-10"
          initial="hidden"
          animate="visible"
          variants={staggerContainerVariants}
        >
          <motion.h2
            className="text-display-sm font-bold font-heading text-foreground"
            variants={fadeUpItemVariants}
          >
            Corporate Data
          </motion.h2>
        </motion.div>

        <div className="grid grid-cols-1 gap-10 lg:grid-cols-5">
          <CorporateDetails />
          <CorporateMap />
        </div>
      </div>
    </section>
  );
}

function CorporateDetails() {
  return (
    <div className="space-y-8 lg:col-span-3">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        {corporateDetails.map(item => {
          const Icon = item.icon;
          return (
            <div
              key={item.label}
              className="flex items-start gap-3 rounded-xl border border-border/40 bg-card p-4"
            >
              <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-primary">
                <Icon className="h-4 w-4" />
              </div>
              <div className="min-w-0">
                <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                  {item.label}
                </p>
                <p className="mt-0.5 font-semibold text-foreground">{item.value}</p>
              </div>
            </div>
          );
        })}
      </div>

      <div className="rounded-xl border border-border/40 bg-card p-5">
        <h3 className="mb-3 text-sm font-bold uppercase tracking-wider text-foreground/80">
          Business Hours
        </h3>
        <div className="space-y-2">
          {businessHours.map(item => (
            <div key={item.team} className="flex items-center justify-between gap-4 text-sm">
              <span className="text-muted-foreground">{item.team}</span>
              <span className="shrink-0 font-medium text-foreground">{item.hours}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="flex items-start gap-3">
        <MapPin className="mt-1 h-5 w-5 shrink-0 text-primary" />
        <div>
          <p className="font-semibold text-foreground">
            3F Azabu Maruka Bldg., 3-8-2 Higashi Azabu
          </p>
          <p className="text-muted-foreground">Minato-ku, Tokyo 106-0044</p>
          <p className="mt-1 flex items-center gap-1.5 text-sm text-muted-foreground">
            <Phone className="h-3.5 w-3.5" />
            <a href="tel:03-3560-1006" className="transition-colors hover:text-primary">
              03-3560-1006
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}

function CorporateMap() {
  return (
    <div className="lg:col-span-2">
      <div className="sticky top-24 overflow-hidden rounded-2xl border border-border/40 shadow-sm">
        <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="block h-[360px] w-full lg:h-[420px]"
          loading="lazy"
          allowFullScreen
          referrerPolicy="no-referrer-when-downgrade"
        />
      </div>
    </div>
  );
}

/* ─── Main view ─── */

/**
 * AboutUsView - Corporate profile and company information
 *
 * Displays company background, services, values, and corporate data
 * for Assist Solutions.
 */
export function AboutUsView() {
  return (
    <div>
      <HeroSection />
      <ServicesSection />
      <ValuesSection />
      <CorporateSection />
    </div>
  );
}
