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

export default function OnsiteSupportPage() {
  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">
          Onsite Support
        </h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
          We dispatch our skillful in-house tech staff to your residence or office for your needs.
        </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">Need Our Technical Support?</h2>
          <p className="text-muted-foreground leading-relaxed">
            We can provide you with on-site technical support service. If you would like for our
            technicians to visit your residence and provide technical assistance, please let us
            know.
          </p>
          <p className="text-muted-foreground leading-relaxed">
            We also provide "Remote Access Services" which allows our technicians to do support via
            Remote Access Software over the Internet connection to fix up the issue (depends on what
            the issue is).
          </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="max-w-4xl mx-auto mb-16">
        <h2 className="text-3xl font-bold text-foreground mb-8 text-center">
          Frequently Asked Questions
        </h2>

        <div className="space-y-8">
          <div className="bg-card rounded-2xl border border-border/60 p-8">
            <h3 className="text-xl font-bold text-foreground mb-3">
              My home requires multiple Wi-Fi routers. Would you be able to assist with this?
            </h3>
            <p className="text-muted-foreground leading-relaxed">
              Yes, the Assist Solutions technical team is able to visit your residence for device
              set up including Wi-Fi routers, printers, Apple TVs etc. Our tech consulting team will
              be able to make suggestions based on your residence layout and requirements. Please
              contact us for a free consultation.
            </p>
          </div>

          <div className="bg-card rounded-2xl border border-border/60 p-8">
            <h3 className="text-xl font-bold text-foreground mb-3">
              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?
            </h3>
            <p className="text-muted-foreground leading-relaxed">
              Yes, we are able to offer the Onsite Support service as a standalone service.
            </p>
          </div>

          <div className="bg-card rounded-2xl border border-border/60 p-8">
            <h3 className="text-xl font-bold text-foreground mb-3">
              Do you offer this service outside of Tokyo?
            </h3>
            <div className="text-muted-foreground leading-relaxed">
              <p className="mb-2">
                Our In-Home Technical Assistance service can be provided in Tokyo, Saitama and
                Kanagawa prefecture.
              </p>
              <p className="text-sm italic">
                *Please note that this service may not available in some areas within the above
                prefectures. For more information, please contact us.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* CTA */}
      <div className="text-center py-12 bg-muted/20 rounded-3xl">
        <h2 className="text-2xl font-bold text-foreground mb-4">Ready to get started?</h2>
        <Button as="a" href="/contact" size="lg">
          Contact Us for Support
        </Button>
      </div>
    </div>
  );
}
