import type { Metadata } from "next";
import { Button } from "@/components/atoms";
import Link from "next/link";

export const metadata: Metadata = {
  title: "IT Solutions for International Businesses in Japan | Assist Solutions",
  description:
    "Enterprise IT for foreign companies in Japan. Dedicated internet, office networks, data center hosting, web construction & maintenance, all with bilingual support.",
  keywords: [
    "IT for foreign companies Japan",
    "international business IT Tokyo",
    "bilingual IT support Japan",
    "office network setup foreigners",
    "enterprise IT English support",
    "web design Japan English",
    "website maintenance Tokyo",
    "bilingual web development",
  ],
  openGraph: {
    title: "Business IT for International Companies - Assist Solutions",
    description:
      "Enterprise IT with bilingual support. Dedicated internet, office networks, web construction, and data center services for foreign companies in Japan.",
    type: "website",
  },
};

// Abstract tech illustration components
function NetworkNodesIllustration({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="100" cy="100" r="8" fill="currentColor" fillOpacity="0.3" />
      <circle cx="40" cy="60" r="6" fill="currentColor" fillOpacity="0.2" />
      <circle cx="160" cy="50" r="5" fill="currentColor" fillOpacity="0.25" />
      <circle cx="150" cy="140" r="7" fill="currentColor" fillOpacity="0.2" />
      <circle cx="50" cy="150" r="5" fill="currentColor" fillOpacity="0.25" />
      <circle cx="170" cy="100" r="4" fill="currentColor" fillOpacity="0.15" />
      <circle cx="30" cy="110" r="4" fill="currentColor" fillOpacity="0.15" />
      <line
        x1="100"
        y1="100"
        x2="40"
        y2="60"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="1"
      />
      <line
        x1="100"
        y1="100"
        x2="160"
        y2="50"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="1"
      />
      <line
        x1="100"
        y1="100"
        x2="150"
        y2="140"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="1"
      />
      <line
        x1="100"
        y1="100"
        x2="50"
        y2="150"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="1"
      />
      <line
        x1="100"
        y1="100"
        x2="170"
        y2="100"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="1"
      />
      <line
        x1="100"
        y1="100"
        x2="30"
        y2="110"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="1"
      />
      <circle
        cx="100"
        cy="100"
        r="40"
        stroke="currentColor"
        strokeOpacity="0.08"
        strokeWidth="1"
        strokeDasharray="4 4"
      />
      <circle
        cx="100"
        cy="100"
        r="70"
        stroke="currentColor"
        strokeOpacity="0.05"
        strokeWidth="1"
        strokeDasharray="4 4"
      />
    </svg>
  );
}

function GearIllustration({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M100 130c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30z"
        stroke="currentColor"
        strokeOpacity="0.2"
        strokeWidth="2"
      />
      <path
        d="M100 60V40M100 160v-20M140 100h20M40 100h20M128.28 71.72l14.14-14.14M57.58 142.42l14.14-14.14M128.28 128.28l14.14 14.14M57.58 57.58l14.14 14.14"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <circle cx="100" cy="100" r="15" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" />
      <circle
        cx="155"
        cy="155"
        r="20"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="1.5"
      />
      <circle cx="155" cy="155" r="8" fill="currentColor" fillOpacity="0.08" />
    </svg>
  );
}

