// Interactive Jurisdiction Comparison

const JURISDICTIONS = {
  mainland: {
    name: 'Mainland',
    sub: 'UAE Mainland (LLC)',
    icon: 'compass',
    desc: 'Trade anywhere in the UAE and bid for government contracts. Sponsored by a UAE-based agent or 100% foreign-owned in approved activities.',
    indicativeCost: 'AED 25k–60k',
    timeline: '7–14 working days',
    ownership: '100% foreign in most activities',
    visas: 'Quota tied to office size',
    audience: 'Local-market retailers, restaurants, contractors, government suppliers',
    zones: ['DED Dubai', 'Abu Dhabi DED', 'Sharjah Economic Dept', 'RAK DED']
  },
  freezone: {
    name: 'Free Zone',
    sub: '15+ free zones',
    icon: 'sparkle',
    desc: 'Tax-friendly, 100% foreign ownership, sector-clustered communities. Cannot trade directly in the mainland without a local distributor.',
    indicativeCost: 'AED 12k–45k',
    timeline: '5–10 working days',
    ownership: '100% foreign-owned',
    visas: 'Visa packages 0/2/3/6+',
    audience: 'Holding cos, consultancies, e-commerce, media, crypto, professional services',
    zones: ['IFZA', 'DMCC', 'Meydan', 'RAKEZ', 'SHAMS', 'SPC', 'DAFZA', 'JAFZA', 'DSO', 'ADGM', 'KIZAD', 'Masdar', 'Fujairah']
  },
  offshore: {
    name: 'Offshore',
    sub: 'JAFZA / RAK Offshore',
    icon: 'anchor',
    desc: 'A corporate vehicle for international holding, asset protection and confidentiality. Cannot operate inside the UAE, no visas issued.',
    indicativeCost: 'AED 12k–22k',
    timeline: '3–7 working days',
    ownership: '100% foreign-owned',
    visas: 'No UAE visas issued',
    audience: 'International holding, IP, asset protection, estate planning',
    zones: ['JAFZA Offshore', 'RAK ICC', 'Ajman Offshore']
  }
};

const T_JUR = {
  en: { eyebrow: 'Choose your jurisdiction', h: 'Mainland, Free Zone or Offshore?', lede: 'The single biggest decision in UAE setup. Pick a vehicle to see who it suits — then estimate the cost.', cta: 'Compare with a specialist', costSuffix: 'indicative — exact at consultation', timelineL: 'Indicative timeline', costL: 'Indicative setup cost', ownL: 'Ownership', visaL: 'UAE visas', audL: 'Best suited for', zonesL: 'Popular options' },
  ar: { eyebrow: 'اختر الولاية', h: 'البر الرئيسي أم منطقة حرة أم أوفشور؟', lede: 'القرار الأكبر في تأسيس شركتك. اختر النوع لترى من يناسبه.', cta: 'قارن مع مستشار', costSuffix: 'تقديري — العرض الدقيق في الاستشارة', timelineL: 'المدة التقديرية', costL: 'التكلفة التقديرية', ownL: 'الملكية', visaL: 'تأشيرات الإمارات', audL: 'مناسب لـ', zonesL: 'خيارات شائعة' }
};

