// pages/quem-somos.jsx — Página "Quem Somos"

function PageQuemSomos() {
  return (
    <PageShell>
      <SiteHeader active="quem-somos" />

      {/* PAGE HEADER + STORY + PHOTOS — merged to eliminate dead space */}
      <section style={{ padding: '56px 56px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -30, right: -30, opacity: 0.4 }}>
          <DecSunburst size={280} origin="tr" />
        </div>
        <div style={{ position: 'relative' }}>
          {/* Title — full width, single line on desktop */}
          <div style={{ marginBottom: 52 }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--ink-mute)',
              display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <DecSectionMark size={14} /> Quem somos
            </div>
            <h1 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 78,
              lineHeight: 0.95, fontWeight: 400, letterSpacing: '-0.025em',
              margin: '20px 0 0' }}>
              Uma casa feita de muitas mãos.
            </h1>
          </div>
          {/* Story + Photos grid */}
          <div data-reveal="" style={{ display: 'grid',
            gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'start' }}>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 14 }}>
                Nossa história
              </div>
              <div style={{ fontSize: 16.5, lineHeight: 1.65, color: 'var(--ink-soft)',
                display: 'flex', flexDirection: 'column', gap: 20 }}>
                <p style={{ margin: 0, fontSize: 18, color: 'var(--ink)', fontWeight: 500 }}>
                  A Casa Lar Luz do Caminho nasceu em 2010, a partir de um propósito
                  movido pelo amor e pela solidariedade: acolher crianças de 0 a 8
                  anos que tiveram seus direitos violados e oferecer a elas um
                  ambiente seguro, afetivo e cheio de oportunidades para recomeçar.
                </p>
                <p style={{ margin: 0 }}>
                  A inspiração para a criação da instituição surgiu em 2009, através
                  do desejo de uma menina chamada <strong style={{ color: 'var(--ink)', fontStyle: 'italic', fontFamily: 'var(--serif)', fontWeight: 400, fontSize: '1.05em' }}>Marcella</strong>,
                  que sonhava em ajudar crianças abandonadas. Desde então, a Casa Lar
                  transformou esse sonho em uma missão concreta, construída com o
                  apoio de dezenas de voluntários, profissionais e pessoas
                  comprometidas com a proteção da infância.
                </p>
                <p style={{ margin: 0 }}>
                  Ao longo dos anos, a instituição ampliou sua estrutura, fortaleceu
                  sua metodologia de acolhimento e desenvolveu projetos que promovem
                  cuidado, desenvolvimento emocional, convivência comunitária e
                  transformação social. Hoje, a Casa Lar Luz do Caminho é reconhecida
                  pelo impacto positivo que gera na vida de crianças, adolescentes e
                  famílias, mantendo vivo seu compromisso com o amor, a dignidade e
                  a esperança.
                </p>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <img
                src="uploads/11.jpg"
                alt="Crianças em atividade na Casa Lar"
                style={{ width: '100%', height: 380, objectFit: 'cover',
                  objectPosition: 'center top', borderRadius: 10, display: 'block', cursor: 'pointer' }}
                onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/11.jpg', 'Crianças em atividade na Casa Lar'); }}
              />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <img
                  src="uploads/3.JPG"
                  alt="Equipe da Casa Lar Luz do Caminho"
                  style={{ width: '100%', height: 180, objectFit: 'cover',
                    objectPosition: 'center top', borderRadius: 10, display: 'block', cursor: 'pointer' }}
                  onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/3.JPG', 'Equipe da Casa Lar Luz do Caminho'); }}
                />
                <img
                  src="uploads/13.jpg"
                  alt="Momento na Casa Lar"
                  style={{ width: '100%', height: 180, objectFit: 'cover',
                    objectPosition: 'center bottom', borderRadius: 10, display: 'block', cursor: 'pointer' }}
                  onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/13.jpg', 'Momento na Casa Lar'); }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MISSÃO · VISÃO */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--paper-2)',
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
        position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.22 }}>
          <DecPatternHouses />
        </div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          {[
            {
              kicker: 'Missão', tone: 'sol',
              text: 'Acolher crianças em situação de vulnerabilidade social, garantindo proteção, cuidado, desenvolvimento integral e oportunidades para a construção de um futuro mais seguro, humano e digno.',
            },
            {
              kicker: 'Visão', tone: 'folha',
              text: 'Ser referência no acolhimento institucional humanizado, promovendo transformação social através do cuidado, da proteção e do fortalecimento de vínculos familiares e comunitários.',
            },
          ].map((b, i) => (
            <div key={i} style={{
              background: 'var(--paper)', border: '1px solid var(--line)',
              borderTop: `4px solid var(--${b.tone})`,
              borderRadius: 14, padding: '36px 34px',
            }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: 'var(--ink-mute)',
                display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <DecSectionMark size={14} /> {b.kicker}
              </div>
              <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26,
                lineHeight: 1.32, color: 'var(--ink)', margin: '20px 0 0',
                letterSpacing: '-0.012em' }}>{b.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* VALORES */}
      <section data-reveal="" style={{ padding: '56px 56px' }}>
        <SectionHead
          kicker="Nossos valores"
          title="Cinco palavras, todos os dias."
          intro="O que sustenta cada decisão da casa — do prato à matrícula, do conselho ao quintal."
          align="center"
        />
        <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {[
            { n: '01', t: 'Amor',               c: 'var(--ceramica)', d: 'A base de tudo. Cada criança chega com uma história, e é com amor que ela continua.' },
            { n: '02', t: 'Respeito',           c: 'var(--ceu)',      d: 'Pelo tempo, pelo silêncio, pelas escolhas. Pela criança que está se reorganizando.' },
            { n: '03', t: 'Transparência',      c: 'var(--sol)',      d: 'Em cada relatório, cada parceria, cada doação. Confiança se constrói com clareza.' },
            { n: '04', t: 'Acolhimento',        c: 'var(--rosa)',     d: 'Não como evento, como prática diária — receber, escutar, ficar.' },
            { n: '05', t: 'Compromisso Social', c: 'var(--folha)',    d: 'A casa é uma resposta concreta a um problema coletivo. Não soltamos a mão.' },
          ].map((v) => (
            <div key={v.n} style={{
              background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12,
              padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 14,
              borderTop: `4px solid ${v.c}`, minHeight: 220,
            }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)',
                letterSpacing: '0.12em' }}>{v.n}</div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 30,
                lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.015em' }}>{v.t}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink-soft)' }}>{v.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CALL TO PARTNERSHIP */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--ceu)', color: 'var(--paper)',
        position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -20, right: -20, opacity: 0.28 }}>
          <DecSunburst size={240} origin="br" />
        </div>
        <div style={{ position: 'relative', display: 'grid',
          gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', opacity: 0.75 }}>Caminhe conosco</div>
            <h3 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 48,
              lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.02em',
              margin: '14px 0 0', maxWidth: 760, textWrap: 'pretty' }}>
              Quinze anos depois, ainda é a comunidade que mantém a casa de pé.
            </h3>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <a href="como-ajudar.html" style={{ textDecoration: 'none' }}>
              <Button variant="accent" size="lg" icon={Icons.Heart}>Como ajudar</Button>
            </a>
            <a href="transparencia.html" style={{ textDecoration: 'none' }}>
              <Button variant="ghost" size="lg" iconRight={Icons.Arrow}>
                <span style={{ color: 'var(--paper)' }}>Transparência</span>
              </Button>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter />
    </PageShell>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<PageQuemSomos />);
