// Logo, header (with mega menu + lang switcher), mobile menu, announcement strip, newsletter, footer.

const { useI18n, fmtNum } = window.RBI18n;
const { Marquee, Reveal, useMagnetic } = window.RBAnim;
const { IconSearch, IconUser, IconHeart, IconBag, IconMenu, IconX, IconChevD,
        IconTruck, IconReturn, IconShield, IconGift,
        IconInsta, IconFb, IconTiktok, IconWA, IconGlobe, IconSparkle, IconArrowR, IconArrowL } = window.RBIcons;

/* ---------- Logo (text wordmark) ---------- */
const Logo = ({ size = 'md', className = '', inverse = false }) => {
  const sizes = {
    sm: { rare: 'text-[34px]', boutique: 'text-[10px] -mt-2 ms-10' },
    md: { rare: 'text-[46px]', boutique: 'text-[12px] -mt-3 ms-12' },
    lg: { rare: 'text-[68px]', boutique: 'text-[16px] -mt-4 ms-18' },
    xl: { rare: 'text-[96px]', boutique: 'text-[22px] -mt-6 ms-24' }
  };
  const s = sizes[size] || sizes.md;
  const roseClr = inverse ? '#f79ab5' : '#f79ab5';
  const inkClr  = inverse ? '#faf7f4' : '#161214';
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); window.RBNav.go('home'); }}
       className={`inline-flex flex-col items-start leading-[0.85] group select-none ${className}`}
       aria-label="Rare Boutique">
      <span dir="ltr" className={`ff-script ${s.rare} transition-transform duration-700 group-hover:scale-[1.03] origin-bottom-left`}
            style={{ color: roseClr, lineHeight: 0.85 }}>
        Rare
      </span>
      <span dir="ltr" className={`ff-italianno ${s.boutique} italic tracking-wide`}
            style={{ color: inkClr, lineHeight: 1 }}>
        boutique
      </span>
    </a>
  );
};

/* ---------- Announcement marquee ---------- */
const AnnouncementBar = () => {
  const { t } = useI18n();
  const items = ['ann.a','ann.b','ann.c','ann.d'].map(k => t(k));
  return (
    <div className="bg-ink text-paper text-[11px] py-2.5 tracking-wide">
      <Marquee>
        <div className="flex items-center gap-12 px-6">
          {items.map((s, i) => (
            <span key={i} className="inline-flex items-center gap-3">
              <IconSparkle size={11} className="text-rose-300"/>
              <span className="tracking-[0.18em]">{s}</span>
            </span>
          ))}
        </div>
      </Marquee>
    </div>
  );
};

/* ---------- Lang switch ---------- */
const LangSwitch = ({ inverse = false }) => {
  const { lang, setLang } = useI18n();
  const base = inverse ? 'text-paper/70' : 'text-ink/70';
  const on   = inverse ? 'text-paper' : 'text-ink';
  return (
    <div className={`inline-flex items-center gap-1.5 text-[11px] tracking-[0.25em] uppercase ${base}`}>
      <button onClick={() => setLang('ar')} className={lang === 'ar' ? on + ' font-medium' : 'hover:'+on}>AR</button>
      <span className="opacity-40">/</span>
      <button onClick={() => setLang('en')} className={lang === 'en' ? on + ' font-medium' : 'hover:'+on}>EN</button>
    </div>
  );
};

