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

const CONTENT = {
  fr: {
    heroBadge: 'Cabinet conseil · depuis 2019',
    heroTitle: 'Au service de vos ambitions',
    heroSub:
      "Conseil et ingénierie financière, fiscale et budgétaire, et transformation digitale — au Bénin, en Côte d'Ivoire et en France.",
    heroCta1: 'Découvrir nos services',
    heroCta2: 'Nous contacter',
    heroImg: 'photo — conseil & équipe',
    heroCardLabel: 'clients accompagnés depuis 2019',
    introEyebrow: 'Le cabinet',
    introTitle: 'Un partenaire à chaque étape de votre entreprise',
    introBody:
      "Depuis 2019, MERKANTO accompagne particuliers et professionnels en Europe et en Afrique : finance d'entreprise, transformation digitale et fiscalité — de la création à la transmission.",
    introLink: 'En savoir plus',
    servicesEyebrow: 'Domaines de compétence',
    servicesTitle: 'Nos services',
    servicesIntro: 'Nous œuvrons à la performance globale des entreprises.',
    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.",
    statsEyebrow: 'Nos projets',
    statsTitle: 'Une valeur ajoutée mesurable',
    refsEyebrow: 'Ils nous font confiance',
    testiEyebrow: 'Témoignage',
    testiQuote:
      "MERKANTO a restructuré notre ingénierie financière et accéléré notre transformation digitale. Un partenaire de confiance, de la stratégie à l'exécution.",
    testiAuthor: 'Direction Générale',
    testiRole: "Groupe industriel — Afrique de l'Ouest",
    teamEyebrow: 'Notre équipe',
    teamTitle: 'Nos consultants',
    teamIntro: 'Des experts pluridisciplinaires en finance, fiscalité et technologie.',
    contactEyebrow: 'Parlons de votre projet',
    contactTitle: 'Donnons vie à vos ambitions',
    contactBody: 'Échangeons sur vos enjeux. Notre équipe vous répond sous 24 heures.',
    contactCta: 'Écrire un message',
    lblEmail: 'Email',
    lblAddress: 'Implantations',
    email: 'contact@mercanto.biz',
    address: 'Cotonou · Abidjan · Aix-en-Provence',
    serviceCta: 'Découvrir',
    proofItems: ['Depuis 2019', '+100 clients accompagnés', 'Présent dans 3 pays'],
  },
  en: {
    heroBadge: 'Advisory firm · since 2019',
    heroTitle: 'At the service of your ambitions',
    heroSub:
      "Financial, tax and budgetary advisory and engineering, and digital transformation — across Benin, Côte d'Ivoire and France.",
    heroCta1: 'Explore our services',
    heroCta2: 'Get in touch',
    heroImg: 'photo — advisory & team',
    heroCardLabel: 'clients supported since 2019',
    introEyebrow: 'The firm',
    introTitle: 'A partner at every stage of your business',
    introBody:
      'Since 2019, MERKANTO has supported individuals and businesses across Europe and Africa: corporate finance, digital transformation and taxation — from inception to transmission.',
    introLink: 'Learn more',
    servicesEyebrow: 'Areas of expertise',
    servicesTitle: 'Our services',
    servicesIntro: 'We work toward the overall performance of businesses.',
    approachEyebrow: 'Our approach',
    approachTitle: 'A clear method, measurable results',
    approachSub:
      'From audit to monitoring, we structure every mission around your goals and concrete metrics.',
    statsEyebrow: 'Our work',
    statsTitle: 'Measurable added value',
    refsEyebrow: 'They trust us',
    testiEyebrow: 'Testimonial',
    testiQuote:
      'MERKANTO restructured our financial engineering and accelerated our digital transformation. A trusted partner, from strategy to execution.',
    testiAuthor: 'Executive Management',
    testiRole: 'Industrial group — West Africa',
    teamEyebrow: 'Our team',
    teamTitle: 'Our consultants',
    teamIntro: 'Multidisciplinary experts in finance, taxation and technology.',
    contactEyebrow: "Let's talk about your project",
    contactTitle: "Let's bring your ambitions to life",
    contactBody: "Let's discuss your challenges. Our team replies within 24 hours.",
    contactCta: 'Send a message',
    lblEmail: 'Email',
    lblAddress: 'Locations',
    email: 'contact@mercanto.biz',
    address: 'Cotonou · Abidjan · Aix-en-Provence',
    serviceCta: 'Explore',
    proofItems: ['Since 2019', '+100 clients supported', 'Present in 3 countries'],
  },
}

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' },
    { num: '02', title: 'Ingénierie fiscale', desc: "Sécuriser et optimiser votre fiscalité et votre patrimoine, en France comme à l'international.", to: '/services/fiscalite' },
    { 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' },
  ],
  en: [
    { num: '01', title: 'Financial engineering', desc: "Structure, finance and steer your company's performance, alongside our European and African partners.", to: '/services/ingenierie' },
    { num: '02', title: 'Tax engineering', desc: 'Secure and optimize your taxation and assets, in France and internationally.', to: '/services/fiscalite' },
    { 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' },
  ],
}

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.' },
  ],
}

