// Leonard's Farm: SiteNav component (+ Wordmark)
// Depends on: Button (js/components/Button.jsx, load first)

// Brand wordmark: plain type (no logo mark exists for Leonard's Farm).
// A small lime leaf dot sits before the name as the only glyph.
function Wordmark({ color = 'var(--text-strong)', size = '1.35rem' }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5em', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: size, letterSpacing: 'var(--ls-tight)', color, lineHeight: 1 }}>
      <span aria-hidden="true" style={{ width: '0.6em', height: '0.6em', borderRadius: '50% 0 50% 50%', background: 'var(--brand-accent)', transform: 'rotate(45deg)', flex: 'none' }} />
      Leonard&rsquo;s Farm
    </span>
  );
}

// Site header. Transparent over the hero, solid white once scrolled (pass solid).
function SiteNav({
  links = [
    { label: 'Our story', href: '#story' },
    { label: 'What we grow', href: '#grow' },
    { label: 'For new farmers', href: '#learn' },
    { label: 'Contact', href: '#contact' },
  ],
  cta = { label: 'Visit the farm', href: '#contact' },
  solid = false,
}) {
  const [open, setOpen] = React.useState(false);
  const onLight = solid;
  const textColor = onLight ? 'var(--text-body)' : 'rgba(255,255,255,0.92)';
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: onLight ? 'rgba(250,248,241,0.86)' : 'transparent',
      backdropFilter: onLight ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: onLight ? '1px solid var(--border-subtle)' : '1px solid transparent',
      transition: 'background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)',
    }}>
      <nav style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        padding: '18px var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-5)',
      }}>
        <a href="#top" style={{ textDecoration: 'none' }}>
          <Wordmark color={onLight ? 'var(--text-strong)' : '#fff'} />
        </a>

        <div className="lf-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
          {links.map((l) => (
            <a key={l.href} href={l.href} style={{
              fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', fontWeight: 'var(--fw-medium)',
              color: textColor, textDecoration: 'none',
            }}>
              {l.label}
            </a>
          ))}
        </div>

        <div className="lf-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
          <Button variant={onLight ? 'primary' : 'accent'} size="sm" href={cta.href}>{cta.label}</Button>
          <button
            className="lf-nav-burger"
            aria-label="Menu"
            onClick={() => setOpen((v) => !v)}
            style={{ display: 'none', border: 'none', background: 'transparent', cursor: 'pointer', color: onLight ? 'var(--text-strong)' : '#fff', fontSize: '1.5rem', lineHeight: 1 }}
          >
            &#9776;
          </button>
        </div>
      </nav>

      {open && (
        <div style={{ padding: '0 var(--gutter) 16px', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', background: onLight ? 'transparent' : 'rgba(15,58,32,0.85)' }}>
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--fw-medium)', color: textColor, padding: '8px 0', textDecoration: 'none' }}>{l.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

window.Wordmark = Wordmark;
window.SiteNav = SiteNav;