import { Link } from '@inertiajs/react';
import { useState } from 'react';
import { AttendancePanel } from '@/components/marketing/attendance-panel';
import {
    MarketingPackageCard,
    formatPackagePrice,
    type PricingPackage,
} from '@/components/marketing/package-card';
import { useCreditRule } from '@/hooks/use-credit-rule';
import { usePrefersReducedMotion } from '@/hooks/use-reduced-motion';
import MarketingLayout from '@/layouts/marketing-layout';
import { pricing, register } from '@/routes';

type Faq = {
    question: string;
    answer: string;
};

type Props = {
    /** Piani in abbonamento (mensili). */
    packages: PricingPackage[];
    /** Ricariche una tantum. */
    topups?: PricingPackage[];
    /**
     * Le domande frequenti, da `App\Support\LandingFaq`. Arrivano dal server
     * perché lo stesso testo alimenta il JSON-LD `FAQPage`, che Google
     * pretende identico a quello visibile in pagina.
     */
    faqs?: Faq[];
};

/* -------------------------------------------------------------------------
 * Classi condivise
 * ---------------------------------------------------------------------- */

const container = 'mx-auto w-full max-w-[72rem] px-6';
const section = 'py-12 sm:py-16';
const anchor = 'scroll-mt-20';

const focusRing =
    'rounded-marketing-sm outline-marketing-primary focus-visible:outline-2 focus-visible:outline-offset-2';

const primaryButton = `inline-flex items-center justify-center rounded-marketing-sm bg-marketing-primary px-5 py-3 text-[0.9375rem] leading-none font-medium text-marketing-primary-foreground transition-colors hover:bg-marketing-primary-hover ${focusRing}`;

const secondaryButton = `inline-flex items-center justify-center rounded-marketing-sm border border-marketing-ink/25 px-5 py-3 text-[0.9375rem] leading-none font-medium text-marketing-ink transition-colors hover:bg-marketing-ink/5 ${focusRing}`;

const sectionTitle =
    'font-display text-[1.75rem] leading-[1.15] font-bold tracking-[-0.005em] sm:text-[2.25rem]';

const lead =
    'max-w-[38rem] text-[1.125rem] leading-[1.55] text-marketing-ink/80 sm:text-[1.25rem]';

const body = 'text-base leading-[1.6] text-marketing-ink/80';

/* -------------------------------------------------------------------------
 * Contenuti (docs/marketing-copy.md)
 * ---------------------------------------------------------------------- */

const STEPS = [
    {
        title: 'Carica i discenti',
        text: "Importi l'elenco da Excel o CSV e ogni discente riceve subito il suo link personale.",
    },
    {
        title: "Apri l'aula",
        text: 'Il docente avvia la lezione quando vuole, dentro la finestra di apertura prevista.',
    },
    {
        title: 'Scarica i dati',
        text: 'Presenze, orari e report sono pronti da esportare o inviare a Forma.Temp.',
    },
];

const AI_ASSIST = [
    {
        chore: 'Ricopiare i discenti da email, PDF o Excel in un elenco con le colonne giuste',
        duration: '20–40 min',
        coverage:
            "Import intelligente: incolli qualsiasi elenco, l'assistente lo trasforma in righe partecipante pronte da controllare.",
    },
    {
        chore: "Ricavare data di nascita, sesso e comune di nascita per l'anagrafica Forma.Temp",
        duration: '2 min',
        coverage:
            'Codice fiscale → anagrafica: si legge dal codice fiscale e si compila da solo.',
    },
    {
        chore: 'Creare a mano 10–20 lezioni con date e orari',
        duration: '10–15 min',
        coverage:
            'Calendario da una frase: scrivi "5 lezioni di 4 ore, martedì e giovedì dalle 9, dal 1° ottobre" e le lezioni si creano da sole.',
    },
    {
        chore: 'Controllare chi non ha raggiunto le ore, chi si è disconnesso, e scrivere la nota per il registro',
        duration: '10 min',
        coverage:
            "Relazione di lezione: a fine lezione l'assistente calcola le anomalie e scrive la nota pronta per il registro.",
    },
];