/* ---------- Header ---------- */
const Header = ({ cartCount = 0, onMobileMenu }) => {
  const { t, lang } = useI18n();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const NAV = [
    { id:'home',     label: t('nav.home') },
    { id:'shop',     label: t('nav.shop'),     sub: window.RB.CATEGORIES },
    { id:'new',      label: t('nav.new') },
    { id:'lookbook', label: t('nav.lookbook') },
    { id:'sale',     label: t('nav.sale'),     accent: true },
    { id:'about',    label: t('nav.about') },
    { id:'contact',  label: t('nav.contact') }
  ];

  return (
    <header className={`sticky top-0 z-40 transition-all duration-500
                        ${scrolled ? 'bg-paper/95 backdrop-blur-lg shadow-[0_1px_0_rgba(22,18,20,0.06)]'
                                   : 'bg-paper'}`}>
      <div className="max-w-[1480px] mx-auto px-4 md:px-10">
        {/* Top row */}
        <div className="flex items-center h-14 md:h-20 gap-4">
          {/* Mobile menu trigger */}
          <button className="md:hidden p-2 -ms-2" onClick={onMobileMenu} aria-label={t('nav.menu')}>
            <IconMenu size={22}/>
          </button>

          {/* Left utility (desktop) */}
          <div className="hidden md:flex items-center flex-1 gap-6">
            <button className="inline-flex items-center gap-2 text-[11px] tracking-[0.3em] uppercase text-ink-soft hover:text-ink transition"
                    onClick={() => document.getElementById('search-input')?.focus()}>
              <IconSearch size={16}/>
              <span>{t('nav.search_ph')}</span>
            </button>
            <LangSwitch/>
          </div>

          {/* Center: logo */}
          <div className="flex-1 flex justify-center">
            <Logo size={scrolled ? 'sm' : 'md'} className={`transition-all duration-500 ${scrolled ? 'scale-90' : ''}`}/>
          </div>

          {/* Right utility */}
          <div className="flex-1 flex items-center justify-end gap-1 md:gap-3">
            <button className="md:hidden p-2" aria-label={t('nav.search_ph')}><IconSearch size={20}/></button>
            <button className="hidden md:inline-flex p-2 hover:text-rose-400 transition" aria-label={t('nav.account')}
                    onClick={() => window.RBNav.go('account')}>
              <IconUser size={20}/>
            </button>
            <button className="hidden md:inline-flex p-2 hover:text-rose-400 transition relative" aria-label={t('nav.wishlist')}
                    onClick={() => window.RBNav.go('wishlist')}>
              <IconHeart size={20}/>
            </button>
            <button className="p-2 hover:text-rose-400 transition relative" aria-label={t('nav.cart')}
                    onClick={() => window.RBNav.go('cart')}>
              <IconBag size={20}/>
              {cartCount > 0 && (
                <span className="absolute -top-0.5 -end-0.5 bg-rose-400 text-white text-[9px] rounded-full min-w-[16px] h-[16px] px-1 flex items-center justify-center ltr-nums">
                  {fmtNum(cartCount, lang)}
                </span>
              )}
            </button>
          </div>
        </div>

        {/* Nav row (desktop) */}
        <nav className="hidden md:flex items-center justify-center gap-8 pb-3 -mt-1">
          {NAV.map((n) => (
            <div key={n.id + n.label} className="relative group/n">
              <button
                onClick={() => window.RBNav.go(n.id === 'sale' ? 'shop' : n.id, n.id === 'sale' ? { sale:1 } : {})}
                className={`text-[11px] tracking-[0.3em] uppercase font-medium py-1
                            ${n.accent ? 'text-rose-500' : 'text-ink'}`}>
                <span className="swap">
                  <span>{n.label}</span>
                  <span>{n.label}</span>
                </span>
                {n.sub && <IconChevD size={11} className="inline-block ms-1 align-middle opacity-50"/>}
              </button>
              {/* Mega menu */}
              {n.sub && (
                <div className="absolute start-1/2 -translate-x-1/2 top-full pt-3 opacity-0 invisible group-hover/n:opacity-100 group-hover/n:visible transition-all duration-300 z-50"
                     style={{ transform: 'translateX(-50%) translateY(-4px)', transitionProperty:'opacity,visibility,transform' }}>
                  <div className="w-[720px] bg-paper border hairline shadow-2xl p-7 grid grid-cols-12 gap-6">
                    <div className="col-span-7">
                      <p className="ff-serif text-2xl text-ink mb-4">{t('nav.discover')}</p>
                      <div className="grid grid-cols-2 gap-x-6 gap-y-1.5">
                        {n.sub.map((c) => (
                          <button key={c.id} onClick={() => window.RBNav.go('shop', { cat: c.id })}
                                  className="flex items-center justify-between py-1.5 text-sm hover:text-rose-500 group/c text-start">
                            <span className="ff-body">{c[window.RBI18n.useI18n().lang]}</span>
                            <span className="text-[10px] text-ink-mute ms-3 ltr-nums">{fmtNum(c.count, window.RBI18n.useI18n().lang)}</span>
                          </button>
                        ))}
                      </div>
                    </div>
                    <a onClick={() => window.RBNav.go('shop')} className="col-span-5 relative aspect-[3/4] overflow-hidden cursor-pointer group/m">
                      <window.RBImg.CategoryImg c={n.sub[0]} className="w-full h-full"/>
                      <div className="absolute inset-0 bg-gradient-to-t from-ink/55 via-ink/10 to-transparent flex items-end p-5">
                        <div className="text-paper">
                          <p className="text-[10px] tracking-[0.35em] mb-1 opacity-90">{t('nav.discover')}</p>
                          <span className="ff-serif text-2xl">{t('nav.view_all')} →</span>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              )}
            </div>
          ))}
        </nav>
      </div>
    </header>
  );
};

