import type { ReactNode } from 'react'; 
import Logo from '../../assets/chowman-bg-logo.avif'; 
import { Head, Link } from '@inertiajs/react';
import { ArrowRight } from 'lucide-react';

// TODO: confirm these three before launch.
const CONTACT_EMAIL = 'privacy@chowman.net';
const WEBSITE = 'https://www.chowman.net';
const LAST_UPDATED = 'September 2026';

type Section = { title: string; body: ReactNode[] };

const SECTIONS: Section[] = [
    {
        title: 'Who we are',
        body: [
            <>
                This Durga Puja trivia quiz is run by Chowman. Our website address
                is{' '}
                <a
                    href={WEBSITE}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-bold underline underline-offset-2"
                >
                    {WEBSITE}
                </a>
                .
            </>,
            'This policy explains what personal data the quiz collects, why we collect it, and what you can do about it.',
        ],
    },
    {
        title: 'What personal data we collect and why',
        body: [
            'Name and mobile number: you enter these when you register. We use your mobile number to send a one-time code (OTP) that verifies your entry, and to link your quiz attempt to you.',
            'Quiz answers, score and timing: we record the answers you submit and the time taken so we can work out your score.',
            'SMS/WhatsApp consent: we record whether you agreed to receive your results and festive offers from Chowman on SMS or WhatsApp. If you did not agree, we use your number only for verification.',
            'Basic technical data: like most websites, our servers may log details such as your IP address and browser type to keep the quiz secure and working.',
        ],
    },
    {
        title: 'Cookies and local storage',
        body: [
            'The quiz stores small pieces of information on your device so your session keeps working, for example your name and mobile number while you move between the registration and verification steps.',
            'This information stays in your browser. You can clear it at any time from your browser settings.',
        ],
    },
    {
        title: 'Who we share your data with',
        body: [
            'We do not sell your personal data. We share it only with service providers who help us run the quiz on our behalf, such as those who deliver SMS/WhatsApp messages and host our systems. They may use your data only to provide those services.',
            'We may also disclose data where the law requires it.',
        ],
    },
    {
        title: 'How long we retain your data',
        body: [
            'We keep your data for as long as needed to run the campaign, declare results and deliver any rewards, and to meet our legal and administrative obligations. After that we delete it or remove anything that identifies you.',
        ],
    },
    {
        title: 'What rights you have over your data',
        body: [
            `You can ask us for a copy of the personal data we hold about you, ask us to correct it, or ask us to erase it. You can also withdraw your consent to SMS/WhatsApp messages at any time. Write to us at ${CONTACT_EMAIL}.`,
            'Erasure does not cover data we are required to keep for administrative, legal or security purposes.',
        ],
    },
    {
        title: 'How we protect your data',
        body: [
            'We use reasonable technical and organisational measures to protect your data, including access controls and encrypted connections. No online service can promise perfect security, so please keep your OTP private.',
        ],
    },
    {
        title: 'What we do if there is a data breach',
        body: [
            'If a breach affects your personal data, we will investigate it promptly, take steps to contain it, and notify you and the relevant authorities where the law requires.',
        ],
    },
    {
        title: 'Where your data comes from',
        body: [
            'The quiz collects data directly from you. We do not receive your personal data about this quiz from other third parties.',
        ],
    },
    {
        title: 'Automated decisions and profiling',
        body: [
            'Your score is calculated automatically from your answers and time taken. We do not use your data for profiling or for any other automated decision that has a legal or similarly significant effect on you.',
        ],
    },
    {
        title: 'Contact us',
        body: [
            `Questions about this policy or your data? Email ${CONTACT_EMAIL}.`,
        ],
    },
];

const PrivacyPolicy = () => {
    return (
        <>
            <Head title="Privacy Policy" />

            <main className="min-h-[100dvh] overflow-x-hidden px-5 py-[clamp(12px,3dvh,32px)] sm:px-8 sm:py-8 lg:px-12">
                <div className="mx-auto flex w-full max-w-[760px] flex-col">
                    {/* Logo */}
                    <div className="flex justify-center">
                        <img
                            src={Logo}
                            className="h-10 w-auto sm:h-12"
                            alt="Chowman Logo"
                        />
                    </div>

                    {/* Heading */}
                    <div className="mt-[clamp(20px,4dvh,48px)] text-center">
                        <h1 className="font-amethyst text-3xl leading-[1.1] text-[#FFF8EA] sm:text-[52px]">
                            <span className="tracking-wider">
                                Privacy Policy
                            </span>
                        </h1>
                        <p className="mt-3 font-montserrat text-xs text-[#C5A98B] sm:mt-4 sm:text-[17px]">
                            Last updated {LAST_UPDATED}
                        </p>
                    </div>

                    {/* Policy text */}
                    <article className="mt-8 rounded-[38px] bg-[#F8DDB2] px-6 py-9 sm:mt-10 sm:rounded-[48px] sm:px-11 sm:py-12 lg:rounded-[55px] lg:px-14">
                        {SECTIONS.map((section, index) => (
                            <section
                                key={section.title}
                                className={
                                    index === 0
                                        ? ''
                                        : 'mt-7 border-t border-[#D6C9B4] pt-7 sm:mt-9 sm:pt-9'
                                }
                            >
                                <h2 className="font-amethyst text-xl leading-tight tracking-wide text-[#230505] sm:text-[30px]">
                                    {section.title}
                                </h2>
                                {section.body.map((paragraph, i) => (
                                    <p
                                        key={i}
                                        className="mt-3 font-montserrat text-sm leading-[1.6] text-[#5A4233] sm:mt-4 sm:text-[18px]"
                                    >
                                        {paragraph}
                                    </p>
                                ))}
                            </section>
                        ))}
                    </article>

                    {/* Back home */}
                    <Link
                        href="/"
                        className="mt-8 mb-4 flex h-14 w-full items-center justify-center gap-2 rounded-xl border border-[#F0D28E] bg-gradient-to-b from-[#E7C27A] to-[#CEA052] font-montserrat text-sm font-bold text-[#230505] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FFF8EA] sm:mt-10 sm:h-[72px] sm:text-[22px] lg:h-[84px] lg:text-[27px]"
                    >
                        Back to home
                        <ArrowRight className="h-5 w-5" />
                    </Link>
                </div>
            </main>
        </>
    );
};

export default PrivacyPolicy;