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

const SOLUTION_KINDS = ['finance', 'erp', 'tax']

const CONTENT = {
  fr: {
    eyebrow: 'Nos solutions',
    title: 'Des outils digitaux au service de votre performance',
    lead: 'Au-delà du conseil, MERKANTO conçoit et déploie des solutions digitales pour piloter votre finance, votre fiscalité et vos opérations.',
    requestDemo: 'Demander une démo',
    customEyebrow: 'Sur mesure',
    customTitle: 'Un besoin spécifique ? Nous le construisons.',
    customBody: 'Nos équipes développent des solutions sur mesure, intégrées à vos systèmes existants et adaptées à votre métier.',
    customBtn: 'Parler à un expert',
  },
  en: {
    eyebrow: 'Our solutions',
    title: 'Digital tools serving your performance',
    lead: 'Beyond advisory, MERKANTO designs and deploys digital solutions to steer your finance, taxation and operations.',
    requestDemo: 'Request a demo',
    customEyebrow: 'Tailor-made',
    customTitle: 'A specific need? We build it.',
    customBody: 'Our teams develop tailor-made solutions, integrated with your existing systems and fit to your business.',
    customBtn: 'Talk to an expert',
  },
}

const SOLUTIONS = {
  fr: [
    { tag: 'Finance', title: 'Pilotage financier', desc: 'Un tableau de bord pour suivre en temps réel la performance financière de votre entreprise.', img: 'aperçu — dashboard finance', features: ['Indicateurs en temps réel', 'Prévisionnels & scénarios', 'Reporting automatisé'] },
    { tag: 'Gestion', title: 'ERP métier modulaire', desc: "Un système d'information intégré couvrant finance, achats, stocks et ressources.", img: 'aperçu — interface ERP', features: ['Modules à la carte', 'Intégration sur mesure', 'Multi-sites & multi-devises'] },
    { tag: 'Fiscalité', title: 'Suivi fiscal & conformité', desc: 'Une plateforme pour centraliser, suivre et sécuriser vos obligations fiscales.', img: 'aperçu — module fiscal', features: ['Calendrier des échéances', 'Alertes & conformité', 'Archivage sécurisé'] },
  ],
  en: [
    { tag: 'Finance', title: 'Financial steering', desc: "A dashboard to track your company's financial performance in real time.", img: 'preview — finance dashboard', features: ['Real-time indicators', 'Forecasts & scenarios', 'Automated reporting'] },
    { tag: 'Operations', title: 'Modular business ERP', desc: 'An integrated information system covering finance, procurement, inventory and resources.', img: 'preview — ERP interface', features: ['À-la-carte modules', 'Custom integration', 'Multi-site & multi-currency'] },
    { tag: 'Taxation', title: 'Tax tracking & compliance', desc: 'A platform to centralize, track and secure your tax obligations.', img: 'preview — tax module', features: ['Deadline calendar', 'Alerts & compliance', 'Secure archiving'] },
  ],
}

export default function Solutions() {
  const { lang } = useLang()
  const t = CONTENT[lang]
  const solutions = SOLUTIONS[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: 780 }}>
            {t.title}
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: '#46566B', maxWidth: 640, margin: '22px 0 0' }}>{t.lead}</p>
        </Container>
      </section>

      {/* SOLUTION CARDS */}
      <section style={{ background: '#F4F6FA' }}>
        <Container style={{ padding: '56px 40px 90px', display: 'flex', flexDirection: 'column', gap: 24 }}>
          {solutions.map((s, i) => (
            <div
              key={i}
              className="mk-two-col"
              style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, background: '#fff', borderRadius: 22, overflow: 'hidden', border: '1px solid rgba(10,37,64,.07)' }}
            >
              <div style={{ padding: 46 }}>
                <div style={{ display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#0A5C94', background: 'rgba(14,124,199,.1)', padding: '6px 12px', borderRadius: 999 }}>
                  {s.tag}
                </div>
                <h2 style={{ fontWeight: 800, fontSize: 30, letterSpacing: '-.02em', color: '#0A2540', margin: '18px 0 0' }}>{s.title}</h2>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: '#5A6A7E', margin: '14px 0 22px' }}>{s.desc}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {s.features.map((f, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                      <span style={{ width: 18, height: 18, borderRadius: 5, background: 'rgba(212,160,23,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                        <span style={{ width: 7, height: 7, borderRadius: 2, background: '#D4A017' }} />
                      </span>
                      <span style={{ fontSize: 15, fontWeight: 600, color: '#2C3C50' }}>{f}</span>
                    </div>
                  ))}
                </div>
                <Link to="/contact" className="mk-text-link" style={{ marginTop: 26, fontSize: 15 }}>
                  {t.requestDemo} <span>→</span>
                </Link>
              </div>
              <div style={{ minHeight: 300, height: '100%', overflow: 'hidden' }}>
                <SolutionArt kind={SOLUTION_KINDS[i] || 'finance'} />
              </div>
            </div>
          ))}
        </Container>
      </section>

      {/* CUSTOM CTA (dark) */}
      <section style={{ background: '#0A2540' }}>
        <Container
          className="mk-two-col"
          style={{ padding: '80px 40px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}
        >
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5BB4E8' }}>{t.customEyebrow}</div>
            <h2 style={{ fontWeight: 800, fontSize: 38, letterSpacing: '-.02em', color: '#fff', margin: '14px 0 0', maxWidth: 520 }}>{t.customTitle}</h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,.78)', margin: '18px 0 0', maxWidth: 520 }}>{t.customBody}</p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Link to="/contact" className="mk-cta-primary" style={{ padding: '16px 30px' }}>
              {t.customBtn}
            </Link>
          </div>
        </Container>
      </section>
    </div>
  )
}
