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

const CONTENT = {
  fr: {
    eyebrow: 'Le cabinet',
    title: 'Au service de vos ambitions depuis 2019',
    lead: "MERKANTO est un cabinet de conseil en finance, transformation digitale et fiscalité, présent au Bénin, en Côte d'Ivoire et en France.",
    storyEyebrow: 'Notre histoire',
    storyTitle: "Né d'une conviction",
    storyImg: 'photo — cabinet / bureaux',
    story: [
      "Créé en 2019, MERKANTO est né de la conviction que la performance d'une entreprise repose sur l'alignement de sa finance, de sa fiscalité et de ses outils digitaux.",
      "Nous accompagnons particuliers et professionnels à chaque phase charnière de la vie de l'entreprise : création ou reprise, développement et digitalisation, transmission.",
      "De Cotonou à Aix-en-Provence, nos consultants conjuguent expertise locale et standards internationaux pour des résultats concrets et mesurables.",
    ],
    valuesEyebrow: 'Nos valeurs',
    valuesTitle: 'Ce qui nous guide',
    locEyebrow: 'Nos implantations',
    locTitle: 'Présents sur trois pays',
    locIntro: 'Une proximité locale, une vision internationale.',
    teamEyebrow: 'Notre équipe',
    teamTitle: 'Nos consultants',
    teamIntro: 'Des experts pluridisciplinaires en finance, fiscalité et technologie.',
    ctaTitle: 'Parlons de votre projet',
    ctaBody: 'Notre équipe vous répond sous 24 heures.',
    ctaBtn: 'Nous contacter',
  },
  en: {
    eyebrow: 'The firm',
    title: 'At the service of your ambitions since 2019',
    lead: "MERKANTO is an advisory firm in finance, digital transformation and taxation, operating across Benin, Côte d'Ivoire and France.",
    storyEyebrow: 'Our story',
    storyTitle: 'Born from a conviction',
    storyImg: 'photo — firm / offices',
    story: [
      "Founded in 2019, MERKANTO was born from the conviction that a company's performance rests on the alignment of its finance, taxation and digital tools.",
      'We support individuals and businesses at every pivotal stage of company life: creation or takeover, growth and digitalization, transmission.',
      'From Cotonou to Aix-en-Provence, our consultants combine local expertise with international standards for concrete, measurable results.',
    ],
    valuesEyebrow: 'Our values',
    valuesTitle: 'What guides us',
    locEyebrow: 'Our locations',
    locTitle: 'Present in three countries',
    locIntro: 'Local proximity, an international vision.',
    teamEyebrow: 'Our team',
    teamTitle: 'Our consultants',
    teamIntro: 'Multidisciplinary experts in finance, taxation and technology.',
    ctaTitle: "Let's talk about your project",
    ctaBody: 'Our team replies within 24 hours.',
    ctaBtn: 'Get in touch',
  },
}

const VALUES = {
  fr: [
    { title: 'Expertise', desc: 'Des consultants diplômés et reconnus en finance, fiscalité et technologie.' },
    { title: 'Proximité', desc: 'Un accompagnement sur mesure, au plus près de vos enjeux et de votre terrain.' },
    { title: 'Intégrité', desc: 'Transparence et rigueur déontologique dans chacune de nos missions.' },
    { title: 'Innovation', desc: 'Le digital au cœur de nos méthodes pour des solutions durables.' },
  ],
  en: [
    { title: 'Expertise', desc: 'Qualified, recognized consultants in finance, taxation and technology.' },
    { title: 'Proximity', desc: 'Tailored support, close to your challenges and your field.' },
    { title: 'Integrity', desc: 'Transparency and ethical rigor in every mission we undertake.' },
    { title: 'Innovation', desc: 'Digital at the core of our methods for lasting solutions.' },
  ],
}

const LOCATIONS = {
  fr: [
    { city: 'Cotonou', country: 'Bénin', desc: "Siège historique du cabinet, au cœur de l'Afrique de l'Ouest." },
    { city: 'Abidjan', country: "Côte d'Ivoire", desc: 'Hub régional pour nos clients ivoiriens et de la sous-région.' },
    { city: 'Aix-en-Provence', country: 'France', desc: 'Antenne européenne et lien avec nos partenaires français.' },
  ],
  en: [
    { city: 'Cotonou', country: 'Benin', desc: "The firm's historical headquarters, at the heart of West Africa." },
    { city: 'Abidjan', country: "Côte d'Ivoire", desc: 'Regional hub for our Ivorian and sub-regional clients.' },
    { city: 'Aix-en-Provence', country: 'France', desc: 'European office and link with our French partners.' },
  ],
}

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

