import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, AudioLines, Bot, Cloud, ShieldCheck, Sparkles, Zap, Lock, Globe } from "lucide-react";
import hero from "@/assets/home-hero.jpg";
import { useAuth } from "@/hooks/use-auth";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Codesynux — Autonomous AI Platform" },
      { name: "description", content: "Talk to Echo, run autonomous agents, scan security and deploy to the cloud — all in one Codesynux platform." },
      { property: "og:title", content: "Codesynux — Autonomous AI Platform" },
      { property: "og:description", content: "Live voice agents, autonomous systems, cybersecurity and cloud deployment in one place." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Home,
});

const FEATURES = [
  { to: "/echo", icon: AudioLines, name: "Echo Voice", tag: "Talk. Build. Publish.", text: "A live voice call with Echo that builds websites while you speak and publishes them in seconds." },
  { to: "/autonomous", icon: Bot, name: "Autonomous Systems", tag: "Think with an agent", text: "Chat, plan, research and code by typing, dictating, live voice or a face-to-face video call." },
  { to: "/security", icon: ShieldCheck, name: "Cybersecurity", tag: "Guard what you ship", text: "Security scans for your published sites, with clear fixes explained by a security agent." },
  { to: "/cloud", icon: Cloud, name: "Codesynux Cloud", tag: "Deploy & store code", text: "Live deployments and CodeHub — private storage for your code projects." },
] as const;

const QUOTES = [
  { q: "Speak an idea. Watch it go live.", by: "The Echo promise" },
  { q: "Autonomy is speed with judgment.", by: "Codesynux principle" },
  { q: "Security is a feature you ship every day.", by: "Codesynux principle" },
];

function Home() {
  const { user } = useAuth();
  return (
    <main className="overflow-hidden">
      <section className="relative mx-auto flex max-w-7xl flex-col items-center gap-8 px-4 pb-16 pt-10 text-center md:pt-16">
        <img src={hero} alt="Glowing Codesynux AI core" width={1600} height={1008} className="pointer-events-none absolute left-1/2 top-0 -z-10 w-[160%] max-w-none -translate-x-1/2 animate-float opacity-70 md:w-[110%]" style={{ maskImage: "radial-gradient(ellipse at center, black 35%, transparent 72%)", WebkitMaskImage: "radial-gradient(ellipse at center, black 35%, transparent 72%)" }} />
        <span className="animate-fade-up inline-flex items-center gap-2 rounded-full border border-border bg-card/70 px-4 py-1.5 font-mono text-xs uppercase tracking-[0.2em] text-muted-foreground backdrop-blur">
          <Sparkles className="h-3.5 w-3.5 text-primary" /> Autonomous AI platform
        </span>
        <h1 className="animate-fade-up max-w-4xl text-5xl font-bold leading-[1.05] tracking-tight md:text-7xl" style={{ animationDelay: "120ms" }}>
          Build, guard and ship with <span className="text-brand">Codesynux</span>
        </h1>
        <p className="animate-fade-up max-w-xl text-lg text-muted-foreground" style={{ animationDelay: "240ms" }}>
          Voice agents that code, autonomous systems that plan and research, security that watches your sites, and a cloud that deploys them.
        </p>
        <div className="animate-fade-up flex flex-wrap justify-center gap-3" style={{ animationDelay: "360ms" }}>
          <Link to={user ? "/echo" : "/profile"} className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 font-semibold text-primary-foreground shadow-glow transition hover:scale-[1.03]">
            {user ? "Talk to Echo" : "Get started"} <ArrowRight className="h-4 w-4" />
          </Link>
          <a href="#explore" className="rounded-full border border-border bg-card/70 px-6 py-3 font-semibold backdrop-blur transition hover:border-primary">Explore what we do</a>
        </div>
        <div className="mt-32 grid w-full max-w-3xl grid-cols-3 gap-3 md:mt-48">
          {[{ i: Zap, t: "Live voice" }, { i: Lock, t: "Private by default" }, { i: Globe, t: "One-tap publish" }].map((x, n) => (
            <div key={x.t} className="animate-fade-up rounded-2xl border border-border bg-card/70 p-4 backdrop-blur" style={{ animationDelay: `${450 + n * 100}ms` }}>
              <x.i className="mx-auto mb-2 h-5 w-5 text-primary" />
              <p className="text-sm font-medium">{x.t}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="explore" className="mx-auto max-w-7xl scroll-mt-20 px-4 py-16">
        <p className="reveal font-mono text-xs uppercase tracking-[0.25em] text-primary">Explore what we do</p>
        <h2 className="reveal mt-2 text-3xl font-bold tracking-tight md:text-5xl">Four systems. One platform.</h2>
        <div className="mt-10 grid gap-4 md:grid-cols-2">
          {FEATURES.map((f, n) => (
            <Link key={f.to} to={user ? f.to : "/profile"} className="group reveal relative overflow-hidden rounded-3xl border border-border bg-card p-6 transition duration-300 hover:-translate-y-1 hover:border-primary" style={{ ["--reveal-delay" as string]: `${n * 110}ms` }}>
              <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-brand opacity-10 blur-2xl transition group-hover:opacity-30" />
              <span className="font-mono text-xs text-muted-foreground">0{n + 1}</span>
              <div className="mt-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand text-primary-foreground"><f.icon className="h-6 w-6" /></div>
              <h3 className="mt-4 text-2xl font-bold">{f.name}</h3>
              <p className="text-sm text-primary">{f.tag}</p>
              <p className="mt-2 text-muted-foreground">{f.text}</p>
              <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold">{user ? "Open" : "Sign in to open"} <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" /></span>
            </Link>
          ))}
        </div>
      </section>

      <section className="mx-auto grid max-w-7xl gap-4 px-4 pb-20 md:grid-cols-3">
        {QUOTES.map((q, n) => (
          <figure key={q.q} style={{ ["--reveal-delay" as string]: `${n * 120}ms` }} className="reveal rounded-3xl transition hover:-translate-y-1 hover:border-primary border border-border bg-card p-6">
            <blockquote className="text-xl font-semibold leading-snug">“{q.q}”</blockquote>
            <figcaption className="mt-3 font-mono text-xs uppercase tracking-wider text-muted-foreground">{q.by}</figcaption>
          </figure>
        ))}
      </section>

      <footer className="reveal border-t border-border py-8 text-center font-mono text-xs text-muted-foreground">© {new Date().getFullYear()} Codesynux</footer>
    </main>
  );
}