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

const UI = {
  fr: { eyebrow: 'Domaine de compétence', backLabel: 'Tous les services', introEyebrow: 'En quoi ça consiste', prestaTitle: 'Nos prestations', otherEyebrow: 'Aller plus loin', otherTitle: 'Nos autres expertises', ctaBtn: 'Discuter de mon projet' },
  en: { eyebrow: 'Area of expertise', backLabel: 'All services', introEyebrow: 'What it involves', prestaTitle: 'Our services', otherEyebrow: 'Go further', otherTitle: 'Our other expertise', ctaBtn: 'Discuss my project' },
}

const DATA = {
  ingenierie: {
    num: '01',
    fr: {
      title: 'Ingénierie financière',
      lead: 'Structurer, financer et piloter la performance de votre entreprise.',
      intro: [
        "MERKANTO met à votre disposition, en collaboration avec ses partenaires européens et africains, toute sa compétence en matière de financement, de structuration et de pilotage financier.",
        'Nous intervenons à chaque étape clé : création, développement, restructuration ou transmission.',
      ],
      prestations: [
        { title: 'Recherche de financements', desc: 'Identification des sources adaptées et montage des dossiers.' },
        { title: 'Business plan & modélisation', desc: "Prévisionnels solides et modèles d'évaluation fiables." },
        { title: 'Levée de fonds', desc: 'De la préparation à la négociation avec les investisseurs.' },
        { title: 'Restructuration financière', desc: 'Optimisation de la structure de capital et du BFR.' },
        { title: 'Contrôle de gestion', desc: 'Indicateurs et tableaux de bord de performance.' },
        { title: "Évaluation d'entreprise", desc: 'Valorisation pour cessions, fusions ou transmissions.' },
      ],
    },
    en: {
      title: 'Financial engineering',
      lead: "Structure, finance and steer your company's performance.",
      intro: [
        'Together with its European and African partners, MERKANTO brings you its full expertise in financing, structuring and financial steering.',
        'We intervene at every key stage: creation, growth, restructuring or transmission.',
      ],
      prestations: [
        { title: 'Financing search', desc: 'Identifying suitable sources and building the files.' },
        { title: 'Business plan & modeling', desc: 'Solid forecasts and reliable valuation models.' },
        { title: 'Fundraising', desc: 'From preparation to negotiation with investors.' },
        { title: 'Financial restructuring', desc: 'Optimizing capital structure and working capital.' },
        { title: 'Management control', desc: 'Performance indicators and dashboards.' },
        { title: 'Company valuation', desc: 'Valuation for disposals, mergers or transmissions.' },
      ],
    },
  },
  fiscalite: {
    num: '02',
    fr: {
      title: 'Ingénierie fiscale',
      lead: 'Sécuriser et optimiser votre fiscalité et votre patrimoine.',
      intro: [
        "En s'appuyant sur la compétence reconnue de ses consultants, MERKANTO met à votre disposition son expertise en fiscalité et gestion patrimoniale, en France comme à l'international.",
        "Nous sécurisons vos opérations et identifions les leviers d'optimisation pertinents.",
      ],
      prestations: [
        { title: 'Optimisation fiscale', desc: 'Pour les entreprises comme pour les particuliers.' },
        { title: 'Gestion de patrimoine', desc: 'Structuration et valorisation de votre patrimoine.' },
        { title: "Transmission d'entreprise", desc: 'Donations, pacte Dutreil, transmission optimisée.' },
        { title: 'Contentieux fiscal', desc: 'Assistance lors des contrôles et vérifications.' },
        { title: 'Déclarations IR / IS / IFI', desc: 'Établissement et suivi de vos obligations déclaratives.' },
        { title: 'Structuration internationale', desc: 'Optimisation des opérations transfrontalières.' },
      ],
    },
    en: {
      title: 'Tax engineering',
      lead: 'Secure and optimize your taxation and your assets.',
      intro: [
        'Drawing on the recognized expertise of its consultants, MERKANTO offers its expertise in taxation and wealth management, in France and internationally.',
        'We secure your operations and identify the relevant optimization levers.',
      ],
      prestations: [
        { title: 'Tax optimization', desc: 'For businesses as well as individuals.' },
        { title: 'Wealth management', desc: 'Structuring and growing your assets.' },
        { title: 'Business transmission', desc: 'Donations, Dutreil pact, optimized transmission.' },
        { title: 'Tax litigation', desc: 'Assistance during audits and inspections.' },
        { title: 'Income/corporate tax filings', desc: 'Preparing and tracking your reporting obligations.' },
        { title: 'International structuring', desc: 'Optimizing cross-border operations.' },
      ],
    },
  },
  digital: {
    num: '03',
    fr: {
      title: 'Transformation digitale',
      lead: 'Le digital, cœur de métier et dénominateur commun de nos missions.',
      intro: [
        "Le digital est au cœur du métier de MERKANTO et le dénominateur commun à tous nos domaines d'intervention.",
        'Nous concevons et déployons des solutions sur mesure pour digitaliser et fiabiliser vos processus.',
      ],
      prestations: [
        { title: 'Audit & stratégie digitale', desc: 'État des lieux et feuille de route de digitalisation.' },
        { title: 'Développement web & apps', desc: 'Sites, plateformes et applications métier sur mesure.' },
        { title: "ERP & systèmes d'information", desc: "Conception et intégration d'ERP adaptés à votre activité." },
        { title: 'Data & analytics', desc: 'Valorisation de vos données et aide à la décision.' },
        { title: 'Dématérialisation', desc: 'Automatisation et dématérialisation des processus.' },
        { title: 'Conduite du changement', desc: 'Accompagnement et formation de vos équipes.' },
      ],
    },
    en: {
      title: 'Digital transformation',
      lead: 'Digital is at the core of our business and the common thread of our missions.',
      intro: [
        "Digital is at the heart of MERKANTO's business and the common thread across all our fields of intervention.",
        'We design and deploy tailored solutions to digitalize and strengthen your processes.',
      ],
      prestations: [
        { title: 'Audit & digital strategy', desc: 'Assessment and a digitalization roadmap.' },
        { title: 'Web & app development', desc: 'Custom websites, platforms and business apps.' },
        { title: 'ERP & information systems', desc: 'Designing and integrating ERPs fit to your activity.' },
        { title: 'Data & analytics', desc: 'Leveraging your data for decision-making.' },
        { title: 'Process automation', desc: 'Automating and dematerializing processes.' },
        { title: 'Change management', desc: 'Supporting and training your teams.' },
      ],
    },
  },
}

