export default function Home() {
  return (
    <main className="min-h-screen bg-[#0a0a0a] text-white">

      {/* Nav */}
      <nav className="fixed top-0 w-full z-50 border-b border-white/5 bg-[#0a0a0a]/80 backdrop-blur-md">
        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
          <span className="text-xl font-bold tracking-tight">fibe</span>
          <div className="hidden md:flex items-center gap-8 text-sm text-white/60">
            <a href="#features" className="hover:text-white transition-colors">Features</a>
            <a href="#how" className="hover:text-white transition-colors">How it works</a>
            <a href="#stack" className="hover:text-white transition-colors">Stack</a>
          </div>
          <a
            href="https://next.fibe.live"
            className="text-sm bg-white text-black font-semibold px-4 py-2 rounded-lg hover:bg-white/90 transition-colors"
          >
            Get started
          </a>
        </div>
      </nav>

      {/* Hero */}
      <section className="pt-40 pb-24 px-6">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 text-xs font-medium text-white/50 border border-white/10 rounded-full px-4 py-1.5 mb-8">
            <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
            Docker-native fullstack orchestration
          </div>
          <h1 className="text-5xl md:text-7xl font-black tracking-tight leading-[1.05] mb-6">
            Ship faster.<br />
            <span className="text-white/30">Break less.</span>
          </h1>
          <p className="text-lg md:text-xl text-white/50 max-w-2xl mx-auto mb-10 leading-relaxed">
            Fibe spins up production-like fullstack environments in seconds.
            Git push. Done. No DevOps degree required.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <a
              href="https://next.fibe.live"
              className="bg-white text-black font-bold px-8 py-3.5 rounded-xl hover:bg-white/90 transition-all hover:scale-[1.02] text-sm"
            >
              Start for free
            </a>
            <a
              href="https://github.com/fibegg"
              className="border border-white/15 text-white/70 font-semibold px-8 py-3.5 rounded-xl hover:border-white/30 hover:text-white transition-all text-sm"
            >
              View on GitHub
            </a>
          </div>
        </div>
      </section>

      {/* Terminal snippet */}
      <section className="pb-24 px-6">
        <div className="max-w-2xl mx-auto">
          <div className="rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
            <div className="flex items-center gap-1.5 px-4 py-3 border-b border-white/5">
              <span className="w-3 h-3 rounded-full bg-red-500/60"></span>
              <span className="w-3 h-3 rounded-full bg-yellow-500/60"></span>
              <span className="w-3 h-3 rounded-full bg-green-500/60"></span>
              <span className="ml-3 text-xs text-white/30 font-mono">terminal</span>
            </div>
            <div className="p-6 font-mono text-sm leading-7">
              <p><span className="text-white/30">$</span> <span className="text-green-400">brew install fibegg/sdk/fibe</span></p>
              <p><span className="text-white/30">$</span> <span className="text-blue-400">fibe pg create</span> <span className="text-white/60">--name my-app</span></p>
              <p className="text-white/40">  Launching playground... <span className="text-green-400">done</span></p>
              <p className="text-white/40">  URL: <span className="text-white/70">https://my-app.fibe.me</span></p>
              <p><span className="text-white/30">$</span> <span className="text-purple-400">git push</span> <span className="text-white/60">&amp;&amp; done.</span></p>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="py-24 px-6 border-t border-white/5">
        <div className="max-w-6xl mx-auto">
          <p className="text-xs font-semibold text-white/30 uppercase tracking-widest text-center mb-4">Features</p>
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Everything you need. Nothing you don&apos;t.</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                icon: '⚡',
                title: 'Instant Playgrounds',
                desc: 'Full docker-compose environments live in under 60 seconds. Every branch, every PR.'
              },
              {
                icon: '🔀',
                title: 'Git-native workflow',
                desc: 'Connect any GitHub or Gitea repo. Push code, watch it live. No config files to fight.'
              },
              {
                icon: '🌐',
                title: 'Auto SSL & routing',
                desc: 'Traefik-powered subdomains with Let\'s Encrypt SSL out of the box. Zero ops.'
              },
              {
                icon: '🐳',
                title: 'Docker all the way',
                desc: 'Your compose file is the spec. Fibe orchestrates the rest — on your own VPS or ours.'
              },
              {
                icon: '🤖',
                title: 'AI Genies',
                desc: 'Autonomous agents that build, debug and deploy inside your Playgrounds.'
              },
              {
                icon: '🔒',
                title: 'Secrets management',
                desc: 'Encrypted key-value store. Inject env vars into any service without touching code.'
              },
            ].map(({ icon, title, desc }) => (
              <div key={title} className="p-6 rounded-xl border border-white/8 bg-white/[0.02] hover:bg-white/[0.04] transition-colors">
                <div className="text-2xl mb-4">{icon}</div>
                <h3 className="font-semibold text-white mb-2">{title}</h3>
                <p className="text-sm text-white/50 leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="how" className="py-24 px-6 border-t border-white/5">
        <div className="max-w-3xl mx-auto">
          <p className="text-xs font-semibold text-white/30 uppercase tracking-widest text-center mb-4">How it works</p>
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Three steps to live.</h2>
          <div className="space-y-6">
            {[
              { n: '01', title: 'Connect a repo', desc: 'Link your GitHub or Gitea repository as a Prop. Fibe tracks every branch.' },
              { n: '02', title: 'Launch a Playground', desc: 'Pick a Marquee (your VPS), choose a Playspec, hit launch. Docker does the rest.' },
              { n: '03', title: 'Push and iterate', desc: 'Your Playground hot-reloads on every push. Share the URL with your team instantly.' },
            ].map(({ n, title, desc }) => (
              <div key={n} className="flex gap-6 p-6 rounded-xl border border-white/8 bg-white/[0.02]">
                <span className="text-3xl font-black text-white/10 shrink-0 w-12">{n}</span>
                <div>
                  <h3 className="font-semibold text-white mb-1">{title}</h3>
                  <p className="text-sm text-white/50 leading-relaxed">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stack */}
      <section id="stack" className="py-24 px-6 border-t border-white/5">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-xs font-semibold text-white/30 uppercase tracking-widest mb-4">Built on boring tech</p>
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Battle-tested stack.</h2>
          <p className="text-white/50 mb-12">We don&apos;t chase hype. We chase reliability.</p>
          <div className="flex flex-wrap justify-center gap-3">
            {['Docker', 'docker-compose', 'Traefik', 'Let\'s Encrypt', 'Go', 'PostgreSQL', 'Git', 'SSH'].map(t => (
              <span key={t} className="px-4 py-2 rounded-lg border border-white/10 text-sm text-white/60 font-mono">{t}</span>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 px-6 border-t border-white/5">
        <div className="max-w-2xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-black mb-4">Ready to fibe?</h2>
          <p className="text-white/50 mb-8">Your first Playground is free. No credit card.</p>
          <a
            href="https://next.fibe.live"
            className="inline-block bg-white text-black font-bold px-10 py-4 rounded-xl hover:bg-white/90 transition-all hover:scale-[1.02] text-base"
          >
            Start building
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-6 border-t border-white/5">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-white/30">
          <span className="font-bold text-white/50">fibe</span>
          <span>© 2026 Fibe. Ship faster. Break less.</span>
          <div className="flex gap-6">
            <a href="https://github.com/fibegg" className="hover:text-white transition-colors">GitHub</a>
            <a href="https://next.fibe.live" className="hover:text-white transition-colors">App</a>
          </div>
        </div>
      </footer>

    </main>
  )
}