import { useState, useEffect } from 'react';
import { Link } from '@inertiajs/react';

type Props = {
  transparent?: boolean;
  /** Appearance while at the very top of the page, before scrolling. */
  topMode?: 'dark' | 'light';
};

export function LandingHeader({ transparent = false, topMode = 'light' }: Props) {
  const [scrolled, setScrolled] = useState(!transparent);
  const [open, setOpen]         = useState(false);
  const close = () => setOpen(false);
  const atTop = transparent && !scrolled;
  const dark  = atTop && topMode === 'dark';

  useEffect(() => {
    if (!transparent) return;
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [transparent]);

  return (
    <header className={`lp-header${dark ? ' lp-header--dark' : ' lp-header--light'}${open ? ' menu-open' : ''}${atTop && topMode === 'light' ? ' lp-header--top-light' : ''}`}>
      <Link href="/" className="lp-brand" aria-label="دانشیار من - صفحه اصلی">
        <img
          className="lp-brand-logo"
          src="/assets/images/logo/daneshyar-header.png"
          alt="دانشیار من"
        />
      </Link>

      <nav className={`lp-nav${open ? ' open' : ''}`} aria-label="منوی اصلی">
        <Link href="/features" onClick={close} className="lp-nav-link">امکانات</Link>
        <Link href="/about"    onClick={close} className="lp-nav-link">درباره ما</Link>
        <Link href="/faq"      onClick={close} className="lp-nav-link">سوالات متداول</Link>
        <Link href="/contact"  onClick={close} className="lp-nav-link">تماس</Link>

        <div className="lp-nav-mobile-actions">
          <Link href="/contact" onClick={close} className="lp-nav-btn lp-nav-btn--primary">
            درخواست دمو
          </Link>
        </div>
      </nav>

      <div className="lp-header-actions">
        <Link href="/contact" className="lp-nav-btn lp-nav-btn--primary">
          درخواست دمو
        </Link>
      </div>

      <button
        className="lp-hamburger"
        type="button"
        aria-label="منو"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
      >
        <span /><span /><span />
      </button>
    </header>
  );
}