import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/badge";
import { Button } from "@/components/button";
import { FAQAccordion } from "@/components/faq-accordion";
import { CheckLine, IconMark, getServiceIcon } from "@/components/icon-system";
import { JsonLd } from "@/components/json-ld";
import { SectionHeading } from "@/components/page-states";
import { Section } from "@/components/section";
import { Container } from "@/components/container";
import { company } from "@/data/company";
import type { EnterprisePage } from "@/data/enterprise-integrations";
import { absoluteUrl, breadcrumbSchema, faqSchema, getSiteUrl } from "@/lib/seo";

type EnterpriseIntegrationPageProps = {
  page: EnterprisePage;
};

function serviceJsonLd(page: EnterprisePage) {
  return {
    "@context": "https://schema.org",
    "@type": "Service",
    name: page.heroTitle,
    description: page.seoDescription,
    provider: {
      "@id": `${getSiteUrl()}/#organization`,
    },
    serviceType: page.eyebrow,
    areaServed: {
      "@type": "Country",
      name: "Serbia",
    },
    url: absoluteUrl(page.path),
  };
}

function HeroFlow({ page }: EnterpriseIntegrationPageProps) {
  return (
    <div className="relative">
      <div className="absolute -inset-8 rounded-[2rem] bg-primary/15 blur-3xl" />
      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.035] p-3 shadow-[0_28px_90px_rgb(0_0_0_/_0.22)]">
        <div className="rounded-xl border border-white/10 bg-[#151515] p-5">
          <div className="flex items-center justify-between gap-4 border-b border-white/10 pb-4">
            <div>
              <p className="text-sm font-semibold text-white">Operativna arhitektura</p>
              <p className="mt-1 text-xs leading-5 text-slate-400">marketing, ERP, logistika i podaci kroz jedan tok</p>
            </div>
            <span className="rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
              Enterprise workflow
            </span>
          </div>
          <div className="mt-5 grid gap-3">
            {page.heroFlow.map(([iconKey, item], index) => {
              const Icon = getServiceIcon(iconKey);

              return (
                <div key={item} className="grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3">
                  <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />
                  <span className="text-sm font-medium text-slate-200">{item}</span>
                  {index < page.heroFlow.length - 1 ? (
                    <ArrowRight className="h-4 w-4 text-slate-500" strokeWidth={1.8} />
                  ) : (
                    <span className="rounded-full bg-primary px-2.5 py-1 text-[11px] font-semibold text-white">OK</span>
                  )}
                </div>
              );
            })}
          </div>
          <div className="mt-5 rounded-xl border border-primary/20 bg-primary/10 p-4">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Princip</p>
            <p className="mt-2 text-sm leading-6 text-slate-200">
              Integracija ima vrednost tek kada podrži stvarni poslovni proces: šta se meri, šta se šalje, ko obrađuje i koji status se vraća u sistem.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function WorkflowSteps({ steps }: { steps: EnterprisePage["workflowSteps"] }) {
  return (
    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
      {steps.map(([iconKey, item], index) => (
        <div key={item} className="relative rounded-2xl border border-slate-200/80 bg-white p-5 shadow-[0_14px_42px_rgb(15_23_42_/_0.05)]">
          <div className="flex items-center justify-between gap-3">
            <IconMark icon={getServiceIcon(iconKey)} className="h-9 w-9" />
            <span className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{String(index + 1).padStart(2, "0")}</span>
          </div>
          <p className="mt-5 text-sm font-semibold leading-6 text-slate-950">{item}</p>
          {index < steps.length - 1 ? (
            <ArrowRight className="absolute -right-3 top-1/2 z-10 hidden h-5 w-5 -translate-y-1/2 text-primary xl:block" strokeWidth={1.8} />
          ) : null}
        </div>
      ))}
    </div>
  );
}

export function EnterpriseIntegrationPage({ page }: EnterpriseIntegrationPageProps) {
  return (
    <main>
      <JsonLd
        data={[
          breadcrumbSchema([
            { name: "Početna", path: "/" },
            { name: page.heroTitle, path: page.path },
          ]),
          serviceJsonLd(page),
          ...(page.faqs?.length ? [faqSchema(page.faqs)] : []),
        ]}
      />

      <section className="relative overflow-hidden bg-[#111111] text-white">
        <div className="absolute inset-0 blueprint-grid opacity-90" />
        <div className="absolute left-[10%] top-20 h-80 w-80 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute right-[7%] bottom-0 h-80 w-[28rem] rounded-full bg-sky-400/[0.06] blur-3xl" />
        <Container className="relative grid min-h-[calc(82vh-5rem)] items-center gap-12 py-16 lg:grid-cols-[0.92fr_1.08fr] lg:py-20">
          <div>
            <Badge className="border-white/10 bg-white/[0.06] text-primary">{page.eyebrow}</Badge>
            <h1 className="mt-6 max-w-4xl text-4xl font-semibold leading-tight tracking-normal text-white sm:text-5xl lg:text-6xl">
              {page.heroTitle}
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">{page.heroSubtitle}</p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-subject={`Upit: ${page.heroTitle}`}
                data-source-section="Hero"
              >
                Zakažite konsultaciju
              </Button>
              <Button href="#funkcionalnosti" size="lg" variant="darkOutline">
                Pogledajte šta povezujemo
              </Button>
            </div>
            <div className="mt-9 grid max-w-3xl gap-3 text-sm text-slate-300 sm:grid-cols-3">
              {page.heroBadges.map((item) => (
                <div key={item} className="rounded-xl border border-white/10 bg-white/[0.055] px-4 py-3 font-semibold shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)]">
                  {item}
                </div>
              ))}
            </div>
          </div>
          <HeroFlow page={page} />
        </Container>
      </section>

      <Section>
        <Container className="grid gap-10 lg:grid-cols-[0.86fr_1.14fr] lg:items-start">
          <SectionHeading eyebrow={page.introEyebrow} title={page.introTitle} description={page.introText[0]} />
          <div className="rounded-2xl border border-slate-200/80 bg-slate-50 p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)]">
            {page.introText.slice(1).map((paragraph) => (
              <p key={paragraph} className="text-base leading-8 text-slate-700">
                {paragraph}
              </p>
            ))}
            <ul className="mt-6 grid gap-3 sm:grid-cols-2">
              {page.introHighlights.map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </div>
        </Container>
      </Section>

      <Section id="funkcionalnosti" tone="slate">
        <Container>
          <SectionHeading eyebrow={page.cardsEyebrow} title={page.cardsTitle} description={page.cardsDescription} />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {page.cards.map((item) => (
              <article
                key={item.title}
                className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)] transition duration-300 hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-[0_24px_70px_rgb(15_23_42_/_0.08)]"
              >
                <IconMark icon={getServiceIcon(item.iconKey)} />
                <h3 className="mt-5 text-lg font-semibold leading-7 text-slate-950">{item.title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
              </article>
            ))}
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <SectionHeading eyebrow={page.workflowEyebrow} title={page.workflowTitle} description={page.workflowDescription} />
          <div className="mt-10">
            <WorkflowSteps steps={page.workflowSteps} />
          </div>
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <SectionHeading
            eyebrow="Poslovna vrednost"
            title="Integracije koje prave operativnu razliku, ne samo tehničku vezu."
            description="Svaki deo sistema mora da smanji ručni rad, poveća tačnost podataka ili ubrza prodajni i logistički proces."
            tone="dark"
          />
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {page.businessValue.map((item) => (
              <article key={item.title} className="rounded-2xl border border-white/10 bg-white/[0.04] p-6 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)]">
                <IconMark icon={getServiceIcon(item.iconKey)} tone="dark" />
                <h3 className="mt-5 text-lg font-semibold leading-7 text-white">{item.title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
              </article>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-5 lg:grid-cols-2">
          {page.detailSections.map((section) => (
            <article key={section.title} className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-[0_18px_55px_rgb(15_23_42_/_0.055)]">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{section.eyebrow}</p>
              <h2 className="mt-4 text-2xl font-semibold leading-tight text-slate-950">{section.title}</h2>
              <p className="mt-4 text-sm leading-7 text-slate-600">{section.description}</p>
              <ul className="mt-6 space-y-3">
                {section.points.map((item) => (
                  <CheckLine key={item}>{item}</CheckLine>
                ))}
              </ul>
            </article>
          ))}
        </Container>
      </Section>

      {page.faqs?.length ? (
        <Section>
          <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
            <SectionHeading
              eyebrow="FAQ"
              title="Najčešća pitanja iz realnih projekata."
              description="Odgovori su napisani praktično, da menadžment, marketing i operativa mogu brzo da procene gde integracija ima smisla."
            />
            <FAQAccordion items={page.faqs} />
          </Container>
        </Section>
      ) : null}

      <section className="border-t border-slate-200/70 bg-white py-16 sm:py-20">
        <Container className="grid gap-8 rounded-2xl border border-slate-200/80 bg-[#111111] p-6 text-white shadow-[0_24px_80px_rgb(15_23_42_/_0.14)] sm:p-8 lg:grid-cols-[1fr_auto] lg:items-center">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">Sledeći korak</p>
            <h2 className="mt-4 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl">{page.ctaTitle}</h2>
            <p className="mt-5 max-w-2xl text-base leading-7 text-slate-300">{page.ctaDescription}</p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
            <Button
              href="/kontakt"
              size="lg"
              data-lead-subject={`Upit: ${page.ctaTitle}`}
              data-source-section="Finalni CTA"
            >
              Zakažite konsultaciju
            </Button>
            {page.relatedCta ? (
              <Button href={page.relatedCta.href} size="lg" variant="darkOutline">
                {page.relatedCta.label}
              </Button>
            ) : null}
            <Button href={company.phoneHref} size="lg" variant="darkOutline">
              Pozovite {company.phone}
            </Button>
          </div>
        </Container>
      </section>
    </main>
  );
}