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

const Services = ({ lang }) => {
  return (
    <section id="diensten">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'services.eyebrow')}</span>
          <h2>{tr(lang, 'services.h2')}</h2>
          <p>{tr(lang, 'services.lede')}</p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Service 1 — Strategy (LEAD, always-dark card) */}
          <div className="card" style={{
            background: '#141318',
            color: '#F2F0F5',
            borderColor: '#141318',
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
            gap: 40,
            padding: 40,
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span className="mono" style={{ color: 'var(--accent)' }}>
                  {tr(lang, 'services.strat.label')}
                </span>
              </div>
              <h3 style={{
                fontSize: 'clamp(1.75rem, 2vw + 1rem, 2.25rem)',
                letterSpacing: '-0.02em',
                maxWidth: '20ch',
              }}>
                {tr(lang, 'services.strat.title')}
              </h3>
              <p style={{
                color: 'rgba(255,255,255,0.72)',
                fontSize: 17,
                lineHeight: 1.55,
                maxWidth: '52ch',
              }}>
                {tr(lang, 'services.strat.tagline')}
              </p>
              <div style={{ marginTop: 'auto', paddingTop: 16 }}>
                <a href="#contact" style={{
                  color: 'var(--accent)',
                  fontFamily: 'var(--font-mono)',
                  fontSize: 12,
                  letterSpacing: '0.06em',
                  textTransform: 'uppercase',
                  fontWeight: 500,
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 6,
                }}>
                  {tr(lang, 'services.strat.cta')} →
                </a>
              </div>
            </div>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              {['services.strat.b1', 'services.strat.b2', 'services.strat.b3', 'services.strat.b4', 'services.strat.b5'].map(k => (
                <li key={k} style={{
                  display: 'flex',
                  gap: 12,
                  fontSize: 15,
                  color: 'rgba(255,255,255,0.85)',
                  paddingBottom: 10,
                  borderBottom: '1px solid rgba(255,255,255,0.1)',
                }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 2 }}>
                    <path d="m5 12 5 5L20 7"/>
                  </svg>
                  {tr(lang, k)}
                </li>
              ))}
            </ul>
          </div>

          {/* Service 2 — Operations (light card, full width) */}
          <ServiceCard
            lang={lang}
            label="services.ops.label"
            title="services.ops.title"
            tagline="services.ops.tagline"
            bullets={[
              { t: 'services.ops.b1.t', b: 'services.ops.b1.b' },
              { t: 'services.ops.b2.t', b: 'services.ops.b2.b' },
              { t: 'services.ops.b3.t', b: 'services.ops.b3.b' },
              { t: 'services.ops.b4.t', b: 'services.ops.b4.b' },
              { t: 'services.ops.b5.t', b: 'services.ops.b5.b' },
            ]}
            pills={['M365', 'SharePoint', 'Power Automate', 'Azure', 'n8n', 'Claude', 'OpenAI']}
            cta="services.ops.cta"
          />

          {/* Service 3 + 4 side by side */}
          <div className="grid-2-eq" style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 20,
          }}>
            <ServiceCard
              lang={lang}
              label="services.web.label"
              title="services.web.title"
              tagline="services.web.tagline"
              bullets={[
                { t: 'services.web.b1.t', b: 'services.web.b1.b' },
                { t: 'services.web.b2.t', b: 'services.web.b2.b' },
                { t: 'services.web.b3.t', b: 'services.web.b3.b' },
                { t: 'services.web.b4.t', b: 'services.web.b4.b' },
                { t: 'services.web.b5.t', b: 'services.web.b5.b' },
              ]}
              pills={['Next.js', 'Tailwind', 'Vercel', 'schema.org', 'llms.txt']}
              cta="services.web.cta"
              compact
            />
            <ServiceCard
              lang={lang}
              label="services.care.label"
              title="services.care.title"
              tagline="services.care.tagline"
              bullets={[
                { t: 'services.care.b1' },
                { t: 'services.care.b2' },
                { t: 'services.care.b3' },
                { t: 'services.care.b4' },
                { t: 'services.care.b5' },
              ]}
              pills={['Sentry', 'Grafana']}
              cta="services.care.cta"
              compact
            />
          </div>
        </div>

        {/* What we don't do */}
        <div style={{ marginTop: 64 }}>
          <span className="mono" style={{
            color: 'var(--ink-muted)',
            display: 'block',
            marginBottom: 16,
            fontSize: 12,
            letterSpacing: '0.08em',
          }}>
            {tr(lang, 'services.refuse.title')}
          </span>
          <ul style={{
            listStyle: 'none',
            padding: 0,
            margin: 0,
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            gap: 8,
          }}>
            {['services.refuse.r1', 'services.refuse.r2', 'services.refuse.r3', 'services.refuse.r4', 'services.refuse.r5'].map(k => (
              <li key={k} style={{
                display: 'flex',
                gap: 12,
                padding: '12px 14px',
                background: 'var(--bg-raised)',
                border: '1px solid var(--border)',
                borderRadius: 8,
                color: 'var(--ink-secondary)',
                fontSize: 14,
                lineHeight: 1.5,
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ink-muted)" strokeWidth="1.8" strokeLinecap="round" style={{ flexShrink: 0, marginTop: 2 }}>
                  <path d="M18 6 6 18M6 6l12 12"/>
                </svg>
                {tr(lang, k)}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .grid-2-eq { grid-template-columns: 1fr !important; }
          #diensten .card[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
};

const ServiceCard = ({ lang, label, title, tagline, bullets, pills, cta, 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 }}>
      <a href="#contact" style={{
        color: 'var(--accent)',
        fontSize: 14,
        fontWeight: 500,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
      }}>
        {tr(lang, cta)} →
      </a>
    </div>
  </div>
);

const Pricing = ({ lang }) => {
  const buildTiers = [
    {
      tier: 'pricing.qs.tier',
      title: 'pricing.qs.title',
      price: '€950',
      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',
    },
    {
      tier: 'pricing.starter.tier',
      title: 'pricing.starter.title',
      price: '€3.500',
      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',
    },
    {
      tier: 'pricing.build.tier',
      title: 'pricing.build.title',
      price: '€5.5–12.5k',
      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',
    },
    {
      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',
    },
  ];

  const careTiers = [
    {
      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',
    },
    {
      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',
      popular: true,
    },
    {
      tier: 'pricing.care.plus.tier',
      title: 'pricing.care.plus.title',
      price: '€4.500',
      suffix: lang === 'nl' ? '/maand' : '/month',
      outcome: 'pricing.care.plus.outcome',
      bullets: ['pricing.care.plus.b1', 'pricing.care.plus.b2', 'pricing.care.plus.b3', 'pricing.care.plus.b4'],
      cta: 'pricing.startHere',
    },
  ];

  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 style={{
          margin: '48px 0 20px',
          paddingTop: 28,
          borderTop: '1px solid var(--border)',
        }}>
          <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>

        <FAQ lang={lang} />
      </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>
      {t.dur && <span className="mono" style={{ color: 'var(--ink-muted)' }}>{tr(lang, t.dur)}</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 }}>
      <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 items = [
    { q: 'faq.q1', a: 'faq.a1' },
    { q: 'faq.q2', a: 'faq.a2' },
    { q: 'faq.q3', a: 'faq.a3' },
    { q: 'faq.q4', a: 'faq.a4' },
    { q: 'faq.q5', a: 'faq.a5' },
  ];
  return (
    <div style={{ marginTop: 80 }}>
      <h3 style={{ fontSize: '1.5rem', marginBottom: 24 }}>{tr(lang, 'faq.title')}</h3>
      <div style={{ borderTop: '1px solid var(--border)' }}>
        {items.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>
    </div>
  );
};

const About = ({ lang }) => {
  return (
    <section id="over">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{tr(lang, 'about.eyebrow')}</span>
          <h2>{tr(lang, 'about.h2')}</h2>
        </div>

        <div className="grid-3-team">
          <FounderCard lang={lang} initials="C" name="CHLOË" roleKey="about.chloe.role" lineKey="about.chloe.line" />
          <FounderCard lang={lang} initials="B" name="BORIS" roleKey="about.boris.role" lineKey="about.boris.line" />
          <FounderCard lang={lang} initials="D" name="DAX"   roleKey="about.dax.role"   lineKey="about.dax.line" />
        </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: 20px;
        }
        @media (max-width: 900px) {
          .grid-3-team { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

const FounderCard = ({ lang, initials, name, nameKey, roleKey, lineKey }) => (
  <div className="card" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    minHeight: 220,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <div style={{
        width: 64, height: 64,
        borderRadius: 999,
        background: 'var(--bg-muted)',
        border: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)',
        fontWeight: 500, fontSize: 18,
        color: 'var(--ink-muted)',
        flexShrink: 0,
      }}>{initials}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 18 }}>
          {name || tr(lang, nameKey)}
        </div>
        <div className="mono" style={{ color: 'var(--ink-muted)', marginTop: 4 }}>
          {tr(lang, roleKey)}
        </div>
      </div>
    </div>
    <p className="secondary" style={{ fontSize: 15, lineHeight: 1.5, flex: 1 }}>
      {tr(lang, lineKey)}
    </p>
    <a href="#" style={{ color: 'var(--accent)', fontSize: 14, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      LinkedIn ↗
    </a>
  </div>
);

const Contact = ({ 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>{tr(lang, 'contact.h2')}</h2>
          <p className="lead" style={{ textAlign: 'center' }}>{tr(lang, 'contact.lede')}</p>

          <div style={{ marginTop: 16 }}>
            <a href={tr(lang, 'contact.book.url')} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
              {tr(lang, 'contact.cta')} <span className="price">{tr(lang, 'hero.cta.price')}</span>
            </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:${tr(lang, 'contact.email')}`} style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 18,
            color: 'var(--ink-primary)',
            textDecoration: 'none',
            borderBottom: '1px solid var(--ink-primary)',
            paddingBottom: 2,
          }}>
            {tr(lang, 'contact.email')}
          </a>

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

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