import Link from "next/link";
import type { ReactNode } from "react";
import { ArrowRight } from "lucide-react";

import {
  Badge,
  Button,
  Card,
  CheckLine,
  Container,
  FAQAccordion,
  IconMark,
  JsonLd,
  Section,
  SectionHeading,
  getServiceIcon,
} from "@/components";
import { company } from "@/data/company";
import { absoluteUrl, breadcrumbSchema, createMetadata, faqSchema, getSiteUrl } from "@/lib/seo";

export const metadata = createMetadata({
  title: "SEO, AEO i GEO optimizacija",
  description:
    "Tehnički SEO, schema.org, struktura linkova, backlink strategija i priprema sajta za Google i AI pretragu.",
  path: "/seo-aeo-geo-optimizacija",
});

const disciplines = [
  {
    iconKey: "search",
    title: "SEO",
    description:
      "Optimizacija za klasične pretraživače kao što je Google. Cilj je bolja vidljivost u organskoj pretrazi.",
  },
  {
    iconKey: "bot",
    title: "AEO",
    description:
      "Answer Engine Optimization. Priprema sadržaja da jasno odgovara na pitanja korisnika i bude pogodan za featured snippets, FAQ odgovore i direktne odgovore.",
  },
  {
    iconKey: "brain",
    title: "GEO",
    description:
      "Generative Engine Optimization. Priprema sajta i sadržaja da ga AI alati i generativni pretraživači lakše razumeju, citiraju i preporuče.",
  },
];

const workCards = [
  {
    iconKey: "gauge",
    title: "Tehnički SEO",
    points: [
      "brzina sajta i Core Web Vitals",
      "indeksabilnost, sitemap i robots.txt",
      "canonical URL i hreflang kada postoji više jezika",
      "mobile-first struktura",
    ],
  },
  {
    iconKey: "layers",
    title: "Struktura sajta",
    points: [
      "jasna hijerarhija stranica",
      "kategorije, landing strane i interne veze",
      "breadcrumbs i logični URL-ovi",
      "stranice koje odgovaraju realnim upitima kupaca",
    ],
  },
  {
    iconKey: "file-code",
    title: "Schema.org / structured data",
    points: [
      "Organization, LocalBusiness i Service",
      "Product, Offer i BreadcrumbList",
      "FAQPage gde ima smisla",
      "Article ili BlogPosting za resurse",
    ],
  },
  {
    iconKey: "newspaper",
    title: "Content architecture",
    points: [
      "stranice za usluge i industrije",
      "case study stranice i FAQ sadržaj",
      "blog, vodiči i poređenja",
      "landing strane za konkretne probleme",
    ],
  },
  {
    iconKey: "link",
    title: "Backlink strategija",
    points: [
      "kvalitetni linkovi sa relevantnih izvora",
      "partneri, dobavljači i klijenti",
      "PR članci i case study objave",
      "izbegavanje spam linkova",
    ],
  },
  {
    iconKey: "analytics",
    title: "Tracking i merenje",
    points: [
      "Search Console i GA4",
      "ranking monitoring i analiza upita",
      "konverzije, leadovi i pozivi",
      "stranice koje stvarno donose posao",
    ],
  },
];

const architectureFlow = [
  ["newspaper", "Content"],
  ["file-code", "Schema"],
  ["git-branch", "Internal links"],
  ["link", "Authority"],
  ["search", "Visibility"],
];

const auditBefore = [
  "meta tagovi bez jasne strukture",
  "preduge ili duplirane stranice",
  "filteri i kategorije bez canonical pravila",
  "sadržaj koji ne odgovara na konkretna pitanja",
  "nema jasnog merenja leadova i upita",
];

const auditAfter = [
  "jasna hijerarhija i namena stranica",
  "schema markup za ključne entitete",
  "interne veze između usluga, case studies i resursa",
  "sadržaj spreman za Google i answer engines",
  "tracking koji pokazuje šta donosi posao",
];

