import { Link, usePage } from '@inertiajs/react';
import { useTranslator } from '@/lib/i18n';

/* ─────────────────────────────────────────────────────────────────────────────
 * "The Atelier" — Dark editorial luxury direction (scoped via `.atelier` class
 * declared in app.css). Espresso ground · warm ivory type · brushed-gold accent.
 * Type-led, photography-led, asymmetric magazine rhythm — deliberately diverges
 * from the Planora-style light/rose UI-card hero used previously.
 * ────────────────────────────────────────────────────────────────────────── */

export default function Welcome() {
    const t = useTranslator();
    const { auth } = usePage<any>().props;

    // Couple names, venues and the quote bylines below are illustrative sample
    // content (like stock photography); only translatable prose is keyed.
    const PLANS = [
        {
            name: t('billing.free'),
            price: '$0',
            period: t('pricing.period_forever'),
            desc: t('billing.plan_free_desc'),
            features: [t('pricing.feat_1_wedding'), t('pricing.feat_up_to_50'), t('pricing.feat_2_collab'), t('pricing.feat_checklist'), t('pricing.feat_budget')],
            locked: [t('pricing.feat_photo_sharing'), t('pricing.feat_seat_qr'), t('pricing.feat_invites'), t('pricing.feat_email_templates'), t('pricing.feat_website')],
            highlight: false,
            href: '/register',
        },
        {
            name: t('billing.premium'),
            price: '$99',
            period: t('pricing.period_one_time'),
            desc: t('billing.plan_premium_desc'),
            features: [t('pricing.feat_1_wedding'), t('pricing.feat_unlimited_guests'), t('pricing.feat_unlimited_collab'), t('pricing.feat_10gb'), t('pricing.feat_budget'), t('pricing.feat_photo_sharing'), t('pricing.feat_seat_qr'), t('pricing.feat_invites'), t('pricing.feat_website'), t('pricing.feat_email_templates')],
            locked: [] as string[],
            highlight: true,
            href: '/register?plan=pro',
        },
        {
            name: t('billing.planner'),
            price: '$499',
            period: t('pricing.period_one_time'),
            desc: t('billing.plan_planner_desc'),
            features: [t('pricing.feat_unlimited_weddings'), t('pricing.feat_unlimited_guests'), t('pricing.feat_50gb'), t('pricing.feat_all_premium')],
            locked: [] as string[],
            highlight: false,
            href: '/register?plan=agency',
        },
    ];

    const FEATURED_QUOTE = {
        quote: t('welcome.quote_featured'),
        couple: 'Olivia & Marcus',
        detail: t('welcome.quote_featured_detail'),
    };

    const SECONDARY_QUOTES = [
        { quote: t('welcome.quote_2a'), couple: 'Priya & Arjun', detail: 'Udaipur' },
        { quote: t('welcome.quote_2b'), couple: 'Hannah & James', detail: 'Cotswolds' },
    ];

    return (
        <div className="atelier min-h-screen flex flex-col antialiased font-sans">

            {/* ── Editorial nav ─────────────────────────────────────────── */}
            <header className="absolute top-0 inset-x-0 z-50">
                <div className="max-w-[1320px] mx-auto px-6 sm:px-10 h-20 flex items-center justify-between">
                    <Link href="/" className="flex items-baseline gap-2 text-foreground">
                        <span className="font-serif italic text-[1.7rem] leading-none tracking-tight">
                            WedFlow
                        </span>
                        <span className="text-[10px] tracking-[0.32em] uppercase text-muted-foreground translate-y-[-2px]">
                            {t('welcome.atelier_tag')}
                        </span>
                    </Link>
                    <nav className="hidden md:flex items-center gap-10 text-[11px] tracking-[0.24em] uppercase text-foreground/70">
                        <a href="#manifesto" className="hover:text-foreground transition-colors">{t('welcome.nav_manifesto')}</a>
                        <a href="#chapters" className="hover:text-foreground transition-colors">{t('welcome.nav_chapters')}</a>
                        <a href="#tariff" className="hover:text-foreground transition-colors">{t('welcome.nav_tariff')}</a>
                        <a href="#studio" className="hover:text-foreground transition-colors">{t('welcome.nav_studio')}</a>
                    </nav>
                    <div className="flex items-center gap-5">
                        {auth?.user ? (
                            <Link href="/weddings" className="btn-gold">
                                {t('auth.enter_studio')}
                            </Link>
                        ) : (
                            <>
                                <Link
                                    href="/login"
                                    className="hidden sm:inline-flex text-[11px] tracking-[0.24em] uppercase text-foreground/70 hover:text-foreground transition-colors"
                                >
                                    {t('auth.sign_in')}
                                </Link>
                                <Link href="/register" className="btn-gold">
                                    {t('welcome.begin')}
                                </Link>
                            </>
                        )}
                    </div>
                </div>
            </header>

            {/* ── Hero — full-bleed cinematic photo, type-led ───────────── */}
            <section className="relative min-h-[100svh] flex items-center overflow-hidden atelier-grain">
                <img
                    src="/images/home/hero-bg.jpg"
                    alt=""
                    className="absolute inset-0 w-full h-full object-cover object-center animate-ken"
                />
                {/* Deep cinematic gradient — bottom + top, opens center for type */}
                <div className="absolute inset-0 bg-gradient-to-b from-background via-background/30 to-background" />
                <div className="absolute inset-0 bg-background/55" />

                {/* Hairline frame */}
                <div className="absolute inset-x-6 sm:inset-x-10 top-20 bottom-10 border border-foreground/[0.10] pointer-events-none" />

                <div className="relative max-w-[1100px] mx-auto px-6 sm:px-10 pt-32 pb-24 text-center w-full animate-fade-up">
                    <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-5 flex items-center justify-center gap-3">
                        <span className="atelier-rule" />
                        {t('welcome.hero_vol')}
                        <span className="atelier-rule" />
                    </p>

                    <h1 className="font-serif text-[2.8rem] sm:text-[4.4rem] lg:text-[5.6rem] leading-[1.02] tracking-[-0.025em] mb-8 text-foreground">
                        {t('welcome.hero_title_1')}<br />
                        <em className="italic text-primary">{t('welcome.hero_title_em')}</em>
                    </h1>

                    <p className="text-[1.0625rem] sm:text-[1.125rem] text-foreground/70 mb-10 leading-[1.7] max-w-[34rem] mx-auto">
                        {t('welcome.hero_subtitle')}
                    </p>

                    <div className="flex flex-col sm:flex-row gap-3 items-center justify-center">
                        <Link href={auth?.user ? '/weddings' : '/register'} className="btn-gold">
                            {t('welcome.begin_planning')}
                        </Link>
                        <a href="#chapters" className="btn-ghost">
                            {t('welcome.view_work')}
                        </a>
                    </div>
                </div>

                {/* Bottom-anchored meta strip */}
                <div className="absolute bottom-6 inset-x-6 sm:inset-x-10 flex items-end justify-between text-[10px] tracking-[0.28em] uppercase text-foreground/45 pointer-events-none">
                    <span>{t('welcome.est')} {new Date().getFullYear()}</span>
                    <span className="hidden sm:inline">{t('wsite.scroll')}</span>
                    <span>№ 001 / WED</span>
                </div>
            </section>

            {/* ── Curators strip — venues, not press logos ──────────────── */}
            <section className="border-y border-border bg-muted/40 py-7">
                <div className="max-w-6xl mx-auto px-6 sm:px-10 flex items-center justify-between flex-wrap gap-x-10 gap-y-3 text-[10.5px] tracking-[0.28em] uppercase text-foreground/45">
                    <span className="text-primary/80">{t('welcome.as_composed')}</span>
                    <span>Villa Balbiano</span>
                    <span className="hidden sm:inline">Hôtel du Cap</span>
                    <span>Soho Farmhouse</span>
                    <span className="hidden md:inline">Borgo Egnazia</span>
                    <span>The Cotswolds</span>
                </div>
            </section>

            {/* ── Manifesto — quiet single column, asymmetric ───────────── */}
            <section id="manifesto" className="py-28 sm:py-40 px-6 sm:px-10 relative">
                <div className="max-w-[1320px] mx-auto grid grid-cols-[auto_1fr] gap-10 sm:gap-16">
                    <div className="flex flex-col items-center pt-2">
                        <span className="v-label">{t('welcome.chapter_01_why')}</span>
                    </div>
                    <div className="max-w-3xl">
                        <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-7 flex items-center gap-3">
                            <span className="atelier-rule" />
                            {t('welcome.manifesto')}
                        </p>
                        <h2 className="font-serif text-[2.2rem] sm:text-[3.2rem] lg:text-[4rem] leading-[1.08] tracking-[-0.025em] text-foreground">
                            {t('welcome.manifesto_h_1')}<br />
                            {t('welcome.manifesto_h_2')}{' '}
                            <span className="text-foreground/30">{t('welcome.manifesto_h_m1')}</span>{' '}
                            <span className="text-foreground/30">{t('welcome.manifesto_h_m2')}</span>{' '}
                            <span className="text-foreground/30">{t('welcome.manifesto_h_m3')}</span>
                        </h2>
                        <p className="mt-10 text-[1.0625rem] text-foreground/65 leading-[1.8] max-w-xl">
                            {t('welcome.manifesto_body')}
                        </p>
                    </div>
                </div>
            </section>

            {/* ── Four pillars — numbered, no icons, magazine grid ──────── */}
            <section className="border-t border-border py-24 sm:py-32 px-6 sm:px-10 bg-muted/30">
                <div className="max-w-[1320px] mx-auto">
                    <div className="grid lg:grid-cols-[1fr_2fr] gap-10 lg:gap-20 mb-16 lg:mb-24">
                        <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary flex items-start gap-3 pt-2">
                            <span className="atelier-rule mt-2" />
                            {t('welcome.practice')}
                        </p>
                        <h2 className="font-serif text-[2rem] sm:text-[2.8rem] lg:text-[3.4rem] leading-[1.1] tracking-[-0.025em]">
                            {t('welcome.practice_h_1')} <em className="italic text-primary">{t('welcome.practice_h_em')}</em>.
                        </h2>
                    </div>

                    <div className="grid sm:grid-cols-2 gap-x-12 lg:gap-x-20 gap-y-14 lg:gap-y-16">
                        {[
                            { num: '01', label: t('welcome.pillar_1_label'), title: t('welcome.pillar_1_title'), desc: t('welcome.pillar_1_desc') },
                            { num: '02', label: t('welcome.pillar_2_label'), title: t('welcome.pillar_2_title'), desc: t('welcome.pillar_2_desc') },
                            { num: '03', label: t('welcome.pillar_3_label'), title: t('welcome.pillar_3_title'), desc: t('welcome.pillar_3_desc') },
                            { num: '04', label: t('welcome.pillar_4_label'), title: t('welcome.pillar_4_title'), desc: t('welcome.pillar_4_desc') },
                        ].map(({ num, label, title, desc }) => (
                            <div key={title} className="border-t border-border pt-7">
                                <div className="flex items-baseline justify-between mb-5">
                                    <span className="font-serif italic text-primary text-[1.3rem] leading-none">{num}</span>
                                    <span className="text-[10px] tracking-[0.3em] uppercase text-muted-foreground">{label}</span>
                                </div>
                                <h3 className="font-serif text-[1.9rem] sm:text-[2.1rem] tracking-[-0.022em] leading-[1.12] mb-3">
                                    {title}
                                </h3>
                                <p className="text-[14.5px] text-foreground/60 leading-[1.7]">{desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── Chapters — three signature spreads ────────────────────── */}
            <section id="chapters" className="py-24 sm:py-32 lg:py-40 px-6 sm:px-10">
                <div className="max-w-[1320px] mx-auto">
                    <div className="grid lg:grid-cols-[1fr_2fr] gap-10 lg:gap-20 mb-20 sm:mb-28">
                        <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary flex items-start gap-3 pt-2">
                            <span className="atelier-rule mt-2" />
                            {t('welcome.chapters_eyebrow')}
                        </p>
                        <h2 className="font-serif text-[2rem] sm:text-[2.8rem] lg:text-[3.4rem] leading-[1.1] tracking-[-0.025em]">
                            {t('welcome.chapters_h_1')} <em className="italic text-primary">{t('welcome.chapters_h_em')}</em>.
                        </h2>
                    </div>

                    <div className="space-y-32 sm:space-y-40 lg:space-y-52">
                        {([
                            {
                                num: '02',
                                chapter: t('welcome.chapter_seating_label'),
                                title: t('welcome.chapter_seating_title'),
                                description: t('welcome.chapter_seating_desc'),
                                Mockup: SeatingChartPreview,
                            },
                            {
                                num: '03',
                                chapter: t('welcome.chapter_arrival_label'),
                                title: t('welcome.chapter_arrival_title'),
                                description: t('welcome.chapter_arrival_desc'),
                                Mockup: QrScanPreview,
                            },
                            {
                                num: '04',
                                chapter: t('welcome.chapter_memory_label'),
                                title: t('welcome.chapter_memory_title'),
                                description: t('welcome.chapter_memory_desc'),
                                Mockup: GuestGalleryPreview,
                            },
                        ]).map(({ num, chapter, title, description, Mockup }, i) => (
                            <article
                                key={title}
                                className={`grid lg:grid-cols-2 gap-12 lg:gap-20 items-center ${i % 2 === 1 ? 'lg:[direction:rtl]' : ''}`}
                            >
                                <div className={i % 2 === 1 ? '[direction:ltr]' : ''}>
                                    <div className="flex items-baseline gap-5 mb-7">
                                        <span className="font-serif italic text-primary text-[1.3rem] leading-none">{num}</span>
                                        <span className="text-[10.5px] tracking-[0.3em] uppercase text-muted-foreground">{chapter}</span>
                                        <span className="flex-1 h-px bg-border" />
                                    </div>
                                    <h3 className="font-serif text-[2.1rem] sm:text-[2.8rem] lg:text-[3.4rem] tracking-[-0.025em] leading-[1.05] mb-6">
                                        {title}
                                    </h3>
                                    <p className="text-[1.0625rem] text-foreground/65 leading-[1.75] mb-9 max-w-lg">
                                        {description}
                                    </p>
                                    <Link
                                        href="/register"
                                        className="inline-flex items-center text-[11px] font-medium text-primary tracking-[0.28em] uppercase border-b border-primary/40 hover:border-primary transition-colors pb-1"
                                    >
                                        {t('welcome.read_chapter')}
                                    </Link>
                                </div>
                                <div className={`relative h-80 sm:h-[440px] lg:h-[520px] ${i % 2 === 1 ? '[direction:ltr]' : ''}`}>
                                    <Mockup />
                                </div>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── Oversized featured testimonial (replaces 3-card row) ──── */}
            <section className="border-y border-border bg-muted/30 py-28 sm:py-40 px-6 sm:px-10">
                <div className="max-w-[1100px] mx-auto">
                    <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-10 flex items-center gap-3 justify-center">
                        <span className="atelier-rule" />
                        {t('welcome.guestbook')}
                        <span className="atelier-rule" />
                    </p>

                    <blockquote className="font-serif italic text-[2rem] sm:text-[2.8rem] lg:text-[3.4rem] leading-[1.18] tracking-[-0.018em] text-center text-foreground/90">
                        <span className="text-primary font-serif not-italic text-[3rem] leading-none align-top mr-2">“</span>
                        {FEATURED_QUOTE.quote}
                        <span className="text-primary font-serif not-italic text-[3rem] leading-none align-bottom ml-1">”</span>
                    </blockquote>
                    <div className="mt-12 flex flex-col items-center gap-2">
                        <span className="atelier-rule" />
                        <p className="font-serif italic text-[1.1rem] text-foreground mt-2">{FEATURED_QUOTE.couple}</p>
                        <p className="text-[10.5px] tracking-[0.28em] uppercase text-muted-foreground">{FEATURED_QUOTE.detail}</p>
                    </div>

                    {/* Two whisper-quotes underneath */}
                    <div className="mt-20 grid sm:grid-cols-2 gap-10 sm:gap-16">
                        {SECONDARY_QUOTES.map((q) => (
                            <div key={q.couple} className="border-t border-border pt-7">
                                <p className="font-serif italic text-[1.1rem] text-foreground/75 leading-[1.6] mb-5">
                                    &ldquo;{q.quote}&rdquo;
                                </p>
                                <p className="text-[10.5px] tracking-[0.28em] uppercase text-muted-foreground">
                                    {q.couple} · {q.detail}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── More chapters — sparse 4-column ──────────────────────── */}
            <section className="py-24 sm:py-32 px-6 sm:px-10 border-b border-border">
                <div className="max-w-[1320px] mx-auto">
                    <div className="flex items-baseline justify-between mb-14 flex-wrap gap-3 border-b border-border pb-7">
                        <div>
                            <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-3 flex items-center gap-3">
                                <span className="atelier-rule" />
                                {t('welcome.inside_atelier')}
                            </p>
                            <h3 className="font-serif text-[1.9rem] sm:text-[2.3rem] tracking-[-0.022em]">
                                {t('welcome.everything_else')}
                            </h3>
                        </div>
                        <Link
                            href="/register"
                            className="text-[11px] tracking-[0.28em] uppercase text-primary border-b border-primary/40 hover:border-primary transition-colors pb-1"
                        >
                            {t('welcome.see_all')}
                        </Link>
                    </div>
                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-12">
                        {[
                            { Icon: VendorIcon,    title: t('welcome.else_vendor_title'),    desc: t('welcome.else_vendor_desc') },
                            { Icon: ChecklistIcon, title: t('welcome.else_checklist_title'), desc: t('welcome.else_checklist_desc') },
                            { Icon: ClockIcon,     title: t('welcome.else_timeline_title'),  desc: t('welcome.else_timeline_desc') },
                            { Icon: PaletteIcon,   title: t('welcome.else_inspo_title'),     desc: t('welcome.else_inspo_desc') },
                        ].map(({ Icon, title, desc }) => (
                            <div key={title} className="border-t border-border pt-6">
                                <Icon className="h-[18px] w-[18px] text-primary mb-5" />
                                <h4 className="font-serif text-[1.3rem] tracking-tight leading-tight mb-2">{title}</h4>
                                <p className="text-[13.5px] text-foreground/55 leading-[1.65]">{desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── How it works — 3 numbered movements ──────────────────── */}
            <section id="how" className="py-28 sm:py-36 px-6 sm:px-10">
                <div className="max-w-[1320px] mx-auto">
                    <div className="grid lg:grid-cols-[1fr_2fr] gap-10 lg:gap-20 mb-16 lg:mb-24">
                        <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary flex items-start gap-3 pt-2">
                            <span className="atelier-rule mt-2" />
                            {t('welcome.movement_eyebrow')}
                        </p>
                        <h2 className="font-serif text-[2rem] sm:text-[2.8rem] lg:text-[3.4rem] leading-[1.1] tracking-[-0.025em]">
                            {t('welcome.movement_h_1')} <em className="italic text-primary">{t('welcome.movement_h_em1')}</em>{' '}
                            <span className="text-foreground/30">{t('welcome.movement_h_to')}</span>{' '}
                            <em className="italic text-primary">{t('welcome.movement_h_em2')}</em>.
                        </h2>
                    </div>
                    <div className="grid md:grid-cols-3 gap-px bg-border">
                        {[
                            { num: 'I.',   title: t('welcome.step_1_title'), desc: t('welcome.step_1_desc') },
                            { num: 'II.',  title: t('welcome.step_2_title'), desc: t('welcome.step_2_desc') },
                            { num: 'III.', title: t('welcome.step_3_title'), desc: t('welcome.step_3_desc') },
                        ].map((s) => (
                            <div key={s.num} className="bg-background p-10 sm:p-12">
                                <p className="font-serif italic text-primary text-[1.6rem] mb-6 tracking-tight">{s.num}</p>
                                <h3 className="font-serif text-[1.7rem] sm:text-[1.9rem] tracking-tight leading-[1.15] mb-4">
                                    {s.title}
                                </h3>
                                <p className="text-[14.5px] text-foreground/60 leading-[1.7]">{s.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── Tariff — pricing in editorial frame ──────────────────── */}
            <section id="tariff" className="border-y border-border bg-muted/30 py-28 sm:py-36 px-6 sm:px-10">
                <div className="max-w-[1320px] mx-auto">
                    <div className="text-center mb-16 sm:mb-20">
                        <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-5 flex items-center gap-3 justify-center">
                            <span className="atelier-rule" />
                            {t('welcome.tariff_eyebrow')}
                            <span className="atelier-rule" />
                        </p>
                        <h2 className="font-serif text-[2.2rem] sm:text-[3rem] lg:text-[3.6rem] tracking-[-0.025em] leading-[1.06] mb-5">
                            {t('pricing.heading_1')} <em className="italic text-primary">{t('pricing.heading_em')}</em>.
                        </h2>
                        <p className="text-[14.5px] text-foreground/55 max-w-md mx-auto">
                            {t('welcome.tariff_subtitle')}
                        </p>
                    </div>

                    <div className="grid gap-px bg-border sm:grid-cols-3 max-w-5xl mx-auto">
                        {PLANS.map((plan) => (
                            <div
                                key={plan.name}
                                className={`relative bg-background p-9 sm:p-10 flex flex-col gap-6 transition-colors ${
                                    plan.highlight ? 'bg-card' : ''
                                }`}
                            >
                                {plan.highlight && (
                                    <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-3 py-1 bg-primary text-primary-foreground text-[9.5px] font-semibold uppercase tracking-[0.24em]">
                                        {t('welcome.selected')}
                                    </div>
                                )}
                                <div>
                                    <p className="text-[10.5px] tracking-[0.3em] uppercase text-primary mb-3">{plan.name}</p>
                                    <div className="flex items-baseline gap-2 mb-2">
                                        <span className="font-serif text-[2.8rem] leading-none tracking-tight">{plan.price}</span>
                                        <span className="text-[12px] text-muted-foreground tracking-wide">{plan.period}</span>
                                    </div>
                                    <p className="text-[13.5px] text-foreground/55 leading-relaxed">{plan.desc}</p>
                                </div>
                                <div className="h-px bg-border" />
                                <ul className="space-y-2.5 flex-1">
                                    {plan.features.map((f) => (
                                        <li key={f} className="flex items-start gap-2.5 text-[13.5px] text-foreground/80">
                                            <CheckIcon className="h-3.5 w-3.5 text-primary shrink-0 mt-1" />
                                            {f}
                                        </li>
                                    ))}
                                    {plan.locked.map((f) => (
                                        <li key={f} className="flex items-start gap-2.5 text-[13.5px] text-foreground/35">
                                            <LockIcon className="h-3.5 w-3.5 shrink-0 mt-1" />
                                            {f}
                                        </li>
                                    ))}
                                </ul>
                                <Link
                                    href={plan.href}
                                    className={plan.highlight ? 'btn-gold' : 'btn-ghost'}
                                >
                                    {t('welcome.begin')}
                                </Link>
                            </div>
                        ))}
                    </div>

                    <p className="text-center text-[11px] tracking-[0.24em] uppercase text-muted-foreground mt-10">
                        {t('welcome.tariff_note')}
                    </p>
                </div>
            </section>

            {/* ── Studio — for planners ────────────────────────────────── */}
            <section id="studio" className="py-28 sm:py-36 px-6 sm:px-10">
                <div className="max-w-[1320px] mx-auto grid lg:grid-cols-[1.1fr_1fr] gap-12 lg:gap-20 items-center">
                    <div>
                        <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-6 flex items-center gap-3">
                            <span className="atelier-rule" />
                            {t('welcome.for_studio')}
                        </p>
                        <h2 className="font-serif text-[2.2rem] sm:text-[3rem] lg:text-[3.4rem] tracking-[-0.025em] leading-[1.06] mb-6">
                            {t('welcome.studio_h_1')} <em className="italic text-primary">{t('welcome.studio_h_em')}</em>.
                        </h2>
                        <p className="text-[1.0625rem] text-foreground/65 leading-[1.75] mb-10 max-w-lg">
                            {t('welcome.studio_body')}
                        </p>
                        <div className="grid sm:grid-cols-2 gap-x-10 gap-y-7 mb-10">
                            {[
                                { title: t('welcome.studio_f1_title'), desc: t('welcome.studio_f1_desc') },
                                { title: t('welcome.studio_f2_title'), desc: t('welcome.studio_f2_desc') },
                                { title: t('welcome.studio_f3_title'), desc: t('welcome.studio_f3_desc') },
                                { title: t('welcome.studio_f4_title'), desc: t('welcome.studio_f4_desc') },
                            ].map(({ title, desc }) => (
                                <div key={title} className="border-t border-border pt-5">
                                    <p className="font-serif text-[1.2rem] tracking-tight mb-1.5">{title}</p>
                                    <p className="text-[13px] text-foreground/55 leading-relaxed">{desc}</p>
                                </div>
                            ))}
                        </div>
                        <div className="flex flex-col sm:flex-row gap-3">
                            <Link href="/register?plan=agency" className="btn-gold">{t('welcome.open_studio')}</Link>
                            <a href="#tariff" className="btn-ghost">{t('welcome.see_studio_tariff')}</a>
                        </div>
                    </div>

                    <div className="vellum p-8 sm:p-10">
                        <p className="text-[10.5px] tracking-[0.3em] uppercase text-primary mb-7 flex items-center gap-3">
                            <span className="atelier-rule" />
                            {t('welcome.on_studio_plan')}
                        </p>
                        <div className="space-y-4">
                            {[
                                t('welcome.studio_item_1'),
                                t('welcome.studio_item_2'),
                                t('welcome.studio_item_3'),
                                t('welcome.studio_item_4'),
                                t('welcome.studio_item_5'),
                                t('welcome.studio_item_6'),
                            ].map((item) => (
                                <div key={item} className="flex items-center gap-3 text-[14px] text-foreground/85 border-b border-border pb-4 last:border-0">
                                    <span className="w-1 h-1 rounded-full bg-primary shrink-0" />
                                    {item}
                                </div>
                            ))}
                        </div>
                        <div className="mt-7 pt-5 border-t border-border flex items-baseline justify-between">
                            <span className="font-serif text-[2rem] leading-none">$499</span>
                            <span className="text-[10.5px] tracking-[0.28em] uppercase text-muted-foreground">
                                {t('welcome.one_time')}
                            </span>
                        </div>
                    </div>
                </div>
            </section>

            {/* ── Final CTA — no photo, gold rule + serif command ──────── */}
            <section className="border-t border-border py-32 sm:py-44 px-6 sm:px-10 text-center atelier-grain">
                <div className="max-w-3xl mx-auto">
                    <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-8 flex items-center gap-3 justify-center">
                        <span className="atelier-rule" />
                        {t('welcome.epilogue')}
                        <span className="atelier-rule" />
                    </p>
                    <h2 className="font-serif text-[2.6rem] sm:text-[4rem] lg:text-[5rem] leading-[1.04] tracking-[-0.025em] mb-9">
                        {t('welcome.cta_h_1')} <em className="italic text-primary">{t('welcome.cta_h_em')}</em>.
                    </h2>
                    <p className="text-foreground/60 mb-12 text-[15px] sm:text-[16px] leading-relaxed max-w-md mx-auto">
                        {t('welcome.cta_body')}
                    </p>
                    <div className="flex flex-col sm:flex-row gap-3 justify-center">
                        <Link href="/register" className="btn-gold">{t('welcome.begin_planning')}</Link>
                        <a href="#tariff" className="btn-ghost">{t('welcome.view_tariff')}</a>
                    </div>
                </div>
            </section>

            {/* ── Editorial footer ─────────────────────────────────────── */}
            <footer className="border-t border-border bg-muted/30">
                <div className="max-w-[1320px] mx-auto px-6 sm:px-10 py-16 grid md:grid-cols-[1.8fr_1fr_1fr_1fr] gap-10 lg:gap-14">
                    <div>
                        <Link href="/" className="flex items-baseline gap-2 mb-6">
                            <span className="font-serif italic text-[1.7rem] leading-none tracking-tight">WedFlow</span>
                            <span className="text-[10px] tracking-[0.32em] uppercase text-muted-foreground translate-y-[-2px]">Atelier</span>
                        </Link>
                        <p className="font-serif italic text-[1.1rem] text-foreground/80 leading-snug max-w-[18rem] mb-5">
                            {t('welcome.footer_tagline')}
                        </p>
                        <p className="text-[13px] text-foreground/50 leading-[1.7] max-w-[22rem]">
                            {t('welcome.footer_desc')}
                        </p>
                    </div>

                    <FooterColumn
                        heading={t('welcome.footer_col_work')}
                        links={[
                            { label: t('welcome.nav_chapters'),  href: '#chapters' },
                            { label: t('welcome.footer_movements'), href: '#how' },
                            { label: t('welcome.nav_tariff'),    href: '#tariff' },
                            { label: t('welcome.nav_studio'),    href: '#studio' },
                        ]}
                    />

                    <FooterColumn
                        heading={t('welcome.begin')}
                        links={[
                            { label: t('welcome.footer_couples'),     href: '#manifesto' },
                            { label: t('auth.sign_in'),     href: '/login' },
                            { label: t('welcome.footer_open_atelier'), href: '/register' },
                        ]}
                    />

                    <FooterColumn
                        heading={t('welcome.nav_studio')}
                        links={[
                            { label: t('welcome.footer_privacy'), href: '#' },
                            { label: t('welcome.footer_terms'),   href: '#' },
                        ]}
                    />
                </div>
                <div className="border-t border-border">
                    <div className="max-w-[1320px] mx-auto px-6 sm:px-10 py-5 flex items-center justify-between text-[10.5px] tracking-[0.28em] uppercase text-muted-foreground flex-wrap gap-3">
                        <span>© {new Date().getFullYear()} WedFlow Atelier</span>
                        <span>Vol. I · No. 001</span>
                    </div>
                </div>
            </footer>
        </div>
    );
}

/* ── Footer column ────────────────────────────────────────────────────────── */
function FooterColumn({ heading, links }: { heading: string; links: { label: string; href: string }[] }) {
    return (
        <div>
            <p className="text-[10.5px] tracking-[0.3em] uppercase text-primary mb-5">{heading}</p>
            <ul className="space-y-3">
                {links.map((l) => {
                    const isAnchor = l.href.startsWith('#') || l.href === '#';
                    const className = 'text-[13px] text-foreground/60 hover:text-primary transition-colors';
                    return (
                        <li key={l.label}>
                            {isAnchor ? (
                                <a href={l.href} className={className}>{l.label}</a>
                            ) : (
                                <Link href={l.href} className={className}>{l.label}</Link>
                            )}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
}

/* ── Seating chart mockup — adapted to dark vellum ────────────────────────── */
function SeatingChartPreview() {
    const t = useTranslator();
    const tables = [
        { id: 1, label: 'Table 1', x: 70,  y: 90,  seats: 8, filled: 8 },
        { id: 2, label: 'Table 2', x: 200, y: 70,  seats: 8, filled: 6 },
        { id: 3, label: 'Table 3', x: 320, y: 100, seats: 8, filled: 7 },
        { id: 4, label: 'Sweetheart', x: 200, y: 200, seats: 2, filled: 2, sweetheart: true },
        { id: 5, label: 'Table 5', x: 70,  y: 230, seats: 8, filled: 5 },
        { id: 6, label: 'Table 6', x: 320, y: 230, seats: 8, filled: 4 },
    ];

    const unseated = ['Sofia Marchetti', "Liam O'Connor", 'Aïsha Diallo', 'Noah Levi', 'Priya Shah'];

    return (
        <div className="relative h-full vellum overflow-hidden">
            <div className="h-9 border-b border-border flex items-center gap-3 px-4 flex-shrink-0 bg-muted/40">
                <div className="flex gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-foreground/15" />
                    <span className="w-2 h-2 rounded-full bg-foreground/15" />
                    <span className="w-2 h-2 rounded-full bg-foreground/15" />
                </div>
                <div className="flex-1 flex justify-center">
                    <span className="text-[10.5px] tracking-[0.22em] uppercase text-muted-foreground">
                        WedFlow · {t('welcome.mock_room')}
                    </span>
                </div>
            </div>

            <div className="px-5 py-3.5 border-b border-border flex items-center justify-between">
                <div>
                    <p className="text-[9.5px] tracking-[0.3em] uppercase text-primary mb-1">
                        {t('wsite.reception')}
                    </p>
                    <p className="font-serif text-[15px] tracking-tight leading-none text-foreground">
                        {t('nav.seating')} · {t('seating.tables', { count: 6 })}
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-[10.5px] text-foreground/55 tracking-wide">{t('welcome.mock_seated', { a: 38, b: 48 })}</span>
                    <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
                </div>
            </div>

            <div className="grid grid-cols-[140px_1fr] h-[calc(100%-5.4rem)]">
                <div className="border-r border-border bg-muted/30 p-3 space-y-2 overflow-hidden">
                    <p className="text-[9.5px] tracking-[0.22em] uppercase text-muted-foreground mb-2">
                        {t('welcome.mock_unseated')}
                    </p>
                    {unseated.map((name) => (
                        <div
                            key={name}
                            className="flex items-center gap-2 bg-background border border-border rounded-sm px-2 py-1.5"
                        >
                            <span className="w-5 h-5 rounded-full bg-primary/15 text-primary text-[8.5px] font-semibold flex items-center justify-center shrink-0">
                                {name.split(' ').map((p) => p[0]).join('').slice(0, 2)}
                            </span>
                            <span className="text-[10px] text-foreground/85 truncate">{name}</span>
                        </div>
                    ))}
                </div>

                <div className="relative bg-[radial-gradient(circle_at_1px_1px,rgba(237,229,214,0.06)_1px,transparent_0)] [background-size:14px_14px]">
                    <svg viewBox="0 0 420 330" className="absolute inset-0 w-full h-full">
                        {tables.map((t) => {
                            const r = t.sweetheart ? 18 : 28;
                            return (
                                <g key={t.id}>
                                    <circle cx={t.x} cy={t.y} r={r} fill="var(--color-card)" stroke="var(--color-border)" strokeWidth="1.2" />
                                    <text x={t.x} y={t.y + 3} textAnchor="middle" fontSize="8.5" fontWeight="600" fill="var(--color-foreground)">
                                        {t.sweetheart ? '♥' : `T${t.id}`}
                                    </text>
                                    {Array.from({ length: t.seats }).map((_, i) => {
                                        const angle = (i / t.seats) * Math.PI * 2 - Math.PI / 2;
                                        const sr = r + 7;
                                        const cx = t.x + Math.cos(angle) * sr;
                                        const cy = t.y + Math.sin(angle) * sr;
                                        const filled = i < t.filled;
                                        return (
                                            <circle
                                                key={i}
                                                cx={cx}
                                                cy={cy}
                                                r="2.4"
                                                fill={filled ? 'var(--color-primary)' : 'var(--color-card)'}
                                                stroke={filled ? 'var(--color-primary)' : 'var(--color-border)'}
                                                strokeWidth="0.9"
                                            />
                                        );
                                    })}
                                    <text x={t.x} y={t.y + r + 18} textAnchor="middle" fontSize="7.5" fill="var(--color-muted-foreground)" letterSpacing="0.6">
                                        {t.label.toUpperCase()}
                                    </text>
                                </g>
                            );
                        })}
                    </svg>

                    <div className="absolute top-[18%] left-[40%] bg-primary text-primary-foreground rounded-sm px-2.5 py-1.5 shadow-[0_18px_30px_-10px_rgba(0,0,0,0.6)] rotate-[-3deg] flex items-center gap-2">
                        <span className="w-4 h-4 rounded-full bg-background/90 text-foreground text-[8px] font-semibold flex items-center justify-center">
                            SM
                        </span>
                        <span className="text-[10px] font-medium tracking-tight">Sofia Marchetti</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

/* ── QR scanner mockup — dark atelier phone ──────────────────────────────── */
function QrScanPreview() {
    const t = useTranslator();
    return (
        <div className="relative h-full vellum overflow-hidden flex items-center justify-center">
            <div className="absolute -top-20 -left-10 w-[300px] h-[300px] rounded-full bg-primary/[0.10] blur-3xl" />
            <div className="absolute -bottom-24 -right-12 w-[260px] h-[260px] rounded-full bg-primary/[0.06] blur-3xl" />

            <div className="relative w-[230px] sm:w-[250px] aspect-[9/19] rounded-[40px] bg-black p-2 shadow-[0_50px_100px_-30px_rgba(0,0,0,0.8)]">
                <div className="w-full h-full bg-background rounded-[32px] overflow-hidden flex flex-col">
                    <div className="h-6 flex items-center justify-between px-5 text-[8.5px] text-foreground/60 font-medium">
                        <span>9:41</span>
                        <span className="w-12 h-1 rounded-full bg-foreground/15" />
                        <span>100%</span>
                    </div>

                    <div className="px-5 pt-2 pb-3 border-b border-border">
                        <p className="text-[8.5px] tracking-[0.28em] uppercase text-primary mb-1">
                            {t('share.find_seat')}
                        </p>
                        <p className="font-serif text-[15px] tracking-tight leading-tight text-foreground">
                            Emma <span className="italic">&amp;</span> James
                        </p>
                    </div>

                    <div className="px-4 pt-4 pb-3">
                        <div className="rounded-sm border border-primary/30 bg-primary/[0.06] p-3.5">
                            <p className="text-[8.5px] tracking-[0.24em] uppercase text-primary mb-1.5">
                                {t('share.welcome_name', { name: 'Sofia' })}
                            </p>
                            <p className="font-serif text-[16px] tracking-tight leading-tight text-foreground mb-0.5">
                                {t('share.youre_at')} <span className="italic text-primary">Table 4</span>
                            </p>
                            <p className="text-[10px] text-foreground/55">
                                Garden Terrace · Seat 3
                            </p>
                        </div>
                    </div>

                    <div className="mx-4 mb-3 flex-1 rounded-sm bg-muted/40 border border-border relative overflow-hidden">
                        <svg viewBox="0 0 180 160" className="absolute inset-0 w-full h-full">
                            {[
                                { x: 35,  y: 40,  hl: false },
                                { x: 95,  y: 30,  hl: false },
                                { x: 150, y: 45,  hl: false },
                                { x: 50,  y: 100, hl: true  },
                                { x: 115, y: 95,  hl: false },
                                { x: 150, y: 125, hl: false },
                            ].map((t, i) => (
                                <g key={i}>
                                    <circle
                                        cx={t.x}
                                        cy={t.y}
                                        r={t.hl ? 14 : 11}
                                        fill={t.hl ? 'var(--color-primary)' : 'var(--color-card)'}
                                        stroke={t.hl ? 'var(--color-primary)' : 'var(--color-border)'}
                                        strokeWidth="1"
                                        opacity={t.hl ? 1 : 0.55}
                                    />
                                    {t.hl && (
                                        <circle cx={t.x} cy={t.y} r="22" fill="none" stroke="var(--color-primary)" strokeWidth="1" opacity="0.4" />
                                    )}
                                </g>
                            ))}
                        </svg>
                        <p className="absolute bottom-2 left-3 text-[8.5px] tracking-[0.22em] uppercase text-muted-foreground">
                            {t('welcome.mock_your_table')}
                        </p>
                    </div>

                    <div className="px-4 pb-5">
                        <div className="bg-primary text-primary-foreground rounded-sm py-2.5 text-center text-[10px] font-semibold tracking-[0.24em] uppercase">
                            {t('welcome.mock_open_maps')}
                        </div>
                    </div>
                </div>
            </div>

            <div className="absolute top-6 right-6 hidden sm:flex items-center gap-2 bg-background/85 backdrop-blur border border-border rounded-full pl-2 pr-3 py-1.5">
                <span className="w-6 h-6 rounded-sm bg-primary flex items-center justify-center">
                    <QrIcon className="w-3.5 h-3.5 text-primary-foreground" />
                </span>
                <span className="text-[10.5px] text-foreground tracking-[0.18em] uppercase font-medium">
                    {t('welcome.mock_scan')}
                </span>
            </div>
        </div>
    );
}

/* ── Guest gallery mockup — dark vellum ──────────────────────────────────── */
function GuestGalleryPreview() {
    const t = useTranslator();
    const photos = [
        '/images/home/hero-bg.jpg',
        '/images/home/hero.jpg',
        '/images/home/hero-bg.jpg',
        '/images/home/hero.jpg',
        '/images/home/hero-bg.jpg',
        '/images/home/hero.jpg',
    ];

    return (
        <div className="relative h-full vellum overflow-hidden">
            <div className="h-9 border-b border-border flex items-center gap-3 px-4 flex-shrink-0 bg-muted/40">
                <div className="flex gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-foreground/15" />
                    <span className="w-2 h-2 rounded-full bg-foreground/15" />
                    <span className="w-2 h-2 rounded-full bg-foreground/15" />
                </div>
                <div className="flex-1 flex justify-center">
                    <span className="text-[10.5px] tracking-[0.22em] uppercase text-muted-foreground">
                        wedflow.site / emma-and-james
                    </span>
                </div>
            </div>

            <div className="px-5 py-3.5 border-b border-border flex items-center justify-between">
                <div>
                    <p className="text-[9.5px] tracking-[0.3em] uppercase text-primary mb-1">
                        {t('share.guest_gallery')}
                    </p>
                    <p className="font-serif text-[15px] tracking-tight leading-none text-foreground">
                        Emma <span className="italic">&amp;</span> James · 248 {t('share.frame_other')}
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-[10px] text-foreground/55">{t('welcome.mock_contributors', { count: 36 })}</span>
                    <div className="flex -space-x-1.5">
                        {[0, 1, 2].map((i) => (
                            <span key={i} className="w-5 h-5 rounded-full bg-background border border-border overflow-hidden">
                                <img src={photos[i]} alt="" className="w-full h-full object-cover" />
                            </span>
                        ))}
                    </div>
                </div>
            </div>

            <div className="relative p-3 grid grid-cols-3 gap-2 h-[calc(100%-5.4rem)] overflow-hidden">
                {photos.map((src, i) => (
                    <div
                        key={src + i}
                        className={`relative overflow-hidden rounded-sm ${i === 0 ? 'row-span-2' : ''}`}
                        style={i === 0 ? { gridRow: 'span 2 / span 2' } : undefined}
                    >
                        <img src={src} alt="" className="absolute inset-0 w-full h-full object-cover" />
                        <div className="absolute inset-0 bg-background/15" />
                        {i === 2 && (
                            <span className="absolute top-1.5 right-1.5 bg-background/85 backdrop-blur rounded-sm px-1.5 py-0.5 text-[8px] tracking-[0.18em] uppercase text-foreground">
                                {t('welcome.mock_video')}
                            </span>
                        )}
                    </div>
                ))}

                <div className="absolute bottom-4 right-4 vellum p-2.5 w-[210px] flex items-center gap-2.5 rounded-sm">
                    <div className="shrink-0 w-9 h-9 rounded-sm bg-primary/15 flex items-center justify-center">
                        <CameraIcon className="w-4 h-4 text-primary" />
                    </div>
                    <div className="min-w-0 leading-tight">
                        <p className="text-[11px] font-semibold text-foreground truncate">
                            {t('welcome.mock_uploaded', { name: 'Sofia', count: 3 })}
                        </p>
                        <p className="text-[9.5px] text-muted-foreground tracking-wide uppercase">{t('welcome.mock_dancefloor')}</p>
                    </div>
                </div>
            </div>
        </div>
    );
}

/* ─── Icons (restrained, line-only) ───────────────────────────────────────── */

function CheckIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="m3 8 3.5 3.5L13 5" />
        </svg>
    );
}

function LockIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3.5" y="7" width="9" height="6.5" rx="1.4" />
            <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
        </svg>
    );
}

function QrIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="7" height="7" rx="1" />
            <rect x="14" y="3" width="7" height="7" rx="1" />
            <rect x="3" y="14" width="7" height="7" rx="1" />
            <path d="M14 14h3v3h-3zM20 14v3M14 20h3M20 20v1" />
        </svg>
    );
}

function CameraIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 8h3l2-2h6l2 2h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z" />
            <circle cx="12" cy="13" r="3.5" />
        </svg>
    );
}

function VendorIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 7h16l-1.5 12.5a1 1 0 0 1-1 .9H6.5a1 1 0 0 1-1-.9L4 7z" />
            <path d="M8 7V5a4 4 0 0 1 8 0v2" />
        </svg>
    );
}

function ChecklistIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="2" />
            <path d="m8 11 2 2 4-4" />
            <path d="M8 16h8" />
        </svg>
    );
}

function ClockIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="9" />
            <path d="M12 7v5l3 2" />
        </svg>
    );
}

function PaletteIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 3a9 9 0 0 0 0 18 2.5 2.5 0 0 0 2-4 2 2 0 0 1 2-2h2a4 4 0 0 0 4-4 9 9 0 0 0-10-8z" />
            <circle cx="7.5" cy="11" r="1" />
            <circle cx="10.5" cy="7" r="1" />
            <circle cx="15.5" cy="7.5" r="1" />
            <circle cx="18" cy="11.5" r="1" />
        </svg>
    );
}