// ============================================================
// USER ENGAGEMENT OVERVIEW
// A dashboard-style panel that shows the shape of our engagements,
// with a link out to the full Clients page (gated dossiers live there).
// ============================================================

const ENGAGEMENT_CONTENT = {
  en: {
    eyebrow: '// Engagement overview',
    title: 'How we engage,',
    titleEm: 'what it ships.',
    lede: 'Every engagement scopes to a measurable outcome — a shape, a timeline, and a definition-of-done. Here is what that pattern looks like across the last 24 months.',
    stats: [
      { n: '140+',   l: 'products & platforms shipped',     sub: 'since 2016'   },
      { n: '6–14 wk', l: 'median engagement length',         sub: 'concept → live' },
      { n: '92%',    l: 'engagements renewed or expanded',  sub: 'trailing 24 mo' },
      { n: '9 yrs',  l: 'median senior team tenure',        sub: 'staffing floor' },
    ],
    shapeTitle: 'Engagement shapes',
    shapes: [
      { code: '01', n: 'Discovery',      w: '2–4 wk',  d: 'Scoped problem → validated brief + proof of concept.' },
      { code: '02', n: 'Build',          w: '6–14 wk', d: 'Senior team ships a measurable outcome end-to-end.' },
      { code: '03', n: 'Run & hand-over', w: 'ongoing', d: 'Managed service until the client team owns it cleanly.' },
    ],
    caseTitle: 'Selected clients & case studies',
    caseLede: 'A selection of engagements across European retail, industry, and public sector — with three flagship dossiers available under NDA-equivalent terms.',
    caseCtaPrimary: 'See all clients  →',
    caseCtaSecondary: 'Flagship case studies are gated.',
    caseTeasers: [
      { unit: 'skills',   industry: 'Retail · 14 markets',    label: 'Fressnapf · Digital workspace' },
      { unit: 'cx',       industry: 'Pharmacy · DACH',         label: 'Sanicare · Personalization engine' },
      { unit: 'elements', industry: 'Retail · Food delivery', label: 'Pottsalat · Customer data platform' },
      { unit: 'labs',     industry: 'Public sector · Malta',  label: 'MITA · Tender management app' },
    ],
  },
  de: {
    eyebrow: '// Engagement-Überblick',
    title: 'Wie wir arbeiten,',
    titleEm: 'was dabei rauskommt.',
    lede: 'Jedes Engagement hat ein messbares Ergebnis — Umfang, Timeline, Definition-of-Done stehen vor dem Start. So sieht das Muster der letzten 24 Monate aus.',
    stats: [
      { n: '140+',   l: 'ausgelieferte Produkte & Plattformen', sub: 'seit 2016' },
      { n: '6–14 W.', l: 'Median-Engagement-Länge',              sub: 'Konzept → Live' },
      { n: '92%',    l: 'Engagements verlängert oder erweitert', sub: 'rollend 24 Mon.' },
      { n: '9 J.',   l: 'Median-Seniorität im Team',            sub: 'Staffing-Minimum' },
    ],
    shapeTitle: 'Engagement-Formate',
    shapes: [
      { code: '01', n: 'Discovery',      w: '2–4 W.', d: 'Klares Problem → validiertes Briefing + Proof-of-Concept.' },
      { code: '02', n: 'Build',          w: '6–14 W.', d: 'Senior-Team liefert ein messbares Ergebnis end-to-end.' },
      { code: '03', n: 'Run & Übergabe', w: 'laufend', d: 'Managed Service, bis das Kundenteam sauber übernommen hat.' },
    ],
    caseTitle: 'Kunden & Fallstudien',
    caseLede: 'Eine Auswahl von Engagements über europäischen Handel, Industrie und Public Sector — mit drei Flagship-Dossiers unter NDA-äquivalenten Bedingungen.',
    caseCtaPrimary: 'Alle Kunden ansehen  →',
    caseCtaSecondary: 'Flagship-Fallstudien sind gesperrt.',
    caseTeasers: [
      { unit: 'skills',   industry: 'Handel · 14 Märkte',       label: 'Fressnapf · Digital Workspace' },
      { unit: 'cx',       industry: 'Apotheke · DACH',           label: 'Sanicare · Personalization-Engine' },
      { unit: 'elements', industry: 'Handel · Food Delivery',    label: 'Pottsalat · Customer Data Platform' },
      { unit: 'labs',     industry: 'Public Sector · Malta',    label: 'MITA · Tender-Management-App' },
    ],
  },
};

