"use client";

import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/atoms";
import {
  Monitor,
  Tv,
  Headset,
  ChevronDown,
  Wrench,
  Wifi,
  Printer,
  HardDrive,
  CheckCircle2,
  Calendar,
  UserCheck,
  ArrowRight,
  Clock,
  Shield,
} from "lucide-react";

// Service types for the pricing cards
const services = [
  {
    id: "onsite",
    icon: Monitor,
    title: "Onsite Support",
    subtitle: "Home & Office Visits",
    description:
      "We come to your location for hands-on help with networks, computers, and devices.",
    price: "15,000",
    features: [
      "Home or office visit",
      "Network setup & troubleshooting",
      "Device configuration",
      "Same-week scheduling",
    ],
  },
  {
    id: "remote",
    icon: Headset,
    title: "Remote Support",
    subtitle: "Quick Online Help",
    description: "We connect securely to your device to diagnose and fix issues remotely.",
    price: "5,000",
    popular: true,
    features: [
      "Secure remote connection",
      "Quick turnaround",
      "Software troubleshooting",
      "No waiting for visit",
    ],
  },
  {
    id: "tv",
    icon: Tv,
    title: "TV & Streaming Setup",
    subtitle: "Entertainment Systems",
    description: "Setup and configuration of smart TVs, streaming devices, and home entertainment.",
    price: "15,000",
    features: [
      "Smart TV setup",
      "Streaming device config",
      "Apple TV, Fire TV, etc.",
      "Content access help",
    ],
  },
];

// What we help with
const helpItems = [
  { icon: Wifi, label: "Wi-Fi & Routers" },
  { icon: Monitor, label: "Computers" },
  { icon: Printer, label: "Printers" },
  { icon: Tv, label: "Smart TVs" },
  { icon: HardDrive, label: "Storage & Backup" },
  { icon: Wrench, label: "General Tech" },
];

// How it works steps
const steps = [
  {
    number: "1",
    icon: Calendar,
    title: "Book a Visit",
    description:
      "Contact us to schedule a time that works for you. Same-week appointments available.",
  },
  {
    number: "2",
    icon: UserCheck,
    title: "We Come to You",
    description:
      "An English-speaking technician arrives at your home or office at the scheduled time.",
  },
  {
    number: "3",
    icon: CheckCircle2,
    title: "Problem Solved",
    description: "We fix the issue and explain everything clearly so you understand what was done.",
  },
];

