import type { Metadata } from 'next';
import Link from 'next/link';
import { SiteHeader } from '@/src/components/layout/SiteHeader';
import { SiteFooter } from '@/src/components/layout/SiteFooter';
import { Breadcrumb } from '@/src/components/layout/Breadcrumb';

export const metadata: Metadata = {
  title: 'Politika Privatnosti',
  description: 'Politika privatnosti sajta Filamenteka — informacije o prikupljanju i obradi podataka, kolacicima, analitici i pravima korisnika.',
  alternates: {
    canonical: 'https://filamenteka.rs/politika-privatnosti',
  },
};

export default function PolitikaPrivatnostiPage() {
  return (
    <div className="min-h-screen" style={{ background: 'var(--surface-primary)' }}>
      <SiteHeader />
      <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
        <Breadcrumb items={[
          { label: 'Pocetna', href: '/' },
          { label: 'Politika Privatnosti' },
        ]} />

        <article className="mt-6">
          <h1
            className="text-3xl sm:text-4xl font-black tracking-tight"
            style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
          >
            Politika Privatnosti
          </h1>
          <p className="text-sm mt-2 mb-10" style={{ color: 'var(--text-muted)' }}>
            Poslednje azuriranje: Februar 2026
          </p>

          <div className="space-y-8 leading-relaxed" style={{ color: 'var(--text-secondary)' }}>
            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                1. Uvod
              </h2>
              <p>
                Filamenteka (filamenteka.rs) postuje vasu privatnost. Ova politika privatnosti
                objasnjava koje podatke prikupljamo, kako ih koristimo i koja prava imate u vezi
                sa vasim podacima.
              </p>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                2. Podaci koje prikupljamo
              </h2>

              <h3
                className="text-lg font-semibold mt-4 mb-2"
                style={{ color: 'var(--text-primary)' }}
              >
                2.1 Analitika (Matomo)
              </h3>
              <p className="mb-3">
                Koristimo Matomo, platformu za web analitiku otvorenog koda, koja je hostovana na
                nasem sopstvenom serveru. Matomo prikuplja sledece anonimizovane podatke:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-2">
                <li>Anonimizovana IP adresa (poslednja dva okteta su maskirana)</li>
                <li>Tip uredjaja i operativni sistem</li>
                <li>Pregledac i rezolucija ekrana</li>
                <li>Posecene stranice i vreme posete</li>
                <li>Referalna stranica (odakle ste dosli)</li>
              </ul>
              <p className="mt-3">
                Ovi podaci se koriste iskljucivo za razumevanje kako posetioci koriste sajt i za
                poboljsanje korisnickog iskustva. Podaci se ne dele sa trecim stranama.
              </p>

              <h3
                className="text-lg font-semibold mt-6 mb-2"
                style={{ color: 'var(--text-primary)' }}
              >
                2.2 Podaci iz kontakt forme (Zahtev za boju)
              </h3>
              <p>
                Kada podnesete zahtev za novu boju filamenta, prikupljamo sledece podatke koje
                dobrovoljno unosite:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-2 mt-2">
                <li>Vase ime</li>
                <li>Broj telefona</li>
                <li>Zeljena boja filamenta i poruka</li>
              </ul>
              <p className="mt-3">
                Ovi podaci se koriste iskljucivo za obradu vaseg zahteva i kontaktiranje u vezi
                sa dostupnoscu trazene boje. Ne koristimo ih u marketinske svrhe niti ih delimo
                sa trecim stranama.
              </p>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                3. Kolacici
              </h2>
              <p>
                Filamenteka ne koristi kolacice za pracenje korisnika niti za marketinske svrhe.
                Matomo analitika je konfigurisana tako da radi bez kolacica za pracenje. Jedini
                lokalni podaci koji se cuvaju u vasem pregledacu su podesavanja interfejsa (npr.
                tamni rezim), koja se cuvaju u localStorage i nikada se ne salju na server.
              </p>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                4. Korisnicki nalozi
              </h2>
              <p>
                Sajt ne nudi mogucnost registracije niti kreiranja korisnickih naloga za
                posetioce. Ne prikupljamo niti cuvamo lozinke, email adrese ili druge podatke
                za autentifikaciju posetilaca.
              </p>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                5. Odjava od analitike (Matomo Opt-Out)
              </h2>
              <p>
                Ako zelite da budete iskljuceni iz Matomo analitike, mozete aktivirati &quot;Do Not
                Track&quot; opciju u vasem pregledacu. Matomo je konfigurisan da postuje ovo
                podesavanje i nece prikupljati podatke o vasim posetama.
              </p>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                6. GDPR uskladjenost
              </h2>
              <p>
                U skladu sa Opstom uredbom o zastiti podataka (GDPR) i Zakonom o zastiti podataka
                o licnosti Republike Srbije, imate sledeca prava:
              </p>
              <ul className="list-disc list-inside space-y-1 ml-2 mt-2">
                <li>Pravo na pristup vasim podacima</li>
                <li>Pravo na ispravku netacnih podataka</li>
                <li>Pravo na brisanje podataka (&quot;pravo na zaborav&quot;)</li>
                <li>Pravo na ogranicenje obrade</li>
                <li>Pravo na prigovor na obradu podataka</li>
              </ul>
              <p className="mt-3">
                Za ostvarivanje bilo kog od ovih prava, kontaktirajte nas putem telefona
                navedenog na sajtu.
              </p>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                7. Rukovalac podacima
              </h2>
              <p>
                Rukovalac podacima je Filamenteka, privatna prodaja fizickog lica.
              </p>
              <ul className="list-none space-y-1 mt-2">
                <li>Sajt: filamenteka.rs</li>
                <li>Telefon: +381 63 103 1048</li>
              </ul>
            </section>

            <section>
              <h2
                className="text-xl font-bold mb-3"
                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-primary)' }}
              >
                8. Izmene politike privatnosti
              </h2>
              <p>
                Zadrzavamo pravo da azuriramo ovu politiku privatnosti u bilo kom trenutku.
                Sve izmene ce biti objavljene na ovoj stranici sa azuriranim datumom poslednje
                izmene.
              </p>
            </section>
          </div>
        </article>
      </main>
      <SiteFooter />
    </div>
  );
}