import type { Metadata } from "next";
import Link from "next/link";
import { MapPin, ShieldCheck, Smartphone, Truck } 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 { BUSINESS_HOURS_HUMAN, CITY_PAGES } from "@/lib/city-pages";
import { getPublicPageSeo } from "@/lib/public-page-seo";
import { resolveOgImageUrl } from "@/lib/site-og-image";

const SITE_URL = (process.env.NEXT_PUBLIC_SITE_URL || "https://nizamify.com").replace(/\/$/, "");
const CANONICAL = "/about";

export async function generateMetadata(): Promise<Metadata> {
  const seo = await getPublicPageSeo("about");
  const title = seo?.metaTitle?.trim() || seo?.title?.trim() || "About Nizamify";
  const description =
    seo?.metaDescription?.trim() ||
    "Nizamify is a Rawalpindi & Islamabad-based smart home and business automation company, bringing WiFi smart plugs, switches, and sensors to Pakistan with fast local delivery and real support.";
  const keywords =
    Array.isArray(seo?.metaKeywords) && seo.metaKeywords.length > 0
      ? seo.metaKeywords
      : ["about Nizamify", "smart home automation Pakistan", "Nizamify company"];
  const image = resolveOgImageUrl(seo?.image);

  return {
    title,
    description,
    keywords,
    alternates: { canonical: CANONICAL },
    openGraph: {
      title,
      description,
      url: `${SITE_URL}${CANONICAL}`,
      type: "website",
      images: [{ url: image }],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [image],
    },
  };
}

const VALUES = [
  {
    icon: MapPin,
    title: "Locally Based",
    body: "Headquartered in Rawalpindi, serving Rawalpindi & Islamabad directly — not a faceless marketplace listing.",
  },
  {
    icon: Truck,
    title: "Fast, Honest Delivery",
    body: "Cash on delivery and quick dispatch, with real order tracking instead of vague shipping promises.",
  },
  {
    icon: Smartphone,
    title: "One App, Every Device",
    body: "Every product we sell works through the same Tuya Smart / Smart Life app — no juggling five different apps for five devices.",
  },
  {
    icon: ShieldCheck,
    title: "Support That Answers",
    body: "Real WhatsApp support, available 24/7 — not a ticket queue you never hear back from.",
  },
];

const FAQS = [
  {
    question: "What does Nizamify do?",
    answer:
      "Nizamify sells WiFi smart home devices — smart plugs, switches, sensors, cameras, and more — controlled through a single app, plus business and home automation software solutions.",
  },
  {
    question: "Where is Nizamify based?",
    answer:
      "We're based in Rawalpindi, Pakistan, and serve customers across Rawalpindi, Islamabad, and the rest of the country with nationwide delivery.",
  },
  {
    question: "Do you only sell products, or install them too?",
    answer:
      "Today we focus on selling products with straightforward self-installation guides on every product page. A dedicated installation service is coming soon — see our Services page for details.",
  },
  {
    question: "How can I contact Nizamify?",
    answer: "The fastest way is WhatsApp — every page on this site has a WhatsApp button, or visit our Contact Us page.",
  },
];

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

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

const homeBaseCities = CITY_PAGES.filter((c) => c.homeBase);

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

      <section className="bg-primary py-14 text-white md:py-20">
        <div className="container max-w-4xl text-center">
          <span className="text-xs font-semibold uppercase tracking-wider text-secondary">
            About Nizamify
          </span>
          <h1 className="mt-2 text-3xl font-bold leading-tight md:text-5xl">
            Smart Home &amp; Business Automation, Built for Pakistan
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-sm leading-relaxed text-white/90 md:text-base">
            Nizamify is a {homeBaseCities.map((c) => c.name).join(" & ")}-based company bringing WiFi
            smart plugs, switches, sensors, and a unified control app to homes and businesses across
            Pakistan — with fast local delivery, cash on delivery, and support that actually answers.
          </p>
        </div>
      </section>

      <section className="container max-w-4xl py-14 md:py-20">
        <h2 className="text-2xl font-bold text-primary md:text-3xl">What We Do</h2>
        <p className="mt-4 text-sm leading-relaxed text-slate-600 md:text-base">
          We sell smart home and business automation devices — WiFi smart plugs, switches, sensors,
          cameras, and breakers — every one of them controllable from a single app, so you're not
          stuck managing five different apps for five different gadgets. Alongside hardware, we build
          custom automation software for homes, offices, and factories: from a simple control app to a
          full operations dashboard.
        </p>
        <p className="mt-4 text-sm leading-relaxed text-slate-600 md:text-base">
          We're just getting started. Our current focus is our WiFi smart plug and device catalog;
          longer term, we're building toward a full smart-home and business-automation ecosystem for
          Pakistan — see what we're working on next on our{" "}
          <Link href="/services" className="font-medium text-primary hover:underline">
            Services page
          </Link>
          .
        </p>
      </section>

      <section className="bg-slate-50 py-14 md:py-20">
        <div className="container max-w-5xl">
          <h2 className="text-2xl font-bold text-primary md:text-3xl">Why Nizamify</h2>
          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {VALUES.map(({ icon: Icon, title, body }) => (
              <div key={title} className="rounded-xl border border-slate-200 bg-white 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>
        </div>
      </section>

      <section className="container max-w-4xl py-14 md:py-20">
        <h2 className="text-2xl font-bold text-primary md:text-3xl">Where We Operate</h2>
        <p className="mt-4 text-sm leading-relaxed text-slate-600 md:text-base">
          Nizamify is based in Rawalpindi and directly serves the twin cities of{" "}
          {homeBaseCities.map((c) => c.name).join(" and ")}, with nationwide delivery to the rest of
          Pakistan. Support is available on WhatsApp {BUSINESS_HOURS_HUMAN}.
        </p>
        <div className="mt-4 flex flex-wrap gap-2">
          {CITY_PAGES.map((city) => (
            <Link
              key={city.slug}
              href={`/smart-home-automation/${city.slug}`}
              className="rounded-full border border-slate-200 px-4 py-1.5 text-sm font-medium text-slate-700 hover:border-primary hover:text-primary"
            >
              {city.name}
            </Link>
          ))}
        </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={`about-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.")}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Chat with Nizamify 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>
              Chat With Us on WhatsApp
            </a>
          </Button>
        </div>
      </section>
    </div>
  );
}