import { Link } from 'react-router-dom'
import { useLang } from '../i18n'
import { Container, Eyebrow } from '../components/ui'

const CONTENT = {
  fr: {
    eyebrow: 'Domaines de compétence',
    title: 'Nos services',
    lead: "Trois expertises complémentaires au service de la performance globale de votre entreprise — de la stratégie à l'exécution.",
    discover: 'Découvrir le détail',
    approachEyebrow: 'Notre approche',
    approachTitle: 'Une méthode claire, des résultats mesurables',
    approachSub: "De l'audit au suivi, nous structurons chaque mission autour de vos objectifs et d'indicateurs concrets.",
    ctaTitle: 'Un projet en tête ?',
    ctaBody: 'Échangeons sur vos enjeux. Notre équipe vous répond sous 24 heures.',
    ctaBtn: 'Nous contacter',
  },
  en: {
    eyebrow: 'Areas of expertise',
    title: 'Our services',
    lead: 'Three complementary areas of expertise serving the overall performance of your business — from strategy to execution.',
    discover: 'View details',
    approachEyebrow: 'Our approach',
    approachTitle: 'A clear method, measurable results',
    approachSub: 'From audit to monitoring, we structure every mission around your goals and concrete metrics.',
    ctaTitle: 'Have a project in mind?',
    ctaBody: "Let's discuss your challenges. Our team replies within 24 hours.",
    ctaBtn: 'Get in touch',
  },
}

const SERVICES = {
  fr: [
    { num: '01', title: 'Ingénierie financière', desc: 'Structurer, financer et piloter la performance de votre entreprise, en lien avec nos partenaires européens et africains.', to: '/services/ingenierie', bullets: ['Recherche de financements', 'Business plan & modélisation', "Évaluation d'entreprise"] },
    { num: '02', title: 'Ingénierie fiscale', desc: "Sécuriser et optimiser votre fiscalité et votre patrimoine, en France comme à l'international.", to: '/services/fiscalite', bullets: ['Optimisation fiscale', 'Gestion de patrimoine', "Transmission d'entreprise"] },
    { num: '03', title: 'Transformation digitale', desc: 'Le digital, cœur de métier et dénominateur commun de toutes nos missions de conseil.', to: '/services/digital', bullets: ['Développement web & apps', "ERP & systèmes d'information", 'Data & analytics'] },
  ],
  en: [
    { num: '01', title: 'Financial engineering', desc: "Structure, finance and steer your company's performance, alongside our European and African partners.", to: '/services/ingenierie', bullets: ['Financing search', 'Business plan & modeling', 'Company valuation'] },
    { num: '02', title: 'Tax engineering', desc: 'Secure and optimize your taxation and assets, in France and internationally.', to: '/services/fiscalite', bullets: ['Tax optimization', 'Wealth management', 'Business transmission'] },
    { num: '03', title: 'Digital transformation', desc: 'Digital is at the core of our business and the common thread across every advisory mission.', to: '/services/digital', bullets: ['Web & app development', 'ERP & information systems', 'Data & analytics'] },
  ],
}

const PROCESS = {
  fr: [
    { num: '01', title: 'Diagnostic', desc: 'Audit financier, fiscal et digital de votre situation et de vos enjeux.' },
    { num: '02', title: 'Stratégie', desc: 'Recommandations sur mesure et feuille de route priorisée.' },
    { num: '03', title: 'Mise en œuvre', desc: 'Déploiement opérationnel avec nos experts dédiés.' },
    { num: '04', title: 'Suivi & performance', desc: 'Pilotage des résultats et optimisation continue.' },
  ],
  en: [
    { num: '01', title: 'Diagnosis', desc: 'Financial, tax and digital audit of your situation and challenges.' },
    { num: '02', title: 'Strategy', desc: 'Tailored recommendations and a prioritized roadmap.' },
    { num: '03', title: 'Implementation', desc: 'Operational rollout with our dedicated experts.' },
    { num: '04', title: 'Monitoring & performance', desc: 'Results steering and continuous optimization.' },
  ],
}

