// Top navigation + Hero
const T_NAV = {
  en: { services: 'Services', jurisdictions: 'Jurisdictions', cost: 'Cost estimator', resources: 'Resources', about: 'About', book: 'Book a free consultation' },
  ar: { services: 'الخدمات', jurisdictions: 'المناطق', cost: 'تقدير التكلفة', resources: 'دليل المعرفة', about: 'من نحن', book: 'احجز استشارة مجانية' }
};

const Nav = ({ lang, onLang }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', f, { passive: true }); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  const t = T_NAV[lang];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(243,238,229,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all .2s ease'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76, gap: 24 }}>
        <a href="#top" style={{ textDecoration: 'none' }}><Logo size={22} /></a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="hide-sm">
          {[
            ['#services', t.services],
            ['#jurisdictions', t.jurisdictions],
            ['#estimator', t.cost],
            ['#resources', t.resources],
            ['#about', t.about]
          ].map(([href, label]) => (
            <a key={href} href={href} style={{
              padding: '10px 14px', color: 'var(--ink)', textDecoration: 'none',
              fontSize: 14.5, fontWeight: 500, borderRadius: 6
            }}>{label}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button onClick={() => onLang(lang === 'en' ? 'ar' : 'en')} style={{
            background: 'transparent', border: '1px solid var(--line)', borderRadius: 999,
            padding: '6px 12px', cursor: 'pointer',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11.5,
            letterSpacing: '0.1em', color: 'var(--muted)', display: 'inline-flex', gap: 8, alignItems: 'center'
          }}>
            <span style={{ color: lang === 'en' ? 'var(--ink)' : 'var(--muted-2)', fontWeight: lang === 'en' ? 600 : 400 }}>EN</span>
            <span style={{ opacity: 0.4 }}>/</span>
            <span style={{ color: lang === 'ar' ? 'var(--ink)' : 'var(--muted-2)', fontWeight: lang === 'ar' ? 600 : 400 }}>AR</span>
          </button>
          <a href="#contact" className="btn btn-primary btn-sm">
            {t.book} <Icon name="arrow" size={16} className="arrow" />
          </a>
        </div>
      </div>
    </nav>
  );
};

// Hero
const T_HERO = {
  en: {
    eyebrow: 'Trusted business setup partners — Bay Square, Dubai',
    headlineA: 'Business setup in Dubai,',
    headlineB: 'made simple.',
    body: "Company formation across Mainland, 15+ Free Zones and Offshore — with visas, banking, tax and compliance handled end-to-end by one partner. Plain answers to the questions that keep founders awake at 2am.",
    primary: 'Book a free consultation',
    secondary: 'Estimate my setup cost',
    tag1: 'Indicative cost in 4 questions',
    tag2: 'Exact quote at consultation',
    factsLine: 'Mainland · 15+ free zones · Offshore — one partner from licence to bank to visas.'
  },
  ar: {
    eyebrow: 'شركاء موثوقون لتأسيس الأعمال — بيز سكوير، دبي',
    headlineA: 'تأسيس الأعمال في دبي،',
    headlineB: 'بطريقة مبسطة.',
    body: 'تأسيس الشركات في البر الرئيسي وأكثر من 15 منطقة حرة وأوفشور — مع التأشيرات والحسابات المصرفية والضرائب والامتثال من شريك واحد.',
    primary: 'احجز استشارة مجانية',
    secondary: 'احسب التكلفة التقديرية',
    tag1: 'تقدير في 4 أسئلة',
    tag2: 'عرض دقيق عند الاستشارة',
    factsLine: 'البر الرئيسي · أكثر من 15 منطقة حرة · أوفشور.'
  }
};

const Hero = ({ lang, variant = 'split' }) => {
  const t = T_HERO[lang];
  return (
    <header id="top" style={{ paddingTop: 30, paddingBottom: 50, overflow: 'hidden', position: 'relative' }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: variant === 'split' ? 'minmax(0, 1.05fr) minmax(0, 1fr)' : '1fr',
          gap: 56,
          alignItems: 'end'
        }} className="hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 26 }}><span className="dot" />{t.eyebrow}</div>
            <h1 className="h1" style={{ fontSize: variant === 'centered' ? 'clamp(40px, 6vw, 84px)' : undefined, textAlign: variant === 'centered' ? 'center' : 'start' }}>
              {t.headlineA}<br/>
              <span style={{ fontStyle: 'italic', fontFamily: 'Newsreader, serif', fontWeight: 400, color: 'var(--ink-3)' }}>{t.headlineB}</span>
            </h1>
            <p className="lede" style={{ marginTop: 26, maxWidth: variant === 'centered' ? '70ch' : '52ch' }}>{t.body}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 36 }}>
              <a href="#contact" className="btn btn-primary">
                {t.primary} <Icon name="arrow" size={16} className="arrow" />
              </a>
              <a href="#estimator" className="btn btn-outline">
                <Icon name="calc" size={18} /> {t.secondary}
              </a>
            </div>
            <div style={{ marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'center', fontSize: 13.5, color: 'var(--muted)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="check" size={15} color="var(--accent-2)" /> {t.tag1}
              </span>
              <span style={{ opacity: 0.35 }}>·</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="check" size={15} color="var(--accent-2)" /> {t.tag2}
              </span>
            </div>
          </div>
          {variant !== 'centered' && (
            <div style={{ position: 'relative' }}>
              <div style={{
                position: 'relative', borderRadius: 14, overflow: 'hidden',
                aspectRatio: '4/5', background: 'var(--paper-2)',
                boxShadow: '0 30px 60px -30px rgba(11,31,51,0.35)'
              }}>
                <image-slot
                  id="hero-reception"
                  shape="rect"
                  src="media/office-reception.webp"
                  placeholder="Drop hero image — Bay Square reception or team"
                  style={{ width: '100%', height: '100%', display: 'block' }}
                ></image-slot>
                {/* Floating trust card */}
                <div style={{
                  position: 'absolute', left: 18, bottom: 18, right: 18,
                  background: 'rgba(243,238,229,0.95)', backdropFilter: 'blur(8px)',
                  border: '1px solid var(--line)', borderRadius: 12,
                  padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 14,
                  maxWidth: 360
                }}>
                  <div style={{ display: 'flex', gap: 2 }}>
                    {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16} color="var(--accent)" />)}
                  </div>
                  <div style={{ lineHeight: 1.2 }}>
                    <div style={{ fontWeight: 600, fontSize: 14.5, color: 'var(--ink)' }}>4.7 · 1,500+ Google reviews</div>
                    <div style={{ fontSize: 11.5, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace' }}>via Trustindex · May 2026</div>
                  </div>
                </div>
              </div>
              {/* Decorative second image */}
              <div style={{
                position: 'absolute', left: -40, top: -30, width: 180, height: 220,
                borderRadius: 12, overflow: 'hidden', boxShadow: '0 18px 36px -16px rgba(11,31,51,0.25)',
                border: '6px solid var(--paper)',
                display: 'none'
              }} className="hero-stamp">
                <img src="media/about-us-1.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
              </div>
            </div>
          )}
        </div>

        {/* Trust strip */}
        <div style={{
          marginTop: 80, paddingTop: 28, borderTop: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28
        }} className="trust-strip">
          {[
            { k: 'Since', v: '2019', n: '6+ years advising founders' },
            { k: 'Rating', v: '4.7★', n: '1,500+ Google reviews (May 2026)' },
            { k: 'Coverage', v: 'Mainland · Free Zone · Offshore', n: '15+ free zones across the UAE' },
            { k: 'Reach', v: 'UAE · KSA · UK · India', n: 'Group entities, kept separate' }
          ].map((s, i) => (
            <div key={i}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{s.k}</div>
              <div style={{ fontFamily: 'Sora, sans-serif', fontWeight: 600, fontSize: 22, letterSpacing: '-0.01em', color: 'var(--ink)', lineHeight: 1.15 }}>{s.v}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{s.n}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .trust-strip { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
        }
      `}</style>
    </header>
  );
};

Object.assign(window, { Nav, Hero });