const linkExamples = [
  "/ecommerce-vise-prodavnica",
  "/bs-reporter",
  "/tracking-analytics",
  "/kurirske-integracije-logistika",
  "/pda-uredjaji-wms",
  "/case-studies/kvantalux-ecommerce-9-prodavnica-centralni-magacin",
  "/case-studies/ddg-fashion-pda-prijem-robe-popis",
];

const ecommerceSeo = [
  "kategorije, filteri i proizvodi",
  "canonical za filtere i paginaciju",
  "Product schema i dostupnost proizvoda",
  "slike, alt tekst i brzina učitavanja",
  "landing strane za brendove i kategorije",
  "indeksacija samo korisnih stranica",
];

const localSeo = [
  "stranice po lokacijama",
  "Google Business Profile",
  "NAP podaci i LocalBusiness schema",
  "mapa, radno vreme i lokalni upiti",
  "linkovi između lokacija i usluga",
];

const geoSignals = [
  "jasno definisane usluge",
  "dobre case study stranice",
  "konkretni odgovori i FAQ sadržaj",
  "kvalitetni izvori i backlinkovi",
  "schema markup i dosledni podaci o firmi",
  "reference i dokazi prethodnog rada",
];

const faqs = [
  {
    question: "Da li SEO znači samo ubacivanje meta tagova?",
    answer:
      "Ne. Meta title i description su mali deo posla. Važni su tehnički SEO, struktura sajta, schema.org, interni linkovi, sadržaj, brzina i merenje rezultata.",
  },
  {
    question: "Šta je AEO?",
    answer:
      "AEO je priprema sadržaja da jasno odgovara na konkretna pitanja korisnika i bude razumljiv za answer engine rezultate, FAQ odgovore i direktne odgovore.",
  },
  {
    question: "Šta je GEO?",
    answer:
      "GEO je priprema sajta da ga AI alati lakše razumeju, citiraju i povežu sa relevantnim temama, industrijama, uslugama i dokazima rada.",
  },
  {
    question: "Zašto je schema.org bitan?",
    answer:
      "Schema.org pomaže pretraživačima da razumeju ko ste, šta nudite, gde se nalazite, koje usluge ili proizvode imate i kako su stranice povezane.",
  },
  {
    question: "Da li su backlinkovi i dalje važni?",
    answer:
      "Da, ali cilj nisu masovni spam linkovi. Najbolji linkovi dolaze od partnera, klijenata, portala, stručnih članaka, lokalnih izvora i relevantnih direktorijuma.",
  },
  {
    question: "Kako SEO funkcioniše za eCommerce sa više prodavnica?",
    answer:
      "Potrebna je jasna struktura kategorija, proizvoda, lokacija, canonical pravila, Product schema, lokalni signali i interne veze koje prate realnu poslovnu logiku.",
  },
];

const jsonLd = [
  breadcrumbSchema([
    { name: "Početna", path: "/" },
    { name: "SEO, AEO i GEO optimizacija", path: "/seo-aeo-geo-optimizacija" },
  ]),
  {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "SEO, AEO i GEO optimizacija",
    description:
      "Tehnička, sadržajna i strukturna priprema sajta za Google pretragu, answer engine rezultate i AI pretragu.",
    provider: {
      "@id": `${getSiteUrl()}/#organization`,
    },
    serviceType: "Technical SEO, AEO, GEO",
    areaServed: {
      "@type": "Country",
      name: "Serbia",
    },
    url: absoluteUrl("/seo-aeo-geo-optimizacija"),
  },
  faqSchema(faqs),
];

