import type { ReactNode } from "react";

export type Lang = "fr" | "en" | "de" | "it";
export type PageName = "home" | "faq" | "credits" | "formats";

export function normalizeLang(value?: string): Lang {
  return value === "en" || value === "de" || value === "it" ? value : "fr";
}

const copy = {
  fr: {
    nav: { home: "Accueil", faq: "F.A.Q.", credits: "Crédits", formats: "Formats compatibles" },
    heroEyebrow: "Version 2.0 · macOS 26 · Apple silicon",
    heroTitle: "Vos vidéos,\nen un coup d’œil.",
    heroBody: "MovieIndex transforme automatiquement vos vidéos en planches contact claires, fidèles et faciles à archiver.",
    buy: "Acheter MovieIndex — 9,90 €", soon: "Lien à venir", see: "Voir les captures",
    oneTime: "Achat unique", native: "Optimisé Apple silicon", languages: "4 langues",
    heroAlt: "Fenêtre de MovieIndex et exemples de planches contact",
    introKicker: "Simple par nature", introTitle: "Déposez. Réglez. Exportez.",
    introBody: "Glissez une vidéo, plusieurs fichiers ou un dossier complet sur MovieIndex. L’application crée une planche contact pour chaque vidéo.",
    steps: [
      ["01", "Déposez vos vidéos", "Un fichier, une sélection ou un dossier entier : MovieIndex s’occupe du reste."],
      ["02", "Choisissez le rendu", "Grandes, moyennes ou petites vignettes, avec ou sans image d’accueil."],
      ["03", "Archivez ou imprimez", "Générez une version écran légère ou un document haute définition prêt à imprimer."],
    ],
    featuresKicker: "Pensé pour vos archives", featuresTitle: "Une planche contact vraiment exploitable.",
    features: [
      ["Tous vos formats", "MOV, MP4, MKV, AVI, MTS, WebM et de nombreux autres formats vidéo, y compris les codecs modernes comme HEVC/H.265."],
      ["Proportions respectées", "Chaque vignette conserve le bon ratio d’image, sans étirement ni déformation."],
      ["Images propres", "MovieIndex évite les effets de peigne pour produire des aperçus nets et lisibles."],
      ["Réglages précis", "Nombre et taille des vignettes, couleur de fond, légendes, fréquence d’extraction et qualité de sortie."],
    ],
    optionsKicker: "À votre façon", optionsTitle: "Choisissez votre planche contact.",
    optionsBody: "Adaptez le nombre et la taille des vignettes à la durée de chaque vidéo, puis sélectionnez une sortie pour écran ou pour impression.",
    optionLabels: ["Grandes vignettes", "Vignettes moyennes", "Petites vignettes", "Vignettes + affiche", "Archive écran", "Impression HD"],
    galleryKicker: "Captures", galleryTitle: "MovieIndex en images.",
    galleryBody: "Les captures actuelles sont conservées pendant la transition vers la version 2.0.",
    screenshotAlts: ["Écran principal de MovieIndex", "Options de génération de planche contact", "Exemple de planche contact générée"],
    finalTitle: "Cataloguez vos vidéos sans perdre de temps.",
    finalBody: "MovieIndex 2.0 pour macOS 26 sur Mac Apple silicon. Disponible prochainement au prix de 9,90 €.",
    footer: "MovieIndex · Créé par Hervé Flores",
    faqTitle: "Questions fréquentes", faqIntro: "L’essentiel pour découvrir et utiliser MovieIndex 2.0.",
    faqs: [
      ["À quoi sert MovieIndex ?", "MovieIndex génère automatiquement une planche contact à partir d’une vidéo. Vous visualisez son contenu sans avoir à la parcourir intégralement."],
      ["Comment créer une planche contact ?", "Glissez-déposez une vidéo, plusieurs vidéos ou un dossier complet sur l’application, choisissez vos options, puis lancez la génération."],
      ["Quels formats sont compatibles ?", "MovieIndex accepte les principaux conteneurs vidéo, notamment MOV, MP4, M4V, MKV, AVI, MTS, M2TS, WebM et VOB. Consultez la page Formats compatibles pour la liste historique complète."],
      ["MovieIndex fonctionne-t-il sur les Mac Apple silicon ?", "Oui. La version 2.0 est destinée à macOS 26 et aux Mac équipés d’une puce Apple silicon."],
      ["Puis-je choisir la présentation ?", "Oui. Vous pouvez régler la taille et le nombre de vignettes, la couleur de fond, les légendes et la qualité de sortie."],
      ["Où télécharger ou acheter la version 2.0 ?", "Le lien sera ajouté prochainement. Le prix annoncé est de 9,90 € pour un achat unique."],
    ],
    creditsTitle: "Crédits", creditsIntro: "MovieIndex est conçu et développé par Hervé Flores.",
    creditsSections: [
      ["Développement", "MovieIndex et son interface macOS sont réalisés par Hervé Flores — MovieConverter-Studio."],
      ["FFmpeg", "L’analyse des médias et l’extraction d’images s’appuient sur FFmpeg, projet libre développé par ses contributeurs."],
      ["Licences", "Les composants tiers restent soumis à leurs licences respectives. Les mentions et sources applicables accompagnent la distribution de MovieIndex."],
    ],
    formatsTitle: "Formats compatibles",
    formatsIntro: "MovieIndex prend en charge les principaux conteneurs vidéo ci-dessous. La lecture effective dépend également des codecs présents dans le fichier.",
    formatsNote: "La version 2.0 ajoute la prise en charge des formats vidéo modernes, notamment HEVC/H.265.",
  },
  en: {
    nav: { home: "Home", faq: "F.A.Q.", credits: "Credits", formats: "Supported formats" },
    heroEyebrow: "Version 2.0 · macOS 26 · Apple silicon", heroTitle: "Your videos,\nat a glance.",
    heroBody: "MovieIndex automatically turns your videos into clear, accurate contact sheets that are easy to browse and archive.",
    buy: "Buy MovieIndex — €9.90", soon: "Link coming soon", see: "View screenshots",
    oneTime: "One-time purchase", native: "Apple silicon optimized", languages: "4 languages",
    heroAlt: "MovieIndex window and contact sheet examples",
    introKicker: "Naturally simple", introTitle: "Drop. Adjust. Export.",
    introBody: "Drop one video, several files or a whole folder onto MovieIndex. The app creates a contact sheet for every video.",
    steps: [
      ["01", "Drop your videos", "One file, a selection or an entire folder: MovieIndex handles the rest."],
      ["02", "Choose the layout", "Large, medium or small thumbnails, with or without a poster frame."],
      ["03", "Archive or print", "Create a lightweight screen version or a high-resolution document ready to print."],
    ],
    featuresKicker: "Made for your archive", featuresTitle: "A contact sheet you can actually use.",
    features: [
      ["All your formats", "MOV, MP4, MKV, AVI, MTS, WebM and many more video formats, including modern codecs such as HEVC/H.265."],
      ["Correct proportions", "Every thumbnail keeps the original aspect ratio, with no stretching or distortion."],
      ["Clean images", "MovieIndex prevents combing artifacts to deliver crisp, readable previews."],
      ["Precise controls", "Thumbnail count and size, background colour, captions, extraction interval and output quality."],
    ],
    optionsKicker: "Make it yours", optionsTitle: "Choose your contact sheet.",
    optionsBody: "Match the number and size of thumbnails to each video, then select an output for screen viewing or printing.",
    optionLabels: ["Large thumbnails", "Medium thumbnails", "Small thumbnails", "Thumbnails + poster", "Screen archive", "HD print"],
    galleryKicker: "Screenshots", galleryTitle: "MovieIndex in action.",
    galleryBody: "The current screenshots are retained during the transition to version 2.0.",
    screenshotAlts: ["MovieIndex main screen", "Contact sheet generation options", "Example of a generated contact sheet"],
    finalTitle: "Catalog your videos without wasting time.",
    finalBody: "MovieIndex 2.0 for macOS 26 on Apple silicon Macs. Coming soon for €9.90.",
    footer: "MovieIndex · Created by Hervé Flores",
    faqTitle: "Frequently asked questions", faqIntro: "Everything you need to get started with MovieIndex 2.0.",
    faqs: [
      ["What is MovieIndex for?", "MovieIndex automatically generates a contact sheet from a video, so you can understand its content without watching it from start to finish."],
      ["How do I create a contact sheet?", "Drop one video, several videos or a complete folder onto the app, choose your options and start generation."],
      ["Which formats are supported?", "MovieIndex accepts the main video containers, including MOV, MP4, M4V, MKV, AVI, MTS, M2TS, WebM and VOB. See Supported formats for the full historical list."],
      ["Does MovieIndex run on Apple silicon Macs?", "Yes. Version 2.0 is designed for macOS 26 and Macs with Apple silicon."],
      ["Can I customize the layout?", "Yes. You can adjust thumbnail size and count, background colour, captions and output quality."],
      ["Where can I download or buy version 2.0?", "The link will be added soon. The announced price is €9.90 as a one-time purchase."],
    ],
    creditsTitle: "Credits", creditsIntro: "MovieIndex is designed and developed by Hervé Flores.",
    creditsSections: [
      ["Development", "MovieIndex and its macOS interface are created by Hervé Flores — MovieConverter-Studio."],
      ["FFmpeg", "Media analysis and frame extraction rely on FFmpeg, the open-source project developed by its contributors."],
      ["Licences", "Third-party components remain subject to their respective licences. Applicable notices and sources accompany the MovieIndex distribution."],
    ],
    formatsTitle: "Supported formats",
    formatsIntro: "MovieIndex supports the main video containers listed below. Actual playback also depends on the codecs used inside each file.",
    formatsNote: "Version 2.0 adds support for modern video formats, including HEVC/H.265.",
  },
  de: {
    nav: { home: "Start", faq: "F.A.Q.", credits: "Impressum", formats: "Unterstützte Formate" },
    heroEyebrow: "Version 2.0 · macOS 26 · Apple silicon", heroTitle: "Ihre Videos,\nauf einen Blick.",
    heroBody: "MovieIndex verwandelt Ihre Videos automatisch in übersichtliche, originalgetreue Kontaktbögen zum Durchsuchen und Archivieren.",
    buy: "MovieIndex kaufen — 9,90 €", soon: "Link folgt in Kürze", see: "Screenshots ansehen",
    oneTime: "Einmalkauf", native: "Für Apple silicon optimiert", languages: "4 Sprachen",
    heroAlt: "MovieIndex-Fenster und Beispiele für Kontaktbögen",
    introKicker: "Einfach von Grund auf", introTitle: "Ablegen. Anpassen. Exportieren.",
    introBody: "Legen Sie ein Video, mehrere Dateien oder einen ganzen Ordner auf MovieIndex ab. Die App erstellt für jedes Video einen Kontaktbogen.",
    steps: [
      ["01", "Videos ablegen", "Eine Datei, eine Auswahl oder ein ganzer Ordner: MovieIndex erledigt den Rest."],
      ["02", "Layout wählen", "Große, mittlere oder kleine Vorschaubilder, mit oder ohne Titelbild."],
      ["03", "Archivieren oder drucken", "Erstellen Sie eine leichte Bildschirmversion oder ein hochauflösendes Dokument zum Drucken."],
    ],
    featuresKicker: "Für Ihr Archiv gemacht", featuresTitle: "Ein Kontaktbogen, den Sie wirklich nutzen können.",
    features: [
      ["Alle Ihre Formate", "MOV, MP4, MKV, AVI, MTS, WebM und viele weitere Videoformate, einschließlich moderner Codecs wie HEVC/H.265."],
      ["Korrekte Proportionen", "Jedes Vorschaubild behält das ursprüngliche Seitenverhältnis – ohne Streckung oder Verzerrung."],
      ["Saubere Bilder", "MovieIndex vermeidet Kammartefakte und erzeugt klare, gut lesbare Vorschauen."],
      ["Präzise Einstellungen", "Anzahl und Größe der Vorschaubilder, Hintergrundfarbe, Beschriftungen, Intervall und Ausgabequalität."],
    ],
    optionsKicker: "Ganz nach Wunsch", optionsTitle: "Wählen Sie Ihren Kontaktbogen.",
    optionsBody: "Passen Sie Anzahl und Größe der Vorschaubilder an jedes Video an und wählen Sie die Ausgabe für Bildschirm oder Druck.",
    optionLabels: ["Große Vorschaubilder", "Mittlere Vorschaubilder", "Kleine Vorschaubilder", "Vorschau + Titelbild", "Bildschirmarchiv", "HD-Druck"],
    galleryKicker: "Screenshots", galleryTitle: "MovieIndex in Bildern.",
    galleryBody: "Die bisherigen Screenshots bleiben während des Übergangs zu Version 2.0 erhalten.",
    screenshotAlts: ["MovieIndex-Hauptfenster", "Optionen zur Kontaktbogenerstellung", "Beispiel eines erzeugten Kontaktbogens"],
    finalTitle: "Katalogisieren Sie Videos ohne Zeitverlust.",
    finalBody: "MovieIndex 2.0 für macOS 26 auf Apple-silicon-Macs. Bald für 9,90 € erhältlich.",
    footer: "MovieIndex · Erstellt von Hervé Flores",
    faqTitle: "Häufig gestellte Fragen", faqIntro: "Alles Wichtige für den Einstieg in MovieIndex 2.0.",
    faqs: [
      ["Wozu dient MovieIndex?", "MovieIndex erstellt automatisch einen Kontaktbogen aus einem Video. So erfassen Sie dessen Inhalt, ohne es vollständig anzusehen."],
      ["Wie erstelle ich einen Kontaktbogen?", "Legen Sie ein Video, mehrere Videos oder einen kompletten Ordner auf der App ab, wählen Sie die Optionen und starten Sie die Erstellung."],
      ["Welche Formate werden unterstützt?", "MovieIndex akzeptiert die wichtigsten Video-Container wie MOV, MP4, M4V, MKV, AVI, MTS, M2TS, WebM und VOB. Die vollständige historische Liste finden Sie unter Unterstützte Formate."],
      ["Läuft MovieIndex auf Apple-silicon-Macs?", "Ja. Version 2.0 ist für macOS 26 und Macs mit Apple silicon ausgelegt."],
      ["Kann ich das Layout anpassen?", "Ja. Größe und Anzahl der Vorschaubilder, Hintergrundfarbe, Beschriftungen und Ausgabequalität sind einstellbar."],
      ["Wo kann ich Version 2.0 herunterladen oder kaufen?", "Der Link wird in Kürze ergänzt. Der angekündigte Preis beträgt einmalig 9,90 €."],
    ],
    creditsTitle: "Impressum & Credits", creditsIntro: "MovieIndex wurde von Hervé Flores entworfen und entwickelt.",
    creditsSections: [
      ["Entwicklung", "MovieIndex und seine macOS-Oberfläche stammen von Hervé Flores — MovieConverter-Studio."],
      ["FFmpeg", "Medienanalyse und Einzelbildextraktion basieren auf FFmpeg, dem von seinen Mitwirkenden entwickelten Open-Source-Projekt."],
      ["Lizenzen", "Komponenten von Drittanbietern unterliegen ihren jeweiligen Lizenzen. Die geltenden Hinweise und Quellen sind der MovieIndex-Distribution beigefügt."],
    ],
    formatsTitle: "Unterstützte Formate",
    formatsIntro: "MovieIndex unterstützt die unten aufgeführten gängigen Video-Container. Die tatsächliche Wiedergabe hängt auch von den im jeweiligen File verwendeten Codecs ab.",
    formatsNote: "Version 2.0 unterstützt zusätzlich moderne Videoformate, darunter HEVC/H.265.",
  },
  it: {
    nav: { home: "Home", faq: "F.A.Q.", credits: "Crediti", formats: "Formati supportati" },
    heroEyebrow: "Versione 2.0 · macOS 26 · Apple silicon", heroTitle: "I tuoi video,\na colpo d’occhio.",
    heroBody: "MovieIndex trasforma automaticamente i tuoi video in provini a contatto chiari, fedeli e facili da consultare e archiviare.",
    buy: "Acquista MovieIndex — 9,90 €", soon: "Link disponibile a breve", see: "Guarda gli screenshot",
    oneTime: "Acquisto una tantum", native: "Ottimizzato per Apple silicon", languages: "4 lingue",
    heroAlt: "Finestra di MovieIndex ed esempi di provini a contatto",
    introKicker: "Semplice per natura", introTitle: "Trascina. Regola. Esporta.",
    introBody: "Trascina un video, più file o un’intera cartella su MovieIndex. L’app crea un provino a contatto per ogni video.",
    steps: [
      ["01", "Trascina i video", "Un file, una selezione o un’intera cartella: MovieIndex si occupa del resto."],
      ["02", "Scegli il layout", "Miniature grandi, medie o piccole, con o senza immagine di copertina."],
      ["03", "Archivia o stampa", "Crea una versione leggera per lo schermo o un documento ad alta risoluzione pronto per la stampa."],
    ],
    featuresKicker: "Pensato per il tuo archivio", featuresTitle: "Un provino a contatto davvero utile.",
    features: [
      ["Tutti i tuoi formati", "MOV, MP4, MKV, AVI, MTS, WebM e molti altri formati video, compresi codec moderni come HEVC/H.265."],
      ["Proporzioni corrette", "Ogni miniatura conserva le proporzioni originali, senza allungamenti o deformazioni."],
      ["Immagini pulite", "MovieIndex evita gli effetti di interlacciamento per offrire anteprime nitide e leggibili."],
      ["Controlli precisi", "Numero e dimensione delle miniature, colore di sfondo, didascalie, intervallo di estrazione e qualità di uscita."],
    ],
    optionsKicker: "Come vuoi tu", optionsTitle: "Scegli il tuo provino a contatto.",
    optionsBody: "Adatta numero e dimensioni delle miniature a ogni video, poi scegli l’uscita per lo schermo o la stampa.",
    optionLabels: ["Miniature grandi", "Miniature medie", "Miniature piccole", "Miniature + copertina", "Archivio schermo", "Stampa HD"],
    galleryKicker: "Screenshot", galleryTitle: "MovieIndex in immagini.",
    galleryBody: "Gli screenshot attuali vengono mantenuti durante il passaggio alla versione 2.0.",
    screenshotAlts: ["Schermata principale di MovieIndex", "Opzioni per creare il provino a contatto", "Esempio di provino a contatto generato"],
    finalTitle: "Cataloga i tuoi video senza perdere tempo.",
    finalBody: "MovieIndex 2.0 per macOS 26 su Mac Apple silicon. Presto disponibile a 9,90 €.",
    footer: "MovieIndex · Creato da Hervé Flores",
    faqTitle: "Domande frequenti", faqIntro: "Tutto ciò che serve per iniziare con MovieIndex 2.0.",
    faqs: [
      ["A cosa serve MovieIndex?", "MovieIndex genera automaticamente un provino a contatto da un video, così puoi capirne il contenuto senza guardarlo dall’inizio alla fine."],
      ["Come si crea un provino a contatto?", "Trascina un video, più video o un’intera cartella sull’app, scegli le opzioni e avvia la generazione."],
      ["Quali formati sono supportati?", "MovieIndex accetta i principali contenitori video, tra cui MOV, MP4, M4V, MKV, AVI, MTS, M2TS, WebM e VOB. Consulta Formati supportati per l’elenco storico completo."],
      ["MovieIndex funziona sui Mac Apple silicon?", "Sì. La versione 2.0 è progettata per macOS 26 e per i Mac con Apple silicon."],
      ["Posso personalizzare il layout?", "Sì. Puoi regolare dimensione e numero delle miniature, colore di sfondo, didascalie e qualità di uscita."],
      ["Dove posso scaricare o acquistare la versione 2.0?", "Il link verrà aggiunto a breve. Il prezzo annunciato è di 9,90 € con acquisto una tantum."],
    ],
    creditsTitle: "Crediti", creditsIntro: "MovieIndex è ideato e sviluppato da Hervé Flores.",
    creditsSections: [
      ["Sviluppo", "MovieIndex e la sua interfaccia macOS sono realizzati da Hervé Flores — MovieConverter-Studio."],
      ["FFmpeg", "L’analisi dei contenuti multimediali e l’estrazione dei fotogrammi si basano su FFmpeg, progetto open source sviluppato dai suoi contributori."],
      ["Licenze", "I componenti di terze parti restano soggetti alle rispettive licenze. Le note e i sorgenti applicabili accompagnano la distribuzione di MovieIndex."],
    ],
    formatsTitle: "Formati supportati",
    formatsIntro: "MovieIndex supporta i principali contenitori video elencati qui sotto. La lettura effettiva dipende anche dai codec presenti in ogni file.",
    formatsNote: "La versione 2.0 aggiunge il supporto ai formati video moderni, incluso HEVC/H.265.",
  },
} as const;