/* ---------- Mobile menu drawer ---------- */
const MobileMenu = ({ open, onClose }) => {
  const { t, lang } = useI18n();
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 md:hidden">
      <div className="absolute inset-0 bg-ink/45 animate-[fadeIn_.3s_ease]" onClick={onClose}/>
      <div className="absolute inset-y-0 end-0 w-[88%] max-w-sm bg-paper flex flex-col animate-[slideIn_.4s_cubic-bezier(0.22,1,0.36,1)]">
        <style>{`@keyframes slideIn { from { transform: translateX(${lang==='ar'?'-':''}100%);} to { transform: translateX(0);} } @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }`}</style>
        <div className="flex items-center justify-between p-5 border-b hairline">
          <Logo size="sm"/>
          <button onClick={onClose} className="p-2"><IconX/></button>
        </div>
        <nav className="flex-1 overflow-y-auto py-2">
          {[
            { id:'home', label: t('nav.home') },
            { id:'shop', label: t('nav.shop') },
            ...window.RB.CATEGORIES.map(c => ({ id:'shop', label:c[lang], params:{cat:c.id}, sub:true })),
            { id:'new', label: t('nav.new') },
            { id:'lookbook', label: t('nav.lookbook') },
            { id:'sale', label: t('nav.sale'), accent:true },
            { id:'about', label: t('nav.about') },
            { id:'contact', label: t('nav.contact') }
          ].map((n, i) => (
            <button key={i} onClick={() => { window.RBNav.go(n.id, n.params); onClose(); }}
                    className={`w-full text-start px-5 py-3.5 border-b border-ink/5 text-[15px]
                                ${n.accent ? 'text-rose-500' : n.sub ? 'text-ink-soft text-sm ps-8' : 'text-ink'}`}>
              {n.label}
            </button>
          ))}
        </nav>
        <div className="p-5 border-t hairline">
          <div className="flex items-center justify-between mb-4">
            <LangSwitch/>
            <div className="flex items-center gap-2">
              <a className="p-2 border hairline" href="#"><IconInsta size={14}/></a>
              <a className="p-2 border hairline" href="#"><IconFb size={14}/></a>
              <a className="p-2 border hairline" href="#"><IconWA size={14}/></a>
            </div>
          </div>
          <button onClick={() => { window.RBNav.go('account'); onClose(); }}
                  className="w-full flex items-center gap-3 text-sm py-2"><IconUser size={16}/> {t('nav.account')}</button>
        </div>
      </div>
    </div>
  );
};