const STATS = {
  fr: [
    { value: '+100', label: 'Clients accompagnés' },
    { value: '2019', label: 'Année de création' },
    { value: '3', label: "Pays d'implantation" },
  ],
  en: [
    { value: '+100', label: 'Clients supported' },
    { value: '2019', label: 'Founded' },
    { value: '3', label: 'Countries of operation' },
  ],
}

const TEAM = {
  fr: [
    { name: 'Samira Derres', pole: 'Finance & Fiscalité', role: 'Avocate fiscaliste' },
    { name: 'Masmoud Dine', pole: 'Finance & Fiscalité', role: 'Fiscalité & gestion' },
    { name: 'Zahra Id Ahmed', pole: 'Informatique', role: 'Stratégie & communication' },
    { name: 'Alvinice Kodjo', pole: 'Gestion digitale', role: 'Data science' },
    { name: 'Florent Agbobli', pole: 'Informatique', role: 'Architecte logiciel' },
    { name: 'Kevin Evedomenawo', pole: 'Informatique', role: 'Développeur web' },
  ],
  en: [
    { name: 'Samira Derres', pole: 'Finance & Tax', role: 'Tax lawyer' },
    { name: 'Masmoud Dine', pole: 'Finance & Tax', role: 'Tax & management' },
    { name: 'Zahra Id Ahmed', pole: 'IT', role: 'Strategy & communication' },
    { name: 'Alvinice Kodjo', pole: 'Digital', role: 'Data science' },
    { name: 'Florent Agbobli', pole: 'IT', role: 'Software architect' },
    { name: 'Kevin Evedomenawo', pole: 'IT', role: 'Web developer' },
  ],
}

const REFS = [
  'WEZON',
  'BÉNIN PETRO',
  'ALLIANCE ENERGY BENIN',
  'GROUPE MÉGA LABEL',
  'ORANA',
  'POLYCLINIQUE LES COCOTIERS',
  'HEDIA HOLDING',
  'COLY ENERGY TOGO',
  'SOCIÉTÉ DE LA LOGISTIQUE DES ÉVÉNEMENTS (SoLE SA) — BÉNIN',
  "MINISTÈRE DE L'ÉCONOMIE ET DES FINANCES — BÉNIN",
  "AGENCE NATIONALE D'IDENTIFICATION DES PERSONNES — BÉNIN",
]

