// Hero, Approach (Audit→Build→Care), Strategy (Map→Identify→Size), Cases.
// v3 brand-owned brief: process-first, strategy-led.

const Hero = ({ lang, showMotion }) => {
  const bookUrl = tr(lang, 'contact.book.url');
  return (
    <section id="top" style={{ paddingTop: 128, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
      {showMotion && <HeroFlowBackdrop />}
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: showMotion ? 'minmax(0, 1.05fr) minmax(0, 1fr)' : '1fr',
          gap: 64,
          alignItems: 'center',
        }} className="hero-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: showMotion ? 'none' : 920 }}>
            <span className="eyebrow" style={{ color: 'var(--ink-muted)' }}>
              {tr(lang, 'hero.eyebrow')}
            </span>
            <h1 style={{
              fontSize: showMotion ? 'clamp(2rem, 3.6vw + 0.5rem, 3.5rem)' : 'clamp(2.25rem, 5.5vw + 0.5rem, 4rem)',
              lineHeight: 1.05,
              letterSpacing: '-0.025em',
              textWrap: 'balance',
            }}>
              <span style={{ display: 'block' }}>{tr(lang, 'hero.h1.l1')}</span>
              <span style={{ display: 'block', color: 'var(--ink-secondary)' }}>{tr(lang, 'hero.h1.l2')}</span>
            </h1>
            <p className="lead" style={{ maxWidth: 640 }}>
              {tr(lang, 'hero.sub')}
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
              <a href={bookUrl} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: '14px 22px', fontSize: 16 }}>
                {tr(lang, 'hero.cta.primary')} <span className="price">{tr(lang, 'hero.cta.price')}</span>
              </a>
              <a href="#aanpak" className="btn btn-secondary" style={{ padding: '14px 22px', fontSize: 16 }}>
                {tr(lang, 'hero.cta.secondary')}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                  <path d="M12 5v14M5 12l7 7 7-7"/>
                </svg>
              </a>
            </div>
            <div style={{
              marginTop: 32,
              paddingTop: 24,
              borderTop: '1px solid var(--border)',
              display: 'flex',
              alignItems: 'center',
              gap: 16,
              flexWrap: 'wrap',
            }}>
              <ProgressionNode label="AUDIT" price="\u20AC950" />
              <ProgressionLine />
              <ProgressionNode label="BUILD" price={lang === 'nl' ? 'vanaf \u20AC3.500' : 'from \u20AC3,500'} />
              <ProgressionLine />
              <ProgressionNode label="CARE" price={lang === 'nl' ? 'vanaf \u20AC1.200/mo' : 'from \u20AC1,200/mo'} />
            </div>
            <div style={{ marginTop: 8 }}>
              <span className="mono" style={{ color: 'var(--ink-muted)', fontSize: 11, lineHeight: 1.6 }}>
                {tr(lang, 'hero.trust.line')}
              </span>
            </div>
          </div>

          {showMotion && (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <HeroWorkflowPanel lang={lang} />
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
};

const ProgressionNode = ({ label, price }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        width: 8, height: 8, borderRadius: 999,
        background: 'var(--accent)',
        flexShrink: 0,
      }}/>
      <span className="mono" style={{ color: 'var(--ink-primary)', fontWeight: 500 }}>{label}</span>
    </div>
    <span className="mono" style={{ color: 'var(--ink-muted)', paddingLeft: 16 }}>{price}</span>
  </div>
);

const ProgressionLine = () => (
  <div style={{
    flex: '1 1 24px',
    minWidth: 24,
    height: 1,
    background: 'var(--border)',
  }}/>
);