export default function Services() {
  const { lang } = useLang()
  const t = CONTENT[lang]
  const services = SERVICES[lang]
  const process = PROCESS[lang]

  return (
    <div style={{ fontFamily: "'Manrope',sans-serif", background: '#F4F6FA', color: '#0A2540' }}>
      {/* HERO */}
      <section style={{ background: '#F4F6FA' }}>
        <Container style={{ padding: '72px 40px 0' }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h1 style={{ fontWeight: 800, fontSize: 54, lineHeight: 1.06, letterSpacing: '-.025em', color: '#0A2540', margin: '14px 0 0', maxWidth: 760 }}>
            {t.title}
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: '#46566B', maxWidth: 640, margin: '22px 0 0' }}>{t.lead}</p>
        </Container>
      </section>

      {/* SERVICE ROWS */}
      <section style={{ background: '#F4F6FA' }}>
        <Container style={{ padding: '56px 40px 90px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {services.map((s) => (
            <Link
              key={s.num}
              to={s.to}
              className="mk-card-hover-3 mk-two-col"
              style={{
                display: 'grid',
                gridTemplateColumns: '80px 1.4fr 1fr',
                gap: 36,
                alignItems: 'center',
                background: '#fff',
                borderRadius: 20,
                padding: 38,
                border: '1px solid rgba(10,37,64,.07)',
                textDecoration: 'none',
                transition: 'box-shadow .2s ease, transform .2s ease',
              }}
            >
              <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(14,124,199,.1)', color: '#0E7CC7', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 22 }}>
                {s.num}
              </div>
              <div>
                <h2 style={{ fontWeight: 800, fontSize: 28, letterSpacing: '-.02em', color: '#0A2540', margin: 0 }}>{s.title}</h2>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: '#5A6A7E', margin: '10px 0 0', maxWidth: 480 }}>{s.desc}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 16, fontWeight: 700, fontSize: 15, color: '#0A5C94' }}>
                  {t.discover} <span>→</span>
                </span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {s.bullets.map((b, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#D4A017', flex: 'none' }} />
                    <span style={{ fontSize: 14, fontWeight: 600, color: '#2C3C50' }}>{b}</span>
                  </div>
                ))}
              </div>
            </Link>
          ))}
        </Container>
      </section>

      {/* APPROACH */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '88px 40px' }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow>{t.approachEyebrow}</Eyebrow>
            <h2 style={{ fontWeight: 800, fontSize: 40, letterSpacing: '-.02em', color: '#0A2540', margin: '12px 0 0' }}>{t.approachTitle}</h2>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: '#46566B', margin: '18px 0 0' }}>{t.approachSub}</p>
          </div>
          <div className="mk-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24, marginTop: 50 }}>
            {process.map((p) => (
              <div key={p.num} style={{ borderTop: '2px solid #0E7CC7', paddingTop: 22 }}>
                <div style={{ fontWeight: 800, fontSize: 15, letterSpacing: '.06em', color: '#D4A017' }}>{p.num}</div>
                <h3 style={{ fontWeight: 700, fontSize: 20, letterSpacing: '-.01em', color: '#0A2540', margin: '14px 0 8px' }}>{p.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: '#5A6A7E', margin: 0 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* CTA */}
      <section style={{ background: '#0E7CC7' }}>
        <Container style={{ padding: '72px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <h2 style={{ fontWeight: 800, fontSize: 38, letterSpacing: '-.02em', color: '#fff', margin: 0, maxWidth: 560 }}>{t.ctaTitle}</h2>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,.88)', margin: '14px 0 0', maxWidth: 520 }}>{t.ctaBody}</p>
          </div>
          <Link to="/contact" className="mk-cta-light" style={{ padding: '16px 30px' }}>
            {t.ctaBtn}
          </Link>
        </Container>
      </section>
    </div>
  )
}