export default function Home() {
  const { lang } = useLang()
  const t = CONTENT[lang]
  const services = SERVICES[lang]
  const process = PROCESS[lang]
  const stats = STATS[lang]
  const team = TEAM[lang]

  return (
    <div style={{ fontFamily: "'Manrope',sans-serif", background: '#F4F6FA', color: '#0A2540' }}>
      {/* HERO */}
      <section style={{ background: '#F4F6FA' }}>
        <Container
          className="mk-two-col"
          style={{
            padding: '76px 40px 0',
            display: 'grid',
            gridTemplateColumns: '1.05fr .95fr',
            gap: 56,
            alignItems: 'center',
          }}
        >
          <div>
            <div
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 9,
                background: 'rgba(14,124,199,.1)',
                padding: '7px 14px',
                borderRadius: 999,
              }}
            >
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#D4A017' }} />
              <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#0A5C94' }}>
                {t.heroBadge}
              </span>
            </div>
            <h1 style={{ fontWeight: 800, fontSize: 60, lineHeight: 1.05, letterSpacing: '-.025em', color: '#0A2540', margin: '22px 0 0' }}>
              {t.heroTitle}
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.6, color: '#46566B', maxWidth: 510, margin: '22px 0 0' }}>{t.heroSub}</p>
            <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap' }}>
              <Link to="/services" className="mk-cta-primary">
                {t.heroCta1} <span style={{ fontSize: 18 }}>→</span>
              </Link>
              <Link to="/contact" className="mk-cta-secondary">
                {t.heroCta2}
              </Link>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ height: 440, borderRadius: 18, overflow: 'hidden' }}>
              <HeroArt />
            </div>
            <div
              style={{
                position: 'absolute',
                left: -22,
                bottom: 34,
                background: '#fff',
                borderRadius: 14,
                boxShadow: '0 16px 40px rgba(10,37,64,.16)',
                padding: '18px 22px',
                display: 'flex',
                alignItems: 'center',
                gap: 14,
              }}
            >
              <div style={{ fontWeight: 800, fontSize: 32, lineHeight: 1, color: '#0E7CC7' }}>+100</div>
              <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.35, color: '#46566B', maxWidth: 120 }}>
                {t.heroCardLabel}
              </div>
            </div>
          </div>
        </Container>
        <Container style={{ padding: '42px 40px 64px' }}>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              alignItems: 'center',
              gap: '14px 30px',
              paddingTop: 26,
              borderTop: '1px solid rgba(10,37,64,.1)',
            }}
          >
            {t.proofItems.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#D4A017' }} />
                <span style={{ fontSize: 15, fontWeight: 600, color: '#2C3C50' }}>{p}</span>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* REFERENCES */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)', borderBottom: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '44px 40px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#8294aa', marginBottom: 24 }}>
            {t.refsEyebrow}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 14 }}>
            {REFS.map((r, i) => (
              <div
                key={i}
                style={{
                  flex: '0 0 calc((100% - 56px) / 5)',
                  minHeight: 84,
                  padding: '10px 4px',
                  borderRadius: 10,
                  background: '#F4F6FA',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <span style={{ fontWeight: 700, fontSize: 12, lineHeight: 1.3, letterSpacing: '.02em', color: '#3A4A5E', textAlign: 'center', padding: '0 12px' }}>
                  {r}
                </span>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* INTRO */}
      <section style={{ background: '#F4F6FA' }}>
        <Container
          className="mk-two-col"
          style={{ padding: '90px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'start' }}
        >
          <div>
            <Eyebrow>{t.introEyebrow}</Eyebrow>
            <h2 style={{ fontWeight: 800, fontSize: 40, lineHeight: 1.12, letterSpacing: '-.02em', color: '#0A2540', margin: '14px 0 0' }}>
              {t.introTitle}
            </h2>
            <div style={{ width: 60, height: 3, background: '#D4A017', marginTop: 22 }} />
          </div>
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.7, color: '#46566B', margin: 0 }}>{t.introBody}</p>
            <Link to="/a-propos" className="mk-text-link" style={{ marginTop: 22 }}>
              {t.introLink} <span>→</span>
            </Link>
          </div>
        </Container>
      </section>

      {/* SERVICES */}
      <section style={{ background: '#F4F6FA' }}>
        <Container style={{ padding: '0 40px 92px' }}>
          <Eyebrow>{t.servicesEyebrow}</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginTop: 10, flexWrap: 'wrap' }}>
            <h2 style={{ fontWeight: 800, fontSize: 46, letterSpacing: '-.02em', color: '#0A2540', margin: 0 }}>{t.servicesTitle}</h2>
            <span style={{ fontSize: 16, color: '#46566B', maxWidth: 340, textAlign: 'right' }}>{t.servicesIntro}</span>
          </div>
          <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, marginTop: 42 }}>
            {services.map((s) => (
              <Link
                key={s.num}
                to={s.to}
                className="mk-card-hover"
                style={{
                  background: '#fff',
                  borderRadius: 18,
                  padding: 34,
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 16,
                  border: '1px solid rgba(10,37,64,.07)',
                  textDecoration: 'none',
                }}
              >
                <div style={{ width: 50, height: 50, borderRadius: 13, background: 'rgba(14,124,199,.1)', color: '#0E7CC7', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18 }}>
                  {s.num}
                </div>
                <h3 style={{ fontWeight: 700, fontSize: 23, lineHeight: 1.2, letterSpacing: '-.01em', color: '#0A2540', margin: 0 }}>{s.title}</h3>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: '#5A6A7E', margin: 0, flex: 1 }}>{s.desc}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontWeight: 700, fontSize: 15, color: '#0A5C94' }}>
                  {t.serviceCta} <span>→</span>
                </span>
              </Link>
            ))}
          </div>
        </Container>
      </section>

      {/* APPROACH */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '90px 40px' }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow>{t.approachEyebrow}</Eyebrow>
            <h2 style={{ fontWeight: 800, fontSize: 42, 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>

      {/* STATS */}
      <section style={{ background: '#0A2540' }}>
        <Container style={{ padding: '82px 40px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5BB4E8' }}>{t.statsEyebrow}</div>
          <h2 style={{ fontWeight: 800, fontSize: 34, letterSpacing: '-.01em', color: '#fff', margin: '14px 0 0', maxWidth: 560 }}>{t.statsTitle}</h2>
          <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30, marginTop: 48 }}>
            {stats.map((st, i) => (
              <div key={i} style={{ borderTop: '1px solid rgba(212,160,23,.45)', paddingTop: 20 }}>
                <div style={{ fontWeight: 800, fontSize: 58, lineHeight: 1, color: '#fff' }}>{st.value}</div>
                <div style={{ fontSize: 14, lineHeight: 1.4, color: 'rgba(255,255,255,.72)', marginTop: 12 }}>{st.label}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* TESTIMONIAL */}
      <section style={{ background: '#F4F6FA' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', padding: '90px 40px', textAlign: 'center' }}>
          <Eyebrow style={{ textAlign: 'center' }}>{t.testiEyebrow}</Eyebrow>
          <div style={{ fontFamily: 'Georgia,serif', fontSize: 80, lineHeight: 0.4, color: '#D4A017', marginTop: 24 }}>“</div>
          <p style={{ fontWeight: 600, fontSize: 30, lineHeight: 1.4, letterSpacing: '-.01em', color: '#0A2540', margin: '18px 0 0' }}>{t.testiQuote}</p>
          <div style={{ marginTop: 28, fontSize: 16, fontWeight: 700, color: '#0A2540' }}>{t.testiAuthor}</div>
          <div style={{ fontSize: 15, color: '#5A6A7E', marginTop: 2 }}>{t.testiRole}</div>
        </div>
      </section>

      {/* TEAM */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '88px 40px' }}>
          <Eyebrow>{t.teamEyebrow}</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginTop: 10, flexWrap: 'wrap' }}>
            <h2 style={{ fontWeight: 800, fontSize: 46, letterSpacing: '-.02em', color: '#0A2540', margin: 0 }}>{t.teamTitle}</h2>
            <span style={{ fontSize: 16, color: '#46566B', maxWidth: 340, textAlign: 'right' }}>{t.teamIntro}</span>
          </div>
          <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, marginTop: 42 }}>
            {team.map((m, i) => (
              <div key={i} style={{ background: '#F4F6FA', borderRadius: 18, overflow: 'hidden', border: '1px solid rgba(10,37,64,.07)' }}>
                <div style={{ height: 210, overflow: 'hidden' }}>
                  <Avatar index={i} />
                </div>
                <div style={{ padding: 24 }}>
                  <span style={{ display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '.07em', textTransform: 'uppercase', color: '#0A5C94', background: 'rgba(14,124,199,.1)', padding: '5px 11px', borderRadius: 999 }}>
                    {m.pole}
                  </span>
                  <h3 style={{ fontWeight: 700, fontSize: 21, letterSpacing: '-.01em', color: '#0A2540', margin: '14px 0 4px' }}>{m.name}</h3>
                  <p style={{ fontSize: 14, color: '#5A6A7E', margin: 0 }}>{m.role}</p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* CONTACT CTA */}
      <section style={{ background: '#0E7CC7' }}>
        <Container
          className="mk-two-col"
          style={{ padding: '84px 40px', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'center' }}
        >
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.8)' }}>{t.contactEyebrow}</div>
            <h2 style={{ fontWeight: 800, fontSize: 48, lineHeight: 1.08, letterSpacing: '-.02em', color: '#fff', margin: '16px 0 0' }}>{t.contactTitle}</h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,.88)', margin: '20px 0 0', maxWidth: 430 }}>{t.contactBody}</p>
            <div style={{ display: 'flex', gap: 14, marginTop: 34 }}>
              <Link to="/contact" className="mk-cta-light">
                {t.contactCta}
              </Link>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ background: 'rgba(255,255,255,.12)', borderRadius: 13, padding: 22 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.8)' }}>{t.lblEmail}</div>
              <div style={{ fontWeight: 700, fontSize: 22, color: '#fff', marginTop: 7 }}>{t.email}</div>
            </div>
            <div style={{ background: 'rgba(255,255,255,.12)', borderRadius: 13, padding: 22 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.8)' }}>{t.lblAddress}</div>
              <div style={{ fontSize: 16, color: '#fff', marginTop: 7 }}>{t.address}</div>
            </div>
          </div>
        </Container>
      </section>
    </div>
  )
}
