// site/pages-action.jsx — Charte, Bénévole, Don, Contact (responsive + i18n).

// ─── Charte déontologique ────────────────────────────────────────────
function CharterPage({ go, L }) {
  const T = L.charter;
  return (
    <div className="page-enter">
      <PageHeader kicker={T.kicker} title={T.title} intro={T.intro} blob="pebble" />

      {/* Trois piliers : bienveillance / respect / confiance */}
      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) clamp(32px, 5vw, 60px)', textAlign: 'center' }}>
        <div className="section-mono">{T.valK}</div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 28 }}>
          {T.values.map(v => (
            <span key={v} style={{
              fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 'clamp(22px, 3vw, 32px)',
              padding: '14px clamp(22px, 3.5vw, 36px)', border: '1px solid var(--c-purple-300)',
              borderRadius: 999, color: 'var(--c-purple-700)',
            }}>{v}</span>
          ))}
        </div>
      </section>

      {/* 10 engagements */}
      <section style={{ padding: '40px var(--pad-x) clamp(48px, 7vw, 80px)' }}>
        <div className="card-xl" style={{ background: 'var(--c-cream-deep)' }}>
          <h2 className="h-display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginBottom: 40 }}>
            {T.linesT}
          </h2>
          <div className="g g-2" style={{ gap: '28px clamp(28px, 4vw, 56px)' }}>
            {T.lines.map(([t, b], i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: 'clamp(44px, 5vw, 60px) 1fr', gap: 'clamp(12px, 2vw, 20px)',
                paddingTop: 24, borderTop: '1px solid var(--c-line)',
              }}>
                <span style={{
                  fontFamily: 'var(--serif)', fontSize: 32, fontStyle: 'italic',
                  color: 'var(--c-purple-600)',
                }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, color: 'var(--c-ink)', marginBottom: 4 }}>{t}</div>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--c-ink-soft)', margin: 0 }}>{b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Quote bloc */}
      <section style={{ padding: '40px var(--pad-x) clamp(40px, 5vw, 60px)' }}>
        <div className="card-xl" style={{
          background: 'var(--c-purple-700)', color: '#fff', textAlign: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div className="float-a" style={{ position: 'absolute', top: -80, right: -60 }}>
            <Blob d={BLOB_PATHS.cloud} fill="var(--c-purple-600)" size={300}
              style={{ position: 'static', transform: 'rotate(-25deg)', opacity: 0.6 }}/>
          </div>
          <p style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 'clamp(22px, 3.2vw, 36px)',
            lineHeight: 1.3, maxWidth: 820, margin: '0 auto', position: 'relative',
          }}>{T.quote}</p>
        </div>
      </section>

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

