import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ArrowRight, ArrowLeft, CheckCircle2 } from "lucide-react";
import { renderContent } from "@/lib/content-render";
import {
  getIndustryBySlug,
  listProjects,
  listServices,
  getSiteSettings,
} from "@/lib/data";
import { buildMetadata } from "@/lib/seo";
import { ProjectsGrid } from "@/components/projects-grid";
import { ServicesGrid } from "@/components/services-grid";
import { TrustBand } from "@/components/trust-band";
import { Guarantee } from "@/components/guarantee";
import { QuickLeadForm } from "@/components/quick-lead-form";
import { FaqList } from "@/components/faq-list";
import { FaqLd } from "@/components/json-ld";
import { SectionTitle } from "@/components/section-title";
import type { FaqItem } from "@/lib/types";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const industry = await getIndustryBySlug(slug);
  if (!industry) return { title: "Sektör bulunamadı" };
  return buildMetadata(`/sektor/${slug}`, {
    title: industry.seo_title || industry.title,
    description: industry.seo_description || industry.subtitle || undefined,
  });
}

function parseFaq(items?: string[] | null): FaqItem[] {
  if (!items) return [];
  const out: FaqItem[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<FaqItem>;
      if (obj.q && obj.a) out.push({ q: obj.q, a: obj.a });
    } catch {
      /* ignore */
    }
  }
  return out;
}

export default async function IndustryPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const industry = await getIndustryBySlug(slug);
  if (!industry) notFound();

  const [services, projects, settings] = await Promise.all([
    listServices(),
    listProjects({ limit: 6 }),
    getSiteSettings(),
  ]);

  const faqItems = parseFaq(industry.faq);
  const html = renderContent(industry.content);

  return (
    <>
      <FaqLd items={faqItems} />

      <section className="relative overflow-hidden border-b border-[var(--border)]">
        <div className="absolute inset-0 hero-grid opacity-50" aria-hidden />
        <div className="relative mx-auto max-w-7xl px-6 py-20">
          <Link
            href="/"
            className="inline-flex items-center gap-1 text-sm text-[var(--muted)] hover:text-[var(--navy)]"
          >
            <ArrowLeft className="size-3.5" /> Anasayfa
          </Link>

          <div className="mt-6 grid items-center gap-12 lg:grid-cols-[1.2fr_1fr]">
            <div>
              <span className="inline-flex items-center gap-2 rounded-full border border-[var(--sky)]/30 bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
                Sektöre özel çözüm
              </span>
              <h1 className="mt-5 text-4xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-5xl">
                {industry.title}
              </h1>
              {industry.subtitle && (
                <p className="mt-5 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
                  {industry.subtitle}
                </p>
              )}

              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <Link
                  href="/iletisim"
                  className="inline-flex items-center justify-center gap-2 rounded-full bg-[var(--navy)] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)]"
                >
                  Ücretsiz keşif görüşmesi
                  <ArrowRight className="size-4" />
                </Link>
                <Link
                  href="/site-analizi"
                  className="inline-flex items-center justify-center gap-2 rounded-full border border-[var(--border)] bg-white px-6 py-3 text-sm font-medium text-[var(--navy)] transition hover:border-[var(--navy)]"
                >
                  Ücretsiz site analizi
                </Link>
              </div>
            </div>

            <div className="lg:pl-6">
              <QuickLeadForm
                title="Sektörünüze özel teklif"
                description="Adınızı ve telefonunuzu bırakın, sektör uzmanımız 30 dakika içinde sizi arasın."
                buttonLabel="Beni hemen arayın"
              />
            </div>
          </div>
        </div>
      </section>

      <TrustBand settings={settings} />

      {industry.features && industry.features.length > 0 && (
        <section className="border-b border-[var(--border)] py-20">
          <div className="mx-auto max-w-7xl px-6">
            <SectionTitle
              eyebrow="Neler dahil?"
              title="Sektörünüze uygun, hazır çözümler"
              description={`${industry.title} alanında deneyimimizle geliştirdiğimiz fonksiyonlar.`}
            />
            <ul className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {industry.features.map((f) => (
                <li
                  key={f}
                  className="flex items-start gap-2 rounded-2xl border border-[var(--border)] bg-white p-5"
                >
                  <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-[var(--sky-600)]" />
                  <span className="text-sm text-[var(--foreground)]">{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>
      )}

      {html && (
        <section className="py-16">
          <div className="mx-auto max-w-3xl px-6">
            <article
              className="prose prose-lg max-w-none text-[var(--foreground)]"
              dangerouslySetInnerHTML={{ __html: html }}
            />
          </div>
        </section>
      )}

      <Guarantee settings={settings} />

      {projects.length > 0 && (
        <section className="border-y border-[var(--border)] py-20">
          <div className="mx-auto max-w-7xl px-6">
            <SectionTitle
              eyebrow="Referanslar"
              title="Benzer projelerimiz"
              description="Sektörünüz veya benzer alanlarda tamamladığımız işler."
            />
            <div className="mt-12">
              <ProjectsGrid projects={projects} />
            </div>
          </div>
        </section>
      )}

      {services.length > 0 && (
        <section className="py-20">
          <div className="mx-auto max-w-7xl px-6">
            <SectionTitle
              eyebrow="Hizmetler"
              title="Sunduğumuz çözümler"
              description="Sektörünüze uygun hizmet paketlerimiz."
            />
            <div className="mt-12">
              <ServicesGrid services={services} />
            </div>
          </div>
        </section>
      )}

      {faqItems.length > 0 && (
        <section className="border-t border-[var(--border)] py-20">
          <div className="mx-auto grid max-w-6xl gap-12 px-6 lg:grid-cols-[1fr_2fr]">
            <SectionTitle
              align="left"
              eyebrow="SSS"
              title={`${industry.title} sektörü soruları`}
            />
            <FaqList items={faqItems} />
          </div>
        </section>
      )}
    </>
  );
}