const paths: Record<PageName, string> = { home: "/", faq: "/faq", credits: "/credits", formats: "/formats" };
const languageNames: Record<Lang, string> = { fr: "FR", en: "EN", de: "DE", it: "IT" };

function Brand() {
  return <a className="brand" href="/?l=fr" aria-label="MovieIndex"><img src="/images/movieindex-icon.png" alt="" /><span>MovieIndex</span></a>;
}

function SiteShell({ lang, page, children }: { lang: Lang; page: PageName; children: ReactNode }) {
  const t = copy[lang];
  return (
    <div className="site-shell">
      <div className="ambient ambient-one" /><div className="ambient ambient-two" />
      <header className="site-header">
        <Brand />
        <nav className="main-nav" aria-label="Navigation principale">
          {(Object.keys(paths) as PageName[]).map((name) => <a className={page === name ? "active" : ""} href={`${paths[name]}?l=${lang}`} key={name}>{t.nav[name]}</a>)}
        </nav>
        <div className="languages" aria-label="Langue">
          {(Object.keys(languageNames) as Lang[]).map((code) => <a className={lang === code ? "active" : ""} href={`${paths[page]}?l=${code}`} hrefLang={code} key={code}>{languageNames[code]}</a>)}
        </div>
      </header>
      {children}
      <footer><Brand /><p>© 2026 · {t.footer}</p><a href="https://www.movieconverter-studio.com/">MovieConverter-Studio</a></footer>
    </div>
  );
}

