import React from 'react';
import { useNavigate } from 'react-router-dom';
// Add XCircle to the import list
import { ArrowLeft, FileText, Globe, Mail, Shield, XCircle } from 'lucide-react';
import { Button } from '../components/Button';

export const Terms: 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(-1)} 
          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">
                <FileText className="w-10 h-10 text-purple-300" />
              </div>
              <div>
                <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight uppercase">Általános Szerződési Feltételek</h1>
                <div className="flex flex-wrap items-center gap-4 mt-3">
                  <span className="px-3 py-1 bg-primary/20 border border-primary/30 rounded-full text-xs font-bold uppercase tracking-widest text-purple-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-primary/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-primary/10 text-primary text-sm">1</span>
                  A szolgáltató 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">Szolgáltató 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-primary 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-primary hover:underline">https://motionweb.hu</a>
                      </div>
                    </div>
                    <div className="flex items-start gap-3">
                      <Mail className="w-4 h-4 text-primary 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-primary 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 önálló jogi személy. A szolgáltatásokat Balogh Bence Benedek egyéni vállalkozó nyújtja.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 2 */}
              <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-primary/10 text-primary text-sm">2</span>
                  Az ÁSZF hatálya
                </h3>
                <div className="space-y-4">
                  <p>Jelen Általános Szerződési Feltételek (ÁSZF) a MotionWeb weboldalon keresztül megrendelt valamennyi szolgáltatásra vonatkoznak.</p>
                  <p className="bg-purple-50 p-4 rounded-xl border border-purple-100 text-gray-700">
                    A megrendelő a rendelés leadásával és az előleg megfizetésével jelen ÁSZF rendelkezéseit elfogadja, és a felek között szerződés jön létre.
                  </p>
                </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-primary/10 text-primary text-sm">3</span>
                  A szolgáltatás jellege
                </h3>
                <div className="space-y-4">
                  <p>A MotionWeb fix csomagárakon kínál weboldalkészítési szolgáltatásokat.</p>
                  <p>A szolgáltatás digitális szolgáltatásnak minősül, amely egy bemutató (demó) weboldal elkészítésével kezdődik, majd a megrendelő jóváhagyása esetén a végleges weboldal fejlesztésével folytatódik.</p>
                  <p className="font-bold text-gray-800">A MotionWeb nem nyújt egyedi ajánlattételt.</p>
                </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-primary/10 text-primary text-sm">4</span>
                  Szerződés létrejötte
                </h3>
                <p className="mb-4">A szerződés az alábbi lépések teljesülésével jön létre:</p>
                <ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {['a megrendelő kiválasztja a szolgáltatási csomagot,', 'kitölti a rendelési űrlapot,', 'megfizeti az előleget.'].map((step, i) => (
                    <li key={i} className="bg-gray-50 p-4 rounded-xl border border-gray-100 text-sm font-medium flex items-center gap-3">
                      <span className="w-5 h-5 rounded-full bg-white border border-gray-200 flex items-center justify-center text-[10px] text-gray-400">{i+1}</span>
                      {step}
                    </li>
                  ))}
                </ul>
                <p className="mt-4 text-primary font-semibold">A szerződés létrejöttével a MotionWeb megkezdi a demó weboldal elkészítését.</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-primary/10 text-primary text-sm">5</span>
                  Előleg
                </h3>
                <div className="space-y-4">
                  <p>Az előleg a szolgáltatás megkezdésének feltétele.</p>
                  <p className="font-bold text-red-600 underline decoration-red-200 underline-offset-4">Az előleg nem visszatérítendő, mivel az a demó weboldal elkészítéséhez kapcsolódó munkavégzést és ráfordítást fedezi.</p>
                  <p>Amennyiben a megrendelő a demó weboldalt nem kívánja jóváhagyni, a fennmaradó díjat nem köteles megfizetni, azonban az előleg visszatérítésére ilyen esetben sem jogosult.</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-primary/10 text-primary text-sm">6</span>
                  Demó weboldal és visszajelzés
                </h3>
                <div className="space-y-4">
                  <p>A MotionWeb a demó weboldal elkészültéről a megrendelőt e-mailben értesíti.</p>
                  <p>A megrendelő a demó weboldalt a motionweb.hu oldalon, bejelentkezést követően, a „Rendeléseim” menüpont alatt tekintheti meg és adhat visszajelzést.</p>
                  <p className="font-bold text-gray-800">A demó weboldal visszajelzésére összesen 1 hónap áll rendelkezésre.</p>
                  <p>A MotionWeb a visszajelzés hiánya esetén:</p>
                  <div className="flex flex-wrap gap-2">
                    {['az elkészülést követően,', '1 hét elteltével,', '2 hét elteltével'].map((time, i) => (
                      <span key={i} className="px-3 py-1 bg-gray-100 rounded-full text-xs font-medium text-gray-600">{time}</span>
                    ))}
                  </div>
                  <p>emlékeztető e-mailt küld.</p>
                  <p className="bg-gray-900 text-gray-300 p-6 rounded-2xl text-sm italic">
                    Amennyiben a visszajelzési határidő eredménytelenül telik el, a MotionWeb a projektet kommunikáció hiányában lezártnak tekinti, és a projektfájlokat e-mailben megküldi.
                  </p>
                </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-primary/10 text-primary text-sm">7</span>
                  Módosítási körök
                </h3>
                <div className="space-y-4">
                  <p>A csomagár legfeljebb <span className="font-bold text-gray-900">két (2) módosítási kört</span> tartalmaz.</p>
                  <p>Amennyiben a két módosítási kör után a demó weboldal nem kerül jóváhagyásra, a MotionWeb jogosult a projektet lezárni.</p>
                </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-primary/10 text-primary text-sm">8</span>
                  Jóváhagyás és végfizetés
                </h3>
                <div className="space-y-4">
                  <p>A demó weboldal jóváhagyását követően a megrendelő köteles megfizetni a fennmaradó díjat.</p>
                  <p className="font-semibold text-gray-800">A végfizetés beérkezését követően a MotionWeb megkezdi a weboldal végleges, funkciókkal ellátott verziójának fejlesztését és élesítését.</p>
                  <p>A végfizetés elmaradása esetén a végleges weboldal fejlesztése és élesítése nem történik meg.</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-primary/10 text-primary text-sm">9</span>
                  Határidők
                </h3>
                <div className="space-y-4">
                  <p>A MotionWeb nem vállal konkrét teljesítési határidőt.</p>
                  <p>A weboldalon vagy kommunikáció során feltüntetett időtartamok kizárólag tájékoztató jellegű becslések.</p>
                  <p className="text-sm border-l-4 border-amber-400 pl-4 py-1 text-gray-500">
                    A megrendelő tudomásul veszi, hogy határidő túllépésből eredő igényt nem érvényesíthet.
                  </p>
                </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-primary/10 text-primary text-sm">10</span>
                  Admin felület és utólagos módosítások
                </h3>
                <div className="space-y-4">
                  <p>Az admin felület kizárólag azokat a funkciókat tartalmazza, amelyek a megrendelés során előzetesen egyeztetésre kerültek.</p>
                  <p>A megrendelő kizárólag az admin felületen elérhető funkciók körében jogosult önálló módosításokra.</p>
                  <p>Egyszerű, technikailag nem összetett kérések (például szövegcsere) esetén a megrendelő e-mailben jelezheti igényét, amelynek teljesítésében a MotionWeb eseti alapon segítséget nyújthat.</p>
                  <p className="font-bold text-gray-800 border-t border-gray-100 pt-4">Dizájnmódosítás, új funkció, új aloldal vagy admin bővítés külön megrendelésnek minősül.</p>
                  <p>A külön megrendelések egyedi árazás alapján, előzetes befizetést követően valósulnak meg.</p>
                  <p className="italic">A MotionWeb nem nyújt folyamatos technikai támogatási vagy karbantartási szolgáltatást.</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-primary/10 text-primary text-sm">11</span>
                  Tulajdonjog és referenciahasználat
                </h3>
                <div className="space-y-4">
                  <p>A weboldal forráskódja és tartalma a teljes díj megfizetéséig a MotionWeb tulajdonában marad.</p>
                  <p>A végfizetést követően a megrendelő jogosult a weboldalt használni.</p>
                  <p>A MotionWeb jogosult az elkészült weboldalt referenciaként, anonim módon, a megrendelő nevének feltüntetése nélkül bemutatni.</p>
                </div>
              </section>

              {/* Section 12 */}
              <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-primary/10 text-primary text-sm">12</span>
                  Felelősségkorlátozás
                </h3>
                <div className="space-y-4">
                  <p>A MotionWeb nem vállal felelősséget:</p>
                  <ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {['elmaradt haszonért,', 'közvetett károkért,', 'üzleti veszteségekért.'].map((item, i) => (
                      <li key={i} className="bg-red-50/50 p-4 rounded-xl border border-red-100 text-sm font-semibold text-red-700 flex items-center gap-2">
                        <XCircle className="w-4 h-4" /> {item}
                      </li>
                    ))}
                  </ul>
                  <p className="font-bold text-gray-800">A szolgáltatás nem garantál üzleti eredményt.</p>
                </div>
              </section>

              {/* Section 13 */}
              <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-primary/10 text-primary text-sm">13</span>
                  Elállási jog kizárása
                </h3>
                <div className="space-y-4">
                  <p>A szolgáltatás digitális szolgáltatásnek minősül.</p>
                  <p className="font-bold text-gray-800">A megrendelő a rendelés leadásával és az előleg megfizetésével kifejezetten tudomásul veszi, hogy a teljesítés megkezdésével elállási joga megszűnik.</p>
                </div>
              </section>

              {/* Section 14 */}
              <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-primary/10 text-primary text-sm">14</span>
                  Ügyfélkör
                </h3>
                <p>A MotionWeb szolgáltatásait magánszemélyek és vállalkozások egyaránt igénybe vehetik.</p>
              </section>

              {/* Section 15 */}
              <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-primary/10 text-primary text-sm">15</span>
                  Jogvita és irányadó jog
                </h3>
                <div className="space-y-4">
                  <p>Jelen ÁSZF-re a magyar jog az irányadó.</p>
                  <p>Jogvita esetén a szolgáltató székhelye szerinti bíróság rendelkezik illetékességgel.</p>
                </div>
              </section>

              {/* Section 16 */}
              <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-primary/10 text-primary text-sm">16</span>
                  Záró rendelkezések
                </h3>
                <div className="space-y-4">
                  <p>A MotionWeb fenntartja a jogot jelen ÁSZF módosítására.</p>
                  <p className="text-primary 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">
            <div className="flex items-center justify-center gap-2 text-gray-400 text-sm font-medium mb-4">
              <Shield className="w-4 h-4" />
              <span>Biztonságos Adatkezelés & Jogi Megfelelőség</span>
            </div>
            <p className="text-gray-400 text-xs italic">
              MotionWeb © {new Date().getFullYear()} - Minden jog fenntartva.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};