const TITLES = {
  fr: { ingenierie: 'Ingénierie financière', digital: 'Transformation digitale', fiscalite: 'Ingénierie fiscale' },
  en: { ingenierie: 'Financial engineering', digital: 'Digital transformation', fiscalite: 'Tax engineering' },
}
const DESCS = {
  fr: { ingenierie: 'Structurer, financer et piloter votre performance.', digital: 'Digitaliser et fiabiliser vos processus.', fiscalite: 'Sécuriser et optimiser fiscalité et patrimoine.' },
  en: { ingenierie: 'Structure, finance and steer your performance.', digital: 'Digitalize and strengthen your processes.', fiscalite: 'Secure and optimize taxation and assets.' },
}
const ORDER = ['ingenierie', 'fiscalite', 'digital']

export default function ServiceDetail() {
  const { lang } = useLang()
  const params = useParams()
  let slug = params.slug
  if (!DATA[slug]) slug = 'ingenierie'

  const t = UI[lang]
  const node = DATA[slug]
  const svc = { num: node.num, ...node[lang] }
  const others = ORDER.filter((k) => k !== slug).map((k) => ({
    title: TITLES[lang][k],
    desc: DESCS[lang][k],
    to: '/services/' + k,
  }))

  return (
    <div style={{ fontFamily: "'Manrope',sans-serif", background: '#F4F6FA', color: '#0A2540' }}>
      {/* HERO (dark) */}
      <section style={{ background: '#0A2540' }}>
        <Container style={{ padding: '64px 40px 72px' }}>
          <Link to="/services" style={{ fontSize: 14, fontWeight: 600, color: '#5BB4E8', textDecoration: 'none' }}>
            ← {t.backLabel}
          </Link>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 26 }}>
            <div style={{ width: 58, height: 58, borderRadius: 15, background: 'rgba(91,180,232,.18)', color: '#5BB4E8', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 20 }}>
              {svc.num}
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5BB4E8' }}>{t.eyebrow}</div>
          </div>
          <h1 style={{ fontWeight: 800, fontSize: 48, lineHeight: 1.08, letterSpacing: '-.025em', color: '#fff', margin: '18px 0 0', maxWidth: 780 }}>
            {svc.title}
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: 'rgba(255,255,255,.78)', maxWidth: 640, margin: '18px 0 0' }}>{svc.lead}</p>
        </Container>
      </section>

      {/* INTRO + PRESTATIONS */}
      <section style={{ background: '#F4F6FA' }}>
        <Container
          className="mk-two-col"
          style={{ padding: '80px 40px', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 60, alignItems: 'start' }}
        >
          <div style={{ position: 'sticky', top: 96 }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#0A5C94' }}>{t.introEyebrow}</div>
            <div style={{ width: 60, height: 3, background: '#D4A017', margin: '18px 0' }} />
            {svc.intro.map((p, i) => (
              <p key={i} style={{ fontSize: 17, lineHeight: 1.75, color: '#46566B', margin: '0 0 18px' }}>{p}</p>
            ))}
            <Link to="/contact" className="mk-cta-primary" style={{ marginTop: 8, fontSize: 15, padding: '14px 24px' }}>
              {t.ctaBtn} <span>→</span>
            </Link>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#0A5C94', marginBottom: 24 }}>{t.prestaTitle}</div>
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              {svc.prestations.map((p, i) => (
                <div key={i} style={{ background: '#fff', borderRadius: 16, padding: 26, border: '1px solid rgba(10,37,64,.07)' }}>
                  <div style={{ width: 34, height: 34, borderRadius: 9, background: 'rgba(14,124,199,.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                    <span style={{ width: 9, height: 9, borderRadius: 2, background: '#0E7CC7' }} />
                  </div>
                  <h3 style={{ fontWeight: 700, fontSize: 18, letterSpacing: '-.01em', color: '#0A2540', margin: '0 0 7px' }}>{p.title}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: '#5A6A7E', margin: 0 }}>{p.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </section>

      {/* OTHER SERVICES */}
      <section style={{ background: '#fff', borderTop: '1px solid rgba(10,37,64,.06)' }}>
        <Container style={{ padding: '80px 40px' }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#0A5C94' }}>{t.otherEyebrow}</div>
          <h2 style={{ fontWeight: 800, fontSize: 34, letterSpacing: '-.02em', color: '#0A2540', margin: '12px 0 0' }}>{t.otherTitle}</h2>
          <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 22, marginTop: 36 }}>
            {others.map((o, i) => (
              <Link
                key={i}
                to={o.to}
                className="mk-card-hover-flat"
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 20,
                  background: '#F4F6FA',
                  borderRadius: 18,
                  padding: '30px 34px',
                  border: '1px solid rgba(10,37,64,.07)',
                  textDecoration: 'none',
                  transition: 'box-shadow .2s ease',
                }}
              >
                <div>
                  <h3 style={{ fontWeight: 700, fontSize: 22, letterSpacing: '-.01em', color: '#0A2540', margin: 0 }}>{o.title}</h3>
                  <p style={{ fontSize: 15, color: '#5A6A7E', margin: '8px 0 0', maxWidth: 360 }}>{o.desc}</p>
                </div>
                <span style={{ fontSize: 24, color: '#0E7CC7', flex: 'none' }}>→</span>
              </Link>
            ))}
          </div>
        </Container>
      </section>
    </div>
  )
}
