// pages/transparencia.jsx — Página "Transparência"

function MetricCard({ m }) {
  var [count, setCount] = React.useState(0);
  var [started, setStarted] = React.useState(false);
  var ref = React.useRef(null);

  React.useEffect(function() {
    var el = ref.current;
    if (!el) return;
    var observer = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting) { setStarted(true); observer.disconnect(); }
    }, { threshold: 0.3 });
    observer.observe(el);
    return function() { observer.disconnect(); };
  }, []);

  React.useEffect(function() {
    if (!started) return;
    var startTime = null;
    var duration = 900;
    function step(now) {
      if (!startTime) startTime = now;
      var progress = Math.min((now - startTime) / duration, 1);
      var eased = 1 - Math.pow(1 - progress, 3);
      setCount(Math.round(eased * m.target));
      if (progress < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }, [started]);

  return (
    <div ref={ref} style={{
      background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14,
      padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 18,
      borderTop: `4px solid ${m.c}`, minHeight: 280,
    }}>
      <div style={{
        fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 96,
        lineHeight: 0.9, color: 'var(--ink)', letterSpacing: '-0.03em',
      }}>
        {m.prefix}{count}{m.numSuffix}
        {m.suffix && <span style={{ fontSize: '0.32em', marginLeft: 6, color: 'var(--ink-mute)', fontStyle: 'normal', fontWeight: 500 }}>{m.suffix}</span>}
      </div>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--ink-mute)',
      }}>{m.l}</div>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>
        {m.d}
      </p>
    </div>
  );
}

var METRICS = [
  {
    target: 260, prefix: '+', numSuffix: '',
    l: 'Crianças atendidas',
    d: 'Centenas de histórias acolhidas com cuidado, proteção e responsabilidade ao longo da nossa trajetória.',
    c: 'var(--ceramica)',
  },
  {
    target: 16, prefix: '', numSuffix: '', suffix: 'anos',
    l: 'De atuação',
    d: 'Uma caminhada dedicada ao acolhimento de crianças e ao fortalecimento de uma rede de cuidado.',
    c: 'var(--sol)',
  },
  {
    target: 24, prefix: '', numSuffix: 'h',
    l: 'Atendimento contínuo',
    d: 'A Casa Lar funciona de forma contínua, com equipe presente todos os dias da semana.',
    c: 'var(--folha)',
  },
];

function PageTransparencia() {
  return (
    <PageShell>
      <SiteHeader active="transparencia" />

      {/* HEADER */}
      <section style={{ padding: '56px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, right: 0, opacity: 0.32 }}>
          <DecSunburst size={280} origin="tr" />
        </div>
        <div style={{ position: 'relative' }}>
          <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} /> Transparência
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 88,
            lineHeight: 0.95, fontWeight: 400, letterSpacing: '-0.025em',
            margin: '20px 0 24px', maxWidth: 820 }}>
            Confiança se constrói<br/>com clareza.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)',
            maxWidth: 720, margin: 0 }}>
            A Casa Lar Luz do Caminho acredita que confiança se constrói com
            responsabilidade, ética e clareza. Prezamos pela transparência em
            cada etapa do nosso trabalho — comunicando-nos abertamente com a
            sociedade, doadores, parceiros e todos que caminham conosco nessa
            missão de acolher, proteger e cuidar de crianças com dignidade.
          </p>
        </div>
      </section>

      {/* FOTOS */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--paper-2)',
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          <img src="uploads/2.jpg" alt="Casa Lar Luz do Caminho" style={{ width: '100%', height: 260, objectFit: 'cover', borderRadius: 10, display: 'block', cursor: 'pointer' }}
            onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/2.jpg', 'Casa Lar Luz do Caminho'); }} />
          <img src="uploads/15.JPG" alt="Crianças na Casa Lar" style={{ width: '100%', height: 260, objectFit: 'cover', borderRadius: 10, display: 'block', cursor: 'pointer' }}
            onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/15.JPG', 'Crianças na Casa Lar'); }} />
          <img src="uploads/7.jpg" alt="Atividade na Casa Lar" style={{ width: '100%', height: 260, objectFit: 'cover', borderRadius: 10, display: 'block', cursor: 'pointer' }}
            onClick={function() { window.openPhotoModal && window.openPhotoModal('uploads/7.jpg', 'Atividade na Casa Lar'); }} />
        </div>
      </section>

      {/* MÉTRICAS DE IMPACTO */}
      <section data-reveal="" style={{ padding: '32px 56px 56px' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--ink-mute)',
          display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
          <DecSectionMark size={14} /> Métricas de impacto
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {METRICS.map(function(m, i) { return <MetricCard key={i} m={m} />; })}
        </div>
      </section>

      {/* DECORATIVE BAND */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--paper-2)',
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
          <DecPath width={360} height={20} sun={false} />
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 30,
            lineHeight: 1.28, color: 'var(--ink)', margin: 0, textAlign: 'center',
            maxWidth: 640, letterSpacing: '-0.012em' }}>
            Cada criança atendida é uma história — e cada história importa
            a quem caminha conosco.
          </p>
          <div style={{ transform: 'scaleX(-1)' }}>
            <DecPath width={360} height={20} sun={false} />
          </div>
        </div>
      </section>

      <SiteFooter />
    </PageShell>
  );
}

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