function ShieldIllustration({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M100 30L40 55v45c0 38.66 25.64 74.64 60 85 34.36-10.36 60-46.34 60-85V55L100 30z"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="2"
        fill="currentColor"
        fillOpacity="0.03"
      />
      <path
        d="M100 50L55 70v35c0 30.13 19.98 58.15 45 66.25V50z"
        fill="currentColor"
        fillOpacity="0.05"
      />
      <path
        d="M85 100l10 10 20-25"
        stroke="currentColor"
        strokeOpacity="0.25"
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CodeIllustration({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect
        x="30"
        y="40"
        width="140"
        height="100"
        rx="8"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="2"
      />
      <line
        x1="30"
        y1="60"
        x2="170"
        y2="60"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="1"
      />
      <circle cx="45" cy="50" r="4" fill="currentColor" fillOpacity="0.15" />
      <circle cx="60" cy="50" r="4" fill="currentColor" fillOpacity="0.15" />
      <circle cx="75" cy="50" r="4" fill="currentColor" fillOpacity="0.15" />
      <path
        d="M70 95l-20 15 20 15"
        stroke="currentColor"
        strokeOpacity="0.2"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M130 95l20 15-20 15"
        stroke="currentColor"
        strokeOpacity="0.2"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <line
        x1="90"
        y1="130"
        x2="110"
        y2="80"
        stroke="currentColor"
        strokeOpacity="0.25"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
}

function ServerIllustration({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect
        x="50"
        y="30"
        width="100"
        height="35"
        rx="4"
        stroke="currentColor"
        strokeOpacity="0.2"
        strokeWidth="2"
        fill="currentColor"
        fillOpacity="0.03"
      />
      <rect
        x="50"
        y="75"
        width="100"
        height="35"
        rx="4"
        stroke="currentColor"
        strokeOpacity="0.2"
        strokeWidth="2"
        fill="currentColor"
        fillOpacity="0.03"
      />
      <rect
        x="50"
        y="120"
        width="100"
        height="35"
        rx="4"
        stroke="currentColor"
        strokeOpacity="0.2"
        strokeWidth="2"
        fill="currentColor"
        fillOpacity="0.03"
      />
      <circle cx="65" cy="47" r="4" fill="currentColor" fillOpacity="0.3" />
      <circle cx="65" cy="92" r="4" fill="currentColor" fillOpacity="0.2" />
      <circle cx="65" cy="137" r="4" fill="currentColor" fillOpacity="0.25" />
      <line
        x1="80"
        y1="47"
        x2="130"
        y2="47"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <line
        x1="80"
        y1="92"
        x2="120"
        y2="92"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <line
        x1="80"
        y1="137"
        x2="125"
        y2="137"
        stroke="currentColor"
        strokeOpacity="0.1"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <path
        d="M100 165v20M85 185h30"
        stroke="currentColor"
        strokeOpacity="0.15"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
}

// Service card component
interface ServiceCardProps {
  category: string;
  title: string;
  description: string;
  bgColor: string;
  textColor: string;
  accentColor: string;
  illustration: React.ReactNode;
  href: string;
}

function ServiceCard({
  category,
  title,
  description,
  bgColor,
  textColor,
  accentColor,
  illustration,
  href,
}: ServiceCardProps) {
  return (
    <div
      className={`relative overflow-hidden rounded-2xl ${bgColor} p-8 flex flex-col justify-between min-h-[420px] group transition-all duration-300 hover:-translate-y-1 border border-border/60 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.08)] hover:shadow-[0_8px_30px_-4px_rgba(0,0,0,0.12)]`}
    >
      {/* Tech illustration overlay */}
      <div className={`absolute top-0 right-0 w-48 h-48 ${accentColor} pointer-events-none`}>
        {illustration}
      </div>

      {/* Content */}
      <div className="relative z-10 flex flex-col h-full">
        {/* Category label */}
        <span
          className={`text-xs font-semibold tracking-widest uppercase ${textColor} opacity-70 mb-4`}
        >
          {category}
        </span>

        {/* Title */}
        <h2
          className={`text-2xl lg:text-3xl font-bold ${textColor} mb-4 leading-tight max-w-[85%]`}
        >
          {title}
        </h2>

        {/* Description */}
        <p className={`${textColor} opacity-80 text-sm leading-relaxed mb-8 max-w-[90%]`}>
          {description}
        </p>

        {/* Spacer */}
        <div className="flex-grow" />

        {/* CTA */}
        <Link
          href={href}
          className={`inline-flex items-center gap-2 text-sm font-medium ${textColor} opacity-90 hover:opacity-100 transition-opacity group/link`}
        >
          Contact Us
          <svg
            className="w-4 h-4 transition-transform group-hover/link:translate-x-1"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </Link>
      </div>
    </div>
  );
}

export default function BusinessSolutionsPage() {
  const services: ServiceCardProps[] = [
    {
      category: "Infrastructure",
      title: "Office LAN Setup",
      description:
        "Complete network infrastructure from planning to installation. Routers, switches, and firewalls configured by bilingual technicians.",
      bgColor: "bg-[#1E3A5F]",
      textColor: "text-white",
      accentColor: "text-blue-300",
      illustration: <NetworkNodesIllustration className="w-full h-full" />,
      href: "/contact",
    },
    {
      category: "Support",
      title: "Onsite & Remote Tech Support",
      description:
        "Fast response from English-speaking technicians. Network issues, hardware problems, software setup — we keep you running.",
      bgColor: "bg-white",
      textColor: "text-gray-900",
      accentColor: "text-gray-400",
      illustration: <GearIllustration className="w-full h-full" />,
      href: "/contact",
    },
    {
      category: "Connectivity",
      title: "Dedicated Internet Access",
      description:
        "Enterprise-grade connectivity with SLA guarantees. Reliable, high-capacity connections with English contracts and support.",
      bgColor: "bg-[#F5F0E8]",
      textColor: "text-gray-900",
      accentColor: "text-amber-700",
      illustration: <ShieldIllustration className="w-full h-full" />,
      href: "/contact",
    },
    {
      category: "Hosting",
      title: "Data Center Service",
      description:
        "World-class Tokyo data centers including Equinix and GDC Gotenyama. Colocation and managed services with full English support.",
      bgColor: "bg-white",
      textColor: "text-gray-900",
      accentColor: "text-gray-400",
      illustration: <ServerIllustration className="w-full h-full" />,
      href: "/contact",
    },
    {
      category: "Digital",
      title: "Web Construction & Maintenance",
      description:
        "Modern, responsive websites with bilingual support. From initial design to ongoing maintenance — your complete web partner.",
      bgColor: "bg-[#1E3A5F]",
      textColor: "text-white",
      accentColor: "text-blue-300",
      illustration: <CodeIllustration className="w-full h-full" />,
      href: "/contact",
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <div className="bg-gradient-to-b from-muted/30 to-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-16">
          <div className="max-w-3xl">
            <p className="text-sm font-semibold tracking-widest uppercase text-primary mb-4">
              Enterprise Solutions
            </p>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground mb-6 leading-[1.1] tracking-tight">
              IT for International
              <br />
              <span className="text-primary">Businesses in Japan</span>
            </h1>
            <p className="text-lg text-muted-foreground leading-relaxed max-w-2xl">
              Running an international company in Japan? We provide enterprise IT with bilingual
              support, so your team can focus on business — not navigating Japanese tech providers.
            </p>
          </div>
        </div>
      </div>

      {/* Services Card Grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
        {/* Desktop: Horizontal scroll layout */}
        <div className="hidden lg:block">
          <div className="grid grid-cols-5 gap-4">
            {services.map((service, index) => (
              <ServiceCard key={index} {...service} />
            ))}
          </div>
        </div>

        {/* Tablet: 2-column grid */}
        <div className="hidden md:grid lg:hidden grid-cols-2 gap-4">
          {services.map((service, index) => (
            <ServiceCard key={index} {...service} />
          ))}
        </div>

        {/* Mobile: Single column */}
        <div className="md:hidden flex flex-col gap-4">
          {services.map((service, index) => (
            <ServiceCard key={index} {...service} />
          ))}
        </div>
      </div>

      {/* Bottom CTA Section */}
      <div className="bg-muted/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="flex flex-col lg:flex-row items-center justify-between gap-8">
            <div className="text-center lg:text-left">
              <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-3">
                Let&apos;s Talk About Your IT Needs
              </h2>
              <p className="text-muted-foreground max-w-xl">
                We&apos;ve been helping foreign companies navigate Japanese IT for over 20 years.
                Let&apos;s discuss how we can support your operations.
              </p>
            </div>
            <Button as="a" href="/contact" size="lg" className="whitespace-nowrap px-8">
              Get in Touch
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
