// Services section — editorial grid

const SERVICES = [
  { id: 'formation', icon: 'building', name: 'Company formation', blurb: 'Mainland LLC, Free Zone or Offshore — pick the right vehicle for your business in plain English.', tag: 'Most popular', img: 'media/service-mainland.webp', ph: 'Photo — licence signing or mainland office' },
  { id: 'visas',     icon: 'id',       name: 'Visas & Golden Visa', blurb: 'Residence, freelancer, remote-work, dependent, VIP medical & EID — and the UAE Golden Visa for investors.', img: 'media/brand-consultation-visual.webp', ph: 'Photo — visa medical or EID issuance' },
  { id: 'licence',   icon: 'shield',   name: 'Trade licence', blurb: 'New issue, renewal, modification, freeze, cancellation, liquidation — handled by our PRO desk.', img: 'media/service-freezone.webp', ph: 'Photo — PRO desk / trade licence document' },
  { id: 'bank',      icon: 'bank',     name: 'Corporate bank account', blurb: 'Introductions and prep for UAE banks — KYC, board resolutions, address proof, the lot.', img: 'media/brand-lifestyle.webp', ph: 'Photo — bank meeting or card / cheque book' },
  { id: 'tax',       icon: 'calc',     name: 'VAT & corporate tax', blurb: 'Registration, bookkeeping, filings, year-end. UAE corporate tax compliance for SMEs.', img: 'media/office-team-photo-1.webp', ph: 'Photo — accountant at work / tax filing' },
  { id: 'office',    icon: 'office',   name: 'Office & flexi-desk', blurb: 'Serviced rooms, hot desks and registered addresses — visa-eligible workspace at our Bay Square HQ.', img: 'media/office-serviced-rooms.webp', ph: 'Photo — serviced rooms / Bay Square HQ' }
];

const T_SVC = {
  en: { eyebrow: 'What we do', h: 'One partner, end-to-end.', lede: "We don't do bits of business setup. We do all of it — licensing, jurisdiction choice, visas, banking, tax and the unglamorous compliance that keeps your company live the year after." },
  ar: { eyebrow: 'ماذا نقدّم', h: 'شريك واحد لكل خطوة.', lede: 'لا نقدّم أجزاء من خدمات تأسيس الشركات. نقدّمها بالكامل — الترخيص واختيار الولاية والتأشيرات والحسابات المصرفية والضرائب والامتثال.' }
};

const ServiceCard = ({ s }) => (
  <article style={{
    background: 'var(--surface)', border: '1px solid var(--line)',
    borderRadius: 14, padding: 0,
    display: 'flex', flexDirection: 'column',
    minHeight: 380,
    overflow: 'hidden', position: 'relative',
    transition: 'transform .2s ease, box-shadow .2s ease'
  }}
  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 14px 30px -16px rgba(11,31,51,0.18)'; }}
  onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
    <div style={{ position: 'relative', height: 180, background: 'var(--paper-2)' }}>
      <image-slot
        id={`svc-${s.id}`}
        shape="rect"
        src={s.img}
        placeholder={s.ph}
        style={{ width: '100%', height: '100%', display: 'block' }}
      ></image-slot>
    </div>
    <div style={{ padding: '22px 26px 26px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{
          width: 44, height: 44, borderRadius: 10,
          background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--ink)', border: '1px solid var(--line)'
        }}><Icon name={s.icon} size={22} stroke={1.4} /></div>
        {s.tag && <Pill tone="accent">{s.tag}</Pill>}
      </div>
      <h3 className="h3" style={{ fontSize: 22 }}>{s.name}</h3>
      <p style={{ color: 'var(--muted)', margin: 0, fontSize: 15, flex: 1 }}>{s.blurb}</p>
      <a href="#contact" style={{
        color: 'var(--ink)', textDecoration: 'none', fontWeight: 500, fontSize: 14.5,
        display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 4
      }}>
        Learn more <Icon name="arrow" size={14} />
      </a>
    </div>
  </article>
);

const Services = ({ lang }) => {
  const t = T_SVC[lang];
  return (
    <section id="services" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 56 }} className="svc-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />{t.eyebrow}</div>
            <h2 className="h2">{t.h}</h2>
          </div>
          <p className="lede" style={{ marginBottom: 6 }}>{t.lede}</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="svc-grid">
          {SERVICES.map((s) => <ServiceCard key={s.id} s={s} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .svc-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .svc-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Services });