// Trust strip + Leadership + Resources (GuideHub) + Reviews

const LEADERS = [
  { name: 'Charlie Patel', role: 'Founder & Chairman', img: 'media/leader-charlie.webp', note: 'Founded Decisive Zone in 2019 with a single brief: make UAE company setup honest and end-to-end.' },
  { name: 'Dyuti Parruck', role: 'CEO & Partner',     img: 'media/leader-dyuti.webp',   note: 'Leads the consultancy. Background in cross-border corporate services across the GCC.' },
  { name: 'Abdul Manan Shaikh', role: 'Managing Partner', img: 'media/leader-abdul.webp', note: 'Runs operations across mainland, free zones and offshore — and the PRO desk.' }
];

const TEAM = [
  { name: 'Neha Thomas',   role: 'Chief Strategy Officer', img: 'media/team-neha.webp' },
  { name: 'Richard Cooke', role: 'Chief Operating Officer', img: 'media/team-richard.webp' },
  { name: 'Dipesh Rathod', role: 'Director of Operations', img: 'media/team-dipesh.webp' }
];

const Leadership = ({ lang }) => (
  <section id="about" style={{ background: 'var(--paper)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 64 }} className="lead-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />Since 2019 — Bay Square, Dubai</div>
          <h2 className="h2">A team that's set up<br/><span style={{ fontStyle: 'italic', fontFamily: 'Newsreader, serif', fontWeight: 400, color: 'var(--ink-3)' }}>thousands of UAE companies.</span></h2>
        </div>
        <div>
          <p className="lede" style={{ marginBottom: 18 }}>Decisive Zone was founded in 2019 by Charlie Patel with a single belief: business setup advice in the UAE should be transparent, end-to-end and ferociously practical. Six years on, the team handles licensing, jurisdiction, visas, banking, tax and compliance under one roof in Bay Square — and quietly looks after the renewals long after the licence is live.</p>
          <a href="#contact" className="btn btn-outline btn-sm">Visit our Bay Square HQ <Icon name="arrow" size={14} /></a>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26 }} className="lead-grid">
        {LEADERS.map((p, i) => (
          <article key={p.name} style={{
            background: 'var(--surface)', border: '1px solid var(--line)',
            borderRadius: 14, overflow: 'hidden', display: 'flex', flexDirection: 'column'
          }}>
            <div style={{ position: 'relative', aspectRatio: '4/4', background: 'var(--paper-2)' }}>
              <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.15)' }} />
              <div style={{
                position: 'absolute', insetInlineStart: 14, top: 14,
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--paper)',
                background: 'rgba(11,31,51,0.55)', padding: '4px 8px', borderRadius: 4,
                letterSpacing: '0.06em'
              }}>0{i + 1}</div>
            </div>
            <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <h3 className="h3" style={{ fontSize: 21, marginBottom: 4 }}>{p.name}</h3>
              <div style={{ color: 'var(--accent-2)', fontSize: 13.5, fontFamily: 'JetBrains Mono, monospace', marginBottom: 14, letterSpacing: '0.05em' }}>{p.role}</div>
              <p style={{ color: 'var(--muted)', fontSize: 14.5, margin: 0, flex: 1 }}>{p.note}</p>
            </div>
          </article>
        ))}
      </div>

      {/* Wider team row */}
      <div style={{ marginTop: 56, paddingTop: 36, borderTop: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 18 }}>
          <h3 className="h3" style={{ fontSize: 18 }}>And the people who actually deliver it</h3>
          <span style={{ fontSize: 13.5, color: 'var(--muted)' }}>Full team across operations, sales, accounts and HR — 50+ people.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="team-grid">
          {TEAM.map(p => (
            <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 64, height: 64, borderRadius: 50, overflow: 'hidden', background: 'var(--paper-2)', flexShrink: 0 }}>
                <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.2)' }} />
              </div>
              <div>
                <div style={{ fontFamily: 'Sora, sans-serif', fontWeight: 500, fontSize: 16.5 }}>{p.name}</div>
                <div style={{ color: 'var(--muted)', fontSize: 13.5 }}>{p.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .lead-head { grid-template-columns: 1fr !important; gap: 28px !important; }
        .lead-grid { grid-template-columns: 1fr !important; }
        .team-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

// Guides / Resources
const GUIDES = [
  { tag: 'Cost guide', title: 'How much does it cost to set up a business in Dubai?', read: '9 min read', body: 'A plain-English breakdown of mainland, free-zone and offshore cost drivers — and the bits no one tells you about (PRO, share capital, activity approvals).' },
  { tag: 'Jurisdictions', title: 'IFZA vs DMCC vs Meydan — which free zone should you pick?', read: '12 min read', body: 'Side-by-side on visa quotas, activity lists, banking pull and renewal economics. Updated for 2026.' },
  { tag: 'Tax', title: 'UAE corporate tax: a SME founder\'s checklist', read: '7 min read', body: 'What to register for, what to file, what to ignore. The 9% rate, exemptions and the small-business relief.' }
];

const Resources = () => (
  <section id="resources" style={{ background: 'var(--paper-2)' }}>
    <div className="container">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 48, gap: 30, flexWrap: 'wrap' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />Guide hub</div>
          <h2 className="h2">Answers to the questions<br/>founders ask first.</h2>
        </div>
        <a href="#" className="btn btn-outline">Browse all guides <Icon name="arrow" size={14} /></a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="guide-grid">
        {GUIDES.map((g, i) => (
          <a key={i} href="#" style={{ textDecoration: 'none' }}>
            <article style={{
              background: 'var(--surface)', border: '1px solid var(--line)',
              borderRadius: 14, padding: 28, height: '100%',
              display: 'flex', flexDirection: 'column', gap: 18,
              transition: 'all .2s ease'
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--ink)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Pill tone="accent">{g.tag}</Pill>
                <span style={{ fontSize: 11.5, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace' }}>{g.read}</span>
              </div>
              <h3 className="h3" style={{ fontSize: 20, lineHeight: 1.25 }}>{g.title}</h3>
              <p style={{ color: 'var(--muted)', fontSize: 14.5, margin: 0, flex: 1 }}>{g.body}</p>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--ink)', fontWeight: 500, fontSize: 14 }}>
                Read guide <Icon name="arrow" size={14} />
              </div>
            </article>
          </a>
        ))}
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .guide-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

// Reviews widget (attributed)
const Reviews = () => (
  <section style={{ background: 'var(--paper)' }}>
    <div className="container">
      <div style={{
        background: 'var(--ink)',
        color: 'var(--paper)',
        borderRadius: 20,
        padding: '60px 60px',
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        gap: 48,
        alignItems: 'center'
      }} className="rev-grid">
        <div>
          <div style={{ display: 'flex', gap: 4, marginBottom: 14 }}>
            {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={28} color="var(--accent)" />)}
          </div>
          <div style={{ fontFamily: 'Sora, sans-serif', fontWeight: 600, fontSize: 56, lineHeight: 1, color: 'var(--paper)', letterSpacing: '-0.02em' }}>4.7<span style={{ fontSize: 28, color: 'rgba(243,238,229,0.5)' }}>/5</span></div>
          <div style={{ marginTop: 8, color: 'rgba(243,238,229,0.7)', fontSize: 14, fontFamily: 'JetBrains Mono, monospace' }}>1,500+ Google reviews</div>
        </div>

        <div style={{ borderInlineStart: '1px solid var(--line-dark)', paddingInlineStart: 48 }} className="rev-mid">
          <p className="serif" style={{ fontSize: 22, lineHeight: 1.45, color: 'var(--paper)', margin: 0, fontStyle: 'italic', maxWidth: '46ch' }}>
            "Reviews aggregated by Trustindex from Google, May 2026. We embed the live widget so the rating updates itself — never a hardcoded number."
          </p>
          <div className="eyebrow" style={{ color: 'rgba(243,238,229,0.55)', marginTop: 18 }}>Verified · auto-updating · cited</div>
        </div>

        <a href="#" className="btn btn-accent" style={{ flexShrink: 0 }}>
          Read on Google <Icon name="arrow-up" size={16} />
        </a>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .rev-grid { grid-template-columns: 1fr !important; padding: 36px 28px !important; gap: 28px !important; }
        .rev-mid { border-inline-start: none !important; padding-inline-start: 0 !important; border-top: 1px solid var(--line-dark); padding-top: 28px; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Leadership, Resources, Reviews });