/* ---------- Newsletter ---------- */
const Newsletter = () => {
  const { t } = useI18n();
  return (
    <section className="bg-paper-warm">
      <div className="max-w-2xl mx-auto px-6 py-14 md:py-20 text-center">
        <Reveal>
          <p className="ornament text-[10px] tracking-[0.4em] uppercase mb-3">{t('sec.nl_eye').replace(/—/g,'').trim()}</p>
          <h3 className="ff-serif text-3xl md:text-5xl text-ink mb-4 leading-[1.05]">{t('sec.nl_h')}</h3>
          <p className="text-ink-soft text-sm md:text-base leading-relaxed mb-7 max-w-md mx-auto">{t('sec.nl_sub')}</p>
          <form className="flex flex-col sm:flex-row gap-0 max-w-md mx-auto border-b border-ink" onSubmit={(e) => e.preventDefault()}>
            <input type="email" required placeholder={t('sec.nl_ph')}
                   className="flex-1 bg-transparent px-2 py-3 text-sm focus:outline-none placeholder:text-ink-mute"/>
            <button className="text-ink text-xs tracking-[0.3em] uppercase px-3 py-3 hover:text-rose-500 transition">
              {t('sec.nl_btn')} →
            </button>
          </form>
        </Reveal>
      </div>
    </section>
  );
};

/* ---------- Footer ---------- */
const Footer = () => {
  const { t, lang } = useI18n();
  return (
    <footer className="bg-ink text-paper/85">
      <div className="max-w-[1480px] mx-auto px-6 md:px-10 py-14 md:py-16">
        <div className="grid md:grid-cols-12 gap-10 md:gap-14">
          <div className="md:col-span-4">
            <Logo size="md" inverse/>
            <p className="text-sm text-paper/65 leading-loose mt-8 max-w-sm">{t('footer.tag')}</p>
            <div className="flex items-center gap-2 mt-6">
              <a className="p-2.5 border border-paper/20 rounded-full hover:border-rose-300 hover:text-rose-300 transition" href="#"><IconInsta size={15}/></a>
              <a className="p-2.5 border border-paper/20 rounded-full hover:border-rose-300 hover:text-rose-300 transition" href="#"><IconFb size={15}/></a>
              <a className="p-2.5 border border-paper/20 rounded-full hover:border-rose-300 hover:text-rose-300 transition" href="#"><IconTiktok size={15}/></a>
              <a className="p-2.5 border border-paper/20 rounded-full hover:border-rose-300 hover:text-rose-300 transition" href="#"><IconWA size={15}/></a>
            </div>
          </div>

          <div className="md:col-span-2">
            <h4 className="ff-serif text-xl text-paper mb-5">{t('footer.shop_h')}</h4>
            <ul className="space-y-2.5 text-sm text-paper/65">
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.new_in')}</a></li>
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.best')}</a></li>
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.sale')}</a></li>
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.gift')}</a></li>
            </ul>
          </div>

          <div className="md:col-span-3">
            <h4 className="ff-serif text-xl text-paper mb-5">{t('footer.help_h')}</h4>
            <ul className="space-y-2.5 text-sm text-paper/65">
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.ship')}</a></li>
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.ret')}</a></li>
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.sizes')}</a></li>
              <li><a href="#" className="hover:text-rose-300 underline-grow">{t('footer.faq')}</a></li>
            </ul>
          </div>

          <div className="md:col-span-3">
            <h4 className="ff-serif text-xl text-paper mb-5">{t('footer.cnt_h')}</h4>
            <ul className="space-y-2.5 text-sm text-paper/65">
              <li>{t('footer.wa')}: <span dir="ltr" className="text-paper">+970 59 000 0000</span></li>
              <li>{t('footer.mail')}: <a href="mailto:hello@rare-boutique.com" className="hover:text-rose-300">hello@rare-boutique.com</a></li>
              <li>{t('footer.addr')}: {t('footer.addr_v')}</li>
              <li>{t('footer.hours')}: <span dir="ltr">{t('footer.hours_v')}</span></li>
            </ul>
          </div>
        </div>

        <div className="border-t border-paper/15 mt-14 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-xs text-paper/55">{t('footer.rights')}</p>
          <div className="flex items-center gap-3 text-paper/65">
            <span className="text-xs">{t('footer.pay')}:</span>
            <span className="px-3 py-1.5 border border-paper/25 text-[10px] tracking-[0.2em] uppercase">
              {lang === 'ar' ? 'الدفع عند الاستلام' : 'Cash on Delivery'}
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.RBChrome = { Brand: Logo, Logo, AnnouncementBar, LangSwitch, Header, MobileMenu, Newsletter, Footer };