// Shell: top nav, footer, status bars

const { useState, useEffect, useRef } = React;

function Logo({ size = 28, inverted = true }) {
  // Text-only wordmark
  const scale = size / 28;
  return (
    <div style={{display:'flex',alignItems:'baseline',gap:8}}>
      <span style={{
        fontFamily:'var(--display)',
        fontSize: 16 * scale,
        letterSpacing:'0.18em',
        textTransform:'uppercase',
        color: inverted ? '#fff' : 'var(--ink)',
        lineHeight: 1,
      }}>Done</span>
      <span style={{
        fontFamily:'var(--display)',
        fontSize: 16 * scale,
        letterSpacing:'0.18em',
        textTransform:'uppercase',
        color: 'var(--brand)',
        lineHeight: 1,
      }}>Events</span>
    </div>
  );
}

function TopBar({ lang, setLang, dir }) {
  return (
    <div style={{
      background:'var(--ink)', color:'var(--muted-inv)',
      padding:'8px var(--pad-x)', borderBottom:'1px solid rgba(255,255,255,0.06)',
      fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.14em', textTransform:'uppercase',
      display:'flex', justifyContent:'space-between', alignItems:'center', gap:12, flexWrap:'wrap'
    }}>
      <span style={{display:'flex',alignItems:'center',gap:10}}>
        <span className="dot pulse" /> Est. 2005 — Dubai Media City
      </span>
      <span style={{display:'flex',alignItems:'center',gap:18,flexWrap:'wrap'}}>
        <span>+971 4 439 0900</span>
        <span style={{opacity:.5}}>·</span>
        <span>info@doneevents.com</span>
        <span style={{opacity:.3}}>|</span>
        <button onClick={()=>setLang('en')}
          style={{background:'transparent',border:0,color: lang==='en'?'#fff':'inherit',padding:0,fontFamily:'inherit',fontSize:'inherit',letterSpacing:'inherit',textTransform:'inherit',cursor:'default',opacity: lang==='en'?1:.6}}>EN</button>
        <button onClick={()=>setLang('ar')}
          style={{background:'transparent',border:0,color: lang==='ar'?'#fff':'inherit',padding:0,fontFamily:'inherit',fontSize:'inherit',letterSpacing:'inherit',textTransform:'inherit',cursor:'default',opacity: lang==='ar'?1:.6}}>AR</button>
      </span>
    </div>
  );
}

