import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
// import { SignedIn, SignedOut } from "@clerk/clerk-react";
import { Clock3, LineChart, PanelsTopLeft, PenSquare, ShieldCheck, Sparkles, Zap } from "lucide-react";
import { useNavigate } from "react-router-dom";
import "./Landing.css";

const stats = [
    { label: "Teams ship faster", value: "12K+" },
    { label: "Memos crafted", value: "480K" },
    { label: "Sync uptime", value: "99.9%" },
];

const features = [
    {
        title: "Realtime canvas",
        description: "Compose, link, and reorganize ideas with multiplayer cursors and keyboard-first controls.",
        tone: "violet",
        icon: PanelsTopLeft,
    },
    {
        title: "AI co-editor",
        description: "Summaries, briefs, and rewrite suggestions powered by an on-brand prompt library.",
        tone: "rose",
        icon: Sparkles,
    },
    {
        title: "Encrypted workspace",
        description: "Zero-knowledge sync, role-based access, and audit trails baked in by default.",
        tone: "emerald",
        icon: ShieldCheck,
    },
    {
        title: "Instant capture",
        description: "Drop thoughts from inbox, voice, or web clipper — we auto-tag and group for you.",
        tone: "sky",
        icon: PenSquare,
    },
    {
        title: "Insightful timelines",
        description: "Spot trends across projects with activity heatmaps, streaks, and velocity snapshots.",
        tone: "amber",
        icon: LineChart,
    },
    {
        title: "Lightning performance",
        description: "Start typing in under 400ms, offline-first caching, and diff-friendly exports.",
        tone: "blue",
        icon: Zap,
    },
];

const steps = [
    {
        title: "Capture beautifully",
        description: "Write or drop anything — quick actions, slash commands, and AI clean-up keep flow uninterrupted.",
    },
    {
        title: "Organize automatically",
        description: "Smart tags, relations, and saved views keep every memo discoverable without manual foldering.",
    },
    {
        title: "Publish with confidence",
        description: "Share live docs, embed cards, or export PDFs. Permissions and history stay attached.",
    },
];