const COMPLIANCE = [
    {
        requirement: 'Nome reale per ogni discente',
        coverage: "Il link d'accesso è personale e nominativo, mai condiviso.",
        note: null,
    },
    {
        requirement: 'Orari di login e logout tracciati',
        coverage: 'Ogni connessione si registra da sola, ingresso e uscita.',
        note: 'webhook + polling',
    },
    {
        requirement: 'Audio e video per tutti, non solo per il docente',
        coverage:
            "L'aula è interattiva: microfono e camera si attivano su richiesta dei discenti.",
        note: null,
    },
    {
        requirement: 'Verifica ispettiva senza preavviso',
        coverage: 'Il registro presenze è sempre consultabile ed esportabile.',
        note: 'export CSV',
    },
    {
        requirement: 'Dati comunicati al fondo',
        coverage:
            "Registro e anagrafiche pronti da esportare, e l'URL della lezione pronto per il calendario FTWeb. L'invio automatico è in lavorazione.",
        note: 'export CSV',
    },
];

const FEATURES = [
    {
        title: 'Aule virtuali dedicate',
        text: 'Server privati, audio e video simultanei, chat e condivisione schermo per tutti.',
    },
    {
        title: 'Import discenti veloce',
        text: "Carichi l'elenco da CSV o Excel, i link personali si generano da soli.",
    },
    {
        title: 'Registro presenze automatico',
        text: 'Nome reale e orari di ingresso e uscita per ogni connessione.',
    },
    {
        title: 'Disconnessioni registrate',
        text: 'Ogni interruzione è scritta con il suo orario, e la riconnessione riprende la stessa sessione.',
    },
    {
        title: 'Export dei dati',
        text: 'Scarichi i CSV del registro e delle anagrafiche, nel formato che serve a FTWeb.',
    },
    {
        title: 'Calendario FTWeb pronto',
        text: "L'URL della lezione è pronto da incollare nel calendario.",
    },
];

const AUDIENCES = [
    {
        title: 'Ente di formazione',
        text: 'Gestisci più corsi finanziati con un registro presenze sempre in ordine. Meno tempo sui fogli excel, più tempo sui contenuti.',
    },
    {
        title: 'Agenzia per il lavoro',
        text: 'Organizzi la formazione dei lavoratori in somministrazione senza rincorrere firme su più sedi. Ogni aula tiene già i dati pronti per Forma.Temp.',
    },
    {
        title: 'Docente o tutor',
        text: 'Avvii la lezione da solo, quando è il momento, senza supporto tecnico. Il registro presenze si compila da sé mentre insegni.',
    },
];

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