const Jurisdictions = ({ lang }) => {
  const [active, setActive] = useState('freezone');
  const t = T_JUR[lang];
  const j = JURISDICTIONS[active];

  return (
    <section id="jurisdictions" className="dark" style={{ background: 'var(--ink)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 48 }} className="jur-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: 'rgba(243,238,229,0.55)' }}>
              <span className="dot" />{t.eyebrow}
            </div>
            <h2 className="h2" style={{ color: 'var(--paper)' }}>
              {t.h.split('?')[0]}<span style={{ color: 'var(--accent)' }}>?</span>
            </h2>
          </div>
          <p className="lede" style={{ color: 'rgba(243,238,229,0.7)', marginBottom: 6 }}>{t.lede}</p>
        </div>

        {/* Tabs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 32 }} className="jur-tabs">
          {Object.entries(JURISDICTIONS).map(([key, jj]) => {
            const isActive = key === active;
            return (
              <button key={key} onClick={() => setActive(key)} style={{
                textAlign: 'start',
                background: isActive ? 'var(--accent)' : 'transparent',
                border: isActive ? '1px solid var(--accent)' : '1px solid var(--line-dark)',
                color: isActive ? 'var(--ink)' : 'var(--paper)',
                padding: '22px 22px',
                borderRadius: 12, cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 14,
                transition: 'all .18s ease'
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10,
                  background: isActive ? 'rgba(11,31,51,0.12)' : 'rgba(243,238,229,0.06)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  <Icon name={jj.icon} size={22} stroke={1.6} color={isActive ? 'var(--ink)' : 'var(--paper)'} />
                </div>
                <div>
                  <div style={{ fontFamily: 'Sora, sans-serif', fontWeight: 600, fontSize: 19, letterSpacing: '-0.01em' }}>{jj.name}</div>
                  <div style={{ fontSize: 12.5, opacity: 0.7, fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{jj.sub}</div>
                </div>
              </button>
            );
          })}
        </div>

        {/* Detail card */}
        <div key={active} style={{
          background: 'var(--ink-2)',
          border: '1px solid var(--line-dark)',
          borderRadius: 18,
          padding: 36,
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 48,
          animation: 'fadeUp .35s cubic-bezier(.2,.7,.2,1) both'
        }} className="jur-detail">
          <div>
            <h3 className="h3" style={{ color: 'var(--paper)', fontSize: 28, marginBottom: 16 }}>{j.name}</h3>
            <p style={{ color: 'rgba(243,238,229,0.75)', fontSize: 17, lineHeight: 1.6, marginBottom: 30, maxWidth: '52ch' }}>{j.desc}</p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="jur-meta">
              {[
                { l: t.costL, v: j.indicativeCost, sub: t.costSuffix, accent: true },
                { l: t.timelineL, v: j.timeline },
                { l: t.ownL, v: j.ownership },
                { l: t.visaL, v: j.visas }
              ].map((m, i) => (
                <div key={i} style={{ borderTop: '1px solid var(--line-dark)', paddingTop: 16 }}>
                  <div className="eyebrow" style={{ color: 'rgba(243,238,229,0.5)', marginBottom: 8 }}>{m.l}</div>
                  <div style={{
                    fontFamily: 'Sora, sans-serif', fontSize: 18, fontWeight: 500,
                    color: m.accent ? 'var(--accent)' : 'var(--paper)',
                    lineHeight: 1.25
                  }}>{m.v}</div>
                  {m.sub && <div style={{ fontSize: 11.5, color: 'rgba(243,238,229,0.45)', fontFamily: 'JetBrains Mono, monospace', marginTop: 6 }}>{m.sub}</div>}
                </div>
              ))}
            </div>
          </div>

          <div style={{ borderInlineStart: '1px solid var(--line-dark)', paddingInlineStart: 36 }} className="jur-side">
            <div className="eyebrow" style={{ color: 'rgba(243,238,229,0.5)', marginBottom: 12 }}>{t.audL}</div>
            <p style={{ color: 'var(--paper)', fontSize: 16, lineHeight: 1.55, marginTop: 0, marginBottom: 30 }}>{j.audience}</p>

            <div className="eyebrow" style={{ color: 'rgba(243,238,229,0.5)', marginBottom: 12 }}>{t.zonesL}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>
              {j.zones.map(z => (
                <span key={z} style={{
                  fontSize: 12.5, fontFamily: 'JetBrains Mono, monospace',
                  padding: '6px 11px', borderRadius: 999,
                  background: 'rgba(243,238,229,0.06)',
                  color: 'var(--paper)',
                  border: '1px solid var(--line-dark)'
                }}>{z}</span>
              ))}
            </div>

            <a href="#estimator" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'var(--accent)', color: 'var(--ink)',
              padding: '12px 18px', borderRadius: 999, textDecoration: 'none',
              fontWeight: 500, fontSize: 14.5
            }}>
              Estimate {j.name} setup <Icon name="arrow" size={14} />
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .jur-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .jur-tabs { grid-template-columns: 1fr !important; }
          .jur-detail { grid-template-columns: 1fr !important; padding: 24px !important; gap: 28px !important; }
          .jur-side { border-inline-start: none !important; padding-inline-start: 0 !important; border-top: 1px solid var(--line-dark); padding-top: 28px; }
          .jur-meta { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Jurisdictions, JURISDICTIONS });