export default function Home() {
  return (
    <main className="bg-fibe grid-overlay min-h-screen text-white relative overflow-hidden">

      {/* Ambient orbs */}
      <div className="glow-orb" style={{width:700,height:700,background:'radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%)',top:-200,right:-150}} />
      <div className="glow-orb" style={{width:500,height:500,background:'radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 70%)',bottom:'15%',left:-150}} />
      <div className="glow-orb" style={{width:400,height:400,background:'radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 70%)',top:'55%',right:'5%'}} />

      {/* ── NAV ── */}
      <nav className="fixed top-0 w-full z-50 glass" style={{borderBottom:'1px solid rgba(139,92,246,0.1)'}}>
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          {/* Phoenix logo */}
          <div className="flex items-center gap-2.5">
            <div className="relative w-8 h-8">
              <div className="w-8 h-8 rounded-xl flex items-center justify-center text-sm font-black"
                style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)', boxShadow:'0 0 16px rgba(139,92,246,0.4)'}}>
                <span className="animate-flame-out absolute"
                  style={{top:'50%',left:'50%',transform:'translate(-50%,-50%)',fontSize:'13px',lineHeight:1}}>
                  ƒ
                </span>
              </div>
            </div>
            <span className="text-lg font-bold tracking-tight" style={{letterSpacing:'-0.02em'}}>fibe</span>
          </div>

          <div className="hidden md:flex items-center gap-7 text-sm" style={{color:'rgba(161,161,170,0.9)'}}>
            <a href="#build" className="hover:text-white transition-colors">Build</a>
            <a href="#how" className="hover:text-white transition-colors">How it works</a>
            <a href="#features" className="hover:text-white transition-colors">Platform</a>
            <a href="#genies" className="hover:text-white transition-colors">Genies</a>
            <a href="#stack" className="hover:text-white transition-colors">Stack</a>
          </div>

          <div className="flex items-center gap-3">
            <a href="https://next.fibe.live/login"
              className="text-sm hidden md:block transition-colors"
              style={{color:'rgba(161,161,170,0.7)'}}>
              Sign in
            </a>
            <a href="https://next.fibe.live/register"
              className="text-sm font-semibold px-4 py-2 rounded-xl transition-all hover:scale-[1.03] hover:brightness-110"
              style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)', boxShadow:'0 0 20px rgba(139,92,246,0.3)'}}>
              Get started
            </a>
          </div>
        </div>
      </nav>

      {/* ── HERO ── */}
      <section className="relative pt-44 pb-24 px-6 animate-float-up">
        <div className="max-w-5xl mx-auto text-center">

          <div className="inline-flex items-center gap-2 text-xs font-medium rounded-full px-4 py-1.5 mb-10"
            style={{color:'#c4b5fd',border:'1px solid rgba(139,92,246,0.25)',background:'rgba(139,92,246,0.08)'}}>
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
            Fullstack orchestration — fra1 · fra2 · nyc3 · your VPS
          </div>

          <h1 className="font-display text-6xl md:text-8xl font-normal tracking-tight leading-[1.05] mb-6"
            style={{letterSpacing:'-0.02em'}}>
            Your entire stack,<br />
            <em className="gradient-text not-italic">live in seconds.</em>
          </h1>

          <p className="text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed"
            style={{color:'rgba(161,161,170,0.8)'}}>
            Fibe orchestrates fullstack environments from any git repo — web apps, APIs, databases,
            AI agents, preview envs and jobs. On your infra. Zero DevOps.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center mb-24">
            <a href="https://next.fibe.live/register"
              className="font-semibold px-8 py-3.5 rounded-xl transition-all hover:scale-[1.02] hover:brightness-110 text-sm"
              style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 40px rgba(139,92,246,0.35)', color:'#fff'}}>
              Start for free — no card needed
            </a>
            <a href="https://github.com/fibegg/sdk"
              className="font-medium px-8 py-3.5 rounded-xl transition-all hover:text-white text-sm glass"
              style={{color:'rgba(161,161,170,0.7)',borderColor:'rgba(139,92,246,0.15)'}}>
              brew install fibegg/sdk/fibe ↗
            </a>
          </div>

          {/* Terminal */}
          <div className="max-w-2xl mx-auto glass-strong rounded-2xl overflow-hidden animate-pulse-glow">
            <div className="flex items-center gap-1.5 px-4 py-3"
              style={{borderBottom:'1px solid rgba(139,92,246,0.12)'}}>
              <span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(239,68,68,0.6)'}} />
              <span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(234,179,8,0.6)'}} />
              <span className="w-2.5 h-2.5 rounded-full" style={{background:'rgba(34,197,94,0.6)'}} />
              <span className="ml-3 text-xs font-mono" style={{color:'rgba(139,92,246,0.5)'}}>~ fibe sdk</span>
            </div>
            <div className="p-6 font-mono text-sm text-left leading-8">
              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-emerald-400">brew install fibegg/sdk/fibe</span></p>
              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span style={{color:'#a78bfa'}}>fibe marquees connect</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--host 165.232.68.197</span></p>
              <p style={{color:'rgba(255,255,255,0.25)'}}>  ✓ Marquee <span style={{color:'rgba(255,255,255,0.5)'}}>fra1</span> registered</p>
              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-blue-400">fibe pg create</span> <span style={{color:'rgba(255,255,255,0.35)'}}>--name my-app --marquee fra1</span></p>
              <p style={{color:'rgba(255,255,255,0.25)'}}>  ✓ Cloning · building · routing · SSL</p>
              <p style={{color:'rgba(255,255,255,0.25)'}}>  ✓ Live → <span style={{color:'rgba(196,181,253,0.8)'}}>https://my-app.fibe.me</span></p>
              <p><span style={{color:'rgba(255,255,255,0.2)'}}>$</span> <span className="text-yellow-400">git push</span> <span style={{color:'rgba(255,255,255,0.25)'}}>  # hot-reload. done.</span></p>
            </div>
          </div>
        </div>
      </section>

      {/* ── WHAT YOU CAN BUILD ── */}
      <section id="build" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>What you can build</p>
            <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
              Anything that runs in Docker.
            </h2>
            <p className="mt-4 max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}>
              If it has a Dockerfile, Fibe can run it, expose it, route it and SSL it.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              {icon:'🌐', label:'Web Apps',         desc:'Next.js, Nuxt, SvelteKit, Remix, Rails, Django, Laravel',    glow:'rgba(139,92,246,0.12)'},
              {icon:'⚙️', label:'REST & GraphQL',   desc:'Express, Fastify, Go Fiber, FastAPI, NestJS, tRPC',          glow:'rgba(99,102,241,0.12)'},
              {icon:'🗄️', label:'Databases',        desc:'Postgres, MySQL, MongoDB, Redis, SQLite, ClickHouse',         glow:'rgba(59,130,246,0.1)'},
              {icon:'🤖', label:'AI Agents',         desc:'Autonomous Genies — Claude-powered, in-playground coders',   glow:'rgba(167,139,250,0.12)'},
              {icon:'🔄', label:'Preview Envs',      desc:'Every branch gets its own subdomain & live URL automatically',glow:'rgba(34,197,94,0.09)'},
              {icon:'⚡', label:'Jobs & CI',         desc:'One-shot Tricks: tests, migrations, cron, build pipelines',  glow:'rgba(234,179,8,0.09)'},
              {icon:'🧩', label:'Microservices',     desc:'Multi-repo compose: frontend + backend + workers + infra',   glow:'rgba(239,68,68,0.08)'},
              {icon:'🛠️', label:'Internal Tools',    desc:'Metabase, n8n, Grafana, Gitea, anything self-hosted',       glow:'rgba(20,184,166,0.09)'},
            ].map(({icon, label, desc, glow}) => (
              <div key={label} className="glass rounded-2xl p-5 transition-all hover:scale-[1.02] hover:brightness-110 cursor-default"
                style={{background:glow, borderColor:'rgba(255,255,255,0.06)'}}>
                <div className="text-3xl mb-3">{icon}</div>
                <h3 className="font-semibold text-sm text-white mb-1.5">{label}</h3>
                <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section id="how" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-16">
            <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>How it works</p>
            <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
              Four steps to a live URL.
            </h2>
          </div>

          <div className="space-y-4 relative">
            <div className="absolute left-[2.35rem] top-12 bottom-12 w-px hidden md:block"
              style={{background:'linear-gradient(180deg, rgba(139,92,246,0.5) 0%, rgba(139,92,246,0.05) 100%)'}} />

            {[
              {n:'01', title:'Connect a Prop',     badge:'Prop',        desc:'Link any GitHub or Gitea repo. Fibe tracks every branch. One repo → unlimited environments.'},
              {n:'02', title:'Register a Marquee', badge:'Marquee',     desc:'Point Fibe at any VPS or bare metal. One SSH connection is all it needs. No agents installed.'},
              {n:'03', title:'Launch a Playground',badge:'Playground',  desc:'Pick a Playspec (your docker-compose blueprint), choose a branch, launch. Full env in ~60s.'},
              {n:'04', title:'Push & iterate',     badge:'Live →',      desc:'Hot-reload on every push. Share the URL with your team. SSL, subdomains, routing — automatic.'},
            ].map(({n, title, badge, desc}) => (
              <div key={n} className="flex gap-5 glass rounded-2xl p-6 relative z-10">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center text-xs font-black shrink-0"
                  style={{background:'rgba(139,92,246,0.15)',color:'#a78bfa',border:'1px solid rgba(139,92,246,0.25)'}}>
                  {n}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 mb-1.5">
                    <h3 className="font-semibold text-white">{title}</h3>
                    <span className="tag">{badge}</span>
                  </div>
                  <p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.7)'}}>{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PLATFORM FEATURES ── */}
      <section id="features" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Platform</p>
            <h2 className="font-display text-4xl md:text-5xl font-normal" style={{letterSpacing:'-0.02em'}}>
              Every layer, covered.
            </h2>
            <p className="mt-4" style={{color:'rgba(161,161,170,0.7)'}}>No glue code. No YAML hell. No ops team required.</p>
          </div>

          <div className="grid md:grid-cols-3 gap-5">
            {[
              {icon:'🌀', title:'Playgrounds',       tags:['docker-compose','live URL','hot-reload'],       desc:'Full docker-compose environments with live URLs. Every service wired, every port routed, every env var injected — automatically.'},
              {icon:'🧬', title:'Props',              tags:['GitHub','Gitea','multi-repo'],                  desc:'Git repositories as first-class citizens. Connect GitHub or Gitea. Track any branch. Multi-repo setups native.'},
              {icon:'🏗️', title:'Marquees',           tags:['any VPS','SSH','no lock-in'],                  desc:'Your VPS as compute. DigitalOcean, Hetzner, bare metal — if SSH + Docker work, it works. You own the infra.'},
              {icon:'📐', title:'Playspecs',          tags:['blueprints','reusable','versioned'],            desc:'Reusable deployment blueprints — like Helm charts for docker-compose. Define once, launch infinite playgrounds.'},
              {icon:'⚡', title:'Tricks (Jobs)',      tags:['CI/CD','cron','one-shot'],                      desc:'Job mode for anything that runs to completion. Tests, migrations, cron tasks, build pipelines — all containerized.'},
              {icon:'🔐', title:'Secrets Vault',      tags:['encrypted','per-service','env injection'],     desc:'Encrypted key-value store. Inject credentials at runtime — no plaintext in compose files, repos, or logs.'},
              {icon:'🌍', title:'Traefik Routing',    tags:['auto SSL','subdomains','HTTP/2'],               desc:"Auto-provisioned subdomains + Let's Encrypt SSL for every service. Wildcard certs. HTTP→HTTPS. Zero config."},
              {icon:'🔔', title:'Webhooks & Events',  tags:['auto-deploy','audit log','git push'],          desc:'Git push triggers automatic rebuilds in production mode. Full audit trail of every deploy, failure, and rollback.'},
              {icon:'🧪', title:'Ephemeral Envs',     tags:['per-PR','branch URLs','auto-teardown'],        desc:'Every PR gets a live, isolated environment with its own URL. Auto-teardown on merge. Perfect for review workflows.'},
            ].map(({icon, title, desc, tags}) => (
              <div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
                style={{borderColor:'rgba(139,92,246,0.12)'}}>
                <div className="text-2xl mb-4">{icon}</div>
                <h3 className="font-semibold text-white mb-2">{title}</h3>
                <p className="text-sm leading-relaxed mb-4" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
                <div className="flex flex-wrap gap-1.5">
                  {tags.map(t => <span key={t} className="tag">{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── GENIES SPOTLIGHT ── */}
      <section id="genies" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="glow-orb" style={{width:900,height:900,background:'radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
        <div className="max-w-5xl mx-auto relative z-10">
          <div className="glass-strong rounded-3xl p-10 md:p-16 text-center">
            <div className="text-5xl mb-6">🤖</div>
            <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(139,92,246,0.7)'}}>Genies — AI Agents</p>
            <h2 className="font-display text-4xl md:text-6xl font-normal mb-6" style={{letterSpacing:'-0.02em'}}>
              Agents that actually<br /><em className="gradient-text not-italic">ship code.</em>
            </h2>
            <p className="text-lg max-w-2xl mx-auto mb-12 leading-relaxed" style={{color:'rgba(161,161,170,0.75)'}}>
              Genies are autonomous Claude-powered agents that live inside your Playgrounds.
              Full access to your codebase, terminal, Docker and git.
              Assign a task — they plan, build, test and push.
            </p>

            <div className="grid md:grid-cols-3 gap-4 text-left">
              {[
                {title:'Full environment access', desc:'Reads code, runs commands, edits files, pushes commits — inside a live Playground with real Docker services running.'},
                {title:'Mutter stream',            desc:'Real-time internal monologue. Watch the agent reason, plan and debug. Transparent by design. No black boxes.'},
                {title:'Artefacts & Feedback',     desc:'Genies produce artefacts (files, reports, PRs) and request feedback. A proper async collaboration loop.'},
              ].map(({title, desc}) => (
                <div key={title} className="glass rounded-xl p-5" style={{borderColor:'rgba(139,92,246,0.15)'}}>
                  <h4 className="font-semibold text-white text-sm mb-2">{title}</h4>
                  <p className="text-xs leading-relaxed" style={{color:'rgba(161,161,170,0.6)'}}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── STACK ── */}
      <section id="stack" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Built on boring tech</p>
            <h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
              Battle-tested all the way down.
            </h2>
            <p className="max-w-lg mx-auto" style={{color:'rgba(161,161,170,0.7)'}}>
              No WASM runtimes. No experimental protocols. Docker, SSH, git and Traefik — doing what they&apos;ve done for a decade.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-10">
            <div>
              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Platform</p>
              <div className="flex flex-wrap gap-2">
                {['Docker','docker-compose','Traefik',"Let's Encrypt",'SSH','Go','PostgreSQL','Redis','Gitea'].map(t => (
                  <span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
                    style={{color:'#a78bfa',borderColor:'rgba(139,92,246,0.2)'}}>
                    {t}
                  </span>
                ))}
              </div>
            </div>
            <div>
              <p className="text-xs font-semibold uppercase tracking-widest mb-4" style={{color:'rgba(255,255,255,0.2)'}}>Works with any framework</p>
              <div className="flex flex-wrap gap-2">
                {['Next.js','Nuxt','SvelteKit','Remix','Rails','Django','FastAPI','Go Fiber','NestJS','Laravel','Spring Boot','Elixir/Phoenix','Bun'].map(t => (
                  <span key={t} className="px-3 py-1.5 rounded-lg text-sm font-mono glass"
                    style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(255,255,255,0.06)'}}>
                    {t}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── STATS ── */}
      <section className="py-20 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-5">
          {[
            {n:'~60s',  label:'avg Playground boot'},
            {n:'∞',     label:'Playgrounds per Marquee'},
            {n:'100%',  label:'your infra, your data'},
            {n:'0',     label:'vendor lock-in'},
          ].map(({n, label}) => (
            <div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}>
              <div className="font-display text-4xl font-normal mb-1.5 gradient-text" style={{letterSpacing:'-0.02em'}}>{n}</div>
              <div className="text-xs" style={{color:'rgba(161,161,170,0.5)'}}>{label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-36 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="glow-orb" style={{width:800,height:800,background:'radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
        <div className="max-w-2xl mx-auto text-center relative z-10">
          <h2 className="font-display text-5xl md:text-7xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
            Ready to <em className="gradient-text not-italic">fibe</em>?
          </h2>
          <p className="text-lg mb-10" style={{color:'rgba(161,161,170,0.65)'}}>
            Your first Playground is free. No credit card. No CLI required to start.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="https://next.fibe.live/register"
              className="font-semibold px-10 py-4 rounded-xl transition-all hover:scale-[1.02] hover:brightness-110 text-base"
              style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)', boxShadow:'0 0 50px rgba(139,92,246,0.4)'}}>
              Start building — free
            </a>
            <a href="https://github.com/fibegg"
              className="font-medium px-10 py-4 rounded-xl transition-all hover:text-white text-base glass"
              style={{color:'rgba(161,161,170,0.6)',borderColor:'rgba(139,92,246,0.15)'}}>
              Explore on GitHub
            </a>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="py-10 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 rounded-md flex items-center justify-center text-xs font-black"
              style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>ƒ</div>
            <span className="font-semibold" style={{color:'rgba(161,161,170,0.5)'}}>fibe</span>
          </div>
          <span className="text-sm" style={{color:'rgba(161,161,170,0.25)'}}>© 2026 Fibe — Your entire stack, live in seconds.</span>
          <div className="flex gap-6 text-sm" style={{color:'rgba(161,161,170,0.35)'}}>
            <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>
            <a href="https://git-next.fibe.live/fibegg" className="hover:text-white transition-colors">Gitea</a>
          </div>
        </div>
      </footer>

    </main>
  )
}