// pages/home.jsx — Página "Início"

function PageHome() {
  return (
    <PageShell>
      <SiteHeader active="home" />

      {/* HERO */}
      <section style={{ padding: '56px 56px 80px', position: 'relative', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, opacity: 0.5, pointerEvents: 'none' }}>
          <DecSunburst size={260} origin="tr" />
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: 'var(--ink-mute)',
            display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <DecSectionMark size={14} /> Casa Lar · Florianópolis · desde 2010
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 78,
            lineHeight: 0.96, fontWeight: 400, letterSpacing: '-0.025em',
            margin: '20px 0 24px', color: 'var(--ink)' }}>
            Transformando<br/>histórias com<br/>acolhimento.
          </h1>
          <p style={{ fontSize: 17.5, lineHeight: 1.55, color: 'var(--ink-soft)',
            maxWidth: 460, margin: '0 0 32px' }}>
            Há mais de uma década oferecendo cuidado, proteção e oportunidades
            para crianças que precisam recomeçar com amor e dignidade.
          </p>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="como-ajudar.html" style={{ textDecoration: 'none' }}>
              <Button variant="accent" size="lg" icon={Icons.Heart}>Quero fazer parte</Button>
            </a>
            <a href="quem-somos.html" style={{ textDecoration: 'none' }}>
              <Button variant="secondary" size="lg" iconRight={Icons.Arrow}>Conheça a Casa</Button>
            </a>
          </div>
          <div style={{ marginTop: 44, display: 'inline-flex', alignItems: 'center', gap: 14 }}>
            <DecFiveDots size={9} gap={11} />
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <img
            src="uploads/9.jpg"
            alt="Crianças da Casa Lar Luz do Caminho juntas"
            style={{ width: '100%', height: 520, objectFit: 'cover', borderRadius: 10, display: 'block', cursor: 'pointer' }}
            onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/9.jpg', 'Crianças da Casa Lar Luz do Caminho'); }}
          />
          <div style={{ position: 'absolute', bottom: -18, left: -18 }}>
            <Logo size={84} />
          </div>
        </div>
      </section>

      {/* MISSION BAND */}
      <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.5, pointerEvents: 'none' }}>
          <DecPatternRoofs density={50} opacity={0.18} />
        </div>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
          <DecFiveRoofs unit={26} gap={8} />
        </div>
        <p style={{
          position: 'relative',
          fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 36,
          lineHeight: 1.18, letterSpacing: '-0.015em',
          textAlign: 'center', maxWidth: 800, margin: '0 auto',
          color: 'var(--ink)',
        }}>
          Acolher é receber uma vida inteira —<br/>
          com sua história, seu tempo, seu futuro.<br/>
          <span style={{ color: 'var(--ink)', fontWeight: 'bold' }}>É o nosso jeito de dizer: aqui cabe mais um.</span>
        </p>
      </section>

      {/* TRÊS PILARES */}
      <section data-reveal="" style={{ padding: '56px 56px' }}>
        <SectionHead
          kicker="Como atuamos"
          title="Três pilares, uma casa."
          intro="O cuidado diário, a oportunidade de transformação e o crescimento de cada criança caminham juntos, todos os dias."
          align="center"
          titleSize={56}
        />
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {[
            {
              num: '01', tone: 'ceu',
              title: 'Acolhimento',
              desc: 'Oferecemos um ambiente seguro, afetivo e estruturado para o desenvolvimento saudável das crianças.',
            },
            {
              num: '02', tone: 'sol',
              title: 'Transformação Social',
              desc: 'Construímos oportunidades através do apoio da comunidade, voluntários e parceiros que acreditam no futuro.',
            },
            {
              num: '03', tone: 'folha',
              title: 'Desenvolvimento',
              desc: 'Promovemos experiências, educação e atividades que fortalecem autonomia, autoestima e vínculos.',
            },
          ].map((p) => (
            <div key={p.num} style={{
              background: 'var(--paper)',
              border: '1px solid var(--line)',
              borderTop: `4px solid var(--${p.tone})`,
              borderRadius: 14,
              padding: '32px 28px',
              display: 'flex', flexDirection: 'column', gap: 18,
              minHeight: 280, position: 'relative',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: 'var(--ink-mute)' }}>{p.num}</span>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: `var(--${p.tone})` }} />
              </div>
              <h3 style={{
                fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400,
                fontSize: 36, lineHeight: 1, margin: 0, letterSpacing: '-0.02em',
              }}>{p.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0, flex: 1 }}>
                {p.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* PHOTO STRIP */}
      <section data-reveal="" style={{ padding: '0 56px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
          <img
            src="uploads/14.jpeg"
            alt="Crianças da Casa Lar Luz do Caminho"
            style={{ width: '100%', height: 360, objectFit: 'cover', objectPosition: 'center 10%', borderRadius: 10, display: 'block', cursor: 'pointer' }}
            onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/14.jpeg', 'Crianças da Casa Lar Luz do Caminho'); }}
          />
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 14 }}>
            <img
              src="uploads/17.JPG"
              alt="Crianças em atividade na Casa Lar"
              style={{ width: '100%', height: 173, objectFit: 'cover', objectPosition: 'center', borderRadius: 10, display: 'block', cursor: 'pointer' }}
              onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/17.JPG', 'Crianças em atividade na Casa Lar'); }}
            />
            <img
              src="uploads/16.jpg"
              alt="Atividade na Casa Lar"
              style={{ width: '100%', height: 173, objectFit: 'cover', borderRadius: 10, display: 'block', cursor: 'pointer' }}
              onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/16.jpg', 'Atividade na Casa Lar'); }}
            />
          </div>
        </div>
      </section>

      {/* QUOTE */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--ink)', color: 'var(--paper)',
        position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, right: 0, opacity: 0.35 }}>
          <DecSunburst size={320} origin="tr" />
        </div>
        <div style={{ position: 'relative', maxWidth: 820, margin: '0 auto' }}>
          <div style={{ position: 'absolute', top: -40, left: -16 }}>
            <DecQuoteMark size={100} color="var(--sol)" />
          </div>
          <blockquote style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 44,
            lineHeight: 1.18, letterSpacing: '-0.02em', margin: 0, color: 'var(--paper)',
          }}>
            A Casa Lar nasceu do sonho de uma menina chamada Marcella,
            que queria ajudar crianças abandonadas. Esse sonho virou uma missão concreta —
            e segue, todos os dias, sendo construída por muitas mãos.
          </blockquote>
          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 14,
            fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.12em',
            textTransform: 'uppercase', opacity: 0.7 }}>
            <DecFiveDots size={6} gap={8} /> origem da casa · 2009
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--sol)',
        position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -40, left: -40, opacity: 0.55, pointerEvents: 'none' }}>
          <DecSunburst size={280} origin="bl" />
        </div>
        <div style={{ position: 'relative', display: 'grid',
          gridTemplateColumns: '1.4fr 0.6fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--ink)' }}>Campanha permanente</div>
            <h3 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 64,
              lineHeight: 0.96, fontWeight: 400, letterSpacing: '-0.025em', margin: '14px 0 16px',
              color: 'var(--ink)' }}>
              Aqui cabe mais um.
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink)', opacity: 0.85,
              maxWidth: 420, margin: 0 }}>
              Cada doação ajuda a manter o cuidado diário, a alimentação e a
              proteção das crianças.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="como-ajudar.html" style={{ textDecoration: 'none' }}>
              <Button variant="primary" size="xl" full icon={Icons.Heart}>Quero fazer parte</Button>
            </a>
            <a href="transparencia.html" style={{ textDecoration: 'none' }}>
              <Button variant="secondary" size="lg" full>Ver transparência</Button>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter />
    </PageShell>
  );
}

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