// site/pages-info.jsx — pages "Qui sommes-nous" et "Qui câlinons-nous" (responsive + i18n).

// ─── Qui sommes-nous ─────────────────────────────────────────────────
function AboutPage({ go, L }) {
  const T = L.about;
  return (
    <div className="page-enter">
      <PageHeader kicker={T.kicker} title={T.title} intro={T.intro} />

      {/* Histoire */}
      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) clamp(32px, 5vw, 60px)' }}>
        <div className="split">
          <PhotoSlot label="photo · moment fondateur · placeholder" ratio="4/5" radius={32} tone="purple"/>
          <div>
            <div className="section-mono">{T.histK}</div>
            <h2 className="h-display" style={{ fontSize: 'clamp(30px, 4.2vw, 48px)', marginTop: 14 }}>
              {T.histT}
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--c-ink-soft)', marginTop: 24 }}>
              {T.histP1}
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--c-ink-soft)' }}>
              {T.histP2}
            </p>
          </div>
        </div>
      </section>

      {/* Stats / chiffres-clés */}
      <section style={{ padding: '40px var(--pad-x)' }}>
        <div className="g g-4 card-xl" style={{ background: 'var(--c-cream-deep)', gap: 32 }}>
          {T.stats.map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(42px, 5vw, 64px)', color: 'var(--c-purple-700)', lineHeight: 1, fontWeight: 400 }}>{n}</div>
              <div style={{ fontSize: 13, color: 'var(--c-ink-soft)', marginTop: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Équipe */}
      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) 40px' }}>
        <div className="section-mono">{T.teamK}</div>
        <h2 className="h-display" style={{ fontSize: 'clamp(30px, 4.2vw, 48px)', marginTop: 14, marginBottom: 16 }}>
          {T.teamT}
        </h2>
        <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--c-ink-soft)', maxWidth: 620, marginBottom: 48 }}>
          {T.teamP}
        </p>
        <div className="g g-3">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div key={i} style={{
              background: 'var(--c-purple-50)', borderRadius: 24, padding: 24, textAlign: 'center',
            }}>
              <PhotoSlot label="portrait" ratio="1/1" radius={999} tone="purple" style={{ width: 110, maxWidth: '70%', margin: '0 auto 18px' }}/>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--c-ink)', marginBottom: 4 }}>{T.founder}</div>
              <MonoNote>{T.present}</MonoNote>
            </div>
          ))}
        </div>
      </section>

      {/* Partenaires */}
      <section style={{ padding: 'clamp(40px, 6vw, 60px) var(--pad-x) 40px' }}>
        <div className="section-mono">{T.partK}</div>
        <h2 className="h-display" style={{ fontSize: 'clamp(26px, 3.6vw, 40px)', marginTop: 14, marginBottom: 32 }}>
          {T.partT}
        </h2>
        <div className="g g-4" style={{
          background: '#fff', borderRadius: 24, padding: 24, border: '1px solid var(--c-line)',
        }}>
          {[1, 2, 3, 4].map((i) => (
            <div key={i} style={{
              padding: '32px 20px', textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 11,
              letterSpacing: '0.08em', color: 'var(--c-ink-mute)', textTransform: 'uppercase',
              background: 'var(--c-cream)', borderRadius: 16, border: '1px dashed var(--c-line)',
            }}>{T.partner} {i}</div>
          ))}
        </div>
      </section>

      <CTAStrip
        go={go}
        title={T.ctaTitle}
        subtitle={T.ctaSub}
        primary={{ to: 'volunteer', label: T.ctaP }}
        secondary={{ to: 'contact', label: T.ctaS }}
      />
    </div>
  );
}

