"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { SERVICES, SERVICES_FAQS } from "@/lib/services-data";
import { ArrowRight, Clock3, MapPin, ShieldCheck } from "lucide-react";
import Link from "next/link";
import { WhatsAppIcon, buildWhatsAppApiHref } from "@/components/shop/whatsapp-shared";

const TRUST_ITEMS = [
  {
    icon: MapPin,
    title: "Local Pakistan-Based Team",
    body: "Based in Rawalpindi & Islamabad, with services and delivery available across Pakistan.",
  },
  {
    icon: ShieldCheck,
    title: "Hardware + Software Under One Roof",
    body: "We sell the smart devices and build the automation software — one team, no finger-pointing between vendors.",
  },
  {
    icon: Clock3,
    title: "WhatsApp Support, 24/7",
    body: "Reach us any time on WhatsApp for a quote, a question, or project status.",
  },
];

export function ServicesMarketingPage() {
  return (
    <div className="bg-white">
      <section className="bg-slate-50 py-12 md:py-16">
        <div className="container max-w-4xl text-center">
          <h1 className="text-3xl font-bold text-slate-900 md:text-4xl">Our Services</h1>
          <p className="mx-auto mt-4 max-w-2xl text-sm text-slate-600 md:text-base">
            Beyond selling smart devices, Nizamify builds the software and — soon — provides the
            installation that turns those devices into a genuinely automated home or business.
          </p>
          <div className="mt-6 flex justify-center">
            <Button
              asChild
              type="button"
              variant="outline"
              className="border-[#25D366] bg-white text-[#075E54] hover:bg-[#25D366]/10 hover:text-[#075E54]"
            >
              <a
                href={buildWhatsAppApiHref("Hi, I'd like to know more about Nizamify's services.")}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Contact Nizamify on WhatsApp about services"
              >
                <span className="mr-2 inline-flex size-6 items-center justify-center rounded-full bg-[#25D366] text-white">
                  <WhatsAppIcon className="size-4" />
                </span>
                Contact Us on WhatsApp
              </a>
            </Button>
          </div>
        </div>
      </section>

      <section className="container max-w-5xl py-12 md:py-16">
        <div className="grid gap-6 md:grid-cols-2">
          {SERVICES.map((service) => (
            <div
              key={service.slug}
              className="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition hover:shadow-md md:p-8"
            >
              <div className="flex items-start justify-between gap-3">
                <h2 className="text-xl font-bold text-primary md:text-2xl">{service.name}</h2>
                {service.comingSoon ? (
                  <span className="shrink-0 rounded-full bg-secondary/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-secondary">
                    Coming Soon
                  </span>
                ) : null}
              </div>
              <p className="mt-2 text-sm font-medium text-slate-500">{service.tagline}</p>
              <p className="mt-4 flex-1 text-sm leading-relaxed text-slate-600">
                {service.shortDescription}
              </p>
              <Link
                href={`/services/${service.slug}`}
                className="mt-6 inline-flex w-fit items-center gap-2 font-semibold text-primary hover:underline"
              >
                Learn more
                <ArrowRight className="size-4" />
              </Link>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-primary py-12 text-white md:py-16">
        <div className="container max-w-5xl">
          <div className="grid gap-8 sm:grid-cols-3">
            {TRUST_ITEMS.map(({ icon: Icon, title, body }) => (
              <div key={title} className="flex flex-col items-start gap-3">
                <div className="flex size-11 shrink-0 items-center justify-center rounded-full border border-white/30 bg-white/10">
                  <Icon className="size-5 text-white" strokeWidth={1.75} aria-hidden />
                </div>
                <div>
                  <h3 className="font-bold text-white">{title}</h3>
                  <p className="mt-1 text-sm leading-relaxed text-white/85">{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t border-slate-100 bg-slate-50 py-16 md:py-20">
        <div className="container max-w-3xl">
          <div className="text-center">
            <h2 className="text-2xl font-bold text-primary md:text-3xl">
              Frequently Asked Questions
            </h2>
          </div>
          <div className="mt-8">
            <Accordion type="single" collapsible className="w-full">
              {SERVICES_FAQS.map((faq, i) => (
                <AccordionItem key={i} value={`services-faq-${i}`} className="border-b border-slate-200">
                  <AccordionTrigger className="text-left text-base font-semibold text-slate-900 hover:no-underline">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-sm leading-relaxed text-slate-600">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
          <div className="mt-10 text-center">
            <Button
              asChild
              type="button"
              variant="outline"
              className="border-[#25D366] bg-white text-[#075E54] hover:bg-[#25D366]/10 hover:text-[#075E54]"
            >
              <a
                href={buildWhatsAppApiHref("Hi, I'd like to know more about Nizamify's services.")}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Chat with Nizamify on WhatsApp about services"
              >
                <span className="mr-2 inline-flex size-6 items-center justify-center rounded-full bg-[#25D366] text-white">
                  <WhatsAppIcon className="size-4" />
                </span>
                Chat on WhatsApp
              </a>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}