"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import {
  Shield, Zap, Brain, FileText, Radar, GitBranch, Lock, TrendingUp,
  ArrowRight, CheckCircle2, Sparkles, Eye, Target, BarChart3
} from "lucide-react";

const FEATURES = [
  {
    icon: Brain,
    title: "AI Risk Translation",
    desc: "CVE-2024-XXXX means nothing to your board. TrustOS translates every technical finding into plain-English business impact — automatically.",
  },
  {
    icon: GitBranch,
    title: "Attack Path Visualization",
    desc: "See exactly how an attacker chains your weaknesses together. Interactive attack graphs turn abstract risk into an undeniable picture.",
  },
  {
    icon: Radar,
    title: "Continuous Asset Scanning",
    desc: "Every domain, server, and cloud asset monitored around the clock. New exposures surface as findings within minutes, not months.",
  },
  {
    icon: Eye,
    title: "Executive Digital Footprint",
    desc: "Your leadership team is your biggest attack surface. Track credential leaks and public exposure for every executive.",
  },
  {
    icon: FileText,
    title: "One-Click Audit Reports",
    desc: "Board meeting tomorrow? Generate a polished, PDF-ready cyber resilience report in seconds — scores, trends, and top risks included.",
  },
  {
    icon: Sparkles,
    title: "AI Security Coach",
    desc: "Ask any finding anything. Your built-in AI coach explains the threat, the fix, and the priority — in language everyone understands.",
  },
];

const STATS = [
  { value: "89.2", label: "Avg. cyber health score achieved" },
  { value: "< 5 min", label: "From signup to first insight" },
  { value: "24/7", label: "Continuous exposure monitoring" },
  { value: "100%", label: "Findings translated for the board" },
];

const STEPS = [
  { n: "01", icon: Target, title: "Connect your assets", desc: "Enroll domains, cloud accounts, and executives. Authorized scope only — privacy by design." },
  { n: "02", icon: Radar, title: "We scan continuously", desc: "TrustOS maps your exposure, scores every asset, and flags what attackers would exploit first." },
  { n: "03", icon: TrendingUp, title: "Watch risk fall", desc: "Fix what matters, track your Cyber Health Score climb, and prove progress with audit-grade reports." },
];