// ─── Qui câlinons-nous ───────────────────────────────────────────────
function WhoPage({ go, L }) {
  const T = L.who;
  const caseColors = ['var(--c-purple-100)', 'var(--c-peach-soft)', 'var(--c-purple-200)'];
  return (
    <div className="page-enter">
      <PageHeader kicker={T.kicker} title={T.title} intro={T.intro} blob="petal" />

      {/* Three cases */}
      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) 40px' }}>
        <div className="g g-3">
          {T.cases.map(([title, body], i) => (
            <div key={title} style={{
              background: caseColors[i], borderRadius: 32, padding: '40px 32px 44px',
              position: 'relative',
            }}>
              <div style={{
                fontFamily: 'var(--serif)', fontSize: 64, fontStyle: 'italic',
                color: 'var(--c-purple-700)', lineHeight: 1, marginBottom: 16,
              }}>{String(i + 1).padStart(2, '0')}</div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 500, margin: '0 0 14px', color: 'var(--c-ink)' }}>{title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--c-ink-soft)', margin: 0 }}>{body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Double intention */}
      <section style={{ padding: 'clamp(40px, 6vw, 60px) var(--pad-x) 0' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div className="section-mono">{T.dblK}</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 14 }}>
            {T.dblT}
          </h2>
        </div>
        <div className="g g-2">
          {T.dbl.map(([t, b], i) => (
            <div key={t} style={{
              background: i === 0 ? 'var(--c-purple-100)' : 'var(--c-cream-deep)',
              borderRadius: 32, padding: '40px 36px 44px',
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 56, fontStyle: 'italic', color: 'var(--c-purple-700)', lineHeight: 1, marginBottom: 16 }}>{i + 1}</div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 500, margin: '0 0 12px', color: 'var(--c-ink)' }}>{t}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--c-ink-soft)', margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Comment ça se passe */}
      <section style={{ padding: 'clamp(48px, 7vw, 80px) var(--pad-x)' }}>
        <div className="split-r" style={{ alignItems: 'center' }}>
          <div>
            <div className="section-mono">{T.howK}</div>
            <h2 className="h-display" style={{ fontSize: 'clamp(30px, 4.5vw, 52px)', marginTop: 14 }}>
              {T.howT}
            </h2>
            <ol style={{ padding: 0, listStyle: 'none', counterReset: 'step', marginTop: 32, display: 'grid', gap: 22 }}>
              {T.steps.map(([t, b], i) => (
                <li key={t} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                  <span style={{
                    width: 38, height: 38, borderRadius: '50%',
                    background: 'var(--c-purple-100)', color: 'var(--c-purple-700)',
                    flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--serif)', fontSize: 18,
                  }}>{i + 1}</span>
                  <div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--c-ink)', marginBottom: 4 }}>{t}</div>
                    <div style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--c-ink-soft)' }}>{b}</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <div className="collage-tall">
            <div style={{ position: 'absolute', top: 0, left: 40, right: 0, bottom: 100, borderRadius: 32, overflow: 'hidden', transform: 'rotate(2deg)' }}>
              <PhotoSlot label="photo · couloir hôpital · scène calme" ratio="auto" style={{ width: '100%', height: '100%', borderRadius: 32 }} tone="cream"/>
            </div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, width: 'clamp(150px, 38%, 220px)', height: 'clamp(170px, 42%, 240px)', borderRadius: 24, overflow: 'hidden', transform: 'rotate(-4deg)', border: '8px solid #fff', boxShadow: '0 20px 40px rgba(34,22,52,0.10)' }}>
              <PhotoSlot label="photo · détail" ratio="auto" style={{ width: '100%', height: '100%' }} tone="purple"/>
            </div>
          </div>
        </div>
      </section>

      {/* Présence hôpitaux */}
      <section style={{ padding: '40px var(--pad-x) clamp(48px, 7vw, 80px)' }}>
        <div className="card-xl" style={{ background: 'var(--c-purple-50)' }}>
          <div className="section-mono">{T.presK}</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(30px, 4.2vw, 48px)', marginTop: 14, marginBottom: 16 }}>
            {T.presT}
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--c-ink-soft)', maxWidth: 640, marginBottom: 32 }}>
            {T.presP}
          </p>
          <div className="g g-4">
            {[1, 2, 3, 4].map(i => (
              <div key={i} style={{
                background: '#fff', borderRadius: 20, padding: '24px 24px 28px',
              }}>
                <div style={{ fontSize: 13, color: 'var(--c-ink-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>{T.hospTag}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--c-ink)' }}>{T.hospT}</div>
                <MonoNote style={{ marginTop: 8, display: 'block' }}>{T.hospNote}</MonoNote>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip
        go={go}
        title={T.ctaTitle}
        subtitle={T.ctaSub}
        primary={{ to: 'volunteer', label: T.ctaP }}
      />
    </div>
  );
}

Object.assign(window, { AboutPage, WhoPage });