export function OnsiteSupportContent() {
  return (
    <div className="relative">
      {/* Hero Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 overflow-hidden bg-gradient-to-br from-slate-50 via-white to-sky-50/80 pt-10 pb-20">
        {/* Dot grid pattern */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            backgroundImage: `radial-gradient(circle at center, oklch(0.65 0.05 234.4 / 0.12) 1px, transparent 1px)`,
            backgroundSize: "24px 24px",
          }}
        />

        {/* Gradient orb accents */}
        <div
          className="absolute -top-32 -right-32 w-96 h-96 rounded-full pointer-events-none opacity-50"
          style={{
            background: "radial-gradient(circle, oklch(0.85 0.08 200 / 0.4) 0%, transparent 70%)",
          }}
        />
        <div
          className="absolute -bottom-32 -left-32 w-80 h-80 rounded-full pointer-events-none opacity-40"
          style={{
            background: "radial-gradient(circle, oklch(0.85 0.06 80 / 0.3) 0%, transparent 70%)",
          }}
        />

        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Eyebrow badge */}
          <div className="flex justify-center mb-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <span className="inline-flex items-center gap-2 rounded-full bg-white/80 backdrop-blur-sm border border-primary/20 px-4 py-2 text-sm text-primary font-medium shadow-sm">
              <UserCheck className="h-4 w-4" />
              English-Speaking Technicians
            </span>
          </div>

          {/* Main heading */}
          <h1
            className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-foreground mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-500"
            style={{ animationDelay: "100ms" }}
          >
            Tech Help in English,
            <br />
            <span className="text-primary">At Your Door</span>
          </h1>

          {/* Description */}
          <p
            className="text-lg sm:text-xl text-muted-foreground text-center max-w-2xl mx-auto mb-10 leading-relaxed animate-in fade-in slide-in-from-bottom-4 duration-500"
            style={{ animationDelay: "200ms" }}
          >
            Need help with your router, computer, or home network? Our technicians visit your home
            or office to solve tech problems — explained in a language you understand.
          </p>

          {/* What we help with pills */}
          <div
            className="flex flex-wrap justify-center gap-3 mb-10 animate-in fade-in slide-in-from-bottom-4 duration-500"
            style={{ animationDelay: "300ms" }}
          >
            {helpItems.map(item => {
              const Icon = item.icon;
              return (
                <div
                  key={item.label}
                  className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/70 backdrop-blur-sm border border-border/40 shadow-sm"
                >
                  <Icon className="h-4 w-4 text-primary" />
                  <span className="text-sm font-medium text-foreground">{item.label}</span>
                </div>
              );
            })}
          </div>

          {/* CTA button */}
          <div
            className="flex justify-center animate-in fade-in slide-in-from-bottom-4 duration-500"
            style={{ animationDelay: "400ms" }}
          >
            <Button as="a" href="/contact" size="lg" rightIcon={<ArrowRight className="h-4 w-4" />}>
              Get in Touch
            </Button>
          </div>
        </div>

        {/* 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" />
      </section>

      {/* How It Works Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-white py-16">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-center mb-4">
            How It Works
          </h2>
          <p className="text-muted-foreground text-center max-w-xl mx-auto mb-12">
            Getting tech help shouldn&apos;t be complicated. Here&apos;s our simple process.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
            {/* Connecting line (desktop only) */}
            <div className="hidden md:block absolute top-16 left-[20%] right-[20%] h-0.5 bg-border" />

            {steps.map((step, index) => {
              const Icon = step.icon;
              return (
                <div
                  key={step.number}
                  className="relative text-center animate-in fade-in slide-in-from-bottom-8 duration-700"
                  style={{ animationDelay: `${index * 150}ms` }}
                >
                  {/* Step number circle */}
                  <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary text-xl font-bold mb-5">
                    <Icon className="h-7 w-7" />
                    <span className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-white text-primary text-xs font-bold flex items-center justify-center shadow-sm border border-border">
                      {step.number}
                    </span>
                  </div>

                  <h3 className="text-lg font-bold text-foreground mb-2">{step.title}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed max-w-xs mx-auto">
                    {step.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>

        {/* Gradient fade to pricing section */}
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-[#f7f7f7] pointer-events-none" />
      </section>

      {/* Pricing Cards Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] py-16">
        {/* Subtle pattern overlay */}
        <div
          className="absolute inset-0 pointer-events-none opacity-30"
          style={{
            backgroundImage: `radial-gradient(circle at center, oklch(0.6 0.0 0 / 0.08) 1px, transparent 1px)`,
            backgroundSize: "32px 32px",
          }}
        />

        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-center mb-4">
            Support Options
          </h2>
          <p className="text-muted-foreground text-center max-w-xl mx-auto mb-12">
            Choose the support type that fits your needs. All services include full English
            communication.
          </p>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {services.map((service, index) => {
              const Icon = service.icon;
              return (
                <div
                  key={service.id}
                  className="group relative overflow-hidden rounded-2xl bg-white border border-border/60 shadow-md p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg animate-in fade-in slide-in-from-bottom-8 duration-700 flex flex-col"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  {/* Popular badge */}
                  {service.popular && (
                    <div className="absolute top-4 right-4">
                      <span className="inline-flex items-center rounded-full bg-primary px-3 py-1 text-xs font-bold text-white uppercase tracking-wide shadow-sm">
                        Most Popular
                      </span>
                    </div>
                  )}

                  {/* Icon */}
                  <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-105">
                    <Icon className="h-7 w-7 text-primary" />
                  </div>

                  {/* Subtitle */}
                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">
                    {service.subtitle}
                  </span>

                  {/* Title */}
                  <h3 className="text-xl font-bold text-foreground mb-2">{service.title}</h3>

                  {/* Description */}
                  <p className="text-sm text-muted-foreground leading-relaxed mb-4">
                    {service.description}
                  </p>

                  {/* Price */}
                  <div className="mb-5">
                    <span className="text-3xl font-bold text-foreground">{service.price}</span>
                    <span className="text-sm text-muted-foreground ml-1">JPY</span>
                    <span className="text-xs text-muted-foreground block mt-0.5">
                      Basic service fee
                    </span>
                  </div>

                  {/* Features */}
                  <div className="space-y-2 mb-6 flex-grow">
                    {service.features.map(feature => (
                      <div
                        key={feature}
                        className="flex items-center gap-2 text-sm text-foreground"
                      >
                        <CheckCircle2 className="h-4 w-4 text-primary flex-shrink-0" />
                        <span>{feature}</span>
                      </div>
                    ))}
                  </div>

                  {/* CTA */}
                  <Link
                    href="/contact"
                    className={`inline-flex items-center justify-center gap-2 rounded-full ${service.popular ? "bg-primary text-white hover:bg-primary/90" : "bg-muted text-foreground hover:bg-muted/80"} px-5 py-2.5 font-semibold transition-colors text-sm`}
                  >
                    Request This Service
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
              );
            })}
          </div>
        </div>

        {/* Gradient fade to FAQ section */}
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-white pointer-events-none" />
      </section>

      {/* FAQ Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-white py-16">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-center mb-4">
            Frequently Asked Questions
          </h2>
          <p className="text-muted-foreground text-center max-w-xl mx-auto mb-10">
            Common questions about our onsite support services.
          </p>

          <div className="space-y-4">
            <FaqItem
              question="My home requires multiple Wi-Fi routers. Would you be able to assist with this?"
              answer={
                <>
                  Yes, our technical team can visit your residence for device setup including Wi-Fi
                  routers, mesh systems, printers, Apple TVs, and more.
                  <br />
                  <br />
                  We&apos;ll assess your residence layout and recommend the best solution for
                  complete coverage. Contact us at info@asolutions.co.jp for a free consultation.
                </>
              }
            />
            <FaqItem
              question="I use a different Internet provider. Can I still use your onsite support?"
              answer="Absolutely. Our onsite support is available as a standalone service regardless of your internet provider. We help with any networking, computer, or device issues."
            />
            <FaqItem
              question="How quickly can you come to my location?"
              answer={
                <>
                  We typically schedule visits within the same week. For urgent issues, we do our
                  best to accommodate faster appointments based on availability.
                  <br />
                  <br />
                  Remote support is often available within 1-2 business days if you need faster
                  help.
                </>
              }
            />
            <FaqItem
              question="What if the problem can't be fixed in one visit?"
              answer="If additional work is needed, we'll explain what's required and provide a clear quote for any follow-up visits. We don't charge extra for the same issue if it takes more time than expected during a single visit."
            />
          </div>
        </div>

        {/* Gradient fade to CTA section */}
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-b from-transparent to-[#f7f7f7] pointer-events-none" />
      </section>

      {/* CTA Section */}
      <section className="relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-[#f7f7f7] py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm text-primary font-medium mb-6">
            <Shield className="h-4 w-4" />
            Trusted by expats across Japan
          </div>
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4">
            Tech Problems? We Speak Your Language.
          </h2>
          <p className="text-muted-foreground mb-8 max-w-lg mx-auto leading-relaxed">
            Don&apos;t struggle with Japanese-only support lines. Get help from technicians who
            explain things clearly in English.
          </p>

          <div className="flex justify-center">
            <Button as="a" href="/contact" size="lg" rightIcon={<ArrowRight className="h-4 w-4" />}>
              Get in Touch
            </Button>
          </div>

          {/* Trust indicators */}
          <div className="flex flex-wrap items-center justify-center gap-6 mt-10 pt-8 border-t border-border/60">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Clock className="h-4 w-4 text-primary" />
              Same-week appointments
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <UserCheck className="h-4 w-4 text-primary" />
              English-speaking technicians
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Shield className="h-4 w-4 text-primary" />
              20+ years in Japan
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/**
 * FAQ Item component with expand/collapse functionality
 */
function FaqItem({ question, answer }: { question: string; answer: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div
      className={`border rounded-xl overflow-hidden bg-white shadow-sm transition-all duration-200 ${isOpen ? "border-primary/30 shadow-md" : "border-border/60"}`}
    >
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-start justify-between gap-4 p-5 text-left hover:bg-muted/30 transition-colors"
      >
        <span className="font-semibold text-foreground">{question}</span>
        <div
          className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 transition-colors ${isOpen ? "bg-primary text-white" : "bg-muted text-muted-foreground"}`}
        >
          <ChevronDown
            className={`w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
          />
        </div>
      </button>
      <div
        className={`overflow-hidden transition-all duration-200 ${isOpen ? "max-h-96" : "max-h-0"}`}
      >
        <div className="px-5 pb-5 text-sm text-muted-foreground leading-relaxed border-t border-border/40 pt-4">
          {answer}
        </div>
      </div>
    </div>
  );
}
