/* global React, Reveal, Sym, Eyebrow, Btn, Placeholder, Accordion, SectionMark */

const IMG = 'assets/mentoria/';

/* ============ HERO ============ */
function MHero() {
  return (
    <header className="section bg-paper" id="topo" style={{ paddingTop: 'clamp(140px,16vh,210px)' }}>
      <div className="container">
        <div className="two-col two-col--wide" style={{ gridTemplateColumns: '1.05fr 0.95fr', alignItems: 'center' }}>
          <Reveal>
            <Eyebrow>Mentoria pessoal e de carreira</Eyebrow>
            <h1 className="h-hero" style={{ color: 'var(--blue)', marginTop: 22, fontSize: 'clamp(38px,5vw,66px)' }}>
              Um espaço de troca para aprender a desenhar o <span className="display-italic" style={{ color: 'var(--gold-accent)' }}>próprio caminho</span>.
            </h1>
            <p className="lead" style={{ marginTop: 28 }}>
              Nosso método traz ferramentas para quem deseja mais clareza na tomada de decisões. Para quem está começando um novo caminho, ou para quem sente a necessidade de se reorganizar, resgatar o foco e seguir com mais consciência e propósito.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <img className="m-fig" src={`${IMG}janela.jpg`} alt="Luz do sol atravessando uma cortina leve em uma janela" style={{ aspectRatio: '4/5' }} />
          </Reveal>
        </div>
      </div>
    </header>
  );
}