export default function About() {
  const { lang } = useLang()
  const t = CONTENT[lang]
  const values = VALUES[lang]
  const locations = LOCATIONS[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 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: 620, margin: '22px 0 0' }}>{t.lead}</p>
        </Container>
      </section>

      {/* STORY */}
      <section style={{ background: '#F4F6FA' }}>
        <Container
          className="mk-two-col"
          style={{ padding: '72px 40px', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'start' }}
        >
          <div style={{ height: 420, borderRadius: 18, overflow: 'hidden', position: 'sticky', top: 96 }}>
            <OfficeArt />
          </div>
          <div>
            <Eyebrow>{t.storyEyebrow}</Eyebrow>
            <h2 style={{ fontWeight: 800, fontSize: 34, letterSpacing: '-.02em', color: '#0A2540', margin: '12px 0 0' }}>{t.storyTitle}</h2>
            <div style={{ width: 60, height: 3, background: '#D4A017', margin: '20px 0' }} />
            {t.story.map((p, i) => (
              <p key={i} style={{ fontSize: 17, lineHeight: 1.75, color: '#46566B', margin: '0 0 18px' }}>{p}</p>
            ))}
          </div>
        </Container>
      </section>

      {/* VALUES */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)', borderBottom: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '84px 40px' }}>
          <Eyebrow>{t.valuesEyebrow}</Eyebrow>
          <h2 style={{ fontWeight: 800, fontSize: 40, letterSpacing: '-.02em', color: '#0A2540', margin: '12px 0 0' }}>{t.valuesTitle}</h2>
          <div className="mk-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 22, marginTop: 42 }}>
            {values.map((v, i) => (
              <div key={i} style={{ background: '#F4F6FA', borderRadius: 16, padding: 28, border: '1px solid rgba(10,37,64,.06)' }}>
                <div style={{ width: 42, height: 42, borderRadius: 11, background: 'rgba(212,160,23,.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ width: 12, height: 12, borderRadius: 3, background: '#D4A017' }} />
                </div>
                <h3 style={{ fontWeight: 700, fontSize: 20, letterSpacing: '-.01em', color: '#0A2540', margin: '18px 0 8px' }}>{v.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: '#5A6A7E', margin: 0 }}>{v.desc}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* LOCATIONS */}
      <section style={{ background: '#F4F6FA' }}>
        <Container style={{ padding: '84px 40px' }}>
          <Eyebrow>{t.locEyebrow}</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginTop: 10, flexWrap: 'wrap' }}>
            <h2 style={{ fontWeight: 800, fontSize: 40, letterSpacing: '-.02em', color: '#0A2540', margin: 0 }}>{t.locTitle}</h2>
            <span style={{ fontSize: 16, color: '#46566B', maxWidth: 360, textAlign: 'right' }}>{t.locIntro}</span>
          </div>
          <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, marginTop: 42 }}>
            {locations.map((l, i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 18, padding: 32, border: '1px solid rgba(10,37,64,.07)' }}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#0E7CC7' }}>{l.country}</div>
                <h3 style={{ fontWeight: 800, fontSize: 26, letterSpacing: '-.01em', color: '#0A2540', margin: '10px 0 12px' }}>{l.city}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: '#5A6A7E', margin: 0 }}>{l.desc}</p>
              </div>
            ))}
          </div>
        </Container>
      </section>

      {/* STATS */}
      <section style={{ background: '#0A2540' }}>
        <Container style={{ padding: '72px 40px' }}>
          <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 30 }}>
            {stats.map((st, i) => (
              <div key={i} style={{ borderTop: '1px solid rgba(212,160,23,.45)', paddingTop: 20 }}>
                <div style={{ fontWeight: 800, fontSize: 54, 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>

      {/* TEAM */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '84px 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: 44, 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: 200, 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>

      {/* 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>
  )
}