const Landing = () => {
    const navigate = useNavigate();

    return (
        <div className="landing-shell">
            <div className="landing-bg">
                <div className="gradient-blob orb-a" />
                <div className="gradient-blob orb-b" />
                <div className="gradient-blob orb-c" />
            </div>

            <header className="landing-topbar">
                <div className="landing-container topbar-inner">
                    <div className="brand">
                        <div className="brand-mark" aria-hidden="true">
                            <span className="mark-glow" />
                            <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="32" height="32" rx="8" fill="url(#landingGradient)" />
                                <path d="M10 16L14 20L22 12" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                                <defs>
                                    <linearGradient id="landingGradient" x1="0" y1="0" x2="32" y2="32">
                                        <stop stopColor="#6366f1" />
                                        <stop offset="1" stopColor="#8b5cf6" />
                                    </linearGradient>
                                </defs>
                            </svg>
                        </div>
                        <div className="brand-copy">
                            <p className="brand-name">BasicNotion</p>
                            <p className="brand-tagline">Crafted memos, powered by AI</p>
                        </div>
                    </div>
                    <nav className="top-actions">
                        <Button size="sm" onClick={() => navigate("/app")}>
                            Test App
                        </Button>
                    </nav>
                </div>
            </header>

            <main className="landing-main">
                <section className="hero-section">
                    <div className="landing-container hero-grid">
                        <div className="hero-copy">
                            <Badge variant="secondary" className="hero-pill">
                                <Sparkles className="size-4" />
                                Giao diện shadcn mới
                            </Badge>
                            <h1 className="hero-title">
                                Ghi chú nhanh, <span className="title-accent">trình bày sang xịn</span> như một sản phẩm đã hoàn thiện.
                            </h1>
                            <p className="hero-subtitle">
                                Một landing shadcn gọn gàng, nền gradient, thẻ glassy, và CTA rõ ràng. Lướt mượt, dùng dễ, tập trung vào nội dung.
                            </p>
                            <div className="hero-actions">
                                <Button size="lg" className="cta-strong" onClick={() => navigate("/app")}>
                                    Vào Dashboard (Test Mode) <ArrowRightIcon />
                                </Button>
                            </div>
                            <div className="hero-meta">
                                {stats.map((item) => (
                                    <div className="stat-chip" key={item.label}>
                                        <p className="stat-value">{item.value}</p>
                                        <p className="stat-label">{item.label}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div className="hero-showcase">
                            <div className="glass-panel">
                                <div className="panel-header">
                                    <div className="panel-pill">
                                        <ShieldCheck className="size-4" />
                                        Private by default
                                    </div>
                                    <Badge variant="outline" className="panel-badge">
                                        Live sync
                                    </Badge>
                                </div>
                                <div className="panel-body">
                                    <div className="panel-row">
                                        <div className="panel-dot hot" />
                                        <div>
                                            <p className="panel-title">AI Briefing</p>
                                            <p className="panel-desc">Summaries stay on-device with encrypted sync.</p>
                                        </div>
                                        <span className="panel-tag">Realtime</span>
                                    </div>
                                    <div className="panel-row">
                                        <div className="panel-dot" />
                                        <div>
                                            <p className="panel-title">Ideas inbox</p>
                                            <p className="panel-desc">Clip from mobile, web, or email — auto-tagged.</p>
                                        </div>
                                        <span className="panel-tag">Auto</span>
                                    </div>
                                    <div className="panel-row compact">
                                        <div className="panel-progress">
                                            <span style={{ width: "76%" }} />
                                        </div>
                                        <p className="panel-footnote">
                                            <Clock3 className="size-4" />
                                            Response SLA: 420ms
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div className="glass-panel secondary">
                                <div className="panel-stack">
                                    <div className="stack-chip">
                                        <Sparkles className="size-4" />
                                        Smart suggestions
                                    </div>
                                    <div className="stack-chip alt">
                                        <PenSquare className="size-4" />
                                        Inline edits
                                    </div>
                                    <div className="stack-chip alt">
                                        <LineChart className="size-4" />
                                        Trends
                                    </div>
                                </div>
                                <p className="panel-subcopy">Shadcn spacing, rounded cards, và màu sắc pastel để UI nhẹ mà vẫn sắc.</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="feature-section">
                    <div className="landing-container">
                        <div className="section-heading">
                            <Badge variant="outline" className="heading-pill">
                                Feature stack
                            </Badge>
                            <h2>Đầy đủ công cụ để ghi chú đẹp, rõ, và chuẩn</h2>
                            <p className="section-subtitle">
                                Lưới thẻ shadcn với icon lucide, tone màu nhã, hover nổi khối. Mọi thứ đọc nhanh, tập trung vào giá trị.
                            </p>
                        </div>
                        <div className="feature-grid">
                            {features.map((feature) => {
                                const Icon = feature.icon;
                                return (
                                    <div className={`feature-card tone-${feature.tone}`} key={feature.title}>
                                        <div className="feature-icon">
                                            <Icon className="size-5" />
                                        </div>
                                        <div className="feature-content">
                                            <h3>{feature.title}</h3>
                                            <p>{feature.description}</p>
                                        </div>
                                        <span className="feature-tag">shadcn · lucide · smooth</span>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </section>

                <section className="steps-section">
                    <div className="landing-container steps-grid">
                        <div className="section-heading">
                            <Badge className="heading-pill" variant="secondary">
                                Flow chuẩn chỉnh
                            </Badge>
                            <h2>Từ ý tưởng đến tài liệu đẹp trong 3 bước</h2>
                            <p className="section-subtitle">
                                CTA rõ ràng, thẻ glassy, và copy ngắn gọn để người dùng biết phải làm gì tiếp theo.
                            </p>
                            <div className="steps-actions">
                                <Button size="lg" onClick={() => navigate("/app")}>
                                    Vào App Ngay
                                </Button>
                            </div>
                        </div>
                        <div className="steps-cards">
                            {steps.map((step, index) => (
                                <div className="step-card" key={step.title}>
                                    <div className="step-number">{index + 1}</div>
                                    <div>
                                        <p className="step-title">{step.title}</p>
                                        <p className="step-desc">{step.description}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
            </main>

            <footer className="landing-footer">
                <div className="landing-container footer-inner">
                    <div className="footer-brand">
                        <div className="brand">
                            <div className="brand-mark" aria-hidden="true">
                                <span className="mark-glow" />
                                <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="32" height="32" rx="8" fill="url(#landingGradient)" />
                                    <path d="M10 16L14 20L22 12" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                            <div className="brand-copy">
                                <p className="brand-name">BasicNotion</p>
                                <p className="brand-tagline">Ghi chú sáng, UI xịn.</p>
                            </div>
                        </div>
                        <p className="footer-subtitle">Thiết kế shadcn nhẹ nhàng, gradient êm, tối ưu cho desktop lẫn mobile.</p>
                    </div>
                    <div className="footer-actions">
                        <Button size="lg" className="cta-strong" onClick={() => navigate("/app")}>
                            Vào App (Test)
                        </Button>
                    </div>
                </div>
            </footer>
        </div>
    );
};

const ArrowRightIcon = () => (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.167 10h11.666M10 4.167L15.833 10 10 15.833" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
);

export default Landing;
