import type { Metadata } from "next";
import Link from "next/link";
import { Camera, Plug, Radar, ShieldAlert, Wifi, Zap } from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { WhatsAppIcon, buildWhatsAppApiHref } from "@/components/shop/whatsapp-shared";
import { getServiceBySlug } from "@/lib/services-data";
import { DEFAULT_OG_IMAGE } from "@/lib/site-og-image";

const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || "https://nizamify.com").replace(/\/$/, "");
const CANONICAL = "/services/hardware-installations";
const SERVICE = getServiceBySlug("hardware-installations")!;

export const metadata: Metadata = {
  title: "Smart Home Installation Services in Pakistan",
  description:
    "Professional installation for smart plugs, switches, cameras, sensors & breakers — coming soon in Rawalpindi & Islamabad. Get notified when Nizamify installation launches.",
  alternates: { canonical: CANONICAL },
  keywords: [
    "smart device installation Pakistan",
    "smart home installation Rawalpindi",
    "smart home installation Islamabad",
    "smart plug installation service",
    "smart camera installation Pakistan",
  ],
  openGraph: {
    title: "Smart Home Hardware Installation Services in Pakistan | Nizamify",
    description:
      "Professional installation for smart plugs, switches, cameras, sensors & breakers — coming soon in Rawalpindi & Islamabad.",
    url: `${SITE_URL}${CANONICAL}`,
    type: "website",
    images: [{ url: DEFAULT_OG_IMAGE }],
  },
  twitter: {
    card: "summary_large_image",
    title: "Smart Home Hardware Installation Services in Pakistan | Nizamify",
    description:
      "Professional installation for smart plugs, switches, cameras, sensors & breakers — coming soon in Rawalpindi & Islamabad.",
    images: [DEFAULT_OG_IMAGE],
  },
};

const WHATS_INCLUDED = [
  {
    icon: Plug,
    title: "Smart Plug & Switch Installation",
    body: "Safe wiring and setup for smart plugs and switches, including replacing existing switchboards where needed.",
  },
  {
    icon: Camera,
    title: "Smart Camera & Video Doorbell Setup",
    body: "Mounting, wiring, and app pairing for security cameras and video doorbells, positioned for the best coverage.",
  },
  {
    icon: Radar,
    title: "Sensor Installation",
    body: "Gas leak, water leak, motion, and temperature sensors installed and configured to alert you the moment something's wrong.",
  },
  {
    icon: ShieldAlert,
    title: "Smart Breaker & Distribution Box Setup",
    body: "Professional installation of smart breakers and distribution boxes for whole-circuit monitoring and control.",
  },
  {
    icon: Wifi,
    title: "WiFi Network Optimization",
    body: "We check your home WiFi coverage and signal strength so every smart device stays reliably connected.",
  },
  {
    icon: Zap,
    title: "App Setup & Automation Configuration",
    body: "Full setup of the Tuya/Smart Life app, Alexa, and Google Assistant integration, plus your first automations and schedules.",
  },
];

const FAQS = [
  {
    question: "Is hardware installation available now?",
    answer:
      "Not yet — this service is coming soon. Contact us on WhatsApp to be notified as soon as it launches in your city.",
  },
  {
    question: "Can I install smart devices myself in the meantime?",
    answer:
      "Yes — every product we sell is designed for straightforward self-installation, and each product page includes full setup steps in the description.",
  },
  {
    question: "Which cities will installation cover first?",
    answer: "We're launching in Rawalpindi and Islamabad first, with more cities to follow.",
  },
  {
    question: "Will installation cost extra on top of the product price?",
    answer:
      "Yes, installation will be a separate service on top of the product price. Exact pricing will be confirmed closer to launch.",
  },
];

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: FAQS.map((f) => ({
    "@type": "Question",
    name: f.question,
    acceptedAnswer: { "@type": "Answer", text: f.answer },
  })),
};