// ─── Devenir bénévole ────────────────────────────────────────────────
function VolunteerPage({ go, L }) {
  const T = L.volunteer;
  return (
    <div className="page-enter">
      <PageHeader kicker={T.kicker} title={T.title} intro={T.intro} />

      {/* Ce qu'on attend / ce qu'on offre */}
      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) clamp(32px, 5vw, 60px)' }}>
        <div className="g g-2" style={{ gap: 24 }}>
          <div style={{ background: 'var(--c-purple-50)', borderRadius: 32, padding: 'clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 36px)' }}>
            <div className="section-mono">{T.askK}</div>
            <h3 className="h-display" style={{ fontSize: 'clamp(26px, 3vw, 32px)', marginTop: 14, marginBottom: 24 }}>{T.askT}</h3>
            <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 14, margin: 0 }}>
              {T.asks.map(t => (
                <li key={t} style={{ display: 'flex', gap: 12, fontSize: 15.5, color: 'var(--c-ink)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--c-purple-200)', color: 'var(--c-purple-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, flexShrink: 0 }}>✓</span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: 'var(--c-peach-soft)', borderRadius: 32, padding: 'clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 36px)' }}>
            <div className="section-mono">{T.offerK}</div>
            <h3 className="h-display" style={{ fontSize: 'clamp(26px, 3vw, 32px)', marginTop: 14, marginBottom: 24 }}>{T.offerT}</h3>
            <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 14, margin: 0 }}>
              {T.offers.map(t => (
                <li key={t} style={{ display: 'flex', gap: 12, fontSize: 15.5, color: 'var(--c-ink)' }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--c-peach)', color: 'var(--c-purple-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, flexShrink: 0 }}>♡</span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Étapes */}
      <section style={{ padding: 'clamp(40px, 6vw, 60px) var(--pad-x)' }}>
        <div className="section-mono">{T.stepsK}</div>
        <h2 className="h-display" style={{ fontSize: 'clamp(30px, 4.2vw, 48px)', marginTop: 14, marginBottom: 40 }}>
          {T.stepsT}
        </h2>
        <div className="g g-4">
          {T.steps.map(([t, b], i) => (
            <div key={t} style={{
              background: '#fff', borderRadius: 24, padding: '32px 28px 36px',
              border: '1px solid var(--c-line)',
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 56, color: 'var(--c-purple-300)', lineHeight: 1, fontStyle: 'italic' }}>{i + 1}</div>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, margin: '14px 0 10px' }}>{t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--c-ink-soft)', margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Form CTA */}
      <section style={{ padding: 'clamp(48px, 7vw, 80px) var(--pad-x)' }}>
        <div className="split card-xl" style={{
          background: 'var(--c-purple-700)', color: '#fff',
          position: 'relative', overflow: 'hidden',
        }}>
          <div className="float-c" style={{ position: 'absolute', bottom: -60, right: -40 }}>
            <Blob d={BLOB_PATHS.smooth} fill="var(--c-purple-600)" size={280}
              style={{ position: 'static', opacity: 0.6 }}/>
          </div>
          <div style={{ position: 'relative' }}>
            <h2 className="h-display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', color: '#fff' }}>{T.formT}</h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, opacity: 0.85, marginTop: 16, maxWidth: 460 }}>
              {T.formP}
            </p>
          </div>
          <div style={{ position: 'relative', display: 'grid', gap: 12 }}>
            {T.fields.map(([l, t]) => (
              <input key={l} placeholder={l} type={t} style={{
                background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.25)',
                color: '#fff', padding: '16px 20px', borderRadius: 16, fontSize: 16,
                fontFamily: 'inherit', width: '100%',
              }}/>
            ))}
            <button style={{
              background: 'var(--c-cream)', color: 'var(--c-ink)', border: 'none',
              padding: '16px 28px', borderRadius: 16, fontSize: 15, fontWeight: 600,
              cursor: 'pointer', marginTop: 4,
            }}>{T.submit}</button>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── Faire un don ────────────────────────────────────────────────────
function DonatePage({ go, L }) {
  const T = L.donate;
  const [amount, setAmount] = React.useState(50);
  const presets = [25, 50, 100, 250];
  return (
    <div className="page-enter">
      <PageHeader kicker={T.kicker} title={T.title} intro={T.intro} blob="petal" />

      {/* Impact stats */}
      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) 40px' }}>
        <div className="g g-3">
          {T.impact.map(([a, b]) => (
            <div key={a} style={{
              background: 'var(--c-purple-50)', borderRadius: 28, padding: '36px 32px 40px',
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 4.5vw, 56px)', color: 'var(--c-purple-700)', lineHeight: 1, marginBottom: 16, fontWeight: 400 }}>{a}</div>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--c-ink-soft)', margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Donation form */}
      <section style={{ padding: 'clamp(40px, 6vw, 60px) var(--pad-x) clamp(48px, 7vw, 80px)' }}>
        <div className="split card-xl" style={{ background: 'var(--c-cream-deep)', alignItems: 'start' }}>
          <div>
            <h2 className="h-display" style={{ fontSize: 'clamp(28px, 3.6vw, 40px)' }}>{T.chooseT}</h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--c-ink-soft)', marginTop: 14 }}>
              {T.chooseP}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
              {presets.map(p => (
                <button key={p} onClick={() => setAmount(p)} style={{
                  padding: '14px 26px', borderRadius: 999,
                  background: amount === p ? 'var(--c-ink)' : '#fff',
                  color: amount === p ? '#fff' : 'var(--c-ink)',
                  border: amount === p ? 'none' : '1px solid var(--c-line)',
                  fontSize: 15, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap',
                }}>{p} €</button>
              ))}
              <input
                type="number" value={amount} onChange={e => setAmount(+e.target.value || 0)}
                style={{
                  padding: '14px 18px', borderRadius: 999, border: '1px solid var(--c-line)',
                  width: 100, fontSize: 16, fontWeight: 600, background: '#fff', fontFamily: 'inherit',
                }}/>
            </div>
            <button style={{
              marginTop: 24, background: 'var(--c-purple-700)', color: '#fff', border: 'none',
              padding: '18px 32px', borderRadius: 999, fontSize: 16, fontWeight: 600, cursor: 'pointer',
            }}>{T.give(amount)}</button>
          </div>
          <div style={{ background: '#fff', borderRadius: 24, padding: 'clamp(22px, 3vw, 32px)' }}>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, margin: '0 0 16px' }}>{T.bankT}</h3>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 13, lineHeight: 1.8, color: 'var(--c-ink)', overflowWrap: 'break-word' }}>
              {T.bank}
            </div>
            <div style={{ marginTop: 24, padding: 16, background: 'var(--c-purple-50)', borderRadius: 16, fontSize: 13, lineHeight: 1.6, color: 'var(--c-ink-soft)' }}>
              {T.tax}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── Contact ─────────────────────────────────────────────────────────
function ContactPage({ go, L }) {
  const T = L.contact;
  return (
    <div className="page-enter">
      <PageHeader kicker={T.kicker} title={T.title} intro={T.intro} blob="cloud" />

      <section style={{ padding: 'clamp(56px, 9vw, 100px) var(--pad-x) clamp(48px, 7vw, 80px)' }}>
        <div className="split" style={{ alignItems: 'start' }}>
          {/* Coordonnées */}
          <div style={{ display: 'grid', gap: 16, alignContent: 'flex-start' }}>
            {T.coords.map(([k, v, note]) => (
              <div key={k} style={{
                background: 'var(--c-purple-50)', borderRadius: 24, padding: '24px 28px',
              }}>
                <div style={{ fontSize: 12, color: 'var(--c-ink-mute)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>{k}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(18px, 2vw, 22px)', color: 'var(--c-ink)', overflowWrap: 'break-word' }}>{v}</div>
                {note && <MonoNote style={{ marginTop: 4, display: 'block' }}>({note})</MonoNote>}
              </div>
            ))}
          </div>
          {/* Formulaire */}
          <div style={{
            background: 'var(--c-cream-deep)', borderRadius: 32, padding: 'clamp(24px, 3.5vw, 40px)',
          }}>
            <h2 className="h-display" style={{ fontSize: 'clamp(26px, 3vw, 32px)', marginBottom: 8 }}>{T.writeT}</h2>
            <p style={{ fontSize: 14.5, color: 'var(--c-ink-soft)', marginBottom: 24 }}>
              {T.writeP}
            </p>
            <div style={{ display: 'grid', gap: 14 }}>
              {T.fields.map(([l, t]) => (
                <input key={l} placeholder={l} type={t} style={{
                  background: '#fff', border: '1px solid var(--c-line)',
                  padding: '14px 18px', borderRadius: 14, fontSize: 16,
                  fontFamily: 'inherit', color: 'var(--c-ink)', width: '100%',
                }}/>
              ))}
              <textarea placeholder={T.msgPh} rows={6} style={{
                background: '#fff', border: '1px solid var(--c-line)',
                padding: '14px 18px', borderRadius: 14, fontSize: 16,
                fontFamily: 'inherit', color: 'var(--c-ink)', resize: 'vertical', width: '100%',
              }}></textarea>
              <button style={{
                background: 'var(--c-ink)', color: '#fff', border: 'none',
                padding: '16px 28px', borderRadius: 14, fontSize: 15, fontWeight: 600,
                cursor: 'pointer', marginTop: 4,
              }}>{T.send}</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CharterPage, VolunteerPage, DonatePage, ContactPage });