export default function LandingPage() {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    setLoggedIn(!!localStorage.getItem("trustos_token"));
  }, []);

  const ctaHref = loggedIn ? "/dashboard" : "/login";
  const ctaLabel = loggedIn ? "Open Your Vault" : "Get Started Free";

  return (
    <div className="min-h-screen bg-vault-black text-vault-text overflow-x-hidden">
      {/* Nav */}
      <header className="fixed top-0 inset-x-0 z-50 bg-vault-black/80 backdrop-blur border-b border-vault-border">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-vault-sapphire/20 border border-vault-sapphire/40 flex items-center justify-center">
              <Shield className="w-4 h-4 text-vault-sapphire" />
            </div>
            <span className="text-lg font-bold tracking-tight">
              Trust<span className="text-vault-sapphire">OS</span>
            </span>
          </div>
          <nav className="hidden md:flex items-center gap-8 text-sm text-vault-subtle">
            <a href="#features" className="hover:text-vault-text transition-colors">Features</a>
            <a href="#how" className="hover:text-vault-text transition-colors">How It Works</a>
            <a href="#security" className="hover:text-vault-text transition-colors">Security</a>
          </nav>
          <Link href={ctaHref} className="btn-primary">
            {loggedIn ? "Dashboard" : "Sign In"} <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </header>

      {/* Hero */}
      <section className="relative pt-36 pb-24 px-6">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_#1e3a5f_0%,_#0a0d14_60%)] pointer-events-none" />
        <div className="relative max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-vault-sapphire/10 border border-vault-sapphire/30 text-vault-sapphireLight text-xs font-semibold mb-8">
            <Zap className="w-3.5 h-3.5" />
            AI-powered cyber resilience — live in minutes
          </div>
          <h1 className="text-4xl md:text-6xl font-bold leading-tight tracking-tight mb-6">
            Know your cyber risk.
            <br />
            <span className="text-vault-sapphireLight">Prove you&apos;re fixing it.</span>
          </h1>
          <p className="text-vault-subtle text-lg md:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">
            TrustOS is the AI operating system that turns raw vulnerabilities into a single
            Cyber Health Score your board understands — and a prioritized plan your IT team can execute.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link href={ctaHref} className="btn-primary text-base px-8 py-3">
              {ctaLabel} <ArrowRight className="w-4 h-4" />
            </Link>
            <Link href="/login" className="btn-ghost text-base px-8 py-3 border border-vault-border rounded-lg">
              Try the Live Demo
            </Link>
          </div>
          <p className="text-vault-muted text-xs mt-6">
            Demo access included · No credit card · Authorized assessments only
          </p>
        </div>

        {/* Score preview card */}
        <div className="relative max-w-3xl mx-auto mt-16">
          <div className="vault-card border-vault-sapphire/30 shadow-2xl">
            <div className="flex flex-col sm:flex-row items-center gap-8">
              <div className="relative w-36 h-36 flex-shrink-0">
                <svg viewBox="0 0 120 120" className="w-full h-full -rotate-90">
                  <circle cx="60" cy="60" r="52" fill="none" stroke="#2d3447" strokeWidth="10" />
                  <circle
                    cx="60" cy="60" r="52" fill="none" stroke="#3b82d4" strokeWidth="10"
                    strokeLinecap="round" strokeDasharray={`${89.2 * 3.267} 326.7`}
                  />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center rotate-0">
                  <span className="text-3xl font-bold text-vault-text">89.2</span>
                  <span className="text-vault-muted text-xs">Health Score</span>
                </div>
              </div>
              <div className="flex-1 text-left">
                <p className="text-vault-sapphireLight text-xs font-semibold uppercase tracking-wider mb-2">Live from the demo vault</p>
                <h3 className="text-xl font-semibold mb-2">One score. Total clarity.</h3>
                <p className="text-vault-subtle text-sm leading-relaxed">
                  Every finding, every asset, every executive exposure — distilled into a single number
                  that trends over 90 days. When the score goes up, you have proof. When it dips, you know why first.
                </p>
                <div className="flex items-center gap-2 mt-4 text-emerald-400 text-sm font-semibold">
                  <TrendingUp className="w-4 h-4" /> +6.8 pts in the last 30 days
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats bar */}
      <section className="border-y border-vault-border bg-vault-dark/50">
        <div className="max-w-6xl mx-auto px-6 py-10 grid grid-cols-2 md:grid-cols-4 gap-8">
          {STATS.map(s => (
            <div key={s.label} className="text-center">
              <p className="text-3xl font-bold text-vault-sapphireLight mb-1">{s.value}</p>
              <p className="text-vault-muted text-xs leading-snug">{s.label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Features */}
      <section id="features" className="max-w-6xl mx-auto px-6 py-24">
        <div className="text-center mb-14">
          <p className="text-vault-sapphireLight text-xs font-semibold uppercase tracking-wider mb-3">The Platform</p>
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Everything a security team needs.<br />Nothing a board can&apos;t read.</h2>
          <p className="text-vault-subtle max-w-2xl mx-auto">
            Six capabilities, one vault. Built for growing companies that need enterprise-grade resilience without an enterprise-grade security team.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {FEATURES.map(({ icon: Icon, title, desc }) => (
            <div key={title} className="vault-card hover:border-vault-sapphire/40 transition-colors group">
              <div className="w-10 h-10 rounded-lg bg-vault-sapphire/15 border border-vault-sapphire/30 flex items-center justify-center mb-4 group-hover:bg-vault-sapphire/25 transition-colors">
                <Icon className="w-5 h-5 text-vault-sapphire" />
              </div>
              <h3 className="font-semibold mb-2">{title}</h3>
              <p className="text-vault-muted text-sm leading-relaxed">{desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section id="how" className="border-y border-vault-border bg-vault-dark/30">
        <div className="max-w-6xl mx-auto px-6 py-24">
          <div className="text-center mb-14">
            <p className="text-vault-sapphireLight text-xs font-semibold uppercase tracking-wider mb-3">How It Works</p>
            <h2 className="text-3xl md:text-4xl font-bold">From blind spot to board-ready in three steps</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {STEPS.map(({ n, icon: Icon, title, desc }) => (
              <div key={n} className="relative vault-card">
                <span className="absolute -top-4 left-6 px-3 py-1 rounded-full bg-vault-sapphire text-white text-xs font-bold">{n}</span>
                <Icon className="w-6 h-6 text-vault-sapphire mb-4 mt-2" />
                <h3 className="font-semibold mb-2">{title}</h3>
                <p className="text-vault-muted text-sm leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Security / trust */}
      <section id="security" className="max-w-6xl mx-auto px-6 py-24">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-vault-sapphireLight text-xs font-semibold uppercase tracking-wider mb-3">Built Trustworthy</p>
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Security software that practices what it preaches</h2>
            <p className="text-vault-subtle leading-relaxed mb-8">
              Multi-tenant isolation, role-based access, encrypted transport, and authorized-scope-only
              assessments. Your data never trains anyone else&apos;s model, and your assessments never touch
              anything you haven&apos;t explicitly enrolled.
            </p>
            <Link href={ctaHref} className="btn-primary text-base px-8 py-3">
              {ctaLabel} <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {[
              { icon: Lock, label: "JWT auth + bcrypt hashing" },
              { icon: Shield, label: "Strict multi-tenant isolation" },
              { icon: BarChart3, label: "Role-based dashboards (3 roles)" },
              { icon: CheckCircle2, label: "Authorized scope only — always" },
            ].map(({ icon: Icon, label }) => (
              <div key={label} className="vault-card flex items-center gap-3 py-4">
                <Icon className="w-5 h-5 text-emerald-400 flex-shrink-0" />
                <span className="text-sm text-vault-subtle">{label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="border-t border-vault-border bg-[radial-gradient(ellipse_at_bottom,_#1e3a5f_0%,_#0a0d14_70%)]">
        <div className="max-w-3xl mx-auto px-6 py-24 text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-6">Your attackers already know your weaknesses.</h2>
          <p className="text-vault-subtle text-lg mb-10">It&apos;s time you did too. Open your vault and see your real exposure in under five minutes.</p>
          <Link href={ctaHref} className="btn-primary text-base px-10 py-3.5">
            {ctaLabel} <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-vault-border">
        <div className="max-w-6xl mx-auto px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2 text-sm text-vault-muted">
            <Shield className="w-4 h-4 text-vault-sapphire" />
            TrustOS — The AI Operating System for Cyber Resilience
          </div>
          <p className="text-vault-muted text-xs">Authorization required for all assessments · Privacy by design</p>
        </div>
      </footer>
    </div>
  );
}