function FlowDiagram() {
  return (
    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
      {architectureFlow.map(([iconKey, label], index) => {
        const Icon = getServiceIcon(iconKey);

        return (
          <div key={label} className="relative rounded-2xl border border-white/10 bg-white/[0.05] p-5 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.07)]">
            <div className="flex items-center justify-between">
              <Icon className="h-4 w-4 text-primary" strokeWidth={1.8} />
              {index < architectureFlow.length - 1 ? (
                <ArrowRight className="hidden h-4 w-4 text-slate-500 xl:block" strokeWidth={1.8} />
              ) : (
                <span className="rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-white">OK</span>
              )}
            </div>
            <p className="mt-5 text-sm font-semibold text-slate-100">{label}</p>
          </div>
        );
      })}
    </div>
  );
}

function ContentBlock({
  eyebrow,
  title,
  description,
  children,
  iconKey,
}: {
  eyebrow: string;
  title: string;
  description: string;
  children: ReactNode;
  iconKey: string;
}) {
  const Icon = getServiceIcon(iconKey);

  return (
    <Card className="p-6">
      <IconMark icon={Icon} />
      <p className="mt-5 text-xs font-semibold uppercase tracking-[0.16em] text-primary">{eyebrow}</p>
      <h2 className="mt-3 text-2xl font-semibold leading-tight text-slate-950">{title}</h2>
      <p className="mt-4 text-sm leading-7 text-slate-600">{description}</p>
      <div className="mt-6">{children}</div>
    </Card>
  );
}

