/* global React */
// ============================================================
// Craque Cidadão — pages A: Home, PageHero, Quem Somos, Projetos
// ============================================================
const { Icon: I3, Reveal: R3, CourtLines: CL3, WA_LINK: WA3, IG_LINK: IG3 } = window;

function Home({ onNav, heroStyle }) {
  const { Hero, ImpactBand, AboutBlock, ProjectsPreview, InstagramFeed, Partners, SupportCTA, TransparencyTeaser, TestimonialVideo } = window;
  return (
    <>
      <Hero onNav={onNav} heroStyle={heroStyle} />
      <ImpactBand />
      <AboutBlock onNav={onNav} />
      <ProjectsPreview onNav={onNav} />
      <TestimonialVideo />
      <InstagramFeed />
      <Partners onNav={onNav} />
      <SupportCTA onNav={onNav} />
      <TransparencyTeaser onNav={onNav} />
    </>
  );
}

// Shared internal-page banner.
function PageHero({ eyebrow, title, intro }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, var(--blue-700) 0%, var(--navy-900) 100%)', color: '#fff' }}>
      <CL3 opacity={0.1} />
      <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: '64px 24px 68px' }}>
        <R3>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-400)' }}>
            <span style={{ width: 26, height: 2, background: 'currentColor' }} /> {eyebrow}
          </span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2.1rem, 4.4vw, 3.2rem)', lineHeight: 1.06, letterSpacing: '-0.02em', color: '#fff', margin: '14px 0 0', maxWidth: 760 }}>{title}</h1>
          {intro && <p style={{ fontSize: 'var(--fs-lead)', lineHeight: 1.55, color: 'rgba(255,255,255,0.86)', margin: '16px 0 0', maxWidth: 640 }}>{intro}</p>}
        </R3>
      </div>
    </section>
  );
}

const VALUES = [
  { icon: 'shield', t: 'Disciplina', d: 'Compromisso, pontualidade e respeito às regras dentro e fora da quadra.' },
  { icon: 'users', t: 'Convivência', d: 'Aprender a viver em comunidade, com empatia e trabalho em equipe.' },
  { icon: 'graduation-cap', t: 'Educação', d: 'O esporte caminha lado a lado com a permanência na escola.' },
  { icon: 'heart', t: 'Família', d: 'A base de tudo. Apoiamos cada jovem e os que estão ao seu redor.' },
];

const TIMELINE = [
  { year: '2009', t: 'O começo', d: 'A Craque Cidadão nasce em Duque de Caxias/RJ para ocupar positivamente o tempo de crianças e adolescentes.' },
  { year: '2013', t: 'Crescimento', d: 'Ampliação das modalidades e das turmas, alcançando mais bairros da região.' },
  { year: '2018', t: 'Reconhecimento', d: 'Conquistas esportivas e fortalecimento das ações sociais com as famílias.' },
  { year: 'Hoje', t: 'Transformação contínua', d: 'Centenas de jovens atendidos, formando craques dentro e fora da quadra.' },
];