/* ============ SOLIDÃO ============ */
function MSolidao() {
  return (
    <section className="section bg-cream">
      <div className="container">
        <div className="two-col two-col--wide" style={{ gridTemplateColumns: '0.9fr 1.1fr', alignItems: 'center' }}>
          <Reveal>
            <img className="m-fig" src={`${IMG}solidao.jpg`} alt="Um poste solitário com um pássaro, sob o céu" style={{ aspectRatio: '4/5' }} />
          </Reveal>
          <Reveal delay={120}>
            <SectionMark />
            <h2 className="h-sub" style={{ color: 'var(--blue)' }}>
              Hiperconectadas e, ainda assim, sozinhas.
            </h2>
            <p className="body" style={{ marginTop: 20 }}>
              Falamos sobre a epidemia da solidão. Os referenciais que seguem perdendo espaço para os algoritmos. Criar um espaço de troca verdadeira e humana é uma forma de reconstruir caminhos rumo ao propósito.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ PROPOSTA / TRANSFORMAÇÃO DO OLHAR ============ */
function MProposta() {
  return (
    <section className="section bg-paper">
      <div className="container">
        <div className="two-col two-col--wide" style={{ gridTemplateColumns: '1.1fr 0.9fr', alignItems: 'center' }}>
          <Reveal>
            <SectionMark />
            <p className="m-quote">
              Minha função não é te dizer pra onde ir. É ajudar a formular as perguntas que te fazem encontrar melhores caminhos.
            </p>
            <p className="lead muted" style={{ marginTop: 26 }}>
              No lugar de promessas de resultados superficiais, um processo de transformação do olhar.
            </p>
            <p className="body" style={{ marginTop: 18 }}>
              A ideia é que você saia com um plano traçado e com ferramentas para lidar com os desafios e imprevistos que vão ocorrer.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <img className="m-fig" src={`${IMG}reflexao.jpg`} alt="Mulher segurando um espelho redondo que reflete o céu" style={{ aspectRatio: '3/4' }} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ É PARA MIM (3 pilares) ============ */
const PILARES = [
  { t: 'Autoconhecimento', d: 'Entender seus sonhos, seu momento, suas conquistas e frustrações. É o início do seu mapa.' },
  { t: 'Desenhar caminhos', d: 'Com o longo prazo no horizonte, definir os objetivos do meio do caminho. Uma régua de futuro para os passos do presente.' },
  { t: 'Ação e reação', d: 'Com horizonte desenhado e plano na mão, você vai ter clareza para tomar decisões. E não é sozinha: seguimos juntas, ajustando a rota sempre que necessário.' },
];
function MPilares() {
  return (
    <section className="section bg-cream" id="a-mentoria">
      <div className="container">
        <div className="two-col two-col--wide" style={{ gridTemplateColumns: '0.9fr 1.1fr', alignItems: 'center' }}>
          <Reveal>
            <img className="m-fig" src={`${IMG}cuidado.jpg`} alt="Uma mão segurando uma rosa diante de um espelho" style={{ aspectRatio: '4/5' }} />
          </Reveal>
          <Reveal delay={120}>
            <SectionMark />
            <h2 className="h-sec" style={{ color: 'var(--blue)' }}>É para mim?</h2>
            <div style={{ marginTop: 'clamp(22px,3vw,34px)' }}>
              {PILARES.map((p, i) => (
                <div key={i} style={{ padding: '22px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                  <h3 style={{ fontFamily: 'var(--display-active)', fontWeight: 500, color: 'var(--blue)', fontSize: 'clamp(21px,2.3vw,28px)' }}>{p.t}</h3>
                  <p className="body" style={{ marginTop: 8, fontSize: 16.5 }}>{p.d}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ O PERCURSO (4 fases) ============ */
const FASES = [
  { n: '01', t: 'Diagnóstico', dur: '2 meses', d: 'Olhar para o que acontece com você e à sua volta. Exercícios a cada encontro para definir metas. A partir daí elencamos prioridades.' },
  { n: '02', t: 'Mapeamento', dur: '45 dias', d: 'Desenhar o mapa de futuro para onde você vai olhar e se nortear daqui para frente.' },
  { n: '03', t: 'Caminhos', dur: '1 mês', d: 'Com mapa na mão, desenhamos seus caminhos. Esse é o momento de montar seu plano de ação para os próximos meses.' },
  { n: '04', t: 'Acompanhamento', dur: '45 dias', d: 'Você não fica sozinha, temos encontros de acompanhamento, para te ajudar a seguir o plano e também a ajustá-lo quando necessário.' },
];
function MFases() {
  return (
    <section className="section bg-paper" id="percurso">
      <div className="container">
        <Reveal style={{ maxWidth: 760 }}>
          <SectionMark />
          <h2 className="h-sec" style={{ color: 'var(--blue)' }}>Que caminho vamos percorrer?</h2>
        </Reveal>
        <Reveal delay={100}>
          <ol className="tl">
            {FASES.map((f, i) => (
              <li className="tl-step" key={i}>
                <div className="tl-rail"><span className="tl-dot"></span></div>
                <span className="tl-dur">{f.dur}</span>
                <h3 className="tl-title">{f.t}</h3>
                <p className="tl-desc">{f.d}</p>
              </li>
            ))}
          </ol>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ QUEM SOU EU ============ */
function MBio() {
  return (
    <section className="section bg-cream" id="quem-sou">
      <div className="container">
        <div className="two-col two-col--wide" style={{ gridTemplateColumns: '0.85fr 1.15fr', alignItems: 'center' }}>
          <Reveal>
            <figure style={{ margin: 0 }}>
              <img className="m-fig" src="assets/ludmila.jpg?v=6" alt="Ludmila Kaminskas" style={{ aspectRatio: '4/5' }} />
              <figcaption style={{ fontFamily: 'var(--sans)', fontSize: 10.5, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--blue-ink)', opacity: .38, marginTop: 9 }}>
                foto <a href="https://instagram.com/spineelli" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>@spineelli</a>
              </figcaption>
            </figure>
          </Reveal>
          <Reveal delay={120}>
            <Eyebrow>Quem sou eu</Eyebrow>
            <h2 className="h-sub" style={{ color: 'var(--blue)', marginTop: 20 }}>Ludmila Kaminskas</h2>
            <p className="body" style={{ marginTop: 22 }}>
              Observadora curiosa do comportamento humano, me dedico a pensar conexões fora das redes sociais. Sou estrategista de marketing com mais de 10 anos de experiência na conexão entre marcas e cultura.
            </p>
            <p className="body">
              Liderei times, desenvolvi pessoas, acompanhei carreiras e mentorei projetos. Reuni essa experiência em um método sensível, focado no desenvolvimento de mulheres.
            </p>
            <p className="body" style={{ fontWeight: 600, color: 'var(--blue)', marginTop: 30 }}>
              Por que decidi abrir essa mentoria
            </p>
            <p className="body" style={{ marginTop: 14 }}>
              Ao longo dos anos, fui procurada por colegas e amigas do mercado para conversar sobre carreira. Às vezes formalmente, às vezes num café sem pauta. O tema era sempre parecido: mulheres competentes que em algum momento sentiram falta de clareza sobre o que queriam de verdade e de um lugar seguro para falar sobre isso sem julgamento e sem precisar se proteger.
            </p>
            <p className="body">
              Esse espaço nasceu disso: da escuta que sempre fez parte da minha forma de trabalhar e do método que fui construindo ao longo de anos acompanhando pessoas. Um lugar para se reconectar com o que importa, com intimidade, com clareza e sem estar sozinha no processo.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ CTA / VAMOS JUNTAS ============ */
function MCta() {
  return (
    <section className="section bg-paper" id="conversar">
      <div className="container">
        <Reveal className="text-col" style={{ margin: '0 auto', textAlign: 'center' }}>
          <Sym tone="gold" style={{ height: 26, width: 'auto', margin: '0 auto 28px' }} />
          <h2 className="h-sec" style={{ color: 'var(--blue)' }}>Vamos juntas?</h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Essa mentoria foi feita para atender todas as mulheres e dissidentes de gênero. Ela é individual e acontece online, em encontros quinzenais ao longo de seis meses. Um espaço seguro, íntimo e acolhedor, onde você terá acesso a orientações estratégicas para traçar seus planos.
          </p>
          <p className="body muted" style={{ marginTop: 14, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
            Valores, método e mais informações estão no material abaixo.
          </p>
          <div className="m-cta-actions" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', gap: 18, marginTop: 38 }}>
            <Btn variant="solid" lg href="mailto:mentorias@fresta.io">Quero marcar um papo</Btn>
            <DownloadGate />
          </div>
          <p className="meta muted" style={{ marginTop: 24 }}>
            <a href="mailto:mentorias@fresta.io" className="tlink">mentorias@fresta.io</a>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Mentoria() {
  return (
    <React.Fragment>
      <MHero />
      <MSolidao />
      <MProposta />
      <MPilares />
      <MFases />
      <MBio />
      <MCta />
    </React.Fragment>
  );
}

Object.assign(window, { Mentoria });