function PurchaseButton({ lang }: { lang: Lang }) {
  const t = copy[lang];
  return <div className="purchase-wrap"><button className="button button-primary" type="button" disabled aria-describedby="purchase-status">{t.buy}</button><span id="purchase-status">{t.soon}</span></div>;
}

function PageHero({ eyebrow, title, intro }: { eyebrow: string; title: string; intro: string }) {
  return <section className="page-hero"><p className="eyebrow">{eyebrow}</p><h1>{title}</h1><p>{intro}</p></section>;
}

export function HomePage({ lang }: { lang: Lang }) {
  const t = copy[lang];
  const optionImages = ["optBig.jpg", "optMed.jpg", "optMin.jpg", "optMix.jpg", "optFile.jpg", "optPrint.jpg"];
  return (
    <SiteShell lang={lang} page="home">
      <main>
        <section className="hero section-pad">
          <div className="hero-copy">
            <p className="eyebrow">{t.heroEyebrow}</p>
            <h1>{t.heroTitle.split("\n").map((line, index) => <span key={line}>{line}{index === 0 && <br />}</span>)}</h1>
            <p className="hero-body">{t.heroBody}</p>
            <div className="hero-actions"><PurchaseButton lang={lang} /><a className="button button-secondary" href="#screenshots">{t.see}</a></div>
            <ul className="trust-list"><li>{t.oneTime}</li><li>{t.native}</li><li>{t.languages}</li></ul>
          </div>
          <div className="hero-visual">
            <div className="window-bar"><i /><i /><i /><span>MovieIndex 2.0</span></div>
            <img src={`/images/screen1_${lang}.jpg`} alt={t.heroAlt} />
            <div className="version-chip"><strong>2.0</strong><span>macOS 26</span></div>
          </div>
        </section>

        <section className="section-pad intro-section">
          <div className="section-heading"><p className="eyebrow">{t.introKicker}</p><h2>{t.introTitle}</h2><p>{t.introBody}</p></div>
          <div className="steps-grid">{t.steps.map(([number, title, body]) => <article className="step-card" key={number}><span>{number}</span><h3>{title}</h3><p>{body}</p></article>)}</div>
        </section>

        <section className="section-pad feature-section">
          <div className="feature-media"><img src={`/images/app_${lang}.jpg`} alt="MovieIndex" /></div>
          <div>
            <div className="section-heading align-left"><p className="eyebrow">{t.featuresKicker}</p><h2>{t.featuresTitle}</h2></div>
            <div className="feature-list">{t.features.map(([title, body], index) => <article key={title}><span>0{index + 1}</span><div><h3>{title}</h3><p>{body}</p></div></article>)}</div>
          </div>
        </section>

        <section className="section-pad options-section">
          <div className="section-heading"><p className="eyebrow">{t.optionsKicker}</p><h2>{t.optionsTitle}</h2><p>{t.optionsBody}</p></div>
          <div className="options-grid">{optionImages.map((image, index) => <article key={image}><div><img src={`/images/${image}`} alt="" /></div><p>{t.optionLabels[index]}</p></article>)}</div>
        </section>

        <section className="section-pad gallery-section" id="screenshots">
          <div className="section-heading align-left"><p className="eyebrow">{t.galleryKicker}</p><h2>{t.galleryTitle}</h2><p>{t.galleryBody}</p></div>
          <div className="gallery-grid">{[1, 2, 3].map((number) => <a href={`/images/screen${number}_${lang}.jpg`} target="_blank" rel="noreferrer" key={number}><img src={`/images/screen${number}_${lang}.jpg`} alt={t.screenshotAlts[number - 1]} /></a>)}</div>
        </section>

        <section className="final-cta section-pad"><div><p className="eyebrow">MovieIndex 2.0</p><h2>{t.finalTitle}</h2><p>{t.finalBody}</p></div><PurchaseButton lang={lang} /></section>
      </main>
    </SiteShell>
  );
}

