import { Button } from "@/components/ui/button";
import { useEffect, useState } from "react";
import { Head, Link, usePage } from "@inertiajs/react";
import {
    ArrowRight,
    BarChart3,
    BellRing,
    BrainCircuit,
    CandlestickChart,
    Check,
    ChevronRight,
    Globe2,
    Menu,
    X,
    ShieldCheck,
    Sparkles,
    TrendingUp,
    Zap,
} from "lucide-react";
import { dashboard, login, register } from "@/routes";
import PublicLanguageSwitcher from "@/components/public-language-switcher";
import { useI18n } from "@/lib/i18n";
import { LegacyTextLocalizer } from "@/components/legacy-text-localizer";
import type { PageProps } from "@inertiajs/core";
import type { Auth } from "@/types/auth";

function MiniChart() {
    const { t } = useI18n();

    return (
        <svg
            viewBox="0 0 720 250"
            className="h-full w-full"
            preserveAspectRatio="none"
            aria-label={t("Market chart preview")}
        >
            <defs>
                <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#34d399" stopOpacity="0.24" />
                    <stop offset="100%" stopColor="#34d399" stopOpacity="0" />
                </linearGradient>
            </defs>
            {[45, 95, 145, 195].map((y) => (
                <line
                    key={y}
                    x1="0"
                    x2="720"
                    y1={y}
                    y2={y}
                    stroke="rgba(148,163,184,.12)"
                    strokeWidth="1"
                />
            ))}
            {[90, 180, 270, 360, 450, 540, 630].map((x) => (
                <line
                    key={x}
                    x1={x}
                    x2={x}
                    y1="0"
                    y2="250"
                    stroke="rgba(148,163,184,.08)"
                    strokeWidth="1"
                />
            ))}
            <path
                d="M0 198 C35 205 42 176 70 184 S105 166 132 173 S164 145 194 156 S228 132 256 142 S292 115 320 129 S350 111 380 121 S414 88 445 103 S474 78 505 91 S535 62 565 77 S598 52 625 64 S662 30 720 44 L720 250 L0 250 Z"
                fill="url(#areaFill)"
            />
            <path
                d="M0 198 C35 205 42 176 70 184 S105 166 132 173 S164 145 194 156 S228 132 256 142 S292 115 320 129 S350 111 380 121 S414 88 445 103 S474 78 505 91 S535 62 565 77 S598 52 625 64 S662 30 720 44"
                fill="none"
                stroke="#34d399"
                strokeWidth="3"
                strokeLinecap="round"
            />
            <circle cx="720" cy="44" r="5" fill="#34d399" />
            <circle cx="720" cy="44" r="10" fill="#34d399" opacity="0.12" />
        </svg>
    );
}

type MarketPulseItem = {
    symbol: string;
    name: string;
    price: number | null;
    change_pct: number | null;
};

const marketDefaults: MarketPulseItem[] = [
    { symbol: "BTC/USDT", name: "Bitcoin", price: null, change_pct: null },
    { symbol: "ETH/USDT", name: "Ethereum", price: null, change_pct: null },
    { symbol: "SOL/USDT", name: "Solana", price: null, change_pct: null },
];


const features = [
    {
        icon: CandlestickChart,
        titleKey: "welcome.feature_chart_title",
        titleFallback: "Professional charts",
        descriptionKey: "welcome.feature_chart_description",
        descriptionFallback:
            "Read price action with clean charts, multiple timeframes, and essential indicators.",
    },
    {
        icon: BrainCircuit,
        titleKey: "welcome.feature_insight_title",
        titleFallback: "Market insights",
        descriptionKey: "welcome.feature_insight_description",
        descriptionFallback:
            "Combine technical, micro, macro, and cross-market context in one workspace.",
    },
    {
        icon: BellRing,
        titleKey: "welcome.feature_alert_title",
        titleFallback: "Smart alerts",
        descriptionKey: "welcome.feature_alert_description",
        descriptionFallback:
            "Track important price levels and stay informed without watching the screen all day.",
    },
    {
        icon: ShieldCheck,
        titleKey: "welcome.feature_workspace_title",
        titleFallback: "Focused workspace",
        descriptionKey: "welcome.feature_workspace_description",
        descriptionFallback:
            "Keep your watchlist, signals, and analysis tools organized in one consistent experience.",
    },
];