function Nav({ route, go, t, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(()=>{
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    ['work', t.nav.work],
    ['services', t.nav.services],
    ['events', t.nav.events],
    ['about', t.nav.about],
    ['partner', t.nav.partner],
    ['contact', t.nav.contact],
  ];

  return (
    <>
      <TopBar lang={lang} setLang={setLang} />
      <nav style={{
        position:'sticky', top:0, zIndex: 40,
        background: scrolled ? 'rgba(11,11,13,0.86)' : 'rgba(11,11,13,0.55)',
        backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)',
        borderBottom:'1px solid rgba(255,255,255,0.08)',
        transition:'background .25s ease',
      }}>
        <div style={{
          padding:'16px var(--pad-x)',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:24,
        }}>
          <button onClick={()=>go('home')} style={{background:'transparent',border:0,padding:0,cursor:'default'}}>
            <Logo />
          </button>
          <div style={{display:'flex',alignItems:'center',gap:28,fontSize:13,fontWeight:500}} className="nav-items">
            {items.map(([key, label]) => (
              <button key={key} onClick={()=>go(key)}
                className={"nav-link " + (route===key ? 'active' : '')}
                style={{background:'transparent',border:0,color:'#fff',padding:0,fontSize:13,fontWeight:500,fontFamily:'inherit',cursor:'default'}}>
                {label}
              </button>
            ))}
          </div>
          <button className="btn btn-primary btn-arrow" onClick={()=>go('contact')}>
            {t.cta.plan} <span className="arr">→</span>
          </button>
        </div>
      </nav>
      <style>{`
        @media (max-width: 900px){
          .nav-items{ display:none !important; }
        }
      `}</style>
    </>
  );
}

function TickerBar({ lang }) {
  const items = lang==='ar'
    ? ['ريدفست دبي', 'مهرجان دبي للجاز', 'بليندد', 'تاغ فيست', 'DXB Laughs', 'منذ ٢٠٠٥']
    : ['RedFestDXB', 'Dubai Jazz Festival', 'Blended', 'TagFest', 'DXBLaughs', 'Government', 'Corporate', 'Talent Booking', 'Est. 2005', 'Part of Arab Media Group'];
  const doubled = [...items, ...items, ...items];
  return (
    <div className="ticker-bar">
      <div className="marquee">
        {doubled.map((s,i)=>(
          <span key={i}><b>★</b> {s}</span>
        ))}
      </div>
    </div>
  );
}

function Footer({ t, go }) {
  return (
    <footer style={{background:'var(--ink)', color:'var(--muted-inv)', paddingTop: 80, paddingBottom: 32, marginTop: 0}}>
      <div className="container" style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48, alignItems:'start'}}>
        <div>
          <Logo size={36} />
          <p style={{marginTop:20, fontSize:14, lineHeight:1.6, maxWidth:360, color:'var(--muted-inv)'}}>
            Dubai's leading event company. Live Entertainment · Corporate · Talent Booking. Part of Arab Media Group <span style={{opacity:.6}}>(confirm)</span>.
          </p>
          <div style={{marginTop:20, display:'flex', gap:10, flexWrap:'wrap'}}>
            <span className="pill">Est. 2005</span>
            <span className="pill">Dubai Media City</span>
            <span className="pill">EN · AR</span>
          </div>
        </div>
        <div>
          <div className="mono" style={{marginBottom:16, color:'#fff'}}>Sitemap</div>
          {[['home','Home'],['work',t.nav.work],['services',t.nav.services],['events',t.nav.events]].map(([k,l])=>(
            <button key={k} onClick={()=>go(k)} style={{display:'block',background:'transparent',border:0,color:'inherit',padding:'6px 0',fontFamily:'inherit',fontSize:14,cursor:'default'}}>{l}</button>
          ))}
        </div>
        <div>
          <div className="mono" style={{marginBottom:16, color:'#fff'}}>Company</div>
          {[['about',t.nav.about],['partner',t.nav.partner],['contact',t.nav.contact]].map(([k,l])=>(
            <button key={k} onClick={()=>go(k)} style={{display:'block',background:'transparent',border:0,color:'inherit',padding:'6px 0',fontFamily:'inherit',fontSize:14,cursor:'default'}}>{l}</button>
          ))}
        </div>
        <div>
          <div className="mono" style={{marginBottom:16, color:'#fff'}}>Contact</div>
          <div style={{fontSize:14, lineHeight:1.8}}>
            +971 4 439 0900<br/>
            info@doneevents.com<br/>
            Dubai Media City<br/>
            <span style={{opacity:.6}}>Suite TBC</span>
          </div>
        </div>
      </div>
      <div className="container" style={{marginTop:64, paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.08)', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12, fontSize:12, color:'var(--muted-inv)'}}>
        <span>© 2026 Done Events L.L.C. All rights reserved.</span>
        <span style={{display:'flex',gap:18}}>
          <span style={{cursor:'default'}}>Privacy</span>
          <span style={{cursor:'default'}}>Terms</span>
          <span style={{cursor:'default'}}>Cookies</span>
        </span>
      </div>
    </footer>
  );
}

// Stock-image overlay flag
function StockFlag({ lang }) {
  return <span className="stock-flag">{lang==='ar' ? 'صورة مرجعية' : 'Stock · placeholder'}</span>;
}

Object.assign(window, { Logo, Nav, Footer, TickerBar, StockFlag });