function FaqItem({
    faq,
    open,
    onToggle,
    reducedMotion,
    index,
}: {
    faq: { question: string; answer: string };
    open: boolean;
    onToggle: () => void;
    reducedMotion: boolean;
    index: number;
}) {
    return (
        <div className="border-marketing-border border-b">
            <h3>
                <button
                    type="button"
                    aria-expanded={open}
                    aria-controls={`faq-answer-${index}`}
                    onClick={onToggle}
                    className={`font-display flex w-full items-center justify-between gap-4 py-5 text-left text-[1.125rem] leading-[1.35] font-semibold ${focusRing}`}
                >
                    <span>{faq.question}</span>
                    <span
                        aria-hidden="true"
                        className="text-marketing-primary relative inline-block size-3.5 shrink-0"
                    >
                        <span className="absolute top-1/2 left-0 h-[1.5px] w-full -translate-y-1/2 bg-current" />
                        <span
                            className={`absolute top-0 left-1/2 h-full w-[1.5px] -translate-x-1/2 bg-current ${
                                reducedMotion
                                    ? ''
                                    : 'transition-transform duration-200 ease-out'
                            } ${open ? 'scale-y-0' : 'scale-y-100'}`}
                        />
                    </span>
                </button>
            </h3>
            <div
                id={`faq-answer-${index}`}
                className={`grid ${
                    reducedMotion
                        ? ''
                        : 'transition-[grid-template-rows] duration-200 ease-out'
                } ${open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}
            >
                <div className="overflow-hidden" inert={!open}>
                    <p className={`max-w-[38rem] pb-5 ${body}`}>{faq.answer}</p>
                </div>
            </div>
        </div>
    );
}

/* -------------------------------------------------------------------------
 * Pagina
 * ---------------------------------------------------------------------- */

export default function Home({ packages, topups, faqs = [] }: Props) {
    const reducedMotion = usePrefersReducedMotion();
    const rule = useCreditRule();
    const [openFaq, setOpenFaq] = useState<number | null>(null);
    const preview = packages.slice(0, 3);
    const cheapestTopup = (topups ?? []).reduce<PricingPackage | null>(
        (cheapest, topup) =>
            cheapest === null || topup.price_cents < cheapest.price_cents
                ? topup
                : cheapest,
        null,
    );
    const topupLine = cheapestTopup
        ? `Se un mese i crediti non bastano, aggiungi una ricarica una tantum: ${cheapestTopup.credits} crediti da ${formatPackagePrice(cheapestTopup.price_cents)}, senza cambiare piano.`
        : 'Se un mese i crediti non bastano, aggiungi una ricarica una tantum, senza cambiare piano.';

    return (
        <MarketingLayout title="Il registro presenze si scrive da solo">
            {/* Hero */}
            <section className={`${container} pt-12 pb-12 sm:pt-16 sm:pb-16`}>
                <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
                    <div>
                        <h1 className="font-display max-w-[16ch] text-[2rem] leading-[1.08] font-bold tracking-[-0.01em] sm:text-[3.25rem]">
                            Fai lezione. Il registro presenze lo tiene
                            EasyForma.
                        </h1>

                        <p className={`mt-6 ${lead}`}>
                            Apri l’aula virtuale, i discenti entrano con un link
                            personale e ogni accesso si registra da solo: dati
                            pronti per Forma.Temp, senza fogli excel o
                            screenshot.
                        </p>

                        <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                            <Link href={register()} className={primaryButton}>
                                Crea il tuo account
                            </Link>
                            <a href="#piani" className={secondaryButton}>
                                Guarda i piani
                            </a>
                        </div>

                        <p className="text-marketing-ink/60 mt-6 text-sm">
                            Il registro nasce dai log di ingresso e uscita del
                            server, non da una spunta del docente.
                        </p>
                    </div>

                    <AttendancePanel />
                </div>
            </section>

            {/* Il problema */}
            <section className={`${container} ${section}`}>
                <h2 className={sectionTitle}>
                    Oggi il registro lo tieni a mano.
                </h2>
                <div className="mt-8 grid gap-8 md:grid-cols-2 md:gap-12">
                    <p className={`max-w-[38rem] ${body}`}>
                        Chi gestisce corsi FAD finanziati passa la giornata tra
                        fogli presenze e screenshot delle videochiamate. Poi
                        ricopia a mano nomi e orari su FTWeb, sperando di non
                        sbagliare una cifra.
                    </p>
                    <p className={`max-w-[38rem] ${body}`}>
                        E se il fondo chiede un controllo a sorpresa, in mano
                        resta solo questo: fogli sparsi e schermate.
                    </p>
                </div>
            </section>

            {/* Come funziona */}
            <section
                id="come-funziona"
                className={`${container} ${section} ${anchor}`}
            >
                <h2 className={sectionTitle}>Come funziona, in tre passi.</h2>
                <ol className="mt-10 grid gap-10 md:grid-cols-3 md:gap-8">
                    {STEPS.map((step, index) => (
                        <li key={step.title}>
                            <span className="marketing-data text-marketing-primary block text-[1.5rem] leading-none">
                                {index + 1}
                            </span>
                            <h3 className="font-display mt-3 text-[1.125rem] leading-[1.35] font-semibold">
                                {step.title}
                            </h3>
                            <p className={`mt-2 max-w-[34rem] ${body}`}>
                                {step.text}
                            </p>
                        </li>
                    ))}
                </ol>
            </section>

            {/* Assistente AI */}
            <section
                id="assistente"
                className={`${container} ${section} ${anchor}`}
            >
                <h2 className={sectionTitle}>
                    L'assistente che fa il lavoro noioso.
                </h2>
                <p className={`mt-5 ${lead}`}>
                    Le parti più lente della gestione aule le fa un assistente
                    che legge i tuoi testi e i dati della lezione già in
                    EasyForma. Ogni proposta resta in anteprima finché non la
                    confermi tu.
                </p>

                <dl className="border-marketing-border mt-10 border-b">
                    {AI_ASSIST.map((item) => (
                        <div
                            key={item.chore}
                            className="border-marketing-border grid gap-2 border-t py-5 md:grid-cols-[minmax(0,1fr)_1.5rem_minmax(0,1.25fr)] md:items-baseline md:gap-6"
                        >
                            <dt className="max-w-[26rem] text-base leading-[1.6] font-medium">
                                {item.chore}
                                <span className="marketing-data text-marketing-secondary ml-2 text-[0.8125rem] whitespace-nowrap">
                                    {item.duration}
                                </span>
                            </dt>
                            <span
                                aria-hidden="true"
                                className="bg-marketing-border hidden h-px w-6 self-center md:block"
                            />
                            <dd className={`max-w-[38rem] ${body}`}>
                                {item.coverage}
                            </dd>
                        </div>
                    ))}
                </dl>

                <p className={`mt-6 max-w-[38rem] ${body}`}>
                    Capita anche di ricevere un errore criptico da Forma.Temp:
                    l'assistente lo spiega in italiano, con l'azione da fare.
                </p>
            </section>

            {/* Conformità */}
            <section
                id="conformita"
                className={`${container} ${section} ${anchor}`}
            >
                <h2 className={sectionTitle}>Conformità alla FAD sincrona.</h2>

                {/*
                  L'ancora della perdita, detta una volta sola: il registro non
                  è burocrazia, è il documento che stabilisce chi l'ente si fa
                  pagare. Senza la fonte sotto sarebbe un allarme, con la fonte
                  è un fatto (docs/marketing/copy-rebrand.md, B4).
                */}
                <p className={`mt-5 ${lead} text-marketing-ink font-medium`}>
                    Un discente sotto il 90% delle ore non è rendicontabile. È
                    il registro a stabilire chi lo è.
                </p>
                <p className="text-marketing-ink/70 mt-2 text-[0.8125rem]">
                    <a
                        href="https://www.formatemp.it/formazione-di-base"
                        target="_blank"
                        rel="noreferrer"
                        className={`underline-offset-4 hover:underline ${focusRing}`}
                    >
                        Frequenza minima per la formazione di tipologia Base,
                        Forma.Temp.
                    </a>
                </p>

                <p className={`mt-5 ${lead}`}>
                    EasyForma è progettato sui requisiti del vademecum FAD
                    sincrona di Forma.Temp.
                </p>

                <dl className="border-marketing-border mt-10 border-b">
                    {COMPLIANCE.map((item) => (
                        <div
                            key={item.requirement}
                            className="border-marketing-border grid gap-2 border-t py-5 md:grid-cols-[minmax(0,1fr)_1.5rem_minmax(0,1.25fr)] md:items-baseline md:gap-6"
                        >
                            <dt className="max-w-[26rem] text-base leading-[1.6] font-medium">
                                {item.requirement}
                            </dt>
                            <span
                                aria-hidden="true"
                                className="bg-marketing-border hidden h-px w-6 self-center md:block"
                            />
                            <dd className={`max-w-[38rem] ${body}`}>
                                {item.coverage}
                                {item.note && (
                                    <span className="marketing-data text-marketing-secondary ml-2 text-[0.8125rem] whitespace-nowrap">
                                        {item.note}
                                    </span>
                                )}
                            </dd>
                        </div>
                    ))}
                </dl>
            </section>

            {/* Funzionalità */}
            <section className={`${container} ${section}`}>
                <h2 className={sectionTitle}>Funzionalità.</h2>
                <dl className="border-marketing-border mt-10 grid border-b md:grid-cols-2 md:gap-x-12">
                    {FEATURES.map((feature) => (
                        <div
                            key={feature.title}
                            className="border-marketing-border border-t py-5"
                        >
                            <dt className="font-display text-[1.125rem] leading-[1.35] font-semibold">
                                {feature.title}
                            </dt>
                            <dd className={`mt-2 max-w-[34rem] ${body}`}>
                                {feature.text}
                            </dd>
                        </div>
                    ))}
                </dl>
            </section>

            {/* Per chi è */}
            <section className={`${container} ${section}`}>
                <h2 className={sectionTitle}>Per chi è.</h2>
                <div className="mt-10 grid gap-10 md:grid-cols-3 md:gap-8">
                    {AUDIENCES.map((audience) => (
                        <div key={audience.title}>
                            <h3 className="font-display text-[1.125rem] leading-[1.35] font-semibold">
                                {audience.title}
                            </h3>
                            <p className={`mt-2 max-w-[34rem] ${body}`}>
                                {audience.text}
                            </p>
                        </div>
                    ))}
                </div>
            </section>

            {/* Piani */}
            <section id="piani" className={`${container} ${section} ${anchor}`}>
                <h2 className={sectionTitle}>Piani.</h2>

                {/*
                  L'ancora, in forma breve: il primo numero che il lettore
                  incontra è il costo del problema, non 59 €
                  (docs/marketing/copy-rebrand.md, B5).
                */}
                <p className={`mt-5 ${lead} text-marketing-ink`}>
                    Un corso costa a un ente circa{' '}
                    <span className="marketing-data">1,4</span> ore di lavoro
                    amministrativo solo per registro, calendario e relazione. I
                    piani si leggono a partire da quella cifra.
                </p>

                <p className={`mt-5 ${lead}`}>
                    Il piano accredita crediti ogni mese e 1 credito vale{' '}
                    {rule.hoursPerCredit} ore d&apos;aula fino a{' '}
                    {rule.participantsBand} discenti: un corso da 8 ore costa 2
                    crediti.
                </p>

                <div className="mx-auto mt-10 grid max-w-[64rem] gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {preview.map((pkg) => (
                        <MarketingPackageCard
                            key={pkg.id}
                            pkg={pkg}
                            featured={pkg.slug === 'pro'}
                            heading="h3"
                            idPrefix="landing"
                            priceFrom={pkg.slug === 'enterprise'}
                        />
                    ))}
                </div>

                <p className={`mx-auto mt-6 max-w-[64rem] ${body}`}>
                    {topupLine}
                </p>

                <div className="mx-auto mt-6 flex max-w-[64rem] flex-wrap items-baseline justify-between gap-3">
                    <p className="text-marketing-ink/60 text-sm">
                        Prezzi IVA esclusa.
                    </p>
                    <Link
                        href={pricing()}
                        className={`text-marketing-primary text-[0.9375rem] font-medium underline underline-offset-4 ${focusRing}`}
                    >
                        Vedi tutti i dettagli
                    </Link>
                </div>
            </section>

            {/* FAQ */}
            <section id="faq" className={`${container} ${section} ${anchor}`}>
                <h2 className={sectionTitle}>Domande frequenti.</h2>
                <div className="border-marketing-border mt-8 max-w-[44rem] border-t">
                    {faqs.map((faq, index) => (
                        <FaqItem
                            key={faq.question}
                            faq={faq}
                            index={index}
                            open={openFaq === index}
                            reducedMotion={reducedMotion}
                            onToggle={() =>
                                setOpenFaq((current) =>
                                    current === index ? null : index,
                                )
                            }
                        />
                    ))}
                </div>
            </section>

            {/* CTA finale */}
            <section className="border-marketing-border bg-marketing-surface border-t">
                <div className={`${container} ${section}`}>
                    <h2 className={sectionTitle}>
                        Pronto a semplificare la prossima FAD sincrona?
                    </h2>
                    <p className={`mt-5 ${lead}`}>
                        Crea il tuo account, attiva un piano e apri la tua prima
                        aula in pochi minuti.
                    </p>
                    <Link href={register()} className={`mt-8 ${primaryButton}`}>
                        Crea il tuo account
                    </Link>
                </div>
            </section>
        </MarketingLayout>
    );
}