function Split({ eyebrow, title, text, reverse, mediaLabel, children }) {
  return (
    <section className={`split ${reverse ? 'reverse' : ''}`}>
      <div className="split-text">
        <span className="eyebrow">{eyebrow}</span>
        <h2>{title}</h2>
        <p>{text}</p>
      </div>
      <div className="split-media">
        <div className="split-media-inner">
          {children || <div className="placeholder" style={{width: '100%', height: '100%'}}>{mediaLabel}</div>}
        </div>
      </div>
    </section>
  );
}

function Workflow() {
  const { t } = window.useT();
  const steps = [1, 2, 3].map((n) => ({
    title: t(`workflow.step${n}.title`),
    desc: t(`workflow.step${n}.desc`),
  }));
  return (
    <section className="workflow">
      <div className="container">
        <div className="workflow-header">
          <span className="eyebrow">{t('workflow.eyebrow')}</span>
          <h2>{t('workflow.title')}</h2>
          <p className="workflow-sub">{t('workflow.sub')}</p>
        </div>
        <div className="workflow-grid">
          {steps.map((s, i) => (
            <div className="workflow-step" key={i}>
              <div className="workflow-icon">{i + 1}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Splits() {
  const { t } = window.useT();
  return (
    <>
      <Workflow />
      <Split
        eyebrow={t('split.tech.eyebrow')}
        title={<>{t('split.tech.title.l1')} <em>{t('split.tech.title.l2')}</em></>}
        text={t('split.tech.text')}
      >
        <div className="split-video-wrap">
          <video src="assets/cavitation.webm" autoPlay loop muted playsInline />
        </div>
      </Split>
    </>
  );
}

function TechSplit() {
  const { t } = window.useT();
  return (
    <section className="tech-split-section">
      <div className="tech-split-grid">
        <div className="tech-split-text">
          <span className="eyebrow">{t('split.tech.eyebrow')}</span>
          <h2 className="tech-split-headline">
            {t('tech.headline.pre')} <em>{t('tech.headline.em')}</em> {t('tech.headline.post')}
          </h2>
          <p>{t('split.tech.text')}</p>
        </div>
        <div className="tech-split-media">
          <div className="split-media-inner">
            <div className="split-video-wrap">
              <video src="assets/cavitation.webm" autoPlay loop muted playsInline />
            </div>
          </div>
        </div>
      </div>
      <div className="tech-split-cta">
        <a href="#about" className="tech-split-btn" onClick={(e) => { e.preventDefault(); const t = document.querySelector('#about'); if (t) t.scrollIntoView({ behavior: 'smooth' }); }}>
          {t('tech.cta')}
          <span className="pulse-arrow">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none">
              <path d="M12 5v14M12 19l-5-5M12 19l5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </a>
      </div>
    </section>
  );
}

window.Splits = Splits;
window.TechSplit = TechSplit;