import { Link, useForm } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import { useState } from 'react';
import { CURRENCIES, currencyForCountry, capitalForCountry, findCountry } from '@/lib/locales';
import { CountryCombobox } from '@/components/country-combobox';
import { useTranslator } from '@/lib/i18n';

interface Stats {
    totalBudget: number;
    totalActual: number;
    budgetRemaining: number;
    totalGuests: number;
    confirmedRsvp: number;
    totalSeats: number;
    totalSeated: number;
}

interface Wedding {
    id: string;
    partner_a_id: string;
    partner_a_name: string;
    partner_b_name: string;
    wedding_date?: string;
    venue_name?: string;
    venue_city?: string;
    venue_country?: string;
    currency: string;
}

interface Props {
    wedding: Wedding;
    currentUserRole: string;
    stats: Stats;
    auth: { user: { id: string; name: string; email: string; is_admin: boolean } };
}

function fmt(n: number, currency = 'USD') {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(n);
}

const QUICK_LINKS = (id: string) => [
    { href: `/weddings/${id}/checklist`,     icon: CheckIcon,  labelKey: 'nav.checklist',     hintKey: 'dashboard.hint_checklist' },
    { href: `/weddings/${id}/budget`,        icon: BudgetIcon, labelKey: 'nav.budget',        hintKey: 'dashboard.hint_budget' },
    { href: `/weddings/${id}/guests`,        icon: GuestIcon,  labelKey: 'nav.guests',        hintKey: 'dashboard.hint_guests' },
    { href: `/weddings/${id}/seating`,       icon: SeatIcon,   labelKey: 'nav.seating',       hintKey: 'dashboard.hint_seating' },
    { href: `/weddings/${id}/vendors`,       icon: VendorIcon, labelKey: 'nav.vendors',       hintKey: 'dashboard.hint_vendors' },
    { href: `/weddings/${id}/inspiration`,   icon: InspoIcon,  labelKey: 'nav.inspiration',   hintKey: 'dashboard.hint_inspiration' },
    { href: `/weddings/${id}/timeline`,      icon: ClockIcon,  labelKey: 'nav.timeline',      hintKey: 'dashboard.hint_timeline' },
    { href: `/weddings/${id}/photos`,        icon: PhotoIcon,  labelKey: 'nav.photos',        hintKey: 'dashboard.hint_photos' },
    { href: `/weddings/${id}/website`,       icon: WebIcon,    labelKey: 'nav.website',       hintKey: 'dashboard.hint_website' },
    { href: `/weddings/${id}/collaborators`, icon: GuestIcon,  labelKey: 'nav.collaborators', hintKey: 'dashboard.hint_collaborators' },
];

