// site/page-home.jsx — la page d'accueil (responsive + i18n).

function HomeHero({ go, T }) {
  return (
    <section style={{ padding: '28px var(--pad-x) 40px' }}>
      <div style={{
        background: 'var(--c-purple-100)', borderRadius: 'clamp(28px, 4vw, 48px)',
        padding: 'clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div className="float-a" style={{ position: 'absolute', top: 50, right: '28%' }}>
          <Blob d={BLOB_PATHS.cloud} fill="var(--c-peach)" size={200}
            style={{ position: 'static', transform: 'rotate(-25deg)' }}/>
        </div>
        <div className="float-b" style={{ position: 'absolute', bottom: -60, left: -40 }}>
          <Blob d={BLOB_PATHS.smooth} fill="var(--c-purple-400)" size={300}
            style={{ position: 'static', transform: 'rotate(40deg)' }}/>
        </div>
        <div className="float-c" style={{ position: 'absolute', top: 60, left: 30 }}>
          <Blob d={BLOB_PATHS.pebble} fill="var(--c-purple-700)" size={130}
            style={{ position: 'static' }}/>
        </div>

        <div className="hero-grid">
          <div>
            <div className="hero-rise hero-rise-1" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: '#fff', color: 'var(--c-purple-700)',
              padding: '10px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600,
              marginBottom: 28, boxShadow: '0 4px 12px rgba(34,22,52,0.06)',
            }}>
              <HeartGlyph size={14} color="var(--c-purple-600)"/>
              {T.badge}
            </div>
            <h1 className="h-display hero-rise hero-rise-2" style={{ fontSize: 'clamp(48px, 8.5vw, 92px)', lineHeight: 0.95 }}>
              {T.title}
            </h1>
            <p className="hero-rise hero-rise-3" style={{ fontSize: 'clamp(16px, 1.8vw, 18px)', lineHeight: 1.55, color: 'var(--c-ink)', maxWidth: 460, marginTop: 28, opacity: 0.78 }}>
              {T.intro}
            </p>
            <div className="hero-rise hero-rise-4" style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <button onClick={() => go('about')} style={{
                background: 'var(--c-ink)', color: '#fff', border: 'none',
                padding: '17px 30px', borderRadius: 999, fontSize: 15, fontWeight: 600,
                cursor: 'pointer',
              }}>{T.ctaDiscover}</button>
              <button onClick={() => go('volunteer')} style={{
                background: '#fff', color: 'var(--c-ink)', border: 'none',
                padding: '17px 26px', borderRadius: 999, fontSize: 15, fontWeight: 600,
                cursor: 'pointer',
              }}>{T.ctaVolunteer}</button>
            </div>
          </div>
          <div className="hero-rise hero-rise-3 hero-photo-col">
            <div className="hero-photo-breathe" style={{
              position: 'absolute', inset: 0, background: '#fff',
              borderRadius: '50% 50% 50% 50% / 60% 55% 45% 40%',
              padding: 14, boxShadow: '0 30px 60px rgba(34,22,52,0.15)',
              overflow: 'hidden',
            }}>
              <img src="uploads/PHOTO-2026-04-24-17-39-45.jpg" alt="Les fondatrices de Calinange"
                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'inherit', display: 'block' }}/>
            </div>
            <div className="hero-badge-float" style={{
              position: 'absolute', top: 20, right: 0, background: '#fff',
              padding: '12px 18px', borderRadius: 999,
              boxShadow: '0 8px 24px rgba(34,22,52,0.10)',
              fontSize: 13, fontWeight: 600, color: 'var(--c-ink)',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#3a9a5a' }}></span>
              {T.founders}
            </div>
            <div className="hero-chip-float" style={{
              position: 'absolute', bottom: 24, left: 0, background: 'var(--c-peach)',
              padding: '14px 20px', borderRadius: 24,
              fontFamily: 'var(--serif)', fontSize: 18, fontStyle: 'italic',
              color: 'var(--c-ink)', maxWidth: 200, transform: 'rotate(-4deg)',
            }}>{T.chip}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeMission({ T }) {
  return (
    <section style={{ padding: 'clamp(64px, 9vw, 120px) var(--pad-x) clamp(32px, 5vw, 60px)', textAlign: 'center' }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <div className="section-mono">{T.missionK}</div>
        <h2 className="h-display" style={{ fontSize: 'clamp(30px, 4.8vw, 64px)', marginTop: 20 }}>
          {T.missionT}
        </h2>
      </div>
    </section>
  );
}

function HomePillars({ T }) {
  const deco = [
    ['var(--c-purple-200)', '◐'],
    ['var(--c-peach-soft)', '✦'],
    ['var(--c-purple-300)', '◯'],
    ['var(--c-cream-deep)', '✿'],
  ];
  return (
    <section style={{ padding: '40px var(--pad-x) clamp(48px, 7vw, 80px)' }}>
      <div className="g g-4">
        {T.pillars.map(([title, body], i) => (
          <div key={title} style={{
            background: deco[i][0], borderRadius: 32, padding: '36px 28px 40px',
          }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 40, color: 'var(--c-purple-700)', marginBottom: 16, lineHeight: 1 }}>{deco[i][1]}</div>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 500, margin: '0 0 10px', color: 'var(--c-ink)' }}>{title}</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--c-ink-soft)', margin: 0 }}>{body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function HomeWho({ go, T }) {
  return (
    <section style={{ padding: 'clamp(40px, 6vw, 80px) var(--pad-x)' }}>
      <div className="split-r card-xl" style={{
        background: 'var(--c-purple-700)', color: '#fff',
        position: 'relative', overflow: 'hidden',
      }}>
        <div className="float-b" style={{ position: 'absolute', top: -100, right: -120 }}>
          <Blob d={BLOB_PATHS.smooth} fill="var(--c-purple-600)" size={420}
            style={{ position: 'static', transform: 'rotate(40deg)', opacity: 0.6 }}/>
        </div>
        <div className="float-c" style={{ position: 'absolute', bottom: -80, left: -40 }}>
          <Blob d={BLOB_PATHS.cloud} fill="var(--c-purple-800)" size={260}
            style={{ position: 'static' }}/>
        </div>
        <div style={{ position: 'relative' }}>
          <div className="section-mono" style={{ color: 'var(--c-purple-300)' }}>{T.whoK}</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', color: '#fff', margin: '16px 0 28px' }}>
            {T.whoT}
          </h2>
          <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 18, margin: 0 }}>
            {T.whoItems.map(([t, sub]) => (
              <li key={t} style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
                <span style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'var(--c-purple-400)', flexShrink: 0,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--serif)', fontSize: 16,
                }}>♡</span>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500 }}>{t}</div>
                  <div style={{ fontSize: 14, opacity: 0.7, marginTop: 2 }}>{sub}</div>
                </div>
              </li>
            ))}
          </ul>
          <button onClick={() => go('who')} style={{
            background: 'var(--c-cream)', color: 'var(--c-ink)', border: 'none',
            padding: '14px 24px', borderRadius: 999, fontSize: 14, fontWeight: 600,
            cursor: 'pointer', marginTop: 32,
          }}>{T.whoMore}</button>
        </div>
        <div className="collage">
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 40, bottom: 80,
            borderRadius: 32, overflow: 'hidden', transform: 'rotate(-3deg)',
          }}>
            <PhotoSlot label="photo · scène hospitalière douce" ratio="auto"
              style={{ width: '100%', height: '100%', borderRadius: 32 }} tone="cream"/>
          </div>
          <div style={{
            position: 'absolute', bottom: 0, right: 0, width: 'clamp(130px, 32%, 180px)', height: 'clamp(150px, 42%, 200px)',
            borderRadius: 24, overflow: 'hidden', transform: 'rotate(5deg)',
            border: '6px solid var(--c-purple-700)',
          }}>
            <PhotoSlot label="photo · détail" ratio="auto"
              style={{ width: '100%', height: '100%', borderRadius: 18 }} tone="purple"/>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ go, L }) {
  const T = L.home;
  return (
    <div className="page-enter">
      <HomeHero go={go} T={T}/>
      <HomeMission T={T}/>
      <HomePillars T={T}/>
      <HomeWho go={go} T={T}/>
      <CTAStrip
        go={go}
        title={T.ctaTitle}
        subtitle={T.ctaSub}
        primary={{ to: 'volunteer', label: T.ctaP }}
        secondary={{ to: 'donate', label: T.ctaS }}
      />
    </div>
  );
}

window.HomePage = HomePage;