MotionWebStudio/pages/Privacy.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Shield, Mail, Globe, Database, Cookie, UserCheck, Scale, Lock } from 'lucide-react';
import { Button } from '../components/Button';

export const Privacy: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="pt-24 pb-20 min-h-screen bg-gray-50/50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <Button 
          variant="white" 
          onClick={() => navigate('/')} 
          className="mb-10 shadow-sm border border-gray-200 group"
        >
          <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza
        </Button>

        <div className="bg-white rounded-[32px] shadow-sm border border-gray-100 overflow-hidden">
          {/* Header Section */}
          <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:p-12 text-white">
            <div className="flex flex-col md:flex-row md:items-center gap-6">
              <div className="p-4 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 w-fit">
                <Shield className="w-10 h-10 text-blue-300" />
              </div>
              <div>
                <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight uppercase">Adatkezelési Tájékoztató</h1>
                <div className="flex flex-wrap items-center gap-4 mt-3">
                  <span className="px-3 py-1 bg-secondary/20 border border-secondary/30 rounded-full text-xs font-bold uppercase tracking-widest text-blue-200">
                    MotionWeb
                  </span>
                  <span className="text-gray-400 text-sm">
                    Hatályos: 2025. január 1-től
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Content Sections */}
          <div className="p-8 md:p-16">
            <div className="space-y-16 text-gray-600 leading-relaxed">
              
              {/* Section 1 */}
              <section className="relative">
                <div className="absolute -left-6 top-0 bottom-0 w-1 bg-secondary/10 rounded-full hidden md:block" />
                <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">1</span>
                  Az adatkezelő adatai
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-gray-50 p-6 rounded-2xl border border-gray-100">
                  <div className="space-y-4">
                    <div>
                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Adatkezelő neve</p>
                      <p className="font-semibold text-gray-900">Balogh Bence Benedek egyéni vállalkozó</p>
                    </div>
                    <div>
                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Projekt / márkanév</p>
                      <p className="font-semibold text-gray-900">MotionWeb</p>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3">
                      <Globe className="w-4 h-4 text-secondary mt-1 flex-shrink-0" />
                      <div>
                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Weboldal</p>
                        <a href="https://motionweb.hu" className="font-semibold text-secondary hover:underline">https://motionweb.hu</a>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <Mail className="w-4 h-4 text-secondary mt-1 flex-shrink-0" />
                      <div>
                        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Kapcsolattartási e-mail</p>
                        <a href="mailto:motionstudiohq@gmail.com" className="font-semibold text-secondary hover:underline">motionstudiohq@gmail.com</a>
                      </div>
                    </div>
                  </div>
                  <div className="md:col-span-2 pt-4 border-t border-gray-200">
                    <p className="text-sm italic text-gray-500">
                      A MotionWeb elnevezés projektnév, nem külön jogi személy. Az adatkezelést Balogh Bence Benedek egyéni vállalkozó végzi.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 2 - UPDATED */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">2</span>
                  Az adatkezelés jogalapja
                </h3>
                <div className="space-y-4">
                  <p>Az adatkezelés a GDPR 6. cikk (1) bekezdése alapján történik, az alábbi jogalapokon:</p>
                  <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    {[
                      'szerződés teljesítése, valamint szerződés megkötését megelőző lépések,',
                      'jogi kötelezettség teljesítése (számlázás),',
                      'jogos érdek (a szolgáltatás működtetése és biztonsága),',
                      'érintetti hozzájárulás (marketing célú hírlevélre való feliratkozás és cookie-k alkalmazása).'
                    ].map((item, i) => (
                      <li key={i} className="flex items-center gap-3 text-sm bg-gray-50 p-3 rounded-lg border border-gray-100">
                        <UserCheck className="w-4 h-4 text-secondary flex-shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>
                  <div className="mt-6 space-y-3">
                    <p className="bg-blue-50 p-4 rounded-xl border border-blue-100 text-gray-700">
                      A MotionWeb szolgáltatásai fix csomagárakon érhetők el. A megrendelés leadásával és az előleg megfizetésével a felek között szerződés jön létre.
                    </p>
                    <p className="text-gray-700">
                      A hírlevélre való feliratkozás önkéntes, az erre vonatkozó hozzájárulás bármikor korlátozás és indokolás nélkül, ingyenesen visszavonható.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 3 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">3</span>
                  Kezelt személyes adatok köre
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="bg-gray-50 p-6 rounded-2xl border border-gray-100">
                    <h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
                      <Mail className="w-4 h-4 text-secondary" /> Kapcsolatfelvétel és rendelés
                    </h4>
                    <ul className="space-y-2 text-sm">
                      {['név', 'cégnév (amennyiben megadásra kerül)', 'e-mail cím', 'telefonszám', 'számlázási adatok', 'projektleírás, megjegyzések'].map((item, i) => (
                        <li key={i} className="flex items-center gap-2">
                          <div className="w-1.5 h-1.5 rounded-full bg-secondary" /> {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="bg-gray-50 p-6 rounded-2xl border border-gray-100">
                    <h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
                      <Database className="w-4 h-4 text-secondary" /> Felhasználói fiók esetén
                    </h4>
                    <ul className="space-y-2 text-sm">
                      {['e-mail cím', 'jelszó (titkosított formában)', 'fiók státusz', 'rendelésekhez kapcsolódó adatok', 'technikai aktivitási adatok'].map((item, i) => (
                        <li key={i} className="flex items-center gap-2">
                          <div className="w-1.5 h-1.5 rounded-full bg-secondary" /> {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="md:col-span-2 bg-blue-50/50 p-6 rounded-2xl border border-blue-100">
                    <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
                      <Shield className="w-4 h-4 text-secondary" /> Fizetés
                    </h4>
                    <p className="text-sm">
                      A MotionWeb nem kezel bankkártya-adatokat. A fizetés a <span className="font-bold">Stripe</span> rendszerén keresztül történik, amelyhez az érintett átirányításra kerül.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 4 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">4</span>
                  Adattárolás és adatfeldolgozók
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="space-y-4">
                    <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest">Adattárolás helye</h4>
                    <ul className="text-sm space-y-2">
                      <li><strong>Supabase</strong> – adatbázis és felhasználói adatok (EU)</li>
                      <li><strong>VPS szerver</strong> – weboldalak kiszolgálása (EU)</li>
                    </ul>
                  </div>
                  <div className="space-y-4">
                    <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest">E-mail küldés</h4>
                    <ul className="text-sm space-y-2">
                      <li><strong>Resend</strong> – tranzakciós e-mailek</li>
                      <li><strong>Supabase</strong> – fiókregisztráció és jelszó-visszaállítás</li>
                    </ul>
                  </div>
                  <div className="space-y-4">
                    <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest">Fizetési szolgáltató</h4>
                    <ul className="text-sm space-y-2">
                      <li><strong>Stripe Payments Europe Ltd.</strong></li>
                    </ul>
                  </div>
                </div>
                <p className="mt-8 text-sm italic border-t border-gray-100 pt-4">
                  Az adatfeldolgozók kiválasztása során az adatkezelő kizárólag a GDPR-nak megfelelő szolgáltatókat veszi igénybe.
                </p>
              </section>

              {/* Section 5 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">5</span>
                  Analitikai adatok
                </h3>
                <div className="space-y-4">
                  <p>A MotionWeb kizárólag alapvető statisztikai adatokat gyűjt Supabase segítségével, így különösen:</p>
                  <ul className="flex flex-wrap gap-3">
                    {['weboldal-látogatások száma', 'regisztrált felhasználók száma', 'leadott rendelések száma'].map((item, i) => (
                      <li key={i} className="bg-gray-50 px-4 py-2 rounded-full border border-gray-200 text-sm font-medium">
                        {item}
                      </li>
                    ))}
                  </ul>
                  <p className="text-sm text-gray-500">Az analitikai adatok nem alkalmasak az érintettek azonosítására, és nem szolgálnak marketing vagy profilalkotási célokat.</p>
                </div>
              </section>

              {/* Section 6 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">6</span>
                  Cookie-k (sütik)
                </h3>
                <div className="flex flex-col md:flex-row gap-8 items-start">
                  <div className="bg-gray-50 p-4 rounded-2xl text-secondary">
                    <Cookie className="w-12 h-12" />
                  </div>
                  <div className="space-y-4">
                    <p>A weboldal cookie-kat alkalmaz a megfelelő működés, a felhasználói élmény és a biztonság érdekében.</p>
                    <p>A cookie-k használatához az érintett hozzájárulása szükséges, amelyet a weboldalon megjelenő cookie banner biztosít.</p>
                    <p className="font-semibold text-gray-900">Marketing célú cookie-k alkalmazására nem kerül sor.</p>
                  </div>
                </div>
              </section>

              {/* Section 7 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">7</span>
                  Adatmegőrzés időtartama
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {[
                    { label: 'aktív ügyféladatok', val: 'a szolgáltatás fennállásának ideje alatt' },
                    { label: 'szerződés megszűnését követően', val: '1 évig' },
                    { label: 'számlázási adatok', val: 'jogszabályi kötelezettség szerint' },
                    { label: 'felhasználói fiókadatok', val: 'határozatlan ideig, vagy az érintett törlési kérelméig' }
                  ].map((item, i) => (
                    <div key={i} className="p-4 bg-gray-50 rounded-xl border border-gray-100">
                      <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">{item.label}</p>
                      <p className="font-semibold text-gray-900 text-sm">{item.val}</p>
                    </div>
                  ))}
                </div>
              </section>

              {/* Section 8 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">8</span>
                  Az érintettek jogai
                </h3>
                <div className="space-y-4">
                  <p>Az érintett jogosult:</p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
                    {[
                      'tájékoztatást kérni személyes adatai kezeléséről',
                      'hozzáférést kérni a kezelt adatokhoz',
                      'adatainak helyesbítését kérni',
                      'adatainak törlését kérni',
                      'az adatkezelés korlátozását kérni',
                      'tiltakozni az adatkezelés ellen',
                      'adathordozhatóságot kérni'
                    ].map((item, i) => (
                      <div key={i} className="flex items-center gap-3 text-sm">
                        <div className="w-1.5 h-1.5 rounded-full bg-secondary" />
                        {item}
                      </div>
                    ))}
                  </div>
                  <p className="mt-8 p-6 bg-gray-900 text-white rounded-2xl text-center">
                    A kérelmek benyújthatók az alábbi e-mail címen:<br />
                    <a href="mailto:motionstudiohq@gmail.com" className="text-blue-300 font-bold hover:underline">motionstudiohq@gmail.com</a>
                  </p>
                </div>
              </section>

              {/* Section 9 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">9</span>
                  Jogorvoslati lehetőségek
                </h3>
                <div className="bg-gray-50 p-6 rounded-2xl border border-gray-100 flex items-start gap-4">
                  <div className="p-3 bg-white rounded-xl shadow-sm">
                    <Scale className="w-6 h-6 text-secondary" />
                  </div>
                  <div>
                    <p className="mb-4">Amennyiben az érintett megítélése szerint személyes adatainak kezelése jogsértő, jogosult panaszt tenni:</p>
                    <p className="font-bold text-gray-900">Nemzeti Adatvédelmi és Információszabadság Hatóság (NAIH)</p>
                    <p className="text-sm">Weboldal: <a href="https://www.naih.hu" className="text-secondary hover:underline">https://www.naih.hu</a></p>
                  </div>
                </div>
              </section>

              {/* Section 10 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">10</span>
                  Adatbiztonság
                </h3>
                <div className="flex gap-6 items-center">
                  <div className="hidden md:block p-8 bg-gray-900 rounded-3xl text-white">
                    <Lock className="w-12 h-12 text-secondary" />
                  </div>
                  <p>
                    Az adatkezelő megfelelő technikai és szervezési intézkedéseket alkalmaz a személyes adatok biztonságának megőrzése érdekében, különös tekintettel a jogosulatlan hozzáférés, módosítás vagy törlés megelőzésére.
                  </p>
                </div>
              </section>

              {/* Section 11 */}
              <section>
                <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
                  <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-secondary/10 text-secondary text-sm">11</span>
                  Záró rendelkezések
                </h3>
                <div className="space-y-4">
                  <p>Az adatkezelő fenntartja a jogot jelen adatkezelési tájékoztató módosítására.</p>
                  <p className="text-secondary font-bold">A módosítás a weboldalon történő közzététellel lép hatályba.</p>
                </div>
              </section>

            </div>
          </div>

          {/* Footer Info */}
          <div className="bg-gray-50 p-8 border-t border-gray-100 text-center">
             <p className="text-gray-400 text-xs italic">
              Utolsó frissítés: 2025. január
            </p>
            <p className="text-gray-400 text-xs mt-2">
              MotionWeb © {new Date().getFullYear()} - Minden jog fenntartva.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};