function QuemSomos({ onNav }) {
  const { SectionHeading, Card, Button } = window.CraqueCidadODesignSystem_6fdc08;
  return (
    <>
      <PageHero eyebrow="Quem Somos" title="Educando pelo esporte desde 2009."
        intro="Uma ONG que transforma vidas em Duque de Caxias/RJ, usando o esporte como ferramenta de inclusão, educação e cidadania." />

      <section style={{ background: 'var(--surface-card)' }}>
        <div className="cc-about-grid" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
          <R3>
            <SectionHeading eyebrow="Nossa missão" title="Formar cidadãos, não apenas atletas." />
            <p style={{ fontSize: 'var(--fs-body)', lineHeight: 1.7, color: 'var(--text-body)', margin: '18px 0 0' }}>
              A Craque Cidadão é uma organização da sociedade civil sem fins lucrativos, fruto da necessidade de ocupação positiva do tempo de crianças e adolescentes em situação de vulnerabilidade social.
            </p>
            <p style={{ fontSize: 'var(--fs-body)', lineHeight: 1.7, color: 'var(--text-body)', margin: '14px 0 0' }}>
              Nosso foco é o esporte como atividade privilegiada na construção de cidadãos com valores éticos, morais, disciplinares e comunitários — atendendo de forma individualizada cada jovem e sua família.
            </p>
          </R3>
          <R3 delay={120}>
            <image-slot id="about-page" shape="rounded" radius="22" src="uploads/Amistoso Futsal sub11 e sub 14_03.jpeg" placeholder="Foto institucional"
              style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 3', borderRadius: 22, boxShadow: 'var(--shadow-md)' }}></image-slot>
          </R3>
        </div>
      </section>

      <section style={{ background: 'var(--surface-page)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
          <R3 style={{ textAlign: 'center', marginBottom: 44 }}>
            <SectionHeading align="center" eyebrow="Nossos valores" title="O que sustenta o nosso trabalho" />
          </R3>
          <div className="cc-proj-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {VALUES.map((v, i) => (
              <R3 key={v.t} delay={i * 70}>
                <Card padding="var(--space-6)" interactive style={{ height: '100%' }}>
                  <span style={{ width: 50, height: 50, borderRadius: 12, background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                    <I3 name={v.icon} size={24} color="var(--brand)" />
                  </span>
                  <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, color: 'var(--brand-ink)' }}>{v.t}</h3>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)' }}>{v.d}</p>
                </Card>
              </R3>
            ))}
          </div>
        </div>
      </section>

      {/* timeline */}
      <section style={{ background: 'var(--surface-card)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px' }}>
          <R3 style={{ marginBottom: 44 }}>
            <SectionHeading eyebrow="Nossa trajetória" title="Mais de 15 anos transformando vidas" />
          </R3>
          <div className="cc-timeline" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {TIMELINE.map((e, i) => (
              <R3 key={e.year} delay={i * 90}>
                <div style={{ position: 'relative', paddingTop: 26 }}>
                  <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--ink-200)' }}>
                    <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--gold-500)', border: '4px solid var(--surface-card)', position: 'absolute', top: -8, left: 0 }} />
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 30, color: 'var(--brand)', lineHeight: 1 }}>{e.year}</div>
                  <h4 style={{ margin: '8px 0 6px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, color: 'var(--brand-ink)' }}>{e.t}</h4>
                  <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-body)' }}>{e.d}</p>
                </div>
              </R3>
            ))}
          </div>
        </div>
      </section>

      <window.ImpactBand />
    </>
  );
}

function ProjetosPage({ onNav }) {
  const { SectionHeading } = window.CraqueCidadODesignSystem_6fdc08;
  const items = window.CC_PROJECTS;
  return (
    <>
      <PageHero eyebrow="Nossos Projetos" title="Onde a transformação acontece"
        intro="Do futsal ao apoio às famílias, cada projeto é uma porta de entrada para a cidadania, a disciplina e novas oportunidades." />
      <section style={{ background: 'var(--surface-card)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px', display: 'flex', flexDirection: 'column', gap: 28 }}>
          {items.map((p, i) => (
            <R3 key={p.title} delay={(i % 2) * 80}>
              <ProjectRow p={p} flip={i % 2 === 1} idx={i} />
            </R3>
          ))}
        </div>
      </section>
      <window.InstagramFeed />
    </>
  );
}

function ProjectRow({ p, flip, idx }) {
  const { Badge, Button } = window.CraqueCidadODesignSystem_6fdc08;
  return (
    <div className="cc-projrow" style={{
      display: 'grid', gridTemplateColumns: flip ? '0.9fr 1.1fr' : '1.1fr 0.9fr', gap: 40, alignItems: 'center',
      background: 'var(--surface-page)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-6)', border: '1px solid var(--border)',
    }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <image-slot id={`proj-${idx}`} shape="rounded" radius="18" src={p.src} placeholder={`Foto — ${p.title}`}
          style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '16 / 10', borderRadius: 18, boxShadow: 'var(--shadow-sm)' }}></image-slot>
      </div>
      <div style={{ order: flip ? 1 : 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <span style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
            <I3 name={p.icon} size={26} color="#fff" />
          </span>
          <Badge tone="brand">Projeto</Badge>
        </div>
        <h2 style={{ margin: '0 0 10px', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h2)', color: 'var(--brand-ink)' }}>{p.title}</h2>
        <p style={{ margin: '0 0 20px', fontSize: 'var(--fs-body)', lineHeight: 1.7, color: 'var(--text-body)' }}>{p.text}</p>
        <a href={WA3} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
          <Button variant="outline" iconRight={<I3 name="arrow-right" size={16} />}>Quero participar</Button>
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { Home, PageHero, QuemSomos, ProjetosPage, ProjectRow });