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

type Props = { transparent?: boolean };

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

  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' : ''}`}>
      <Link href="/" className={`lp-brand${dark ? ' lp-brand--dark' : ''}`} aria-label="دانشیار من">
        <span className="lp-brand-icon">د</span>
        <span className="lp-brand-text">
          <strong>دانشیار من</strong>
          <small>اتوماسیون مدارس</small>
        </span>
      </Link>

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

      <nav className={`lp-nav${open ? ' open' : ''}`}>
        <Link href="/pricing"  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>
        <Link href="/login"    onClick={close} className="lp-nav-btn lp-nav-btn--ghost">ورود</Link>
        <Link href="/contact"  onClick={close} className="lp-nav-btn lp-nav-btn--primary">خرید اشتراک</Link>
      </nav>
    </header>
  );
}
