import { createFileRoute } from '@tanstack/react-router'
import { CursorFieldProvider, FloatingButterfly } from '~/components/butterfly'
import '~/styles.css'

export const Route = createFileRoute('/')({
  head: () => ({
    meta: [
      { title: 'Paseo - Your dev environment, in your pocket' },
      {
        name: 'description',
        content:
          'Monitor and control your local AI coding agents from anywhere. Works with Claude Code and your existing setup.',
      },
    ],
  }),
  component: Home,
})

function Home() {
  return (
    <CursorFieldProvider>
      {/* Hero section with background image */}
      <div
        className="relative min-h-[80vh] bg-cover bg-center bg-no-repeat overflow-hidden"
        style={{ backgroundImage: 'url(/hero-bg.jpg)' }}
      >
        <div className="absolute inset-0 bg-background/80" />
        <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black to-transparent" />

        {/* Left side butterflies - facing right */}
        <FloatingButterfly
          style={{ left: '5%', top: '15%' }}
          size={38}
          color="#e8976b"
          delay={0}
          duration={0.45}
          direction="right"
        />
        <FloatingButterfly
          style={{ left: '8%', top: '45%' }}
          size={30}
          color="#f0c75e"
          delay={0.3}
          duration={0.55}
          direction="right"
        />
        <FloatingButterfly
          style={{ left: '3%', top: '70%' }}
          size={34}
          color="#d4728a"
          delay={0.15}
          duration={0.5}
          direction="left"
        />

        {/* Right side butterflies - facing left */}
        <FloatingButterfly
          style={{ right: '6%', top: '20%' }}
          size={32}
          color="#f5d86a"
          delay={0.2}
          duration={0.6}
          direction="left"
        />
        <FloatingButterfly
          style={{ right: '4%', top: '55%' }}
          size={40}
          color="#e07850"
          delay={0.1}
          duration={0.4}
          direction="left"
        />

        <div className="relative p-5 md:p-16 max-w-2xl mx-auto">
          <Nav />
          <Hero />
          <GetStarted />
        </div>
      </div>

      {/* Content section with black background */}
      <div className="bg-black">
        <main className="p-5 md:p-16 max-w-2xl mx-auto">
          <HowItWorks />
          <Features />
          <FAQ />
          <Footer />
        </main>
      </div>
    </CursorFieldProvider>
  )
}

function Nav() {
  return (
    <nav className="flex items-center justify-between mb-16">
      <div className="flex items-center gap-3">
        <img src="/logo.svg" alt="Paseo" className="w-7 h-7" />
        <span className="text-lg font-medium">paseo</span>
      </div>
      <div className="flex items-center gap-4">
        <a
          href="/docs"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          Docs
        </a>
        <a
          href="https://github.com/anthropics/claude-code"
          target="_blank"
          rel="noopener noreferrer"
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          GitHub
        </a>
      </div>
    </nav>
  )
}

function Hero() {
  return (
    <div className="space-y-6">
      <h1 className="text-4xl md:text-5xl font-medium tracking-tight font-serif">
        Your dev environment,
        <br />
        in your pocket
      </h1>
      <p className="text-white/70 text-lg leading-relaxed">
        The best ideas come when you're away from your desk. Paseo lets you
        talk to your coding agents from anywhere.
      </p>
    </div>
  )
}

