// Main App — header, mobile menu, language toggle, section composition.

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function Header({ lang, setLang, menuOpen, setMenuOpen, t }) {
  const [scrolled, setScrolled] = useStateA(false);

  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navItems = [
    { id: 'home', label: t.nav.home },
    { id: 'listings', label: t.nav.buy },
    { id: 'valuation', label: t.nav.sell },
    { id: 'invest', label: t.nav.invest },
    { id: 'services', label: t.nav.lease },
    { id: 'about', label: t.nav.about },
    { id: 'contact', label: t.nav.contact },
  ];
  const isKo = lang === 'ko';

  return (
    <header className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500 ${scrolled ? 'scrolled' : ''}`}>
      <div className="mx-auto max-w-[1480px] px-6 md:px-10 lg:px-16">
        <div className={`header-inner flex items-center justify-between transition-all duration-500 ${scrolled ? 'py-3.5' : 'py-6'}`}>
          {/* Wordmark */}
          <a href="#home" className="display text-ink text-base md:text-lg tracking-wider-2 uppercase flex items-baseline gap-2 leading-none">
            <span className="font-medium">EC</span>
            <span className="hidden sm:inline text-ink/70 font-normal">Real Estate Group</span>
            <span className="sm:hidden text-ink/70 font-normal">Real Estate</span>
          </a>

          {/* Desktop nav */}
          <nav className="hidden lg:flex items-center gap-8">
            {navItems.map(n => (
              <a key={n.id} href={`#${n.id}`} className={`link-under text-[12px] tracking-wider-2 uppercase text-ink/65 hover:text-ink transition-colors ${isKo ? 'lang-ko' : ''}`}>
                {n.label}
              </a>
            ))}
          </nav>

          {/* Right cluster */}
          <div className="flex items-center gap-3 md:gap-4">
            {/* Lang toggle */}
            <div className="flex items-center gap-px border hairline p-px">
              <button
                type="button"
                onClick={() => setLang('en')}
                className={`px-2.5 py-1.5 text-[10px] tracking-wider-2 uppercase transition-all ${lang === 'en' ? 'bg-ink text-bone' : 'text-ink/55 hover:text-ink'}`}
                aria-pressed={lang === 'en'}
              >EN</button>
              <button
                type="button"
                onClick={() => setLang('ko')}
                className={`px-2.5 py-1.5 text-[11px] tracking-wider lang-ko transition-all ${lang === 'ko' ? 'bg-ink text-bone' : 'text-ink/55 hover:text-ink'}`}
                aria-pressed={lang === 'ko'}
              >한국어</button>
            </div>
            {/* Outline CTA */}
            <a href="#contact" className={`hidden md:inline-flex btn-outline ${isKo ? 'lang-ko' : ''}`}>
              {t.nav.cta}
              <IconArrow size={12} />
            </a>
            {/* Mobile menu trigger */}
            <button
              type="button"
              onClick={() => setMenuOpen(true)}
              className="lg:hidden w-10 h-10 flex items-center justify-center text-ink"
              aria-label={t.nav.menu}
            >
              <IconMenu size={20} />
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ open, setOpen, lang, setLang, t }) {
  const isKo = lang === 'ko';
  const navItems = [
    { id: 'home', label: t.nav.home },
    { id: 'listings', label: t.nav.buy },
    { id: 'valuation', label: t.nav.sell },
    { id: 'invest', label: t.nav.invest },
    { id: 'services', label: t.nav.lease },
    { id: 'about', label: t.nav.about },
    { id: 'contact', label: t.nav.contact },
  ];

  return (
    <div className={`menu-overlay ${open ? 'open' : ''} flex flex-col`}>
      <div className="mx-auto max-w-[1480px] w-full px-6 md:px-10 py-6 flex items-center justify-between">
        <a href="#home" onClick={() => setOpen(false)} className="display text-ink text-base tracking-wider-2 uppercase leading-none">
          <span className="font-medium">EC</span> <span className="text-ink/70 font-normal">Real Estate</span>
        </a>
        <button type="button" onClick={() => setOpen(false)} className="w-10 h-10 flex items-center justify-center" aria-label={t.nav.close}>
          <IconClose size={22} />
        </button>
      </div>
      <div className="flex-1 mx-auto max-w-[1480px] w-full px-6 md:px-10 flex flex-col justify-between pb-12">
        <nav className="mt-8 md:mt-12 flex flex-col">
          {navItems.map((n, i) => (
            <a
              key={n.id}
              href={`#${n.id}`}
              onClick={() => setOpen(false)}
              className={`display ${isKo ? 'lang-ko' : ''} text-ink ${isKo ? 'text-2xl md:text-4xl' : 'text-3xl md:text-5xl'} py-2.5 md:py-4 border-b hairline leading-none flex items-baseline justify-between group`}
            >
              <span>{n.label}</span>
              <span className="num text-[11px] text-ink/35 tracking-wider-2">{String(i + 1).padStart(2, '0')}</span>
            </a>
          ))}
        </nav>
        <div className="mt-12 flex flex-col gap-6">
          <div className="flex items-center gap-px border hairline p-px self-start">
            <button onClick={() => setLang('en')} className={`px-3 py-2 text-[11px] tracking-wider-2 uppercase ${lang === 'en' ? 'bg-ink text-bone' : 'text-ink/55'}`}>EN</button>
            <button onClick={() => setLang('ko')} className={`px-3 py-2 text-[11px] tracking-wider lang-ko ${lang === 'ko' ? 'bg-ink text-bone' : 'text-ink/55'}`}>한국어</button>
          </div>
          <div className={`flex items-center gap-2 ${isKo ? 'lang-ko' : ''}`}>
            <div className="w-8 h-px bg-accent"></div>
            <span className="eyebrow text-accent-deep">{t.hero.koPill}</span>
          </div>
          <div className="flex flex-col gap-2">
            <a href="tel:+14698190066" className="num text-sm text-ink/80 hover:text-accent-deep flex items-center gap-3">
              <IconPhone size={14} className="text-ink/40" /> (469) 819-0066 · Evelyn
            </a>
            <a href="tel:+14692130049" className="num text-sm text-ink/80 hover:text-accent-deep flex items-center gap-3">
              <IconPhone size={14} className="text-ink/40" /> (469) 213-0049 · Amy
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [lang, setLang] = useStateA('en');
  const [menuOpen, setMenuOpen] = useStateA(false);
  const t = STRINGS[lang];

  // Lock scroll when menu open
  useEffectA(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  // Set document lang
  useEffectA(() => {
    document.documentElement.lang = lang === 'ko' ? 'ko' : 'en';
  }, [lang]);

  return (
    <div className="min-h-screen bg-bone text-ink">
      <Header lang={lang} setLang={setLang} menuOpen={menuOpen} setMenuOpen={setMenuOpen} t={t} />
      <MobileMenu open={menuOpen} setOpen={setMenuOpen} lang={lang} setLang={setLang} t={t} />

      <main>
        <Hero lang={lang} t={t} />
        <TeamBanner lang={lang} t={t} />
        <Services lang={lang} t={t} />
        <Listings lang={lang} t={t} />
        <Calculator lang={lang} t={t} />
        <Testimonials lang={lang} t={t} />
        <Team lang={lang} t={t} />
        <ContactForm lang={lang} t={t} />
        <ValuationForm lang={lang} t={t} />
      </main>

      <Footer lang={lang} t={t} setLang={setLang} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);