export function FaqPage({ lang }: { lang: Lang }) {
  const t = copy[lang];
  return <SiteShell lang={lang} page="faq"><main className="inner-page section-pad"><PageHero eyebrow="MovieIndex 2.0" title={t.faqTitle} intro={t.faqIntro} /><div className="faq-list">{t.faqs.map(([question, answer], index) => <details key={question} open={index === 0}><summary><span>{String(index + 1).padStart(2, "0")}</span>{question}</summary><p>{answer}</p></details>)}</div></main></SiteShell>;
}

export function CreditsPage({ lang }: { lang: Lang }) {
  const t = copy[lang];
  return <SiteShell lang={lang} page="credits"><main className="inner-page section-pad"><PageHero eyebrow="MovieIndex 2.0" title={t.creditsTitle} intro={t.creditsIntro} /><div className="credits-grid">{t.creditsSections.map(([title, body], index) => <article key={title}><span>0{index + 1}</span><h2>{title}</h2><p>{body}</p>{index === 1 && <a href="https://ffmpeg.org/" target="_blank" rel="noreferrer">ffmpeg.org ↗</a>}</article>)}</div></main></SiteShell>;
}

const formats = ["3GP", "ASF", "ASX", "AVI", "DAT", "DIVX", "DV", "DVR", "DVR-MS", "EVO", "EYETV", "FLV", "F4V", "GXF", "iMovieProject", "MOV", "M1V", "M2V", "M4V", "MKV", "MOD", "MP4", "MPEG", "MPG", "MPV", "TOD", "TS", "TRP", "M2T", "M2TS", "MTS", "MXF", "ON2", "OGV", "RM", "VRO", "VOB", "WEBM", "WMV"];

export function FormatsPage({ lang }: { lang: Lang }) {
  const t = copy[lang];
  return <SiteShell lang={lang} page="formats"><main className="inner-page section-pad"><PageHero eyebrow="MovieIndex 2.0" title={t.formatsTitle} intro={t.formatsIntro} /><div className="format-note"><span>NEW</span><p>{t.formatsNote}</p></div><div className="format-grid">{formats.map((format) => <div key={format}><span>{format}</span><i aria-label="Compatible">✓</i></div>)}</div></main></SiteShell>;
}
