import Link from 'next/link';

export default function Integritetspolicy() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="max-w-4xl mx-auto p-8 rounded-2xl border border-[var(--border-color)] bg-[var(--card-bg)] shadow-lg">

        <header className="text-center mb-12 pb-8 border-b border-[var(--border-color)]">
          <h1 className="text-3xl md:text-4xl font-bold mb-4 text-[var(--text-color)] font-['Montserrat']">Integritetspolicy</h1>
          <p className="text-[var(--text-secondary)]">Gäller från: {new Date().toLocaleDateString('sv-SE')}</p>
        </header>

        <div className="space-y-10 text-[var(--text-color)]">

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">1. Personuppgiftsansvarig</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Nordic Storium är personuppgiftsansvarig för behandlingen av dina personuppgifter. Vi värnar om din integritet och strävar efter att alltid skydda dina personuppgifter på bästa möjliga sätt i enlighet med dataskyddsförordningen (GDPR).
            </p>
            <div className="p-6 bg-[var(--background)] rounded-lg border border-[var(--border-color)] mb-4">
              <p className="mb-1 font-semibold text-[var(--text-heading)]">Nordic Storium</p>
              <p className="mb-0 text-[var(--text-secondary)]">Adress: Skarprättarvägen 30, 176 77 Järfälla</p>
              <p className="mt-2"><a href="mailto:info@nordicstorium.se" className="text-blue-600 hover:underline">info@nordicstorium.se</a></p>
            </div>
          </section>

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">2. Vilka personuppgifter samlar vi in?</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Vi samlar in uppgifter som du frivilligt lämnar till oss, exempelvis när du kontaktar oss, lägger en beställning eller besöker vår webbplats.
            </p>
            <ul className="list-disc pl-5 space-y-2 text-[var(--text-secondary)]">
              <li><strong>Kontaktuppgifter:</strong> Namn, e-postadress, telefonnummer, adress.</li>
              <li><strong>Orderinformation:</strong> Information om beställda varor, leveransadress och betalningshistorik.</li>
              <li><strong>Kommunikation:</strong> E-post, chattloggar och anteckningar från kundserviceärenden.</li>
              <li><strong>Teknisk data:</strong> IP-adress, webbläsartyp och information om hur du interagerar med vår webbplats (via cookies).</li>
            </ul>
          </section>

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">3. Varför behandlar vi dina uppgifter?</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Vi behandlar dina uppgifter för följande ändamål och med stöd av följande rättsliga grunder:
            </p>

            <div className="space-y-4">
              <div className="p-4 bg-[var(--background)] rounded-lg border border-[var(--border-color)]">
                <h3 className="font-bold text-[var(--text-heading)] mb-2">Hantering av beställningar</h3>
                <p className="text-sm text-[var(--text-secondary)] mb-1">För att kunna leverera varor, hantera betalningar och ge support.</p>
                <p className="text-xs font-semibold text-blue-600 uppercase">Rättslig grund: Fullgörande av avtal</p>
              </div>

              <div className="p-4 bg-[var(--background)] rounded-lg border border-[var(--border-color)]">
                <h3 className="font-bold text-[var(--text-heading)] mb-2">Kundservice och support</h3>
                <p className="text-sm text-[var(--text-secondary)] mb-1">För att kunna svara på frågor och hantera reklamationer.</p>
                <p className="text-xs font-semibold text-blue-600 uppercase">Rättslig grund: Berättigat intresse & Avtal</p>
              </div>

              <div className="p-4 bg-[var(--background)] rounded-lg border border-[var(--border-color)]">
                <h3 className="font-bold text-[var(--text-heading)] mb-2">Bokföring och lagkrav</h3>
                <p className="text-sm text-[var(--text-secondary)] mb-1">Vi måste spara viss information enligt bokföringslagen.</p>
                <p className="text-xs font-semibold text-blue-600 uppercase">Rättslig grund: Rättslig förpliktelse</p>
              </div>
            </div>
          </section>

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">4. Vilka delar vi dina uppgifter med?</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Vi säljer aldrig dina uppgifter. Vi kan dock komma att dela dem med betrodda partners för att kunna utföra våra tjänster:
            </p>
            <ul className="list-disc pl-5 space-y-2 text-[var(--text-secondary)]">
              <li><strong>Fraktbolag:</strong> För att kunna leverera din beställning (t.ex. Postnord).</li>
              <li><strong>Betaltjänstleverantörer:</strong> För att säkerställa säker betalning (t.ex. via bank eller Swish).</li>
              <li><strong>IT-leverantörer:</strong> För drift, support och underhåll av våra IT-system.</li>
            </ul>
          </section>

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">5. Hur länge sparar vi dina uppgifter?</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Vi sparar dina uppgifter så länge det är nödvändigt för respektive ändamål:
            </p>
            <ul className="list-disc pl-5 space-y-2 text-[var(--text-secondary)]">
              <li><strong>Beställningsinformation:</strong> Sparas i 7 år enligt bokföringslagen.</li>
              <li><strong>Kundserviceärenden:</strong> Sparas så länge ärendet pågår och en tid därefter för uppföljning (normalt 12 månader).</li>
            </ul>
          </section>

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">6. Dina rättigheter</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Enligt GDPR har du flera rättigheter rörande dina personuppgifter:
            </p>
            <ul className="list-disc pl-5 space-y-2 text-[var(--text-secondary)]">
              <li><strong>Rätt till tillgång:</strong> Du har rätt att få ett registerutdrag över vilka uppgifter vi har om dig.</li>
              <li><strong>Rätt till rättelse:</strong> Du kan begära att vi rättar felaktiga uppgifter.</li>
              <li><strong>Rätt till radering:</strong> Du kan begära att bli raderad (&quot;rätten att bli bortglömd&quot;), förutom då lagkrav kräver att vi sparar uppgifterna.</li>
              <li><strong>Rätt till dataportabilitet:</strong> Rätt att få ut dina uppgifter i ett strukturerat format.</li>
            </ul>
            <p className="mt-4 leading-relaxed text-[var(--text-secondary)]">
              Kontakta oss på <a href="mailto:info@nordicstorium.se" className="text-blue-600 hover:underline">info@nordicstorium.se</a> om du vill utöva dina rättigheter.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold mb-4 text-[var(--accent-color)] font-['Montserrat']">7. Cookies</h2>
            <p className="mb-4 leading-relaxed text-[var(--text-secondary)]">
              Vi använder cookies för att webbplatsen ska fungera korrekt och för att ge dig en bättre upplevelse.
              Du kan själv styra användningen av cookies i din webbläsares inställningar.
            </p>
          </section>

        </div>

        <footer className="mt-12 pt-8 border-t border-[var(--border-color)] text-center">
          <Link href="/" className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-300">
            Tillbaka till startsidan
          </Link>
        </footer>

      </div>
    </div >
  );
}