'use client'
import { useState } from 'react'

const LINKS = [
  { href: '#manifesto',  label: 'Why Fibe' },
  { href: '#features',   label: 'Platform' },
  { href: '#genies',     label: 'Genies' },
  { href: '#anywhere',   label: 'Any device, anywhere' },
  { href: '#ownership',  label: 'Security & Ownership' },
  { href: '#clouds',     label: 'Cloud guides' },
  { href: '#everything', label: 'Everything included' },
  { href: '#stack',      label: 'Stack' },
]

export default function Nav() {
  const [open, setOpen] = useState(false)
  const close = () => setOpen(false)

  return (
    <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">

        {/* Logo */}
        <a href="#" className="flex items-center gap-2.5" onClick={close}>
          <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>
        </a>

        {/* Desktop links */}
        <div className="hidden md:flex items-center gap-7 text-sm" style={{color:'rgba(161,161,170,0.9)'}}>
          {LINKS.map(l => (
            <a key={l.href} href={l.href} className="hover:text-white transition-colors">{l.label}</a>
          ))}
        </div>

        {/* Desktop CTA */}
        <div className="hidden md:flex items-center gap-3">
          <a href="https://next.fibe.live/login"
            className="text-sm 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 free
          </a>
        </div>

        {/* Mobile: CTA + hamburger */}
        <div className="flex md:hidden items-center gap-2">
          <a href="https://next.fibe.live/register"
            className="text-xs font-semibold px-3 py-1.5 rounded-lg"
            style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)'}}>
            Get started
          </a>
          <button
            onClick={() => setOpen(o => !o)}
            aria-label={open ? 'Close menu' : 'Open menu'}
            className="w-9 h-9 flex flex-col items-center justify-center gap-1.5 rounded-lg transition-colors"
            style={{color:'rgba(161,161,170,0.8)',background: open ? 'rgba(139,92,246,0.1)' : 'transparent'}}>
            {open ? (
              /* X icon */
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="3" y1="3" x2="15" y2="15" />
                <line x1="15" y1="3" x2="3" y2="15" />
              </svg>
            ) : (
              /* Hamburger icon */
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="2" y1="5" x2="16" y2="5" />
                <line x1="2" y1="9" x2="16" y2="9" />
                <line x1="2" y1="13" x2="16" y2="13" />
              </svg>
            )}
          </button>
        </div>
      </div>

      {/* Mobile dropdown */}
      {open && (
        <div className="md:hidden glass-strong"
          style={{borderTop:'1px solid rgba(139,92,246,0.1)'}}>
          <div className="px-6 py-3">
            {LINKS.map((l, i) => (
              <a
                key={l.href}
                href={l.href}
                onClick={close}
                className="flex items-center justify-between py-3.5 text-sm transition-colors hover:text-white"
                style={{
                  color:'rgba(161,161,170,0.75)',
                  borderBottom: i < LINKS.length - 1 ? '1px solid rgba(139,92,246,0.07)' : 'none',
                }}>
                {l.label}
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{opacity:0.35}}>
                  <path d="M3 7h8M8 4l3 3-3 3" />
                </svg>
              </a>
            ))}
          </div>
          <div className="px-6 py-4 flex gap-3" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
            <a href="https://next.fibe.live/login"
              className="flex-1 text-center text-sm py-2.5 rounded-xl glass transition-colors"
              style={{color:'rgba(161,161,170,0.7)'}}>
              Sign in
            </a>
            <a href="https://next.fibe.live/register"
              className="flex-1 text-center text-sm font-semibold py-2.5 rounded-xl transition-all hover:brightness-110"
              style={{background:'linear-gradient(135deg, #8b5cf6, #a78bfa)'}}>
              Get started free
            </a>
          </div>
        </div>
      )}
    </nav>
  )
}