import { createFileRoute, Link } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { WhatsAppFloat } from "@/components/WhatsAppFloat";
import { ScrollReveal } from "@/components/ScrollReveal";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { ArrowRight, Shield, Zap, Users, Globe, Target, Eye } from "lucide-react";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Us — BLUEPEAK VAULT" },
      {
        name: "description",
        content:
          "BLUEPEAK VAULT is building the future of AI-native digital asset management. Learn about our mission, team, and values.",
      },
      { property: "og:title", content: "About Us — BLUEPEAK VAULT" },
      {
        property: "og:description",
        content: "Meet the team behind the most intelligent crypto portfolio platform.",
      },
    ],
  }),
  component: AboutPage,
});

const values = [
  {
    icon: Shield,
    title: "Security First",
    desc: "Every line of code is written with your asset security in mind. Read-only connections, bank-grade encryption, and row-level data isolation.",
  },
  {
    icon: Zap,
    title: "Speed & Precision",
    desc: "Real-time data across 120+ venues. Sub-second portfolio updates. AI recommendations that don't keep you waiting.",
  },
  {
    icon: Users,
    title: "User Obsession",
    desc: "We build for traders, fund managers, and retail investors alike. Every feature is battle-tested with real portfolios.",
  },
  {
    icon: Globe,
    title: "Open & Transparent",
    desc: "Read-only API integrations. No hidden fees. Clear risk disclosures. We earn trust through transparency.",
  },
];

const team = [
  {
    name: "Elena Kovacs",
    role: "CEO & Co-founder",
    avatar: "EK",
    bio: "Former quant at Citadel. 12 years in algorithmic trading.",
  },
  {
    name: "Marcus Chen",
    role: "CTO & Co-founder",
    avatar: "MC",
    bio: "Ex-Google Staff Engineer. Built infra serving 1B+ requests/day.",
  },
  {
    name: "Aisha Patel",
    role: "Head of AI",
    avatar: "AP",
    bio: "PhD ML @ Stanford. Led recommendation systems at Spotify.",
  },
  {
    name: "David Okonkwo",
    role: "Head of Security",
    avatar: "DO",
    bio: "Former CISO at Kraken. 15 years in cybersecurity.",
  },
  {
    name: "Sarah Lindqvist",
    role: "Head of Product",
    avatar: "SL",
    bio: "Ex-Coinbase product lead. Shipped products to 50M+ users.",
  },
  {
    name: "James Rodriguez",
    role: "Head of Growth",
    avatar: "JR",
    bio: "Scaled three crypto startups from 0 to Series B.",
  },
];

const milestones = [
  { year: "2023", event: "Founded in San Francisco with $2.5M pre-seed" },
  { year: "2024", event: "Launched beta. 5,000 users in first 30 days" },
  { year: "2025", event: "Series A — $18M led by a16z crypto. 50K+ users" },
  { year: "2026", event: "AI engine v2 launch. $4.2B+ assets tracked" },
];

function AboutPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <SiteHeader />
      <WhatsAppFloat />

      {/* Hero */}
      <section className="relative bg-gradient-hero">
        <div className="absolute inset-0 grid-bg opacity-30" />
        <div className="relative mx-auto max-w-7xl px-6 pt-20 pb-16 text-center">
          <ScrollReveal>
            <h1 className="font-display text-4xl md:text-6xl font-bold max-w-3xl mx-auto">
              We're building the <span className="text-gradient">intelligence layer</span> for
              crypto
            </h1>
            <p className="mt-6 max-w-2xl mx-auto text-lg text-muted-foreground">
              BLUEPEAK VAULT - A new era of Digital Asset Innovation, built for the future of
              Digital Wealth. We were founded on a simple belief: Every investor deserves
              institutional-grade tools. We combine AI, real-time data, and human expertise to make
              that a reality.
            </p>
          </ScrollReveal>
        </div>
      </section>

      {/* Mission */}
      <section className="py-24 mx-auto max-w-7xl px-6">
        <ScrollReveal>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <div className="text-xs font-mono text-accent uppercase tracking-widest">
                Our Mission
              </div>
              <h2 className="mt-3 font-display text-3xl md:text-4xl font-bold">
                Democratize institutional-grade portfolio intelligence
              </h2>
              <p className="mt-4 text-muted-foreground leading-relaxed">
                The gap between retail and institutional crypto investors is enormous. Institutions
                have quant teams, risk engines, and 24/7 monitoring. Retail investors are left with
                spreadsheets and gut feelings. We're closing that gap — with AI that never sleeps
                and advisors who actually care. <br></br>
                BluePeak Vault is a newly established digital assets
                company created to meet the growing global demand for secure, intelligent, and
                future-focused digital financial solutions. Founded during a transformative era in
                global finance, BluePeak Vault represents the next generation of companies shaping
                the future of blockchain technology, decentralized finance, and digital wealth
                management. <br></br>
                As a new entrant into the digital finance industry, BluePeak Vault is
                built with a modern-first approach — leveraging emerging technologies, adaptive
                infrastructure, and innovative financial strategies designed specifically for
                today’s rapidly evolving digital economy. <br></br>
                Unlike traditional financial firms
                adapting to digital transformation, BluePeak  Vault was created from the ground up as
                a digital-native company. Its foundation is rooted in innovation, security,
                scalability, and forward-thinking financial technology. <br></br>
                The company aims to provide
                individuals, businesses, and institutions with a trusted platform for managing,
                protecting, and growing digital assets within a secure and transparent ecosystem.
              </p>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <Card className="bg-gradient-card border-border/50 p-6 text-center">
                <Target className="h-8 w-8 text-primary mx-auto mb-3" />
                <div className="font-display text-3xl font-bold text-gradient">$4.2B+</div>
                <div className="text-xs text-muted-foreground mt-1">Assets Tracked</div>
              </Card>
              <Card className="bg-gradient-card border-border/50 p-6 text-center">
                <Eye className="h-8 w-8 text-accent mx-auto mb-3" />
                <div className="font-display text-3xl font-bold text-gradient">50K+</div>
                <div className="text-xs text-muted-foreground mt-1">Active Users</div>
              </Card>
              <Card className="bg-gradient-card border-border/50 p-6 text-center">
                <Globe className="h-8 w-8 text-primary mx-auto mb-3" />
                <div className="font-display text-3xl font-bold text-gradient">120+</div>
                <div className="text-xs text-muted-foreground mt-1">Integrations</div>
              </Card>
              <Card className="bg-gradient-card border-border/50 p-6 text-center">
                <Shield className="h-8 w-8 text-accent mx-auto mb-3" />
                <div className="font-display text-3xl font-bold text-gradient">99.99%</div>
                <div className="text-xs text-muted-foreground mt-1">Uptime SLA</div>
              </Card>
            </div>
          </div>
        </ScrollReveal>
      </section>

      {/* Values */}
      <section className="py-24 bg-gradient-hero">
        <div className="mx-auto max-w-7xl px-6">
          <ScrollReveal>
            <div className="text-center mb-16">
              <div className="text-xs font-mono text-accent uppercase tracking-widest">
                Our Values
              </div>
              <h2 className="mt-3 font-display text-3xl md:text-4xl font-bold">
                What drives us every day
              </h2>
            </div>
          </ScrollReveal>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {values.map((v, i) => (
              <ScrollReveal key={v.title} delay={i * 0.1}>
                <Card className="bg-gradient-card border-border/50 p-6 h-full hover:border-accent/50 transition">
                  <v.icon className="h-8 w-8 text-primary mb-4" />
                  <h3 className="font-display text-lg font-semibold">{v.title}</h3>
                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{v.desc}</p>
                </Card>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-24 mx-auto max-w-3xl px-6">
        <ScrollReveal>
          <div className="text-center mb-16">
            <div className="text-xs font-mono text-accent uppercase tracking-widest">
              Our Journey
            </div>
            <h2 className="mt-3 font-display text-3xl md:text-4xl font-bold">
              From idea to industry leader
            </h2>
          </div>
        </ScrollReveal>
        <div className="space-y-8">
          {milestones.map((m, i) => (
            <ScrollReveal key={m.year} delay={i * 0.1}>
              <div className="flex items-start gap-6">
                <div className="font-mono text-2xl font-bold text-gradient shrink-0 w-16">
                  {m.year}
                </div>
                <div className="flex-1 border-l border-border/50 pl-6 pb-2">
                  <p className="text-muted-foreground">{m.event}</p>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </section>

      {/* Team */}
      <section className="py-24 bg-gradient-hero">
        <div className="mx-auto max-w-7xl px-6">
          <ScrollReveal>
            <div className="text-center mb-16">
              <div className="text-xs font-mono text-accent uppercase tracking-widest">
                Leadership
              </div>
              <h2 className="mt-3 font-display text-3xl md:text-4xl font-bold">Meet the team</h2>
            </div>
          </ScrollReveal>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {team.map((t, i) => (
              <ScrollReveal key={t.name} delay={i * 0.08}>
                <Card className="bg-gradient-card border-border/50 p-6 text-center hover:border-accent/50 transition">
                  <div className="h-16 w-16 rounded-full bg-gradient-primary flex items-center justify-center text-xl font-bold text-primary-foreground mx-auto mb-4">
                    {t.avatar}
                  </div>
                  <h3 className="font-display text-lg font-semibold">{t.name}</h3>
                  <div className="text-sm text-accent mt-1">{t.role}</div>
                  <p className="mt-3 text-xs text-muted-foreground">{t.bio}</p>
                </Card>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24">
        <ScrollReveal>
          <div className="mx-auto max-w-3xl px-6 text-center">
            <h2 className="font-display text-3xl md:text-4xl font-bold">Want to join us?</h2>
            <p className="mt-4 text-muted-foreground">
              We're always looking for exceptional people who want to shape the future of digital
              finance.
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <Button asChild className="bg-gradient-primary text-primary-foreground shadow-glow">
                <Link to="/jobs">
                  View open positions <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button asChild variant="outline">
                <Link to="/contact">Contact us</Link>
              </Button>
            </div>
          </div>
        </ScrollReveal>
      </section>

      <footer className="border-t border-border/40 py-10">
        <div className="mx-auto max-w-7xl px-6 flex flex-wrap justify-between gap-4 text-xs text-muted-foreground">
          <div>© 2026 BLUEPEAK VAULT. Not financial advice.</div>
          <div className="flex gap-4">
            <Link to="/privacy" className="hover:text-foreground">
              Privacy
            </Link>
            <Link to="/terms" className="hover:text-foreground">
              Terms
            </Link>
            <Link to="/" className="hover:text-foreground">
              Home
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}