// Hero section
const Hero = () => {
  return (
    <section className="section" style={{ paddingTop: 80, paddingBottom: 60, position: 'relative' }}>
      <div className="grid-bg"></div>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 80, alignItems: 'end' }}>

          {/* Top: eyebrow + status */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, flexWrap: 'wrap' }}>
            <div className="eyebrow">
              Studio d'automatisation · Québec
            </div>
            <div className="mono" style={{ textAlign: 'right', lineHeight: 1.6 }}>
              <div>v.2026.04</div>
              <div style={{ color: 'var(--fg-mute)' }}>3 mandats en cours</div>
            </div>
          </div>

          {/* Headline */}
          <div>
            <h1 className="h-display">
              Moins de clics.<br />
              Plus de <span className="serif" style={{ color: 'var(--cyan)' }}>résultats.</span>
            </h1>
            <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, marginTop: 48, alignItems: 'end' }} className="hero-bottom">
              <p style={{ fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55, color: 'var(--fg-dim)', maxWidth: 520, margin: 0 }}>
                Créations PL conçoit des workflows sur mesure pour les PME qui veulent
                arrêter de perdre du temps dans la saisie manuelle, les copier-collers
                entre outils, et les tâches qu'aucun humain ne devrait encore faire.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href="#contact" className="btn btn-cyan">
                  Diagnostic gratuit
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
                <a href="#services" className="btn btn-ghost">Voir la méthode</a>
              </div>
            </div>
          </div>

          {/* Workflow diagram */}
          <div style={{ marginTop: 40, position: 'relative', padding: '32px 24px', border: '1px solid var(--line)', borderRadius: 16, background: 'color-mix(in oklab, var(--bg-2) 60%, transparent)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 36 }}>
              <div className="mono">workflow.live &nbsp;·&nbsp; <span style={{ color: 'var(--cyan)' }}>running</span></div>
              <div className="mono" style={{ color: 'var(--fg-mute)' }}>1,247 exécutions / 24h</div>
            </div>
            <WorkflowDiagram />
          </div>

        </div>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .hero-bottom { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Hero });