"use client";

import { useState } from "react";
import { Button } from "@/components/atoms";
import { Users, Monitor, Tv, Headset, ChevronDown } from "lucide-react";

export function OnsiteSupportContent() {
  return (
    <div className="max-w-6xl mx-auto px-4">
      {/* Header */}
      <div className="text-center mb-16 pt-8">
        <h1 className="text-4xl sm:text-5xl font-extrabold text-foreground mb-6 tracking-tight">
          Tech Help in English, At Your Door
        </h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
          Need help with your router, computer, or home network? Our English-speaking technicians
          come to your home or office to solve tech problems, explained in a language you
          understand.
        </p>
      </div>

      {/* Main Services */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-20">
        <div className="space-y-6">
          <h2 className="text-3xl font-bold text-foreground">We Come to You</h2>
          <p className="text-muted-foreground leading-relaxed">
            Living in Japan without strong Japanese skills can make tech problems frustrating.
            That&apos;s where we come in. Our English-speaking technicians visit your home or office
            to help with setup, troubleshooting, and configuration.
          </p>
          <p className="text-muted-foreground leading-relaxed">
            For quick fixes, we also offer remote support. We connect to your device securely over
            the internet to diagnose and resolve issues without a home visit.
          </p>
          <div className="pt-4">
            <Button as="a" href="/contact" size="lg">
              Request Support
            </Button>
          </div>
        </div>
        <div className="relative h-[300px] bg-muted/30 rounded-2xl overflow-hidden flex items-center justify-center">
          <Users className="h-32 w-32 text-muted-foreground/20" />
        </div>
      </div>

      {/* Pricing Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
        {/* Onsite Network & Computer Support */}
        <div className="bg-card rounded-2xl border border-border/60 p-6 shadow-sm flex flex-col">
          <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-4">
            <Monitor className="h-6 w-6" />
          </div>
          <h3 className="text-lg font-bold text-foreground mb-2">
            Onsite Network & Computer Support
          </h3>
          <div className="mt-auto pt-4">
            <div className="text-sm text-muted-foreground mb-1">Basic Service Fee</div>
            <div className="text-3xl font-bold text-foreground">15,000 JPY</div>
          </div>
        </div>

        {/* Remote Support */}
        <div className="bg-card rounded-2xl border border-border/60 p-6 shadow-sm flex flex-col">
          <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-4">
            <Headset className="h-6 w-6" />
          </div>
          <h3 className="text-lg font-bold text-foreground mb-2">
            Remote Network & Computer Support
          </h3>
          <div className="mt-auto pt-4">
            <div className="text-sm text-muted-foreground mb-1">Basic Service Fee</div>
            <div className="text-3xl font-bold text-foreground">5,000 JPY</div>
          </div>
        </div>

        {/* Onsite TV Support */}
        <div className="bg-card rounded-2xl border border-border/60 p-6 shadow-sm flex flex-col">
          <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary mb-4">
            <Tv className="h-6 w-6" />
          </div>
          <h3 className="text-lg font-bold text-foreground mb-2">Onsite TV Support Service</h3>
          <div className="mt-auto pt-4">
            <div className="text-sm text-muted-foreground mb-1">Basic Service Fee</div>
            <div className="text-3xl font-bold text-foreground">15,000 JPY</div>
          </div>
        </div>
      </div>

      {/* FAQ Section */}
      <div className="mb-12">
        <h2 className="text-2xl font-bold text-foreground mb-6 text-center">
          Frequently Asked Questions
        </h2>
        <div className="space-y-4 max-w-3xl mx-auto">
          <FaqItem
            question="My home requires multiple Wi-Fi routers. Would you be able to assist with this?"
            answer={
              <>
                Yes, the Assist Solutions technical team is able to visit your residence for device
                set up including Wi-Fi routers, printers, Apple TVs etc.
                <br />
                <br />
                Our tech consulting team will be able to make suggestions based on your residence
                layout and requirements. Please contact us at info@asolutions.co.jp for a free
                consultation.
              </>
            }
          />
          <FaqItem
            question="I am already subscribed to a different Internet provider but require more Wi-Fi coverage. Would I be able to just opt for the Onsite Support service without switching over my entire home Internet service?"
            answer="Yes, we are able to offer the Onsite Support service as a standalone service."
          />
          <FaqItem
            question="Do you offer this service outside of Tokyo?"
            answer={
              <>
                Our In-Home Technical Assistance service can be provided in Tokyo, Saitama and
                Kanagawa prefecture.
                <br />
                <br />
                *Please note that this service may not available in some areas within the above
                prefectures.
                <br />
                For more information, please contact us at info@asolutions.co.jp
              </>
            }
          />
        </div>
      </div>

      {/* CTA */}
      <div className="text-center py-12 bg-muted/20 rounded-3xl">
        <h2 className="text-2xl font-bold text-foreground mb-4">
          Tech Problems? We Speak Your Language.
        </h2>
        <p className="text-muted-foreground mb-6 max-w-xl mx-auto">
          Don&apos;t struggle with Japanese-only support lines. Get help from technicians who
          explain things clearly in English.
        </p>
        <Button as="a" href="/contact" size="lg">
          Request Support
        </Button>
      </div>
    </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 border-border rounded-xl overflow-hidden bg-card">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-start justify-between gap-3 p-4 text-left hover:bg-muted/50 transition-colors"
      >
        <span className="font-medium text-foreground">{question}</span>
        <ChevronDown
          className={`w-5 h-5 text-muted-foreground flex-shrink-0 mt-0.5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
        />
      </button>
      {isOpen && (
        <div className="px-4 pb-4 text-sm text-muted-foreground leading-relaxed">{answer}</div>
      )}
    </div>
  );
}