const serviceSchema = {
  "@context": "https://schema.org",
  "@type": "Service",
  name: SERVICE.name,
  description: `${SERVICE.shortDescription} This service is not yet available — launching soon.`,
  url: `${SITE_URL}${CANONICAL}`,
  serviceType: "Smart Home Hardware Installation",
  provider: { "@type": "Organization", name: "Nizamify", url: SITE_URL },
  areaServed: [
    { "@type": "City", name: "Rawalpindi" },
    { "@type": "City", name: "Islamabad" },
  ],
};

const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    { "@type": "ListItem", position: 1, name: "Home", item: `${SITE_URL}/` },
    { "@type": "ListItem", position: 2, name: "Services", item: `${SITE_URL}/services` },
    { "@type": "ListItem", position: 3, name: SERVICE.name, item: `${SITE_URL}${CANONICAL}` },
  ],
};

export default function HardwareInstallationsPage() {
  return (
    <div className="bg-white">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
      />

      <section className="bg-slate-50 py-12 md:py-16">
        <div className="container max-w-4xl">
          <p className="text-sm text-slate-500">
            <Link href="/services" className="hover:text-primary hover:underline">
              Services
            </Link>{" "}
            / {SERVICE.name}
          </p>
          <div className="mt-3 flex flex-wrap items-center gap-3">
            <h1 className="text-3xl font-bold text-slate-900 md:text-4xl">Hardware Installations</h1>
            <span className="rounded-full bg-secondary/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-secondary">
              Coming Soon
            </span>
          </div>
          <p className="mt-4 max-w-3xl text-sm leading-relaxed text-slate-600 md:text-base">
            We're building a professional installation service for every smart device we sell —
            plugs, switches, cameras, sensors, and breakers — so you don't have to wire and
            configure anything yourself. Here's what it will include once it launches.
          </p>
          <div className="mt-6">
            <Button
              asChild
              type="button"
              variant="outline"
              className="border-[#25D366] bg-white text-[#075E54] hover:bg-[#25D366]/10 hover:text-[#075E54]"
            >
              <a
                href={buildWhatsAppApiHref(
                  "Hi, please notify me when Nizamify's hardware installation service launches.",
                )}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Contact Nizamify on WhatsApp about hardware installation"
              >
                <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">
        <h2 className="text-2xl font-bold text-primary md:text-3xl">What This Service Will Include</h2>
        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {WHATS_INCLUDED.map(({ icon: Icon, title, body }) => (
            <div key={title} className="rounded-xl border border-slate-200 p-5">
              <div className="flex size-10 items-center justify-center rounded-full bg-primary/10">
                <Icon className="size-5 text-primary" strokeWidth={1.75} aria-hidden />
              </div>
              <h3 className="mt-3 font-bold text-slate-900">{title}</h3>
              <p className="mt-1 text-sm leading-relaxed text-slate-600">{body}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-slate-50 py-12 md:py-16">
        <div className="container max-w-4xl">
          <h2 className="text-2xl font-bold text-primary md:text-3xl">Where & Why Wait</h2>
          <p className="mt-4 text-sm leading-relaxed text-slate-600 md:text-base">
            We're launching first in <strong>Rawalpindi and Islamabad</strong>, expanding from
            there. Waiting for the official service means qualified installation, proper
            configuration, and warranty support — instead of DIY wiring that can go wrong on
            higher-power circuits like water heaters or ACs.
          </p>
        </div>
      </section>

      <section className="container max-w-3xl py-16 md:py-20">
        <h2 className="text-2xl font-bold text-primary md:text-3xl">Frequently Asked Questions</h2>
        <div className="mt-8">
          <Accordion type="single" collapsible className="w-full">
            {FAQS.map((faq, i) => (
              <AccordionItem key={i} value={`hw-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, please notify me when Nizamify's hardware installation service launches.",
              )}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Get notified about hardware installation on WhatsApp"
            >
              <span className="mr-2 inline-flex size-6 items-center justify-center rounded-full bg-[#25D366] text-white">
                <WhatsAppIcon className="size-4" />
              </span>
              Notify Me on WhatsApp
            </a>
          </Button>
        </div>
      </section>
    </div>
  );
}