type SharedProps = PageProps & {
    appName: string;
    auth: Auth;
    customerCount: number;
    marketPulse: MarketPulseItem[];
};

export default function Welcome() {
    const { t } = useI18n();
    const { auth, appName, customerCount, marketPulse: initialMarketPulse } =
        usePage<SharedProps>().props;

    const isAuthenticated = Boolean(auth.user);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
    const [marketPulse, setMarketPulse] = useState<MarketPulseItem[]>(
        initialMarketPulse?.length ? initialMarketPulse : marketDefaults,
    );

    useEffect(() => {
        let active = true;

        const refreshMarketPulse = async () => {
            try {
                const response = await fetch("/public/market-pulse", {
                    headers: { Accept: "application/json" },
                    credentials: "same-origin",
                });

                if (!response.ok) return;

                const payload = (await response.json()) as {
                    items?: MarketPulseItem[];
                };

                if (active && Array.isArray(payload.items) && payload.items.length) {
                    setMarketPulse(payload.items);
                }
            } catch {
                // Keep the last confirmed market snapshot visible.
            }
        };

        const timer = window.setInterval(refreshMarketPulse, 15_000);
        return () => {
            active = false;
            window.clearInterval(timer);
        };
    }, []);

    const formatPrice = (value: number | null) => {
        if (value === null || !Number.isFinite(value)) return "Unavailable";
        return new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD",
            maximumFractionDigits: value >= 1000 ? 2 : 4,
        }).format(value);
    };

    const formatChange = (value: number | null) => {
        if (value === null || !Number.isFinite(value)) return "—";
        return `${value >= 0 ? "+" : ""}${value.toFixed(2)}%`;
    };

    const btc = marketPulse.find((item) => item.symbol === "BTC/USDT");

    return (
        <LegacyTextLocalizer>
        <>
            <Head
                title={`${appName} — ${t("app.market_intelligence", "Market Analysis")}`}
            />

            <div className="min-h-screen overflow-x-hidden bg-background text-foreground selection:bg-success/20 selection:text-success-foreground">
                <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
                    <div className="absolute left-1/2 -top-88 h-168 w-2xl -translate-x-1/2 rounded-full bg-success/10 blur-3xl" />
                    <div className="absolute -right-56 top-128 h-120 w-120 rounded-full bg-info/8 blur-3xl" />
                    <div className="absolute inset-0 bg-[linear-gradient(rgba(148,163,184,.035)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,.035)_1px,transparent_1px)] bg-size-[64px_64px] mask-[linear-gradient(to_bottom,black,transparent_78%)]" />
                </div>

                <header className="relative z-10 border-b border-border/70 bg-background/75 backdrop-blur-xl">
                    <div className="mx-auto flex min-h-20 w-full max-w-7xl items-center justify-between gap-2 px-3 py-3 sm:h-20 sm:flex-nowrap sm:px-8">
                        <Link
                            href="/"
                            className="group flex min-w-0 items-center gap-2 sm:gap-3"
                        >
                            <span className="relative flex size-10 items-center justify-center overflow-hidden rounded-xl border border-success/20 bg-success/10 shadow-sm">
                                <TrendingUp className="size-5 text-success" />
                                <span className="absolute inset-x-2 bottom-1 h-px bg-success/50" />
                            </span>
                            <span>
                                <span className="block max-w-[10rem] truncate text-sm font-bold tracking-tight text-foreground sm:max-w-none sm:text-[15px]">
                                    {appName}
                                </span>
                                <span className="hidden text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground min-[390px]:block">
                                    {t(
                                        "app.market_intelligence",
                                        "Market Analysis",
                                    )}
                                </span>
                            </span>
                        </Link>

                        <nav className="hidden items-center gap-8 md:flex">
                            <a
                                href="#features"
                                className="text-sm text-muted-foreground transition hover:text-foreground"
                            >
                                {t("welcome.nav_features", "Features")}
                            </a>
                            <a
                                href="#markets"
                                className="text-sm text-muted-foreground transition hover:text-foreground"
                            >
                                {t("welcome.nav_markets", "Markets")}
                            </a>
                            <a
                                href="#workflow"
                                className="text-sm text-muted-foreground transition hover:text-foreground"
                            >
                                {t("welcome.nav_workflow", "Workflow")}
                            </a>
                        </nav>

                        <div className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-3">
                            <div className="hidden sm:block"><PublicLanguageSwitcher /></div>
                            {isAuthenticated ? (
                                <Link
                                    href={dashboard()}
                                    className="inline-flex items-center gap-2 rounded-xl border border-border bg-muted px-4 py-2.5 text-sm font-semibold text-foreground transition hover:border-success/30 hover:bg-muted/80"
                                >
                                    {t("welcome.dashboard", "Dashboard")}{" "}
                                    <ArrowRight className="size-4" />
                                </Link>
                            ) : (
                                <>
                                    <Link
                                        href={login()}
                                        className="hidden rounded-xl px-3 py-2.5 text-sm font-semibold text-foreground transition hover:text-foreground sm:inline-flex"
                                    >
                                        {t("welcome.login", "Sign in")}
                                    </Link>
                                    <Link
                                        href={register()}
                                        className="inline-flex items-center gap-2 rounded-xl bg-success px-4 py-2.5 text-sm font-bold text-success-foreground shadow-sm transition hover:bg-success/90"
                                    >
                                        {t("welcome.start_free", "Start Free")}{" "}
                                        <ArrowRight className="size-4" />
                                    </Link>
                                </>
                            )}
                            <Button
                                type="button"
                                variant="outline"
                                size="icon"
                                className="ml-0 size-10 md:hidden"
                                aria-label={mobileMenuOpen ? t("welcome.close_menu", "Close menu") : t("welcome.open_menu", "Open menu")}
                                aria-expanded={mobileMenuOpen}
                                aria-controls="welcome-mobile-navigation"
                                onClick={() => setMobileMenuOpen((open) => !open)}
                            >
                                {mobileMenuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
                            </Button>
                        </div>
                    </div>
                    {mobileMenuOpen && (
                        <nav
                            id="welcome-mobile-navigation"
                            aria-label={t("welcome.mobile_navigation", "Mobile navigation")}
                            className="border-t border-border/70 bg-background/95 px-3 py-3 shadow-lg backdrop-blur-xl md:hidden"
                        >
                            <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-2">
                                <a href="#features" onClick={() => setMobileMenuOpen(false)} className="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
                                    {t("welcome.nav_features", "Features")}
                                </a>
                                <a href="#markets" onClick={() => setMobileMenuOpen(false)} className="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
                                    {t("welcome.nav_markets", "Markets")}
                                </a>
                                <a href="#workflow" onClick={() => setMobileMenuOpen(false)} className="rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground">
                                    {t("welcome.nav_workflow", "Workflow")}
                                </a>
                                {!isAuthenticated && (
                                    <Link href={login()} onClick={() => setMobileMenuOpen(false)} className="rounded-lg px-3 py-2 text-sm font-semibold text-foreground hover:bg-muted">
                                        {t("welcome.login", "Sign in")}
                                    </Link>
                                )}
                                <div className="ml-auto max-w-full">
                                    <PublicLanguageSwitcher />
                                </div>
                            </div>
                        </nav>
                    )}
                </header>

                <main className="relative z-10">
                    <section className="mx-auto max-w-7xl px-5 pb-16 pt-14 sm:px-8 sm:pt-20 lg:pb-24 lg:pt-24">
                        <div className="grid items-center gap-12 lg:grid-cols-[1.02fr_.98fr] lg:gap-16">
                            <div>
                                <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-success/15 bg-success/7 px-3 py-1.5 text-xs font-semibold text-success">
                                    <span className="size-1.5 animate-pulse rounded-full bg-success" />
                                    {t(
                                        "welcome.live_workspace",
                                        "Live market workspace",
                                    )}
                                    <ChevronRight className="size-3.5 text-success/70" />
                                </div>

                                <h1 className="max-w-3xl text-4xl font-bold leading-[1.05] tracking-[-0.04em] text-foreground sm:text-6xl lg:text-7xl">
                                    {t(
                                        "welcome.hero_title",
                                        "Analyze with data.",
                                    )}
                                    <span className="block bg-linear-to-r from-success via-info to-info bg-clip-text text-transparent">
                                        {t(
                                            "welcome.hero_title_accent",
                                            "Not guesses.",
                                        )}
                                    </span>
                                </h1>

                                <p className="mt-6 max-w-xl text-base leading-7 text-muted-foreground sm:text-lg">
                                    {t("welcome.hero_description", {
                                        appName,
                                    })}
                                </p>

                                <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                                    <Link
                                        href={
                                            isAuthenticated
                                                ? dashboard()
                                                : register()
                                        }
                                        className="group inline-flex items-center justify-center gap-2 rounded-xl bg-success px-6 py-3.5 text-sm font-bold text-success-foreground shadow-sm transition hover:-translate-y-0.5 hover:bg-success/90"
                                    >
                                        {isAuthenticated
                                            ? t(
                                                  "welcome.open_dashboard",
                                                  "Open Dashboard",
                                              )
                                            : t(
                                                  "welcome.start_now",
                                                  "Get Started",
                                              )}
                                        <ArrowRight className="size-4 transition group-hover:translate-x-0.5" />
                                    </Link>
                                    <a
                                        href="#features"
                                        className="inline-flex items-center justify-center gap-2 rounded-xl border border-border bg-muted/60 px-6 py-3.5 text-sm font-semibold text-foreground transition hover:border-border hover:bg-muted"
                                    >
                                        {t(
                                            "welcome.explore_features",
                                            "Explore Features",
                                        )}
                                    </a>
                                </div>

                                <div className="mt-8 flex flex-wrap gap-x-6 gap-y-3 text-xs font-medium text-muted-foreground">
                                    <span className="inline-flex items-center gap-2">
                                        <Check className="size-4 text-success" />{" "}
                                        {t(
                                            "welcome.spot_futures",
                                            "Spot & Futures",
                                        )}
                                    </span>
                                    <span className="inline-flex items-center gap-2">
                                        <Check className="size-4 text-success" />{" "}
                                        {t(
                                            "welcome.multi_timeframe",
                                            "Multi-timeframe",
                                        )}
                                    </span>
                                    <span className="inline-flex items-center gap-2">
                                        <Check className="size-4 text-success" />{" "}
                                        {t(
                                            "welcome.personal_watchlist",
                                            "Personal watchlist",
                                        )}
                                    </span>
                                </div>

                                <div className="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3 text-xs text-muted-foreground">
                                    <div>
                                        <span className="font-bold text-foreground">
                                            {new Intl.NumberFormat("en-US").format(customerCount)}+
                                        </span>{" "}
                                        {t("welcome.registered_customers", "registered customers")}
                                    </div>
                                    <div className="h-3 w-px bg-border" />
                                    <div className="flex items-center gap-1.5">
                                        <span className="size-1.5 rounded-full bg-success" />
                                        {t("welcome.live_market_data", "Live market data")}
                                    </div>
                                    <div className="h-3 w-px bg-border" />
                                    <div>{t("welcome.analysis_first", "Analysis-first workspace")}</div>
                                </div>
                            </div>

                            <div className="relative">
                                <div className="absolute -inset-6 rounded-4xl bg-success/6 blur-3xl" />
                                <div className="relative overflow-hidden rounded-2xl border border-border bg-card/95 shadow-[0_30px_100px_rgba(0,0,0,.45)]">
                                    <div className="flex items-center justify-between border-b border-border/70 px-4 py-3.5">
                                        <div className="flex items-center gap-3">
                                            <div className="flex size-8 items-center justify-center rounded-lg bg-warning/10">
                                                <BarChart3 className="size-4 text-warning" />
                                            </div>
                                            <div>
                                                <div className="text-xs font-bold text-foreground">
                                                    {t("BTC/USDT")}</div>
                                                <div className="text-[10px] text-muted-foreground">
                                                    {t(
                                                        "welcome.bitcoin_spot",
                                                        "Bitcoin · Spot",
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="text-right">
                                            <div className="text-sm font-bold text-foreground">
                                                {formatPrice(btc?.price ?? null)}
                                            </div>
                                            <div className={`text-[10px] font-semibold ${(btc?.change_pct ?? 0) >= 0 ? "text-success" : "text-destructive"}`}>
                                                {formatChange(btc?.change_pct ?? null)} 24h
                                            </div>
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-4 border-b border-border/70">
                                        {[
                                            ["1m", false],
                                            ["15m", false],
                                            ["1h", true],
                                            ["4h", false],
                                        ].map(([label, active]) => (
                                            <span
                                                key={String(label)}
                                                className={`border-r border-border/50 px-3 py-2.5 text-center text-[10px] font-bold last:border-r-0 ${active ? "bg-success/10 text-success" : "text-muted-foreground"}`}
                                            >
                                                {String(label)}
                                            </span>
                                        ))}
                                    </div>

                                    <div className="h-56 p-4 sm:h-64">
                                        <MiniChart />
                                    </div>

                                    <div className="grid grid-cols-3 gap-px border-t border-border/70 bg-muted">
                                        {[
                                            [
                                                "RSI 14",
                                                "61.8",
                                                t("welcome.neutral", "Neutral"),
                                            ],
                                            [
                                                t("welcome.trend", "Trend"),
                                                t("welcome.bullish", "Bullish"),
                                                "1H",
                                            ],
                                            [
                                                t("welcome.volume", "Volume"),
                                                "↑ 18.4%",
                                                t("welcome.24h", "24h"),
                                            ],
                                        ].map(([label, value, sub]) => (
                                            <div
                                                key={label}
                                                className="bg-card px-3 py-3"
                                            >
                                                <div className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground">
                                                    {label}
                                                </div>
                                                <div className="mt-1 text-xs font-bold text-foreground">
                                                    {value}
                                                </div>
                                                <div className="mt-0.5 text-[9px] text-muted-foreground">
                                                    {sub}
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>

                                <div className="absolute -bottom-5 -left-5 hidden w-48 rounded-xl border border-border bg-card/95 p-3 shadow-2xl backdrop-blur-xl sm:block">
                                    <div className="flex items-center justify-between">
                                        <span className="text-[10px] font-semibold text-muted-foreground">
                                            {t(
                                                "welcome.market_signal",
                                                "MARKET SIGNAL",
                                            )}
                                        </span>
                                        <Sparkles className="size-3.5 text-success" />
                                    </div>
                                    <div className="mt-2 flex items-center gap-2">
                                        <span className="size-2 rounded-full bg-success shadow-sm" />
                                        <span className="text-xs font-bold text-foreground">
                                            {t(
                                                "welcome.momentum_detected",
                                                "Momentum detected",
                                            )}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section
                        id="markets"
                        className="border-y border-border/60 bg-card/60"
                    >
                        <div className="mx-auto max-w-7xl px-5 py-5 sm:px-8">
                            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
                                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.18em] text-muted-foreground">
                                    <Globe2 className="size-3.5" />{" "}
                                    {t("welcome.market_pulse", "Market pulse")}
                                    <span className="mx-1 h-3 w-px bg-border" />
                                    <span className="text-success">
                                        {new Intl.NumberFormat("en-US").format(customerCount)}+ {t("welcome.customers", "customers")}
                                    </span>
                                </div>
                                <div className="grid flex-1 gap-2 sm:grid-cols-3">
                                    {marketPulse.map((coin) => (
                                        <div
                                            key={coin.symbol}
                                            className="flex items-center justify-between rounded-lg border border-border/50 bg-card/70 px-3.5 py-2.5"
                                        >
                                            <div>
                                                <div className="text-xs font-bold text-foreground">
                                                    {coin.symbol}
                                                </div>
                                                <div className="text-[9px] text-muted-foreground">
                                                    {coin.name}
                                                </div>
                                            </div>
                                            <div className="text-right">
                                                <div className="text-xs font-semibold text-foreground">
                                                    {formatPrice(coin.price)}
                                                </div>
                                                <div className={`text-[9px] font-bold ${
                                                    (coin.change_pct ?? 0) >= 0
                                                        ? "text-success"
                                                        : "text-destructive"
                                                }`}>
                                                    {formatChange(coin.change_pct)}
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </section>

                    <section
                        id="features"
                        className="mx-auto max-w-7xl px-5 py-20 sm:px-8 lg:py-28"
                    >
                        <div className="max-w-2xl">
                            <span className="text-xs font-bold uppercase tracking-[0.2em] text-success">
                                {t(
                                    "welcome.built_for_traders",
                                    "Built for traders",
                                )}
                            </span>
                            <h2 className="mt-3 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                                {t(
                                    "welcome.features_title",
                                    "Everything you need to read the market, in one place.",
                                )}
                            </h2>
                            <p className="mt-4 text-sm leading-6 text-muted-foreground sm:text-base">
                                {t(
                                    "welcome.features_description",
                                    "A dark, focused, distraction-free interface that keeps data at the center of your attention.",
                                )}
                            </p>
                        </div>

                        <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                            {features.map((feature) => {
                                const Icon = feature.icon;
                                return (
                                    <div
                                        key={feature.titleKey}
                                        className="group rounded-2xl border border-border/70 bg-card/70 p-6 transition duration-300 hover:-translate-y-1 hover:border-success/20 hover:bg-muted"
                                    >
                                        <div className="flex size-11 items-center justify-center rounded-xl border border-success/10 bg-success/7">
                                            <Icon className="size-5 text-success" />
                                        </div>
                                        <h3 className="mt-5 text-sm font-bold text-foreground">
                                            {t(
                                                feature.titleKey,
                                                feature.titleFallback,
                                            )}
                                        </h3>
                                        <p className="mt-2 text-sm leading-6 text-muted-foreground">
                                            {t(
                                                feature.descriptionKey,
                                                feature.descriptionFallback,
                                            )}
                                        </p>
                                    </div>
                                );
                            })}
                        </div>
                    </section>

                    <section
                        id="workflow"
                        className="mx-auto max-w-7xl px-5 pb-20 sm:px-8 lg:pb-28"
                    >
                        <div className="overflow-hidden rounded-3xl border border-border/70 bg-linear-to-br from-success-400/8 via-white/2.5 to-info-400/4 p-7 sm:p-10 lg:p-14">
                            <div className="grid items-center gap-10 lg:grid-cols-[1fr_auto]">
                                <div>
                                    <div className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.18em] text-success">
                                        <Zap className="size-4" />{" "}
                                        {t(
                                            "welcome.analytic_workflow",
                                            "Your analytic workflow",
                                        )}
                                    </div>
                                    <h2 className="mt-3 max-w-2xl text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                                        {t(
                                            "welcome.workflow_title",
                                            "From market scan to chart analysis, more structured.",
                                        )}
                                    </h2>
                                    <p className="mt-4 max-w-xl text-sm leading-6 text-muted-foreground">
                                        {t(
                                            "welcome.workflow_description",
                                            "Choose an asset, monitor price action, save watchlists, enable indicators, and use relevant insights to build your own analysis process.",
                                        )}
                                    </p>
                                </div>
                                <Link
                                    href={
                                        isAuthenticated
                                            ? dashboard()
                                            : register()
                                    }
                                    className="inline-flex items-center justify-center gap-2 rounded-xl bg-success px-5 py-3 text-sm font-bold text-success-foreground shadow-sm transition hover:bg-success/90"
                                >
                                    {isAuthenticated
                                        ? t(
                                              "welcome.go_dashboard",
                                              "Go to Dashboard",
                                          )
                                        : t(
                                              "welcome.create_account",
                                              "Create Account",
                                          )}
                                    <ArrowRight className="size-4" />
                                </Link>
                            </div>
                        </div>
                    </section>
                </main>

                <footer className="relative z-10 border-t border-border/70">
                    <div className="mx-auto flex max-w-7xl flex-col gap-3 px-5 py-7 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:px-8">
                        <div className="flex items-center gap-2 font-semibold text-muted-foreground">
                            <span className="flex size-6 items-center justify-center rounded-md bg-success/10">
                                <TrendingUp className="size-3.5 text-success" />
                            </span>
                            {appName}
                        </div>
                        <p>
                            {t(
                                "welcome.footer_disclaimer",
                                "Market analysis is for informational purposes only. Use data responsibly.",
                            )}
                        </p>
                    </div>
                </footer>
            </div>
        </>
        </LegacyTextLocalizer>
    );
}