function Differentiator({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (
    <div>
      <p className="font-medium text-sm">{title}</p>
      <p className="text-sm text-muted-foreground">{description}</p>
    </div>
  )
}

function HowItWorks() {
  return (
    <div className="space-y-6">
      <p className="text-white/60 leading-relaxed">
        Paseo connects to your actual development environment. Leverage your
        existing setup without moving your code to the cloud.
      </p>
    </div>
  )
}

function Features() {
  return (
    <div className="pt-12 space-y-6">
      <h2 className="text-2xl font-medium font-serif">What you get</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <Feature
          title="First-class voice"
          description="Dictation for prompts. Real-time voice to talk to agents hands-free."
        />
        <Feature
          title="Multi-host"
          description="Manage agents across multiple servers, like your laptop and a cloud VM."
        />
        <Feature
          title="Full dev tools"
          description="Browse files, view syntax-highlighted git diffs, run terminals."
        />
        <Feature
          title="Agent-first"
          description="Work across projects. Orchestrate multiple features at once."
        />
      </div>
    </div>
  )
}

function Feature({
  title,
  description,
}: {
  title: string
  description: string
}) {
  return (
    <div className="space-y-1">
      <p className="font-medium text-sm">{title}</p>
      <p className="text-sm text-white/60">{description}</p>
    </div>
  )
}

function GetStarted() {
  return (
    <div className="pt-10 space-y-6">
      <div className="space-y-4">
        <Step number={1}>
          <p className="text-sm">Install and run the server on your machine</p>
          <CodeBlock>npm install -g @paseohq/server && paseo</CodeBlock>
        </Step>
        <Step number={2}>
          <p className="text-sm pt-0.5">
            Open the app on your phone and connect to your local server
          </p>
        </Step>
        <Step number={3}>
          <p className="text-sm pt-0.5">
            Start managing your agents from anywhere
          </p>
        </Step>
      </div>
      <p className="text-sm text-white/70 pt-2">
        Free and open source. Works on iOS, Android, and web.
      </p>
    </div>
  )
}

function Step({
  number,
  children,
}: {
  number: number
  children: React.ReactNode
}) {
  return (
    <div className="flex gap-4">
      <span className="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-medium">
        {number}
      </span>
      <div className="space-y-2 flex-1">{children}</div>
    </div>
  )
}

function CodeBlock({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-card border border-border rounded-lg p-3 md:p-4 font-mono text-sm flex items-center justify-between gap-2">
      <div>
        <span className="text-muted-foreground select-none">$ </span>
        <span className="text-foreground">{children}</span>
      </div>
    </div>
  )
}

function FAQ() {
  return (
    <div className="pt-12 space-y-6">
      <h2 className="text-2xl font-medium font-serif">FAQ</h2>
      <div className="space-y-6">
        <FAQItem question="Is this free?">
          Paseo is free and open source. It wraps CLI tools like Claude Code and
          Codex, which you'll need to have installed and configured with your
          own credentials. Voice features currently require an OpenAI API key,
          but local voice is coming soon.
        </FAQItem>
        <FAQItem question="Does my code leave my machine?">
          Paseo itself doesn't send your code anywhere. Agents run locally and
          communicate with their own APIs as they normally would. We provide an
          optional end-to-end encrypted relay for remote access, but you can
          also connect directly over your local network or use your own tunnel.
        </FAQItem>
        <FAQItem question="What agents does it support?">
          Claude Code, Codex, and OpenCode.
        </FAQItem>
        <FAQItem question="What's the business model?">
          There isn't one. The app and server are free and open source, and
          that's not changing. I built this for myself. If I find a way to
          sustain it that benefits everyone, I'll consider it.
        </FAQItem>
        <FAQItem question="Why did you build this?">
          <p>
            I've been using Claude Code since launch. Early on I started SSHing
            into Tmux from Termux on Android so I could check on agents during
            my long walks. It worked, but the UX was rough. Dictation was bad,
            the keyboard was awkward, and the{' '}
            <a
              href="https://github.com/anthropics/claude-code/issues/826"
              target="_blank"
              rel="noopener noreferrer nofollow"
              className="underline hover:text-white/80"
            >
              infamous scroll bug
            </a>{' '}
            meant starting over constantly.
          </p>
          <p>
            Anthropic and OpenAI added coding agents to their mobile apps, but
            they force you into cloud sandboxes where you lose your whole setup.
            Other apps exist but I wasn't happy with their UX, security, or
            business model.
          </p>
          <p>
            So I built my own. It became good enough that it felt obvious it
            should exist for others too.
          </p>
        </FAQItem>
        <FAQItem question="Isn't this just more screen time?">
          I won't pretend this can't be misused. But for me it means less time
          at my desk, not more. I brainstorm whole features with voice. I kick
          off work at my desk, then check in from my phone during a walk. I see
          what an agent needs, send a voice reply, and put my phone away.
        </FAQItem>
      </div>
    </div>
  )
}

function FAQItem({
  question,
  children,
}: {
  question: string
  children: React.ReactNode
}) {
  return (
    <details className="group">
      <summary className="font-medium text-sm cursor-pointer list-none flex items-start gap-2">
        <span className="font-mono text-white/40 group-open:hidden">+</span>
        <span className="font-mono text-white/40 hidden group-open:inline">
          -
        </span>
        {question}
      </summary>
      <div className="text-sm text-white/60 space-y-2 mt-2 ml-4">
        {children}
      </div>
    </details>
  )
}

function Footer() {
  return (
    <footer className="mt-24 text-sm text-muted-foreground">
      <div>
        <a href="/docs" className="hover:text-foreground transition-colors">
          docs
        </a>
        <span className="mx-2">·</span>
        <a
          href="https://github.com/anthropics/claude-code"
          target="_blank"
          rel="noopener noreferrer"
          className="hover:text-foreground transition-colors"
        >
          github
        </a>
      </div>
    </footer>
  )
}