// ============================================================
// MAIN COMPONENT
// ============================================================
function Engagement({ lang }) {
  const t = ENGAGEMENT_CONTENT[lang] || ENGAGEMENT_CONTENT.en;

  return (
    <section style={engStyles.root} id="engagement" data-screen-label="Engagement Overview">
      <div style={engStyles.inner}>

        {/* HEADER */}
        <div style={engStyles.head}>
          <div className="t-eyebrow" style={engStyles.eyebrow}>{t.eyebrow}</div>
          <h2 style={engStyles.h2}>
            {t.title}<br/>
            <em style={engStyles.em}>{t.titleEm}</em>
          </h2>
          <p style={engStyles.lede}>{t.lede}</p>
        </div>

        {/* STATS STRIP */}
        <div style={engStyles.statGrid}>
          {t.stats.map((s, i) => (
            <div key={i} style={engStyles.statCell}>
              <div style={engStyles.statN}>{s.n}</div>
              <div style={engStyles.statL}>{s.l}</div>
              <div style={engStyles.statSub}>{s.sub}</div>
            </div>
          ))}
        </div>

        {/* SHAPES ROW */}
        <div style={engStyles.shapeBlock}>
          <div style={engStyles.blockHead}>
            <div className="t-eyebrow" style={{ color: 'var(--fg-subtle)' }}>{t.shapeTitle}</div>
            <div style={engStyles.blockRule} />
          </div>
          <div style={engStyles.shapeGrid}>
            {t.shapes.map((s, i) => (
              <div key={i} style={engStyles.shapeCell}>
                <div style={engStyles.shapeCode}>{s.code}</div>
                <div style={engStyles.shapeName}>{s.n}</div>
                <div style={engStyles.shapeDur}>{s.w}</div>
                <div style={engStyles.shapeDesc}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CLIENTS TEASER — links to dedicated page */}
        <a href="prodct Clients.html" style={engStyles.teaserBlock} className="eng-teaser">
          <div style={engStyles.teaserHead}>
            <div>
              <div className="t-eyebrow" style={{ color: 'var(--fg-subtle)', marginBottom: 10 }}>{t.caseTitle}</div>
              <h3 style={engStyles.teaserH3}>{t.caseLede}</h3>
            </div>
            <div style={engStyles.teaserArrow} aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </div>
          </div>

          <div style={engStyles.teaserList}>
            {t.caseTeasers.map((c, i) => (
              <div key={i} style={engStyles.teaserRow}>
                <span className={`u-tag u-tag--${c.unit}`} style={{ fontSize: 11, padding: '2px 7px' }}>
                  {c.unit === 'skills' ? '/skills' : `[${c.unit[0].toUpperCase() + c.unit.slice(1)}]`}
                </span>
                <span style={engStyles.teaserIndustry}>{c.industry}</span>
                <span style={engStyles.teaserLabel}>{c.label}</span>
              </div>
            ))}
            <div style={{ ...engStyles.teaserRow, ...engStyles.teaserRowLocked }}>
              <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2.5" y="6" width="9" height="6.5" rx="1"/>
                <path d="M4.5 6V4a2.5 2.5 0 1 1 5 0v2"/>
              </svg>
              <span style={{ ...engStyles.teaserIndustry, color: 'var(--fg-subtle)' }}>NDA</span>
              <span style={{ ...engStyles.teaserLabel, color: 'var(--fg-muted)', fontStyle: 'italic' }}>
                + 3 flagship dossiers · {t.caseCtaSecondary.replace('Flagship case studies are ', '').replace('Flagship-Fallstudien sind ', '')}
              </span>
            </div>
          </div>

          <div style={engStyles.teaserFoot}>
            <span style={engStyles.teaserFootCta}>{t.caseCtaPrimary}</span>
            <span style={engStyles.teaserFootNote}>5 public · 3 gated</span>
          </div>
        </a>
      </div>

      <style>{`
        .eng-teaser { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
        .eng-teaser:hover { background: var(--bg-muted) !important; border-color: var(--border-strong) !important; }
        .eng-teaser:hover svg { transform: translateX(3px); }
        .eng-teaser svg { transition: transform var(--dur-base) var(--ease-out); }
      `}</style>
    </section>
  );
}

// ============================================================
// STYLES
// ============================================================
const engStyles = {
  root: { padding: '40px 40px 120px' },
  inner: { maxWidth: 1200, margin: '0 auto' },

  head: { maxWidth: 760, marginBottom: 56 },
  eyebrow: { marginBottom: 20, color: 'var(--fg-muted)' },
  h2: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 5.5vw, 68px)',
    fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02,
    color: 'var(--fg-strong)', margin: 0,
  },
  em: { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--prodct-500)' },
  lede: {
    fontSize: 18, lineHeight: 1.55, color: 'var(--fg-muted)',
    maxWidth: 620, margin: '28px 0 0',
  },

  // Stats
  statGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    borderTop: '1px solid var(--border)',
    borderBottom: '1px solid var(--border)',
    marginBottom: 72,
  },
  statCell: {
    padding: '28px 24px',
    borderRight: '1px solid var(--border)',
    display: 'flex', flexDirection: 'column', gap: 6,
  },
  statN: {
    fontFamily: 'var(--font-sans)', fontSize: 44, fontWeight: 500,
    letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--fg-strong)',
  },
  statL: { fontSize: 14, color: 'var(--fg)', lineHeight: 1.35, marginTop: 8 },
  statSub: {
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)',
    letterSpacing: '0.02em', marginTop: 4,
  },

  // Shapes
  shapeBlock: { marginBottom: 72 },
  blockHead: { display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 },
  blockRule: { flex: 1, height: 1, background: 'var(--border)' },
  shapeGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
  shapeCell: {
    padding: '24px 24px 28px',
    border: '1px solid var(--border)',
    borderRadius: 10,
    background: 'var(--bg-elevated)',
    display: 'flex', flexDirection: 'column', gap: 8,
  },
  shapeCode: {
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)',
    letterSpacing: '0.04em',
  },
  shapeName: {
    fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 500,
    letterSpacing: '-0.02em', color: 'var(--fg-strong)',
  },
  shapeDur: {
    fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--prodct-500)',
    marginBottom: 8,
  },
  shapeDesc: { fontSize: 14, lineHeight: 1.55, color: 'var(--fg-muted)' },

  // Teaser block (was case block)
  teaserBlock: {
    display: 'block',
    border: '1px solid var(--border)',
    borderRadius: 14,
    background: 'var(--bg-elevated)',
    padding: '36px 36px 32px',
    textDecoration: 'none',
    color: 'inherit',
    cursor: 'pointer',
  },
  teaserHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
    gap: 32, marginBottom: 28,
  },
  teaserH3: {
    fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 500,
    letterSpacing: '-0.015em', lineHeight: 1.35, color: 'var(--fg-strong)',
    margin: 0, maxWidth: 680,
  },
  teaserArrow: {
    width: 44, height: 44, borderRadius: '50%',
    border: '1px solid var(--border-strong)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--fg-muted)',
    flexShrink: 0,
  },
  teaserList: {
    display: 'flex', flexDirection: 'column',
    borderTop: '1px solid var(--border)',
  },
  teaserRow: {
    display: 'grid',
    gridTemplateColumns: '90px 220px 1fr',
    gap: 20, alignItems: 'center',
    padding: '14px 0',
    borderBottom: '1px solid var(--border)',
  },
  teaserRowLocked: {
    color: 'var(--fg-muted)',
  },
  teaserIndustry: {
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)',
    letterSpacing: '0.02em',
  },
  teaserLabel: {
    fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-strong)',
    letterSpacing: '-0.005em',
  },
  teaserFoot: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingTop: 20, flexWrap: 'wrap', gap: 12,
  },
  teaserFootCta: {
    fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500,
    color: 'var(--prodct-500)', letterSpacing: '-0.005em',
  },
  teaserFootNote: {
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-subtle)',
    letterSpacing: '0.02em',
  },
};

Object.assign(window, { Engagement });