export default function WeddingShow({ wedding, currentUserRole, stats }: Props) {
    const t = useTranslator();
    const [showEdit, setShowEdit] = useState(false);
    const [currencyTouched, setCurrencyTouched] = useState(false);

    // Normalize legacy free-text country values (e.g. "USA", "Nigeria") to ISO codes.
    const normalizedCountry = findCountry(wedding.venue_country)?.code ?? (wedding.venue_country ?? '');

    const { data, setData, patch, processing, errors, reset } = useForm({
        partner_a_name: wedding.partner_a_name,
        partner_b_name: wedding.partner_b_name,
        wedding_date: wedding.wedding_date ?? '',
        venue_name: wedding.venue_name ?? '',
        venue_city: wedding.venue_city ?? '',
        venue_country: normalizedCountry,
        currency: wedding.currency,
    });

    function handleUpdate(e: React.FormEvent) {
        e.preventDefault();
        patch(`/weddings/${wedding.id}`, { onSuccess: () => setShowEdit(false) });
    }

    const venue = [wedding.venue_name, wedding.venue_city, wedding.venue_country].filter(Boolean).join(', ');
    const daysUntil = wedding.wedding_date
        ? Math.ceil((new Date(wedding.wedding_date).getTime() - Date.now()) / 86400000)
        : null;

    const budgetPct = stats.totalBudget > 0 ? Math.min(stats.totalActual / stats.totalBudget, 1) : 0;
    const rsvpPct = stats.totalGuests > 0 ? stats.confirmedRsvp / stats.totalGuests : 0;

    return (
        <AppLayout wedding={wedding} currentUserRole={currentUserRole}>
            <div className="relative">
                {/* Ambient blush halo + floral flourish */}
                <div className="absolute inset-x-0 top-0 h-[480px] pointer-events-none overflow-hidden">
                    <div className="absolute -top-32 -left-20 w-[520px] h-[520px] rounded-full bg-primary/[0.06] blur-3xl" />
                    <div className="absolute -top-24 right-0 w-[420px] h-[420px] rounded-full bg-primary/[0.04] blur-3xl" />
                    <FloralCorner className="absolute top-2 right-2 w-[240px] h-[240px] text-primary/[0.14] hidden md:block" />
                </div>

                <div className="relative max-w-6xl mx-auto px-6 py-10">

                    {/* Header */}
                    <div className="flex items-start justify-between mb-10 gap-6">
                        <div className="min-w-0">
                            <p className="text-[11px] font-semibold text-primary uppercase tracking-[0.22em] mb-3">
                                {t('dashboard.eyebrow')}
                            </p>
                            <h1 className="font-serif text-[2.6rem] md:text-[3.4rem] leading-[1.04] tracking-tight text-foreground mb-3">
                                {wedding.partner_a_name}{' '}
                                <em className="text-primary not-italic font-medium">&amp;</em>{' '}
                                {wedding.partner_b_name}
                            </h1>

                            <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-[14px] text-muted-foreground">
                                {venue && (
                                    <span className="inline-flex items-center gap-1.5">
                                        <PinIcon className="w-3.5 h-3.5 text-primary/70" />
                                        {venue}
                                    </span>
                                )}
                                {venue && wedding.wedding_date && (
                                    <span className="text-muted-foreground/40">·</span>
                                )}
                                {wedding.wedding_date && (
                                    <span className="inline-flex items-center gap-1.5">
                                        <CalendarIcon className="w-3.5 h-3.5 text-primary/70" />
                                        {new Date(wedding.wedding_date).toLocaleDateString('en-US', {
                                            weekday: 'long', month: 'long', day: 'numeric', year: 'numeric',
                                        })}
                                    </span>
                                )}
                                {daysUntil !== null && daysUntil > 0 && (
                                    <span className="inline-flex items-center gap-1.5 bg-primary/[0.08] text-primary border border-primary/15 rounded-full px-3 py-1 text-[12px] font-medium">
                                        <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
                                        {t('dashboard.days_to_go', { days: daysUntil })}
                                    </span>
                                )}
                            </div>
                        </div>

                        {currentUserRole === 'partner' && (
                            <button
                                onClick={() => setShowEdit(true)}
                                className="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-[13px] font-medium border border-border bg-card/80 backdrop-blur hover:border-primary/40 hover:text-primary transition-all flex-shrink-0"
                            >
                                <EditIcon className="w-3.5 h-3.5" />
                                {t('dashboard.edit_details')}
                            </button>
                        )}
                    </div>

                    {/* Hero summary card */}
                    <div className="relative bg-card border border-border rounded-3xl p-7 md:p-8 mb-4 overflow-hidden shadow-[0_30px_80px_-40px_rgba(40,30,30,0.18)]">
                        <div className="absolute -top-32 -right-32 w-[360px] h-[360px] rounded-full bg-primary/[0.05] blur-3xl pointer-events-none" />
                        <div className="absolute top-6 right-6 hidden lg:block opacity-[0.18] pointer-events-none">
                            <Sprig className="w-[110px] h-[110px] text-primary" />
                        </div>

                        <div className="relative grid md:grid-cols-3 gap-8 md:gap-10">
                            {/* Days to "I do" */}
                            <div>
                                <p className="text-[10.5px] font-semibold text-muted-foreground uppercase tracking-[0.18em] mb-3">
                                    {t('dashboard.days_to_ido')}
                                </p>
                                <p className="font-serif text-[3.4rem] leading-none text-foreground tracking-tight mb-3">
                                    {daysUntil !== null && daysUntil > 0 ? daysUntil : daysUntil === 0 ? <span className="text-primary italic">{t('dashboard.today')}</span> : '—'}
                                </p>
                                <div className="h-1.5 rounded-full bg-muted overflow-hidden mb-2">
                                    <div
                                        className="h-full bg-gradient-to-r from-primary to-primary/70 rounded-full"
                                        style={{ width: `${Math.min(((365 - Math.max(daysUntil ?? 365, 0)) / 365) * 100, 100)}%` }}
                                    />
                                </div>
                                <p className="text-[12px] text-muted-foreground">
                                    {daysUntil === null ? t('dashboard.countdown_set_date') : daysUntil > 0 ? t('dashboard.countdown_on') : daysUntil === 0 ? t('dashboard.countdown_today') : t('dashboard.countdown_married')}
                                </p>
                            </div>

                            {/* Budget donut */}
                            <div className="flex items-center gap-5 md:border-l md:border-border md:pl-10">
                                <DonutRing pct={budgetPct} />
                                <div className="min-w-0">
                                    <p className="text-[10.5px] font-semibold text-muted-foreground uppercase tracking-[0.18em] mb-1.5">
                                        {t('dashboard.budget_spent')}
                                    </p>
                                    <p className="font-serif text-[1.9rem] text-foreground leading-tight tracking-tight truncate">
                                        {fmt(stats.totalActual, wedding.currency)}
                                    </p>
                                    <p className="text-[12px] text-muted-foreground">
                                        {t('dashboard.of_planned', { amount: fmt(stats.totalBudget, wedding.currency) })}
                                    </p>
                                </div>
                            </div>

                            {/* Guests */}
                            <div className="md:border-l md:border-border md:pl-10">
                                <p className="text-[10.5px] font-semibold text-muted-foreground uppercase tracking-[0.18em] mb-3">
                                    {t('dashboard.guests')}
                                </p>
                                <p className="font-serif text-[3.4rem] leading-none text-foreground tracking-tight mb-3">
                                    {stats.totalGuests}
                                </p>
                                <div className="h-1.5 rounded-full bg-muted overflow-hidden mb-2">
                                    <div
                                        className="h-full bg-success rounded-full"
                                        style={{ width: `${rsvpPct * 100}%` }}
                                    />
                                </div>
                                <p className="text-[12px] text-muted-foreground">
                                    <span className="text-foreground font-medium">{stats.confirmedRsvp}</span> {t('dashboard.rsvps_received')}
                                </p>
                            </div>
                        </div>
                    </div>

                    {/* Stat strip */}
                    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-14">
                        <StatCard
                            label={t('dashboard.total_budget')}
                            value={fmt(stats.totalBudget, wedding.currency)}
                            sub={stats.totalBudget > 0 ? t('dashboard.pct_planned', { pct: Math.round((stats.totalActual / stats.totalBudget) * 100) }) : t('dashboard.set_your_budget')}
                        />
                        <StatCard
                            label={t('dashboard.budget_remaining')}
                            value={fmt(stats.budgetRemaining, wedding.currency)}
                            sub={stats.budgetRemaining >= 0 ? t('dashboard.on_track') : t('dashboard.over_budget')}
                            valueColor={stats.budgetRemaining >= 0 ? 'text-success' : 'text-danger'}
                        />
                        <StatCard
                            label={t('dashboard.spent')}
                            value={fmt(stats.totalActual, wedding.currency)}
                            sub={t('dashboard.actual_so_far')}
                        />
                        <StatCard
                            label={t('dashboard.seated')}
                            value={stats.totalSeats > 0 ? `${stats.totalSeated} / ${stats.totalSeats}` : '—'}
                            sub={stats.totalSeats > 0
                                ? t('dashboard.pct_seats_filled', { pct: Math.round((stats.totalSeated / stats.totalSeats) * 100) })
                                : t('dashboard.no_tables_yet')}
                        />
                    </div>

                    {/* Quick links */}
                    <div className="flex items-end justify-between mb-7 flex-wrap gap-3">
                        <div>
                            <p className="text-[11px] font-semibold text-primary uppercase tracking-[0.22em] mb-2">
                                {t('dashboard.sections_eyebrow')}
                            </p>
                            <h2 className="font-serif text-[2rem] md:text-[2.4rem] tracking-tight text-foreground leading-tight">
                                {t('dashboard.sections_heading')}
                            </h2>
                        </div>
                        <p className="text-[13px] text-muted-foreground max-w-xs">
                            {t('dashboard.sections_blurb')}
                        </p>
                    </div>

                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
                        {QUICK_LINKS(wedding.id).map((item) => {
                            const Icon = item.icon;
                            return (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    className="group relative bg-card border border-border rounded-2xl p-5 hover:border-primary/30 hover:shadow-[0_20px_50px_-30px_rgba(170,40,80,0.25)] transition-all duration-300 overflow-hidden"
                                >
                                    <div className="absolute -top-10 -right-10 w-28 h-28 rounded-full bg-primary/[0.05] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
                                    <div className="relative">
                                        <div className="w-10 h-10 rounded-xl bg-primary/[0.08] text-primary flex items-center justify-center mb-3.5 group-hover:bg-primary/[0.14] transition-colors">
                                            <Icon className="w-[18px] h-[18px]" />
                                        </div>
                                        <p className="text-[13.5px] font-medium text-foreground leading-tight mb-1">
                                            {t(item.labelKey)}
                                        </p>
                                        <p className="text-[11.5px] text-muted-foreground leading-snug">
                                            {t(item.hintKey)}
                                        </p>
                                    </div>
                                </Link>
                            );
                        })}
                    </div>

                    {/* Mobile edit button */}
                    {currentUserRole === 'partner' && (
                        <button
                            onClick={() => setShowEdit(true)}
                            className="sm:hidden mt-8 w-full inline-flex items-center justify-center gap-2 px-5 py-3 rounded-full text-[13px] font-medium border border-border bg-card hover:border-primary/40 hover:text-primary transition-all"
                        >
                            <EditIcon className="w-3.5 h-3.5" />
                            {t('dashboard.edit_wedding_details')}
                        </button>
                    )}
                </div>
            </div>

            {/* Edit Modal */}
            {showEdit && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-fade-in">
                    <div className="bg-card rounded-3xl w-full max-w-lg shadow-[0_40px_100px_-30px_rgba(40,30,30,0.4)] border border-border animate-fade-up overflow-hidden">
                        <div className="relative p-7 md:p-8">
                            <div className="absolute -top-16 -right-16 w-44 h-44 rounded-full bg-primary/[0.06] blur-2xl pointer-events-none" />
                            <div className="relative">
                                <p className="text-[10.5px] font-semibold text-primary uppercase tracking-[0.22em] mb-2">
                                    {t('dashboard.wedding_details')}
                                </p>
                                <h2 className="font-serif text-[1.85rem] tracking-tight text-foreground mb-1">
                                    {t('dashboard.edit_basics')}
                                </h2>
                                <p className="text-[13px] text-muted-foreground mb-6">
                                    {t('dashboard.edit_basics_blurb')}
                                </p>
                                <form onSubmit={handleUpdate} className="space-y-4 max-h-[70vh] overflow-y-auto pr-1 -mr-1">
                                    {/* Section: Couple */}
                                    <SectionLabel>{t('dashboard.section_couple')}</SectionLabel>
                                    <div className="grid grid-cols-2 gap-3">
                                        <div>
                                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{t('dashboard.partner_a')}</label>
                                            <input
                                                type="text"
                                                value={data.partner_a_name}
                                                onChange={e => setData('partner_a_name', e.target.value)}
                                                className="input"
                                                required
                                            />
                                            {errors.partner_a_name && <p className="text-danger text-xs mt-1">{errors.partner_a_name}</p>}
                                        </div>
                                        <div>
                                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{t('dashboard.partner_b')}</label>
                                            <input
                                                type="text"
                                                value={data.partner_b_name}
                                                onChange={e => setData('partner_b_name', e.target.value)}
                                                className="input"
                                                required
                                            />
                                            {errors.partner_b_name && <p className="text-danger text-xs mt-1">{errors.partner_b_name}</p>}
                                        </div>
                                    </div>

                                    {/* Section: Date */}
                                    <SectionLabel>{t('dashboard.section_date')}</SectionLabel>
                                    <div>
                                        <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{t('wedding.wedding_date')}</label>
                                        <input
                                            type="date"
                                            value={data.wedding_date}
                                            onChange={e => setData('wedding_date', e.target.value)}
                                            className="input"
                                        />
                                    </div>

                                    {/* Section: Venue */}
                                    <SectionLabel>{t('dashboard.section_venue')}</SectionLabel>
                                    <div>
                                        <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{t('wedding.venue_name')}</label>
                                        <input
                                            type="text"
                                            value={data.venue_name}
                                            onChange={e => setData('venue_name', e.target.value)}
                                            placeholder="The Grand Ballroom"
                                            className="input"
                                        />
                                    </div>
                                    <div className="grid grid-cols-2 gap-3">
                                        <div>
                                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{t('wedding.venue_city')}</label>
                                            <input
                                                type="text"
                                                value={data.venue_city}
                                                onChange={e => setData('venue_city', e.target.value)}
                                                placeholder="New York"
                                                className="input"
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">{t('wedding.venue_country')}</label>
                                            <CountryCombobox
                                                value={data.venue_country}
                                                onChange={(code) => {
                                                    setData('venue_country', code);
                                                    // Auto-suggest currency unless the user has already touched it.
                                                    const nextCurrency = currencyForCountry(code);
                                                    if (nextCurrency && !currencyTouched) {
                                                        setData('currency', nextCurrency);
                                                    }
                                                    // Auto-fill venue_city with capital only when empty.
                                                    const cap = capitalForCountry(code);
                                                    if (cap && !data.venue_city) {
                                                        setData('venue_city', cap);
                                                    }
                                                }}
                                                placeholder={t('dashboard.search_country')}
                                            />
                                        </div>
                                    </div>

                                    {/* Section: Money */}
                                    <SectionLabel>{t('dashboard.section_currency')}</SectionLabel>
                                    <div>
                                        <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">
                                            {t('dashboard.currency_help')}
                                        </label>
                                        <select
                                            value={data.currency}
                                            onChange={(e) => {
                                                setCurrencyTouched(true);
                                                setData('currency', e.target.value);
                                            }}
                                            className="input"
                                        >
                                            {CURRENCIES.map((c) => (
                                                <option key={c.code} value={c.code}>
                                                    {c.code} — {c.name} ({c.symbol})
                                                </option>
                                            ))}
                                        </select>
                                        {data.venue_country && currencyForCountry(data.venue_country) && data.currency !== currencyForCountry(data.venue_country) && (
                                            <p className="text-[11.5px] text-muted-foreground mt-1.5">
                                                Tip: {findCountry(data.venue_country)?.name} typically uses{' '}
                                                <button
                                                    type="button"
                                                    className="text-primary hover:underline"
                                                    onClick={() => {
                                                        setCurrencyTouched(true);
                                                        setData('currency', currencyForCountry(data.venue_country)!);
                                                    }}
                                                >
                                                    {currencyForCountry(data.venue_country)}
                                                </button>.
                                            </p>
                                        )}
                                    </div>

                                    <div className="flex gap-3 pt-4 sticky bottom-0 bg-card -mb-1 pb-1">
                                        <button
                                            type="button"
                                            onClick={() => { setShowEdit(false); setCurrencyTouched(false); reset(); }}
                                            className="flex-1 border border-border rounded-full py-2.5 text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
                                        >
                                            {t('common.cancel')}
                                        </button>
                                        <button
                                            type="submit"
                                            disabled={processing}
                                            className="flex-1 bg-primary text-primary-foreground rounded-full py-2.5 text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-all shadow-[0_1px_0_rgba(255,255,255,0.4)_inset,0_8px_24px_-8px_rgba(170,40,80,0.45)]"
                                        >
                                            {processing ? t('common.saving') : t('dashboard.save_changes')}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </AppLayout>
    );
}

/* ─── Sub-components ───────────────────────────────────────────────────── */

function SectionLabel({ children }: { children: React.ReactNode }) {
    return (
        <p className="text-[10.5px] font-semibold text-primary uppercase tracking-[0.2em] pt-1">
            {children}
        </p>
    );
}

function StatCard({
    label,
    value,
    sub,
    valueColor,
}: {
    label: string;
    value: string;
    sub?: string;
    valueColor?: string;
}) {
    return (
        <div className="relative bg-card border border-border rounded-2xl p-5 hover:border-primary/30 hover:shadow-[0_18px_50px_-30px_rgba(170,40,80,0.2)] transition-all duration-300 overflow-hidden group">
            <div className="absolute -top-10 -right-10 w-24 h-24 rounded-full bg-primary/[0.04] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
            <p className="relative text-[10.5px] font-semibold text-muted-foreground uppercase tracking-[0.18em] mb-2.5">
                {label}
            </p>
            <p className={`relative font-serif text-[1.85rem] tracking-tight leading-none ${valueColor ?? 'text-foreground'}`}>
                {value}
            </p>
            {sub && (
                <p className="relative text-[11.5px] text-muted-foreground mt-2.5">{sub}</p>
            )}
        </div>
    );
}

function DonutRing({ pct }: { pct: number }) {
    const r = 38;
    const c = 2 * Math.PI * r;
    return (
        <div className="relative w-[108px] h-[108px] flex-shrink-0">
            <svg viewBox="0 0 100 100" className="w-full h-full -rotate-90">
                <circle cx="50" cy="50" r={r} className="text-muted" stroke="currentColor" strokeWidth="9" fill="none" />
                <circle
                    cx="50" cy="50" r={r}
                    className="text-primary"
                    stroke="currentColor"
                    strokeWidth="9"
                    strokeLinecap="round"
                    fill="none"
                    strokeDasharray={`${c * pct} ${c}`}
                />
            </svg>
            <div className="absolute inset-0 flex items-center justify-center flex-col">
                <span className="text-[9.5px] text-muted-foreground tracking-[0.14em] uppercase">Spent</span>
                <span className="font-serif text-[1.35rem] text-foreground leading-none mt-0.5">
                    {Math.round(pct * 100)}%
                </span>
            </div>
        </div>
    );
}

/* ─── Icons ───────────────────────────────────────────────────────────── */

function EditIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" /><path d="M10 4l2 2" />
        </svg>
    );
}

function PinIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M8 14s5-4 5-8a5 5 0 1 0-10 0c0 4 5 8 5 8Z" /><circle cx="8" cy="6" r="1.5" />
        </svg>
    );
}

function CalendarIcon({ 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="2.5" y="3.5" width="11" height="10" rx="1.5" /><path d="M2.5 6.5h11" />
            <path d="M5.5 2v3M10.5 2v3" />
        </svg>
    );
}

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

function GuestIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="9" cy="8" r="3.2" /><circle cx="16.5" cy="9" r="2.5" />
            <path d="M3.5 19c.6-3 3-4.5 5.5-4.5s4.9 1.5 5.5 4.5" />
            <path d="M14.5 19c.4-2 1.9-3 3.5-3s2.7.7 3.2 2.4" />
        </svg>
    );
}

function BudgetIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 10h18" /><circle cx="16.5" cy="14.5" r="1.4" />
        </svg>
    );
}

function VendorIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 9l1.6-3.5A1.5 1.5 0 0 1 6 4.6h12a1.5 1.5 0 0 1 1.4.9L21 9" />
            <path d="M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9" /><path d="M3 9h18" /><path d="M9 13h6" />
        </svg>
    );
}

function SeatIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <ellipse cx="12" cy="12" rx="7.5" ry="4.5" /><circle cx="12" cy="4" r="1.6" />
            <circle cx="20" cy="12" r="1.6" /><circle cx="12" cy="20" r="1.6" /><circle cx="4" cy="12" r="1.6" />
        </svg>
    );
}

function WebIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="8.5" /><path d="M3.5 12h17" />
            <path d="M12 3.5c2.4 2.5 3.5 5.5 3.5 8.5s-1.1 6-3.5 8.5" />
            <path d="M12 3.5c-2.4 2.5-3.5 5.5-3.5 8.5s1.1 6 3.5 8.5" />
        </svg>
    );
}

function CheckIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="2.5" /><path d="M8.5 12.5l2.5 2.5 4.5-5" />
        </svg>
    );
}

function InspoIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 3l2.4 5.4L20 9.2l-4.2 3.7L17 19l-5-3-5 3 1.2-6.1L4 9.2l5.6-.8z" />
        </svg>
    );
}

function PhotoIcon({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="6" width="18" height="14" rx="2" /><path d="M3 16l5-4 4 3 3-2 6 5" />
            <circle cx="9" cy="11" r="1.6" /><path d="M8 6l1.5-2h5L16 6" />
        </svg>
    );
}


function FloralCorner({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 240 240" fill="none">
            <path d="M210 30 C 170 60, 150 90, 140 130 C 135 160, 130 200, 110 220" stroke="currentColor" strokeWidth="1.2" />
            <path d="M180 60 C 165 55, 150 60, 145 75 C 155 80, 175 75, 180 60Z" fill="currentColor" opacity="0.5" />
            <path d="M155 105 C 140 100, 125 108, 122 122 C 138 125, 155 120, 155 105Z" fill="currentColor" opacity="0.45" />
            <path d="M138 165 C 124 165, 110 175, 110 188 C 124 188, 138 180, 138 165Z" fill="currentColor" opacity="0.4" />
            <g transform="translate(195,40)">
                <circle r="22" fill="currentColor" opacity="0.35" />
                <circle r="16" fill="currentColor" opacity="0.55" />
                <circle r="10" fill="currentColor" opacity="0.85" />
                <circle r="4" fill="currentColor" />
            </g>
            <g transform="translate(120,180)">
                <circle r="18" fill="currentColor" opacity="0.3" />
                <circle r="13" fill="currentColor" opacity="0.5" />
                <circle r="7" fill="currentColor" opacity="0.85" />
            </g>
            <g stroke="currentColor" strokeWidth="1" opacity="0.6">
                <path d="M165 30 C 170 50, 178 60, 200 70" />
                <circle cx="172" cy="42" r="2.2" fill="currentColor" />
                <circle cx="180" cy="55" r="2.2" fill="currentColor" />
                <circle cx="195" cy="65" r="2.2" fill="currentColor" />
            </g>
        </svg>
    );
}

function Sprig({ className = '' }: { className?: string }) {
    return (
        <svg className={className} viewBox="0 0 120 120" fill="none">
            <path d="M60 10 C 55 40, 55 70, 60 110" stroke="currentColor" strokeWidth="1.2" />
            <path d="M60 30 C 50 28, 42 32, 38 40 C 48 44, 58 40, 60 30Z" fill="currentColor" opacity="0.7" />
            <path d="M60 30 C 70 28, 78 32, 82 40 C 72 44, 62 40, 60 30Z" fill="currentColor" opacity="0.7" />
            <path d="M60 55 C 50 53, 42 57, 38 65 C 48 69, 58 65, 60 55Z" fill="currentColor" opacity="0.55" />
            <path d="M60 55 C 70 53, 78 57, 82 65 C 72 69, 62 65, 60 55Z" fill="currentColor" opacity="0.55" />
            <path d="M60 80 C 50 78, 44 82, 42 88 C 50 92, 58 88, 60 80Z" fill="currentColor" opacity="0.4" />
            <path d="M60 80 C 70 78, 76 82, 78 88 C 70 92, 62 88, 60 80Z" fill="currentColor" opacity="0.4" />
        </svg>
    );
}