export default function SeoAeoGeoPage() {
  return (
    <main>
      <JsonLd data={jsonLd} />

      <section className="relative overflow-hidden bg-[#111111] text-white">
        <div className="absolute inset-0 blueprint-grid opacity-90" />
        <div className="absolute left-[14%] top-16 h-72 w-72 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute right-[8%] bottom-0 h-80 w-[30rem] rounded-full bg-sky-400/[0.07] blur-3xl" />
        <Container className="relative grid min-h-[calc(84vh-5rem)] items-center gap-12 py-16 lg:grid-cols-[0.94fr_1.06fr] lg:py-20">
          <div>
            <Badge className="border-white/10 bg-white/[0.06] text-primary">Tehnički SEO + content + autoritet</Badge>
            <h1 className="mt-6 max-w-4xl text-4xl font-semibold leading-tight tracking-normal text-white sm:text-5xl lg:text-6xl">
              SEO, AEO i GEO optimizacija za moderne eCommerce sisteme
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
              Gradimo sajtove koji su tehnički čisti, brzo se učitavaju, jasno komuniciraju strukturu sadržaja i pomažu Google-u i AI pretraživačima da razumeju vaše proizvode, usluge i poslovanje.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-type="seo_aeo_geo"
                data-lead-subject="Upit: SEO/AEO/GEO analiza"
                data-source-section="SEO hero"
              >
                Zatražite SEO analizu
              </Button>
              <Button href={company.phoneHref} size="lg" variant="darkOutline">
                Pozovite: {company.phone}
              </Button>
            </div>
          </div>

          <div className="relative">
            <div className="absolute -inset-8 rounded-[2rem] bg-primary/15 blur-3xl" />
            <div className="relative 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 flex-col justify-between gap-4 border-b border-white/10 pb-5 sm:flex-row sm:items-center">
                  <div>
                    <p className="text-sm font-semibold text-white">Struktura vidljivosti</p>
                    <p className="mt-1 text-xs leading-5 text-slate-400">od sadržaja do poverenja i pretrage</p>
                  </div>
                  <span className="rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
                    bez SEO prečica
                  </span>
                </div>
                <div className="mt-6">
                  <FlowDiagram />
                </div>
                <div className="mt-6 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">
                    Ne radimo samo ubacivanje meta tagova. Pravimo tehničku osnovu, strukturu stranica, sadržajne odgovore, schema podatke i merenje rezultata.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <Section>
        <Container>
          <SectionHeading
            eyebrow="Razlika"
            title="SEO, AEO i GEO - u čemu je razlika?"
            description="Ovo nisu tri odvojena sveta. Dobar tehnički SEO, jasna struktura, kvalitetan sadržaj i autoritet domena su osnova za sva tri."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {disciplines.map((item) => {
              const Icon = getServiceIcon(item.iconKey);

              return (
                <Card key={item.title}>
                  <IconMark icon={Icon} />
                  <h2 className="mt-5 text-2xl font-semibold text-slate-950">{item.title}</h2>
                  <p className="mt-3 text-sm leading-7 text-slate-600">{item.description}</p>
                </Card>
              );
            })}
          </div>
        </Container>
      </Section>

      <Section tone="slate">
        <Container>
          <SectionHeading
            eyebrow="Šta radimo"
            title="Optimizacija koja spaja tehniku, sadržaj i poslovnu logiku"
            description="Cilj je da pretraživači, AI alati i korisnici razumeju šta nudite, kome je namenjeno i zašto je relevantno."
          />
          <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            {workCards.map((card) => {
              const Icon = getServiceIcon(card.iconKey);

              return (
                <Card key={card.title}>
                  <IconMark icon={Icon} />
                  <h2 className="mt-5 text-lg font-semibold leading-7 text-slate-950">{card.title}</h2>
                  <ul className="mt-5 space-y-3">
                    {card.points.map((point) => (
                      <CheckLine key={point}>{point}</CheckLine>
                    ))}
                  </ul>
                </Card>
              );
            })}
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-6 lg:grid-cols-2">
          <ContentBlock
            eyebrow="Audit prikaz"
            title="Pre i posle ozbiljne SEO osnove"
            description="Najveća razlika se vidi kada stranice prestanu da budu nepovezan skup tekstova i postanu jasan sistem sadržaja, linkova i entiteta."
            iconKey="search"
          >
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="rounded-xl border border-slate-200/80 bg-slate-50 p-4">
                <p className="text-sm font-semibold text-slate-950">Pre</p>
                <ul className="mt-4 space-y-3">
                  {auditBefore.map((item) => (
                    <li key={item} className="text-sm leading-6 text-slate-600">{item}</li>
                  ))}
                </ul>
              </div>
              <div className="rounded-xl border border-primary/15 bg-primary-50/70 p-4">
                <p className="text-sm font-semibold text-slate-950">Posle</p>
                <ul className="mt-4 space-y-3">
                  {auditAfter.map((item) => (
                    <li key={item} className="text-sm leading-6 text-slate-700">{item}</li>
                  ))}
                </ul>
              </div>
            </div>
          </ContentBlock>

          <ContentBlock
            eyebrow="Autoritet"
            title="Backlinkovi i autoritet domena"
            description="Backlinkovi su i dalje važan signal poverenja. Nije cilj skupiti što više linkova, već dobiti relevantne i kvalitetne linkove sa sajtova koji imaju smisla za industriju."
            iconKey="link"
          >
            <ul className="grid gap-3 sm:grid-cols-2">
              {["partneri", "dobavljači", "klijenti", "portali", "stručni članci", "lokalni direktorijumi", "medijske objave", "case study objave"].map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
            <div className="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm leading-6 text-amber-900">
              Spam linkovi, masovni direktorijumi i veštačke link šeme mogu dugoročno naštetiti sajtu.
            </div>
          </ContentBlock>
        </Container>
      </Section>

      <Section tone="slate">
        <Container className="grid gap-6 lg:grid-cols-2">
          <ContentBlock
            eyebrow="Structured data"
            title="Schema.org i zašto je bitan"
            description="Schema.org je dodatni sloj podataka koji pomaže pretraživačima da bolje razumeju ko ste, šta nudite, gde se nalazite i kako su povezane stranice na sajtu."
            iconKey="file-code"
          >
            <ul className="space-y-3">
              {[
                "Za eCommerce koristimo Product schema.",
                "Za firmu koristimo Organization i LocalBusiness.",
                "Za usluge koristimo Service.",
                "Za case study i blog koristimo Article ili BlogPosting.",
                "Za navigaciju koristimo BreadcrumbList.",
              ].map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </ContentBlock>

          <ContentBlock
            eyebrow="Internal links"
            title="Struktura linkova i interne veze"
            description="Dobar sajt nije samo lep dizajn. Mora imati logičnu strukturu koja pomaže korisniku, Google-u i AI alatima da razumeju prioritet i kontekst stranica."
            iconKey="git-branch"
          >
            <div className="grid gap-2">
              {linkExamples.map((href) => (
                <Link
                  key={href}
                  href={href}
                  className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700 transition hover:border-primary/30 hover:text-primary"
                >
                  {href}
                </Link>
              ))}
            </div>
          </ContentBlock>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-6 lg:grid-cols-3">
          <ContentBlock
            eyebrow="Online prodaja"
            title="SEO za eCommerce"
            description="Za online prodavnice SEO mora biti povezan sa realnom poslovnom logikom: kategorijama, filterima, proizvodima, dostupnošću i internim linkovima."
            iconKey="shopping-cart"
          >
            <ul className="space-y-3">
              {ecommerceSeo.map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </ContentBlock>

          <ContentBlock
            eyebrow="Lokacije"
            title="SEO za firme sa više prodavnica"
            description="Firme sa više lokacija treba da imaju jasnu lokalnu strukturu, dosledne podatke i stranice koje odgovaraju na lokalne upite."
            iconKey="map-pin"
          >
            <ul className="space-y-3">
              {localSeo.map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </ContentBlock>

          <ContentBlock
            eyebrow="AI search"
            title="GEO - priprema za AI pretragu"
            description="AI alati bolje razumeju sajtove koji jasno objašnjavaju usluge, imaju dokaze rada i dosledno komuniciraju informacije o firmi."
            iconKey="brain"
          >
            <ul className="space-y-3">
              {geoSignals.map((item) => (
                <CheckLine key={item}>{item}</CheckLine>
              ))}
            </ul>
          </ContentBlock>
        </Container>
      </Section>

      <Section tone="dark" className="text-white">
        <Container>
          <div className="grid gap-8 rounded-2xl border border-white/10 bg-white/[0.045] p-6 shadow-[0_24px_70px_rgb(0_0_0_/_0.18)] sm:p-8 lg:grid-cols-[0.7fr_0.3fr] lg:items-center">
            <div>
              <Badge className="border-white/10 bg-white/[0.06] text-primary">SEO analiza</Badge>
              <h2 className="mt-5 max-w-3xl text-3xl font-semibold leading-tight text-white sm:text-4xl">
                Želite sajt koji Google i AI alati mogu jasno da razumeju?
              </h2>
              <p className="mt-4 max-w-2xl text-base leading-7 text-slate-300">
                Pregledaćemo tehničku osnovu, strukturu stranica, schema podatke, interne linkove, sadržaj i merenje rezultata. Bez obećanja prvog mesta, sa fokusom na održivu vidljivost i poslovnu vrednost.
              </p>
            </div>
            <div className="flex flex-col gap-3">
              <Button
                href="/kontakt"
                size="lg"
                data-lead-type="seo_aeo_geo"
                data-lead-subject="Upit: SEO/AEO/GEO optimizacija"
                data-source-section="SEO završni CTA"
              >
                Zatražite SEO analizu
              </Button>
              <Button href={company.phoneHref} size="lg" variant="darkOutline">
                Pozovite: {company.phone}
              </Button>
            </div>
          </div>
        </Container>
      </Section>

      <Section>
        <Container className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr]">
          <SectionHeading
            eyebrow="FAQ"
            title="Najčešća pitanja o SEO, AEO i GEO optimizaciji."
            description="Odgovori su pisani za realne odluke: šta treba tehnički rešiti, kako AI razume sajt i zašto struktura sadržaja utiče na dugoročnu vidljivost."
          />
          <FAQAccordion items={faqs} />
        </Container>
      </Section>
    </main>
  );
}