import Image from 'next/image';
import Link from 'next/link';
import type { Metadata } from 'next';
import appIcon from '@/public/images/ihatepdfs/icon.png';
import mainWindow from '@/public/images/ihatepdfs/main-window.png';

export const metadata: Metadata = {
    title: 'I Hate PDFs',
    description: 'A native macOS PDF reader for highlighting, commenting, reviewing, and saving annotated PDFs locally on your Mac.',
    alternates: {
        canonical: '/ihatepdfs',
    },
    openGraph: {
        title: 'I Hate PDFs',
        description: 'A native macOS PDF reader for highlighting, commenting, reviewing, and saving annotated PDFs locally on your Mac.',
        url: '/ihatepdfs',
        images: [
            {
                url: '/images/ihatepdfs/main-window.png',
                width: 1440,
                height: 1440,
                alt: 'I Hate PDFs macOS app showing a PDF with comments sidebar',
            },
        ],
    },
};

const features = [
    'Open local PDF files without uploading them anywhere.',
    'Highlight text, add comments, underline passages, and place free-text notes.',
    'Review annotations in a compact comments sidebar with replies, filters, and search.',
    'Save annotations back into the original PDF or export an annotated copy.',
    'Customize highlight and comment colors from the macOS Settings window.',
];

export default function IHatePDFsPage() {
    return (
        <div className="page-frame py-20 sm:py-24">
            <div className="mx-auto max-w-[72rem] space-y-12">
                <header className="grid gap-8 border-b border-line pb-12 lg:grid-cols-[minmax(0,1fr)_30rem] lg:items-center">
                    <div className="space-y-6">
                        <div className="flex items-center gap-3">
                            <Image
                                src={appIcon}
                                alt=""
                                width={50}
                                height={50}
                                className="h-12 w-12 rounded-xl border border-line bg-paper-strong"
                                priority
                            />
                            <p className="eyebrow">macOS PDF reader</p>
                        </div>

                        <div className="space-y-4">
                            <h1 className="max-w-[37rem] text-balance font-sans text-5xl font-medium leading-[0.96] text-ink sm:text-6xl lg:text-7xl">
                                I Hate PDFs
                            </h1>
                            <p className="max-w-[36rem] text-[1.04rem] leading-8 text-muted sm:text-[1.1rem]">
                                A native macOS PDF reader built for local annotation, review, and saving without accounts, tracking, or cloud upload.
                            </p>
                        </div>

                        <div className="flex flex-wrap gap-x-6 gap-y-3 text-[0.96rem] text-ink">
                            <Link href="/ihatepdfs/privacy" className="transition-colors hover:text-accent">
                                Privacy policy
                            </Link>
                            <a href="mailto:mathabbayi@icloud.com" className="transition-colors hover:text-accent">
                                Contact
                            </a>
                        </div>
                    </div>

                    <div className="relative overflow-hidden rounded-md border border-line bg-paper-strong">
                        <Image
                            src={mainWindow}
                            alt="I Hate PDFs showing a marked-up PDF with the comments sidebar open"
                            sizes="(max-width: 1024px) 100vw, 30rem"
                            className="h-auto w-full"
                            priority
                        />
                    </div>
                </header>

                <section className="grid gap-4 border-b border-line pb-10 lg:grid-cols-[9rem_minmax(0,1fr)]">
                    <p className="eyebrow lg:pt-1">Features</p>
                    <div className="grid gap-4 sm:grid-cols-2">
                        {features.map((feature) => (
                            <p
                                key={feature}
                                className="rounded-md border border-line bg-paper-strong p-4 text-[0.96rem] leading-7 text-muted"
                            >
                                {feature}
                            </p>
                        ))}
                    </div>
                </section>

                <section className="grid gap-4 lg:grid-cols-[9rem_minmax(0,1fr)]">
                    <p className="eyebrow lg:pt-1">Privacy</p>
                    <div className="max-w-[42rem] space-y-4 text-[1rem] leading-8 text-muted">
                        <p>
                            I Hate PDFs keeps opened PDFs on your Mac. The app does not collect analytics, use advertising, create accounts, or send your documents to a server.
                        </p>
                        <p>
                            See the full{' '}
                            <Link href="/ihatepdfs/privacy" className="font-medium text-ink underline decoration-line-strong underline-offset-4 transition-colors hover:text-accent hover:decoration-accent">
                                privacy policy
                            </Link>
                            .
                        </p>
                    </div>
                </section>
            </div>
        </div>
    );
}