'use client'

import Link from 'next/link'
import { useState } from 'react'
import { posthog } from '@/lib/posthog'

const apps = [
  { name: 'Snakkimo', href: '/apps/snakkimo', accent: '#7BA7BC' },
  { name: 'Fittimo', href: '/apps/fittimo', accent: '#7DAF8A' },
  { name: 'Rezeptimo', href: '/apps/rezeptimo', accent: '#C4896A' },
]

export default function Nav() {
  const [appsOpen, setAppsOpen] = useState(false)

  return (
    <header
      style={{
        position: 'relative',
        zIndex: 100,
        maxWidth: 1240,
        margin: '0 auto',
        padding: '34px 48px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      {/* Logo */}
      <Link href="/" onClick={() => posthog.capture('nav_link_clicked', { label: 'Logo', href: '/' })} style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div
          style={{
            width: 34,
            height: 34,
            borderRadius: '50% 50% 50% 12px',
            background: '#A8B89A',
          }}
        />
        <span
          style={{
            fontFamily: 'var(--font-cormorant), "Cormorant Garamond", serif',
            fontSize: 25,
            fontWeight: 600,
            letterSpacing: 0.5,
            color: '#3D2B1F',
          }}
        >
          HyggeCraftery
        </span>
      </Link>

      {/* Nav links */}
      <nav style={{ display: 'flex', alignItems: 'center', gap: 38 }}>
        <Link href="/#ueber" onClick={() => posthog.capture('nav_link_clicked', { label: 'Über uns', href: '/#ueber' })} style={navLinkStyle}>Über uns</Link>
        <Link href="/shop" onClick={() => posthog.capture('nav_link_clicked', { label: 'Shop', href: '/shop' })} style={navLinkStyle}>Shop</Link>

        {/* Apps dropdown */}
        <div
          style={{ position: 'relative' }}
          onMouseEnter={() => setAppsOpen(true)}
          onMouseLeave={() => setAppsOpen(false)}
        >
          <button
            style={{ ...navLinkStyle, background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
            onClick={() => {
              const next = !appsOpen
              setAppsOpen(next)
              if (next) posthog.capture('nav_apps_dropdown_opened')
            }}
            aria-expanded={appsOpen}
          >
            Apps
          </button>

          {appsOpen && (
            <div
              style={{
                position: 'absolute',
                top: '100%',
                left: '50%',
                transform: 'translateX(-50%)',
                marginTop: 12,
                background: '#FAFAF7',
                border: '1.5px solid #F5F0E8',
                borderRadius: 20,
                padding: '8px 0',
                minWidth: 160,
                boxShadow: '0 8px 32px rgba(61,43,31,0.10)',
                zIndex: 200,
              }}
            >
              {apps.map((app) => (
                <Link
                  key={app.name}
                  href={app.href}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 10,
                    padding: '10px 20px',
                    textDecoration: 'none',
                    color: '#3D2B1F',
                    fontSize: 14.5,
                    fontWeight: 500,
                  }}
                  onClick={() => { setAppsOpen(false); posthog.capture('nav_link_clicked', { label: app.name, href: app.href }) }}
                >
                  <span
                    style={{
                      width: 8,
                      height: 8,
                      borderRadius: '50%',
                      background: app.accent,
                      flexShrink: 0,
                    }}
                  />
                  {app.name}
                </Link>
              ))}
            </div>
          )}
        </div>

        <Link
          href="/#newsletter"
          onClick={() => posthog.capture('newsletter_cta_clicked', { source: 'nav' })}
          style={{
            textDecoration: 'none',
            color: '#FAFAF7',
            background: '#3D2B1F',
            fontSize: 14,
            fontWeight: 600,
            letterSpacing: 0.3,
            padding: '11px 22px',
            borderRadius: 40,
          }}
        >
          Newsletter
        </Link>
      </nav>
    </header>
  )
}

const navLinkStyle: React.CSSProperties = {
  textDecoration: 'none',
  color: '#3D2B1F',
  fontSize: 14.5,
  fontWeight: 500,
  letterSpacing: 0.3,
  opacity: 0.78,
}