// Services (4 tracks), Pricing (incl. Web tier), FAQ, About, Contact.
// v3 brand-owned brief.

const Services = ({ lang }) => {
  // Product-ladder service cards. 4 main operations products + Web as sidekick.
  // Quick Scan has its own landing page; everything else routes to the
  // dedicated /prijzen page where prices + bullets live in one place.
  const operationsProducts = [
    { key: 'quickscan', href: 'quick-scan.html' },
    { key: 'fullscan',  href: 'prijzen.html' },
    { key: 'build',     href: 'prijzen.html' },
    { key: 'care',      href: 'prijzen.html#care' },
  ];
  return (
    <section id="diensten">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'services.eyebrow')}</span>
          <h2 style={{ whiteSpace: 'pre-line' }}>{tr(lang, 'services.h2')}</h2>
          <p style={{ whiteSpace: 'pre-line' }}>{tr(lang, 'services.lede')}</p>
        </div>

        <div className="services-grid services-grid--main">
          {operationsProducts.map((p, i) => (
            <ProductCard key={p.key} lang={lang} keyBase={`services.product.${p.key}`} href={p.href} featured={i === 0} />
          ))}
        </div>

        <div className="services-grid services-grid--web">
          <ProductCard lang={lang} keyBase="services.product.web" href="prijzen.html" wide />
        </div>

        {/* Section footer CTA - 'Bekijk alle prijzen' link to /prijzen.
            Especially useful on mobile where the cards stack tall and a
            clear next step matters. */}
        <div style={{
          marginTop: 32,
          paddingTop: 24,
          borderTop: '1px solid var(--border)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 16,
          flexWrap: 'wrap',
        }}>
          <p style={{ margin: 0, fontSize: 14.5, color: 'var(--ink-secondary)' }}>
            {lang === 'nl' ? 'Volledige prijslijst, KMO-groeisubsidie en business-case-dossier op de prijzenpagina.' : 'Full pricing, KMO-groeisubsidie info and business case dossier on the pricing page.'}
          </p>
          <a href="prijzen.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '8px 14px',
            border: '1px solid color-mix(in oklab, var(--accent) 40%, var(--border))',
            borderRadius: 999,
            color: 'var(--accent)',
            fontFamily: 'var(--font-mono)',
            fontSize: 12,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            fontWeight: 500,
            textDecoration: 'none',
            whiteSpace: 'nowrap',
          }}>
            {lang === 'nl' ? 'Bekijk alle prijzen' : 'See full pricing'} →
          </a>
        </div>

      </div>
      <style>{`
        .services-grid { display: grid; gap: 16px; }
        .services-grid--main { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
        .services-grid--web  { grid-template-columns: 1fr; }
        @media (max-width: 800px) {
          .services-grid--main { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

const ProductCard = ({ lang, keyBase, href, featured, wide }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       className="card product-card"
       style={{
         display: 'flex',
         flexDirection: 'column',
         gap: 18,
         padding: wide ? 'clamp(28px, 3vw, 40px)' : 'clamp(24px, 2.5vw, 32px)',
         background: featured ? 'color-mix(in oklab, var(--accent) 7%, var(--bg-raised))' : 'var(--bg-raised)',
         border: featured ? '1px solid color-mix(in oklab, var(--accent) 35%, var(--border))' : '1px solid var(--border)',
         borderRadius: 'var(--radius-card)',
         textDecoration: 'none', color: 'inherit',
         transition: 'transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease)',
         transform: hover ? 'translateY(-3px)' : 'translateY(0)',
         boxShadow: hover ? '0 14px 32px color-mix(in oklab, var(--ink-primary) 14%, transparent)' : 'none',
         borderColor: hover ? 'var(--accent)' : (featured ? 'color-mix(in oklab, var(--accent) 35%, var(--border))' : 'var(--border)'),
       }}>
      {/* Prices removed from Diensten cards - single source of truth
          lives in the Prijzen section below. Cards now only show the
          product label as eyebrow. */}
      <span className="mono" style={{
        color: 'var(--accent)',
        fontSize: 11,
        letterSpacing: '0.14em',
      }}>{tr(lang, `${keyBase}.label`)}</span>
      <h3 style={{
        fontSize: wide ? 'clamp(1.4rem, 1.4vw + 0.6rem, 1.85rem)' : 'clamp(1.2rem, 0.9vw + 0.7rem, 1.5rem)',
        letterSpacing: '-0.015em',
        lineHeight: 1.2,
        margin: 0,
        textWrap: 'balance',
        color: 'var(--ink-primary)',
        maxWidth: '24ch',
      }}>{tr(lang, `${keyBase}.headline`)}</h3>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {[1,2,3,4].map(n => (
          <li key={n} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 14.5, color: 'var(--ink-secondary)', lineHeight: 1.45,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                 stroke="var(--accent)" strokeWidth="2.4" strokeLinecap="round"
                 style={{ flexShrink: 0, marginTop: 4 }}>
              <path d="m5 12 5 5L20 7"/>
            </svg>
            <span>{tr(lang, `${keyBase}.b${n}`)}</span>
          </li>
        ))}
      </ul>
      <div style={{
        marginTop: 'auto',
        paddingTop: 14,
        borderTop: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{
          color: hover ? 'var(--accent)' : 'var(--ink-secondary)',
          fontFamily: 'var(--font-mono)',
          fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500,
          transition: 'color 180ms var(--ease)',
        }}>{tr(lang, `${keyBase}.cta`)} →</span>
      </div>
    </a>
  );
};

const ServiceCard = ({ lang, label, title, tagline, bullets, pills, cta, ctaHref, calLink, compact }) => (
  <div className="card" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 18,
    padding: compact ? 28 : 32,
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span className="mono" style={{ color: 'var(--accent)' }}>{tr(lang, label)}</span>
    </div>
    <h3 style={{ fontSize: compact ? '1.5rem' : '1.75rem', letterSpacing: '-0.01em' }}>
      {tr(lang, title)}
    </h3>
    <p className="secondary" style={{ fontSize: 15, lineHeight: 1.55 }}>
      {tr(lang, tagline)}
    </p>
    <ul style={{
      listStyle: 'none', padding: 0, margin: 0,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {bullets.map((b, i) => (
        <li key={i} style={{
          display: 'flex',
          gap: 12,
          fontSize: 14,
          color: 'var(--ink-secondary)',
          lineHeight: 1.5,
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 4 }}>
            <path d="m5 12 5 5L20 7"/>
          </svg>
          <span>
            {b.b ? (
              <>
                <strong style={{ color: 'var(--ink-primary)', fontWeight: 600 }}>{tr(lang, b.t)}:</strong>{' '}
                {tr(lang, b.b)}
              </>
            ) : (
              tr(lang, b.t)
            )}
          </span>
        </li>
      ))}
    </ul>
    {pills && pills.length > 0 && (
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, paddingTop: 4 }}>
        {pills.map(p => <StackPill key={p} label={p} />)}
      </div>
    )}
    <div style={{ paddingTop: 8 }}>
      {calLink ? (
        <a
          data-cal-link={calLink}
          data-cal-config='{"layout":"month_view","theme":"dark"}'
          onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink, config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/' + calLink, '_self'); } }}
          style={{
            color: 'var(--accent)',
            fontSize: 14,
            fontWeight: 500,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            cursor: 'pointer',
          }}>
          {tr(lang, cta)} →
        </a>
      ) : (
        <a href={ctaHref || '#contact'} style={{
          color: 'var(--accent)',
          fontSize: 14,
          fontWeight: 500,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
        }}>
          {tr(lang, cta)} →
        </a>
      )}
    </div>
  </div>
);

const FomoBanner = ({ lang }) => (
  <section style={{ paddingTop: 24, paddingBottom: 24 }}>
    <div className="container">
      <div style={{
        padding: '24px clamp(24px, 4vw, 48px)',
        border: '1px solid var(--accent)',
        borderRadius: 'var(--radius-card)',
        background: 'color-mix(in oklab, var(--accent) 8%, transparent)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 24,
        flexWrap: 'wrap',
      }}>
        <p style={{
          fontSize: 'clamp(1.25rem, 2vw, 1.625rem)',
          fontWeight: 500,
          letterSpacing: '-0.01em',
          margin: 0,
          color: 'var(--ink-primary)',
          maxWidth: 720,
        }}>
          {tr(lang, 'hero.fomo.title')}
        </p>
        <a
          data-cal-link="modusops/quick-scan"
          data-cal-config='{"layout":"month_view","theme":"dark"}'
          className="btn btn-primary"
          style={{ padding: '12px 22px', fontSize: 15, whiteSpace: 'nowrap', cursor: 'pointer' }}
          onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink: 'modusops/quick-scan', config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/modusops/quick-scan', '_self'); } }}>
          {tr(lang, 'hero.fomo.cta')}
        </a>
      </div>
    </div>
  </section>
);

const Pricing = ({ lang }) => {
  const buildTiers = [
    {
      tier: 'pricing.qs.tier',
      title: 'pricing.qs.title',
      price: '€1.199',
      priceMode: 'fixed',
      dur: 'pricing.qs.dur',
      outcome: 'pricing.qs.outcome',
      bullets: ['pricing.qs.b1', 'pricing.qs.b2', 'pricing.qs.b3', 'pricing.qs.b4', 'pricing.qs.b5'],
      cta: 'pricing.qs.cta',
      calLink: 'modusops/quick-scan',
    },
    {
      tier: 'pricing.fullscan.tier',
      title: 'pricing.fullscan.title',
      price: '€2.999',
      priceMode: 'from',
      outcome: 'pricing.fullscan.outcome',
      bullets: ['pricing.fullscan.b1', 'pricing.fullscan.b2', 'pricing.fullscan.b3', 'pricing.fullscan.b4', 'pricing.fullscan.b5'],
      cta: 'pricing.fullscan.cta',
      calLink: 'modusops/intro',
    },
    {
      tier: 'pricing.starter.tier',
      title: 'pricing.starter.title',
      price: '€3.999',
      priceMode: 'from',
      dur: 'pricing.starter.dur',
      outcome: 'pricing.starter.outcome',
      bullets: ['pricing.starter.b1', 'pricing.starter.b2', 'pricing.starter.b3', 'pricing.starter.b4'],
      cta: 'pricing.startWithScan',
      calLink: 'modusops/intro',
    },
    {
      tier: 'pricing.build.tier',
      title: 'pricing.build.title',
      price: '€5.500 – €12.500',
      priceMode: 'range',
      dur: 'pricing.build.dur',
      outcome: 'pricing.build.outcome',
      bullets: ['pricing.build.b1', 'pricing.build.b2', 'pricing.build.b3', 'pricing.build.b4'],
      cta: 'pricing.startWithScan',
      calLink: 'modusops/intro',
    },
    {
      tier: 'pricing.web.tier',
      title: 'pricing.web.title',
      priceLabel: 'pricing.web.priceLabel',
      outcome: 'pricing.web.outcome',
      bullets: ['pricing.web.b1', 'pricing.web.b2', 'pricing.web.b3', 'pricing.web.b4'],
      cta: 'pricing.web.cta',
      calLink: 'modusops/intro',
    },
    {
      tier: 'pricing.content.tier',
      title: 'pricing.content.title',
      priceLabel: 'pricing.content.priceLabel',
      outcome: 'pricing.content.outcome',
      bullets: ['pricing.content.b1', 'pricing.content.b2', 'pricing.content.b3', 'pricing.content.b4', 'pricing.content.b5'],
      cta: 'pricing.content.cta',
      calLink: 'modusops/intro',
    },
  ];

  const careTiers = [
    {
      tier: 'pricing.care.solo.tier',
      title: 'pricing.care.solo.title',
      price: '€495',
      suffix: lang === 'nl' ? '/maand' : '/month',
      outcome: 'pricing.care.solo.outcome',
      bullets: ['pricing.care.solo.b1', 'pricing.care.solo.b2', 'pricing.care.solo.b3', 'pricing.care.solo.b4'],
      cta: 'pricing.startHere',
      calLink: 'modusops/intro',
    },
    {
      tier: 'pricing.care.light.tier',
      title: 'pricing.care.light.title',
      price: '€1.200',
      suffix: lang === 'nl' ? '/maand' : '/month',
      outcome: 'pricing.care.light.outcome',
      bullets: ['pricing.care.light.b1', 'pricing.care.light.b2', 'pricing.care.light.b3', 'pricing.care.light.b4'],
      cta: 'pricing.startHere',
      calLink: 'modusops/intro',
    },
    {
      tier: 'pricing.care.core.tier',
      title: 'pricing.care.core.title',
      price: '€2.500',
      suffix: lang === 'nl' ? '/maand' : '/month',
      outcome: 'pricing.care.core.outcome',
      bullets: ['pricing.care.core.b1', 'pricing.care.core.b2', 'pricing.care.core.b3', 'pricing.care.core.b4'],
      cta: 'pricing.startHere',
      calLink: 'modusops/intro',
    },
  ];

  return (
    <section id="prijzen" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'pricing.eyebrow')}</span>
          <h2>{tr(lang, 'pricing.h2')}</h2>
          <p>{tr(lang, 'pricing.lede')}</p>
        </div>

        {/* Build tiers */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 16,
        }}>
          {buildTiers.map((t, i) => (
            <PriceCard key={i} t={t} lang={lang} />
          ))}
        </div>

        {/* Care divider */}
        <div id="care" style={{
          margin: '48px 0 20px',
          paddingTop: 28,
          borderTop: '1px solid var(--border)',
          scrollMarginTop: 96,
        }}>
          <span className="mono" style={{ color: 'var(--ink-muted)' }}>
            {tr(lang, 'pricing.care.divider')}
          </span>
        </div>

        {/* Care tiers */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 16,
        }}>
          {careTiers.map((t, i) => (
            <PriceCard key={i} t={t} lang={lang} />
          ))}
        </div>
      </div>
    </section>
  );
};

const PriceCard = ({ t, lang }) => (
  <div className="card" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
    borderColor: t.popular ? 'var(--accent)' : 'var(--border)',
    borderWidth: t.popular ? 2 : 1,
    position: 'relative',
    padding: t.popular ? 27 : 28,
  }}>
    {t.popular && (
      <span style={{
        position: 'absolute',
        top: -10,
        left: 16,
        padding: '4px 8px',
        background: 'var(--accent)',
        color: 'var(--accent-ink)',
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        fontWeight: 500,
        letterSpacing: '0.06em',
        borderRadius: 4,
      }}>{tr(lang, 'pricing.care.core.popular')}</span>
    )}

    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span className="mono" style={{ color: 'var(--ink-muted)' }}>{tr(lang, t.tier)}</span>
    </div>

    <h3 style={{ fontSize: '1.25rem' }}>{tr(lang, t.title)}</h3>

    {t.priceLabel ? (
      <span style={{
        fontFamily: 'var(--font-mono)',
        fontWeight: 500,
        fontSize: 'clamp(1.5rem, 2vw, 1.875rem)',
        color: 'var(--ink-primary)',
      }}>
        {tr(lang, t.priceLabel)}
      </span>
    ) : (
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, flexWrap: 'wrap' }}>
        {t.priceMode === 'from' && (
          <span className="mono" style={{ color: 'var(--ink-muted)', marginRight: 4 }}>
            {lang === 'nl' ? 'vanaf' : 'from'}
          </span>
        )}
        <span style={{
          fontFamily: 'var(--font-mono)',
          fontWeight: 500,
          fontSize: 'clamp(1.625rem, 2.5vw, 2rem)',
          letterSpacing: '-0.02em',
          color: 'var(--ink-primary)',
        }}>{t.price}</span>
        {t.suffix && <span className="mono" style={{ color: 'var(--ink-muted)' }}>{t.suffix}</span>}
        {t.priceMode === 'fixed' && (
          <span className="mono" style={{ color: 'var(--ink-muted)', marginLeft: 4 }}>fixed</span>
        )}
      </div>
    )}

    <p className="secondary" style={{ fontSize: 14, lineHeight: 1.5 }}>{tr(lang, t.outcome)}</p>

    <ul style={{
      listStyle: 'none', padding: 0, margin: 0,
      display: 'flex', flexDirection: 'column', gap: 8,
      flex: 1,
    }}>
      {t.bullets.map(b => (
        <li key={b} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--ink-secondary)' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 4 }}>
            <path d="m5 12 5 5L20 7"/>
          </svg>
          {tr(lang, b)}
        </li>
      ))}
    </ul>

    <div style={{ paddingTop: 8, borderTop: '1px solid var(--border)', marginTop: 4 }}>
      {t.calLink ? (
        <a
          data-cal-link={t.calLink}
          data-cal-config='{"layout":"month_view","theme":"dark"}'
          onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink: t.calLink, config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/' + t.calLink, '_self'); } }}
          style={{
            color: 'var(--accent)',
            fontSize: 14,
            fontWeight: 500,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            marginTop: 12,
            cursor: 'pointer',
          }}>
          {tr(lang, t.cta)} →
        </a>
      ) : (
        <a href="#contact" style={{
          color: 'var(--accent)',
          fontSize: 14,
          fontWeight: 500,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          marginTop: 12,
        }}>
          {tr(lang, t.cta)} →
        </a>
      )}
    </div>
  </div>
);

const FAQ = ({ lang }) => {
  const [open, setOpen] = React.useState(0);
  const [showAll, setShowAll] = React.useState(false);
  const items = [
    { q: 'faq.q1', a: 'faq.a1' },
    { q: 'faq.q14', a: 'faq.a14' },
    { q: 'faq.q11', a: 'faq.a11' },
    { q: 'faq.q12', a: 'faq.a12' },
    { q: 'faq.q13', a: 'faq.a13' },
    { q: 'faq.q2', a: 'faq.a2' },
    { q: 'faq.q3', a: 'faq.a3' },
    { q: 'faq.q4', a: 'faq.a4' },
    { q: 'faq.q5', a: 'faq.a5' },
    { q: 'faq.q6', a: 'faq.a6' },
    { q: 'faq.q7', a: 'faq.a7' },
    { q: 'faq.q8', a: 'faq.a8' },
    { q: 'faq.q9', a: 'faq.a9' },
    { q: 'faq.q10', a: 'faq.a10' },
  ];
  // Show the first 5 by default + a 'Toon alle vragen' toggle to expand to
  // the full list. Toggle label has no item count (was '(14)') per user
  // request - cleaner reads.
  const INITIAL = 5;
  const visible = showAll ? items : items.slice(0, INITIAL);
  const hidden = items.length - INITIAL;
  const toggleLabel = showAll
    ? (lang === 'nl' ? 'Toon minder' : 'Show less')
    : (lang === 'nl' ? 'Toon alle vragen' : 'Show all questions');
  return (
    <section id="faq">
      <div className="container">
      <h3 style={{ fontSize: '1.5rem', marginBottom: 24 }}>{tr(lang, 'faq.title')}</h3>
      <div style={{ borderTop: '1px solid var(--border)' }}>
        {visible.map((it, i) => (
          <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
            <button onClick={() => setOpen(open === i ? -1 : i)}
              aria-expanded={open === i}
              style={{
                width: '100%',
                background: 'transparent',
                border: 'none',
                padding: '20px 0',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: 16,
                cursor: 'pointer',
                color: 'var(--ink-primary)',
                fontFamily: 'var(--font-sans)',
                fontWeight: 500,
                fontSize: 17,
                textAlign: 'left',
              }}>
              <span>{tr(lang, it.q)}</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"
                style={{ flexShrink: 0, transition: 'transform 220ms var(--ease)', transform: open === i ? 'rotate(180deg)' : 'rotate(0)' }}>
                <path d="m6 9 6 6 6-6"/>
              </svg>
            </button>
            <div style={{
              maxHeight: open === i ? 240 : 0,
              overflow: 'hidden',
              transition: 'max-height 220ms var(--ease)',
            }}>
              <p className="secondary" style={{ paddingBottom: 20, paddingRight: 32, fontSize: 15, maxWidth: '65ch' }}>
                {tr(lang, it.a)}
              </p>
            </div>
          </div>
        ))}
      </div>
      {hidden > 0 && (
        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'center' }}>
          <button
            type="button"
            onClick={() => { setShowAll(!showAll); if (showAll) setOpen(-1); }}
            aria-expanded={showAll}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '10px 18px',
              background: 'transparent',
              border: '1px solid color-mix(in oklab, var(--accent) 40%, var(--border))',
              borderRadius: 999,
              color: 'var(--accent)',
              fontFamily: 'var(--font-mono)',
              fontSize: 12,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              fontWeight: 500,
              cursor: 'pointer',
              transition: 'border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'var(--accent)';
              e.currentTarget.style.background = 'color-mix(in oklab, var(--accent) 10%, transparent)';
              e.currentTarget.style.boxShadow = '0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = 'color-mix(in oklab, var(--accent) 40%, var(--border))';
              e.currentTarget.style.background = 'transparent';
              e.currentTarget.style.boxShadow = 'none';
            }}
          >
            <span>{toggleLabel}</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
              style={{ transition: 'transform 220ms var(--ease)', transform: showAll ? 'rotate(180deg)' : 'rotate(0)' }}>
              <path d="m6 9 6 6 6-6"/>
            </svg>
          </button>
        </div>
      )}
      </div>
    </section>
  );
};

const About = ({ lang }) => {
  const isNl = lang === 'nl';
  const para = { maxWidth: 760, marginTop: 14 };
  return (
    <section id="over">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'about.eyebrow')}</span>
          <p style={{
            fontFamily: 'var(--font-sans)',
            fontSize: 'clamp(1.0625rem, 0.5vw + 0.875rem, 1.25rem)',
            color: 'var(--ink-secondary)',
            margin: '8px 0 6px',
            maxWidth: 760,
            fontWeight: 500,
            letterSpacing: '-0.005em',
          }}>
            {isNl
              ? 'Voor organisaties die slimmer willen werken met AI.'
              : 'For organisations that want to work smarter with AI.'}
          </p>
          <h2>
            {isNl ? 'Een verlengstuk van je operations.' : 'An extension of your operations.'}
          </h2>

          {isNl ? (
            <>
              <p style={{ ...para, marginTop: 20 }}>
                MODUS is gebouwd door mensen die houden van hoe werk écht gebeurt.
              </p>
              <p style={para}>
                We zijn gebeten door AI, maar even hard door operations: processen, systemen, teams, uitzonderingen, bottlenecks en de kleine fricties die elke dag tijd kosten.
              </p>
              <p style={para}>
                We geloven niet in AI als los experiment of showpiece. We geloven in oplossingen die een team maandag kan gebruiken, die passen in bestaande systemen en die werk lichter, sneller of duidelijker maken.
              </p>
              <p style={{ ...para, marginTop: 26, fontSize: '1.0625rem' }}>
                Dat is onze <strong style={{ color: 'var(--accent)' }}>modus</strong>.
              </p>
              <div style={{ marginTop: 18, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a href="https://cal.eu/modusops/intro" target="_blank" rel="noopener noreferrer"
                   className="btn btn-primary"
                   style={{ textTransform: 'uppercase', fontWeight: 700, letterSpacing: '0.06em' }}>
                  Plan een gesprek
                </a>
                <a href="quick-scan.html" className="btn btn-ghost"
                   style={{ textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.06em' }}>
                  Of boek een Quick Scan &rarr;
                </a>
              </div>
            </>
          ) : (
            <>
              <p style={{ ...para, marginTop: 20 }}>
                MODUS is built by people who care about how work actually happens.
              </p>
              <p style={para}>
                We’re bitten by AI, and just as hard by operations: processes, systems, teams, exceptions, bottlenecks and the small friction that costs time every day.
              </p>
              <p style={para}>
                We don’t believe in AI as a side experiment or showpiece. We believe in solutions a team can use on Monday, that fit into existing systems, and that make work lighter, faster or clearer.
              </p>
              <p style={{ ...para, marginTop: 26, fontSize: '1.0625rem' }}>
                That’s our <strong style={{ color: 'var(--accent)' }}>modus</strong>.
              </p>
              <div style={{ marginTop: 18, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a href="https://cal.eu/modusops/intro" target="_blank" rel="noopener noreferrer"
                   className="btn btn-primary"
                   style={{ textTransform: 'uppercase', fontWeight: 700, letterSpacing: '0.06em' }}>
                  Schedule a call
                </a>
                <a href="quick-scan-en.html" className="btn btn-ghost"
                   style={{ textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.06em' }}>
                  Or book a Quick Scan &rarr;
                </a>
              </div>
            </>
          )}
        </div>

        <div className="grid-3-team">
          <FounderCard lang={lang} num="01" initials="C" name="Chloë" roleKey="about.chloe.role" lineKey="about.chloe.line" credKey="about.chloe.cred" img="uploads/team/chloe.jpg" linkedin="https://www.linkedin.com/in/chloe-szpyt/" />
          <FounderCard lang={lang} num="02" initials="B" name="Boris" roleKey="about.boris.role" lineKey="about.boris.line" credKey="about.boris.cred" img="uploads/team/boris.jpg" linkedin="https://www.linkedin.com/in/boris-szpyt-1081b7a6/" />
          <FounderCard lang={lang} num="03" initials="D" name="Dax"   roleKey="about.dax.role"   lineKey="about.dax.line"   credKey="about.dax.cred"   img="uploads/team/dax.jpg"   linkedin="https://www.linkedin.com/in/dax-geyskens-1835a051/" />
        </div>

        <div style={{ marginTop: 32 }}>
          <span className="mono" style={{ color: 'var(--ink-muted)' }}>
            {tr(lang, 'about.strip')}
          </span>
        </div>
      </div>
      <style>{`
        .grid-3-team {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 24px;
          align-items: start;
        }
        @media (max-width: 900px) {
          .grid-3-team { grid-template-columns: 1fr; gap: 32px; }
        }
        .team-card {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 28px;
          padding: 32px;
          border-radius: 28px;
          background: #17171c;
          text-decoration: none;
          color: inherit;
          transition: transform .3s, box-shadow .3s;
        }
        .team-card.is-offset { transform: translateY(20px); }
        @media (max-width: 900px) { .team-card.is-offset { transform: none; } }
        .team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
        .team-card.is-offset:hover { transform: translateY(18px); }
        .team-number {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
          color: var(--accent);
          margin-bottom: 0;
        }
        .team-image {
          position: relative;
          width: 100%;
          aspect-ratio: 4 / 5;
          border-radius: 18px;
          overflow: hidden;
          background: #eee;
        }
        .team-image img {
          width: 100%; height: 100%;
          display: block;
          object-fit: cover;
          object-position: center top;
          filter: grayscale(1) contrast(1.04);
          transition: filter .4s, transform .6s;
        }
        /* Photos now consistently cropped (head + shoulders, head ~9% from top).
           No per-person overrides needed - single 'center top' default applies. */
        .team-card:hover .team-image img { filter: grayscale(.15) contrast(1.05); transform: scale(1.02); }
        .team-image[data-fallback="1"] img { display: none; }
        .team-image[data-fallback="1"] { background: var(--bg-muted); }
        .team-card-fallback {
          position: absolute; inset: 0;
          display: none;
          align-items: center; justify-content: center;
          font-family: var(--font-display, var(--font-mono));
          font-style: italic;
          font-size: 140px;
          color: var(--ink-muted);
          opacity: 0.45;
        }
        .team-image[data-fallback="1"] .team-card-fallback { display: flex; }
        .team-card-foot {
          display: flex; flex-direction: column; gap: 8px;
        }
        .team-card-name {
          font-size: 36px; line-height: 1.05; letter-spacing: -0.02em;
          margin: 0; font-weight: 500;
          color: var(--ink-primary);
        }
        .team-card-role {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.2em;
          color: var(--accent);
          text-transform: uppercase;
          margin-top: 2px;
        }
        .team-card-line {
          font-size: 14px; line-height: 1.55;
          color: var(--ink-muted);
          margin: 6px 0 10px;
        }
        .team-card-cred {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.18em;
          color: var(--ink-muted);
          text-transform: uppercase;
          padding-top: 10px;
          border-top: 1px solid var(--border);
          margin-top: 4px;
        }
        .team-card-link {
          font-family: var(--font-mono);
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--ink-muted);
          margin-top: auto;
          transition: color .25s;
        }
        .team-card:hover .team-card-link { color: var(--accent); }
      `}</style>
    </section>
  );
};

const FounderCard = ({ lang, num, initials, name, nameKey, roleKey, lineKey, credKey, img, imgClass, linkedin, offset }) => {
  const onImgError = (e) => { e.currentTarget.parentElement.dataset.fallback = '1'; };
  return (
    <a className={`team-card${offset ? ' is-offset' : ''}`} href={linkedin || '#'} target={linkedin ? '_blank' : undefined} rel={linkedin ? 'noopener noreferrer' : undefined}>
      <div className="team-number">{num}</div>
      <div className="team-image" data-fallback={img ? undefined : '1'}>
        {img ? <img className={imgClass || ''} src={img} alt={name || tr(lang, nameKey)} onError={onImgError} /> : null}
        <span className="team-card-fallback">{initials}</span>
      </div>
      <div className="team-card-foot">
        <h3 className="team-card-name">{name || tr(lang, nameKey)}</h3>
        <div className="team-card-role">{tr(lang, roleKey)}</div>
        <p className="team-card-line">{tr(lang, lineKey)}</p>
        {credKey ? <div className="team-card-cred">{tr(lang, credKey)}</div> : null}
        <span className="team-card-link">LinkedIn ↗</span>
      </div>
    </a>
  );
};

const Contact = ({ lang }) => {
  const [toast, setToast] = React.useState(null);
  const email = tr(lang, 'contact.email');

  // mailto:-with-fallback. Browsers without a registered mail handler
  // (common on Chrome/Mac, Linux, kiosk setups) silently no-op the
  // mailto: link. Copy the address to clipboard in parallel so the user
  // always has a way forward, and surface a small toast so they know.
  const onMailClick = React.useCallback(() => {
    const copied = lang === 'nl'
      ? `✓ ${email} gekopieerd`
      : `✓ ${email} copied`;
    const failed = lang === 'nl'
      ? `Kopieer dit adres: ${email}`
      : `Copy this address: ${email}`;
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(email).then(
        () => setToast(copied),
        () => setToast(failed),
      );
    } else {
      setToast(failed);
    }
    setTimeout(() => setToast(null), 3500);
    // Do NOT preventDefault - let the mailto navigation proceed in parallel.
  }, [email, lang]);

  return (
    <section id="contact" style={{ background: 'var(--bg-muted)' }}>
      <div className="container">
        <div style={{
          textAlign: 'center',
          maxWidth: 680,
          margin: '0 auto',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 20,
        }}>
          <span className="eyebrow" style={{ color: 'var(--ink-muted)' }}>{tr(lang, 'contact.eyebrow')}</span>
          <h2>
            <span style={{ display: 'block' }}>
              {lang === 'nl' ? 'Vertel ons wat er goed draait -' : 'Tell us what’s running well -'}
            </span>
            <span style={{ display: 'block' }}>
              {lang === 'nl' ? 'en wat niet.' : 'and what isn’t.'}
            </span>
          </h2>
          <p className="lead" style={{ textAlign: 'center' }}>{tr(lang, 'contact.lede')}</p>

          <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
            <a
               data-cal-link="modusops/intro"
               data-cal-config='{"layout":"month_view","theme":"dark"}'
               className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16, cursor: 'pointer' }}
               onClick={(e) => { e.preventDefault(); if (window.Cal) { window.Cal('modal', { calLink: 'modusops/intro', config: { layout: 'month_view', theme: 'dark', language: lang } }); } else { window.open('https://cal.eu/modusops/intro', '_self'); } }}>
              {tr(lang, 'contact.cta')}
            </a>
            <a href={`mailto:${email}`} onClick={onMailClick}
               className="btn btn-secondary" style={{ padding: '16px 26px', fontSize: 16 }}>
              {tr(lang, 'contact.cta.secondary')}
            </a>
          </div>

          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 16,
            margin: '12px 0',
            color: 'var(--ink-muted)',
          }}>
            <span style={{ width: 32, height: 1, background: 'var(--border)' }}/>
            <span className="mono">{tr(lang, 'contact.or')}</span>
            <span style={{ width: 32, height: 1, background: 'var(--border)' }}/>
          </div>

          <a href={`mailto:${email}`} onClick={onMailClick} style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 18,
            color: 'var(--ink-primary)',
            textDecoration: 'none',
            borderBottom: '1px solid var(--ink-primary)',
            paddingBottom: 2,
          }}>
            {email}
          </a>

          <p className="secondary" style={{ marginTop: 16, fontSize: 14, maxWidth: '50ch' }}>
            {tr(lang, 'contact.trust')}
          </p>
        </div>
      </div>

      {/* Toast for clipboard feedback */}
      {toast ? (
        <div
          role="status"
          aria-live="polite"
          style={{
            position: 'fixed',
            left: '50%',
            bottom: 32,
            transform: 'translateX(-50%)',
            zIndex: 100,
            background: 'var(--ink-primary)',
            color: 'var(--bg-base)',
            fontFamily: 'var(--font-mono)',
            fontSize: 13,
            letterSpacing: '0.02em',
            padding: '10px 18px',
            borderRadius: 8,
            boxShadow: '0 8px 28px rgba(0,0,0,0.25)',
            pointerEvents: 'none',
          }}
        >
          {toast}
        </div>
      ) : null}
    </section>
  );
};

window.Services = Services;
window.FomoBanner = FomoBanner;
window.Pricing = Pricing;
window.About = About;
window.FAQ = FAQ;
window.Contact = Contact;