const Approach = ({ lang }) => {
  const steps = [
    { key: 'audit', label: 'approach.audit.label', title: 'approach.audit.title', body: 'approach.audit.body', price: 'approach.audit.price', dur: 'approach.audit.dur', cta: 'approach.audit.cta' },
    { key: 'build', label: 'approach.build.label', title: 'approach.build.title', body: 'approach.build.body', price: 'approach.build.price', dur: 'approach.build.dur', cta: 'approach.build.cta' },
    { key: 'care',  label: 'approach.care.label',  title: 'approach.care.title',  body: 'approach.care.body',  price: 'approach.care.price',  dur: 'approach.care.dur',  cta: 'approach.care.cta' },
  ];

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

        <div className="grid-3">
          {steps.map((s, i) => (
            <div key={s.key} className="card" style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 20,
              position: 'relative',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <span className="mono" style={{ color: 'var(--accent)', whiteSpace: 'nowrap' }}>
                  {tr(lang, s.label)}
                </span>
                <span className="mono" style={{ color: 'var(--ink-muted)', whiteSpace: 'nowrap' }}>{tr(lang, s.dur)}</span>
              </div>
              <h3>{tr(lang, s.title)}</h3>
              <p className="secondary" style={{ flex: 1 }}>{tr(lang, s.body)}</p>
              <div style={{
                paddingTop: 16,
                borderTop: '1px solid var(--border)',
                display: 'flex',
                alignItems: 'baseline',
                justifyContent: 'space-between',
              }}>
                <span className="mono-num" style={{ fontSize: 18, color: 'var(--ink-primary)' }}>
                  {tr(lang, s.price)}
                </span>
                <a href="#contact" style={{
                  color: 'var(--accent)',
                  fontSize: 14,
                  fontWeight: 500,
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}>
                  {tr(lang, s.cta)} →
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// NEW SIGNATURE BLOCK — Strategy: Map → Identify → Size
const Strategy = ({ lang }) => {
  const steps = [
    { label: 'strategy.map.label',      title: 'strategy.map.title',      body: 'strategy.map.body' },
    { label: 'strategy.identify.label', title: 'strategy.identify.title', body: 'strategy.identify.body' },
    { label: 'strategy.size.label',     title: 'strategy.size.title',     body: 'strategy.size.body' },
  ];

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

        <div className="grid-3" style={{ position: 'relative' }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
              padding: '28px 0',
              borderTop: '1px solid var(--ink-primary)',
              position: 'relative',
            }}>
              <span className="mono" style={{ color: 'var(--accent)', whiteSpace: 'nowrap' }}>
                {tr(lang, s.label)}
              </span>
              <h3 style={{ fontSize: 'clamp(1.375rem, 1.5vw + 0.75rem, 1.75rem)' }}>
                {tr(lang, s.title)}
              </h3>
              <p className="secondary" style={{ maxWidth: '38ch' }}>
                {tr(lang, s.body)}
              </p>
            </div>
          ))}
        </div>

        {/* Outcome strip */}
        <div style={{
          marginTop: 48,
          padding: '20px 24px',
          background: 'var(--ink-primary)',
          color: 'var(--bg-base)',
          borderRadius: 'var(--radius-card)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <span className="mono" style={{
            fontSize: 12,
            letterSpacing: '0.08em',
            color: 'var(--bg-base)',
            opacity: 0.92,
          }}>
            {tr(lang, 'strategy.outcome')}
          </span>
          <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,
            whiteSpace: 'nowrap',
          }}>
            {tr(lang, 'strategy.cta')} →
          </a>
        </div>
      </div>
    </section>
  );
};

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

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr)',
          gap: 20,
        }} className="cases-grid">
          {/* Manufacturing flagship case */}
          <div className="card" style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 20,
            padding: 32,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="mono" style={{ color: 'var(--ink-muted)' }}>
                {tr(lang, 'cases.mfg.sector')}
              </span>
              <span className="mono" style={{ color: 'var(--ink-muted)' }}>
                {tr(lang, 'cases.mfg.client')}
              </span>
            </div>

            <h3 style={{
              fontSize: 'clamp(1.5rem, 2vw + 0.75rem, 2rem)',
              letterSpacing: '-0.02em',
              maxWidth: '20ch',
            }}>
              {tr(lang, 'cases.mfg.outcome')}
            </h3>

            <div style={{
              padding: '12px 14px',
              background: 'var(--bg-muted)',
              borderRadius: 8,
              fontFamily: 'var(--font-mono)',
              fontSize: 13,
              color: 'var(--ink-secondary)',
              lineHeight: 1.55,
            }}>
              {tr(lang, 'cases.mfg.workflow')}
            </div>

            <p className="secondary" style={{ flex: 1 }}>
              {tr(lang, 'cases.mfg.body')}
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, paddingTop: 8 }}>
              {['M365', 'SharePoint', 'Power Automate', 'Exact', 'Claude'].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, 'cases.cta')} →
              </a>
            </div>
          </div>

          {/* Placeholder card — muted */}
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 16,
            padding: 32,
            border: '1px dashed var(--border)',
            borderRadius: 'var(--radius-card)',
            background: 'transparent',
          }}>
            <span className="mono" style={{ color: 'var(--ink-muted)' }}>
              {tr(lang, 'cases.placeholder.eyebrow')}
            </span>
            <p className="secondary" style={{ flex: 1, fontSize: 15, lineHeight: 1.55 }}>
              {tr(lang, 'cases.placeholder.body')}
            </p>
            <a href="#" style={{
              color: 'var(--ink-secondary)',
              fontSize: 14,
              fontWeight: 500,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
            }}>
              {tr(lang, 'cases.placeholder.cta')} ↗
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .cases-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const StackPill = ({ label }) => (
  <span style={{
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.04em',
    padding: '4px 8px',
    borderRadius: 4,
    background: 'var(--bg-muted)',
    color: 'var(--ink-secondary)',
    border: '1px solid var(--border)',
    transition: 'background-color 120ms var(--ease)',
  }}
  onMouseEnter={(e) => e.currentTarget.style.background = 'var(--accent-muted)'}
  onMouseLeave={(e) => e.currentTarget.style.background = 'var(--bg-muted)'}
  >{label}</span>
);

window.Hero = Hero;
window.Approach = Approach;
window.Strategy = Strategy;
window.Cases = Cases;
window.StackPill = StackPill;