// Sections: Logos strip, Stats, Solutions grid, Why
function LogosStrip({ t }) {
  return (
    <section style={{ padding: '48px 32px', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: 'color-mix(in oklch, var(--ink) 1.2%, var(--bg))' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <p style={{ textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--ink-faint)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 28 }}>
          {t.logos_label}
        </p>
        <div style={{ display: 'flex', gap: 56, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', opacity: 0.65 }}>
          {t.logos.map((l, i) => (
            <span key={i} style={{
              fontFamily: 'var(--font-display)',
              fontSize: 20,
              fontWeight: 500,
              letterSpacing: '-0.015em',
              color: 'var(--ink-soft)',
            }}>{l.name}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats({ t }) {
  return (
    <section style={{ padding: '80px 32px' }}>
      <div className="stats-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
        {t.stats.map((s, i) => (
          <div key={i} style={{ padding: '12px 32px', borderLeft: i === 0 ? 'none' : '1px solid var(--border)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(44px, 4.4vw, 60px)', fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.04em', lineHeight: 1 }}>
              <span style={{ color: 'var(--brand)' }}>{s.value}</span>
            </div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, color: 'var(--ink)', marginTop: 12, fontWeight: 500 }}>{s.label}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-faint)', marginTop: 2, letterSpacing: '0.02em' }}>{s.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SectionHeader({ eyebrow, title, subtitle, align = 'left' }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 720 : 'none', margin: align === 'center' ? '0 auto' : 0 }}>
      <div style={{ display: 'inline-flex', gap: 8, alignItems: 'center', marginBottom: 18, padding: '5px 11px', borderRadius: 999, border: '1px solid var(--border)', background: 'color-mix(in oklch, var(--ink) 3%, transparent)' }}>
        <FleurDot size={10}/>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{eyebrow}</span>
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(34px, 3.6vw, 52px)',
        lineHeight: 1.02,
        letterSpacing: '-0.028em',
        margin: 0,
        color: 'var(--ink)',
        fontWeight: 500,
        textWrap: 'balance',
      }}>{title}</h2>
      {subtitle && <p style={{ fontFamily: 'var(--font-ui)', fontSize: 17, color: 'var(--ink-soft)', marginTop: 14, maxWidth: 640, lineHeight: 1.5, textWrap: 'pretty' }}>{subtitle}</p>}
    </div>
  );
}

function Solutions({ t, density }) {
  return (
    <section id="solutions" style={{ padding: '100px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHeader eyebrow={t.sol_eyebrow} title={t.sol_title} subtitle={t.sol_sub}/>
        <div className="solutions-grid" style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: density === 'dense' ? 12 : 16,
        }}>
          {t.solutions.map((s, i) => (
            <SolutionCard key={i} {...s} large={i === 0} span={i === 0 ? 6 : 3} density={density}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionCard({ tag, title, desc, span, large, density, icon }) {
  const [hov, setHov] = useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        gridColumn: `span ${span}`,
        background: 'var(--bg-elev)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-lg)',
        padding: density === 'dense' ? 22 : 28,
        minHeight: large ? 340 : 240,
        display: 'flex', flexDirection: 'column',
        transition: 'all 200ms ease',
        borderColor: hov ? 'var(--border-strong)' : 'var(--border)',
        position: 'relative', overflow: 'hidden',
        boxShadow: hov ? '0 20px 40px -20px color-mix(in oklch, var(--brand) 30%, transparent)' : 'none',
        transform: hov ? 'translateY(-2px)' : 'none',
      }}>
      {/* corner glow */}
      <div aria-hidden style={{
        position: 'absolute', top: -40, right: -40, width: 160, height: 160,
        background: `radial-gradient(circle, var(--glow) 0%, transparent 70%)`,
        opacity: hov ? 1 : 0.3,
        transition: 'opacity 300ms',
        pointerEvents: 'none',
      }}/>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.2em', color: 'var(--accent-ink)' }}>{tag}</span>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'color-mix(in oklch, var(--brand) 8%, transparent)', border: '1px solid color-mix(in oklch, var(--brand) 18%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconGlyph name={icon}/>
        </div>
      </div>
      <h3 style={{
        fontFamily: 'var(--font-display)',
        fontSize: large ? 28 : 20,
        fontWeight: 500,
        letterSpacing: '-0.02em',
        color: 'var(--ink)',
        margin: '20px 0 10px',
        lineHeight: 1.1,
        textWrap: 'balance',
        position: 'relative',
      }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0, textWrap: 'pretty', position: 'relative' }}>{desc}</p>
      <div style={{ flex: 1 }}/>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 18, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: hov ? 'var(--brand)' : 'var(--ink-faint)', fontWeight: 500, transition: 'color 150ms', letterSpacing: '0.05em', textTransform: 'uppercase', position: 'relative' }}>
        En savoir plus <ArrowRight size={12}/>
      </div>
    </div>
  );
}

function IconGlyph({ name }) {
  const s = { width: 18, height: 18, stroke: 'var(--brand)', strokeWidth: 1.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'agent') return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="8" r="3"/><path d="M5 21c0-4 3-7 7-7s7 3 7 7"/><path d="M19 4l1 2 2 1-2 1-1 2-1-2-2-1 2-1z"/></svg>;
  if (name === 'shield') return <svg viewBox="0 0 24 24" {...s}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>;
  if (name === 'flow') return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="6" height="6" rx="1"/><rect x="15" y="14" width="6" height="6" rx="1"/><path d="M9 7h6a3 3 0 013 3v4"/></svg>;
  if (name === 'chart') return <svg viewBox="0 0 24 24" {...s}><path d="M4 20V9M10 20V4M16 20v-7M22 20H2"/></svg>;
  return null;
}

function Why({ t }) {
  return (
    <section id="why" style={{ padding: '110px 32px', background: 'color-mix(in oklch, var(--ink) 1.5%, var(--bg))', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="why-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 72, alignItems: 'start' }}>
        <div className="why-sticky" style={{ position: 'sticky', top: 100 }}>
          <SectionHeader eyebrow={t.why_eyebrow} title={t.why_title} subtitle={t.why_sub}/>
          <div style={{ marginTop: 28 }}>
            <Button href="/contact" variant="secondary" icon={<ArrowRight/>}>{t.why_cta}</Button>
          </div>
        </div>
        <div className="why-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {t.why.map((w, i) => (
            <div key={i} style={{ padding: 22, background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 14, transition: 'border-color 150ms' }}>
              <div style={{ width: 34, height: 34, borderRadius: 9, background: 'color-mix(in oklch, var(--brand) 8%, transparent)', border: '1px solid color-mix(in oklch, var(--brand) 18%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <IconGlyph name={w.icon}/>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--ink)', marginBottom: 4, letterSpacing: '-0.01em' }}>{w.title}</div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{w.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LogosStrip, Stats, Solutions, SectionHeader, Why, IconGlyph });