/* global React, LightRays, TreeMark, MoonDivider */

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="brand">
          <img src={(window.__resources && window.__resources.logo) || "assets/logo.png"} alt="Mitzi Lessa" className="brand-logo" style={{ width: '150px', height: 'auto' }} />
          <div>
            <div className="brand-name">Mitzi Lessa</div>
            <div className="brand-sub">Holística & Intuitiva</div>
          </div>
        </div>
        <div className="nav-links">
          <a href="#sobre">Sobre</a>
          <a href="#servicos">Práticas</a>
          <a href="#atendimento">Atendimento</a>
          <a href="#contato">Contato</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <span className="lang-active">PT</span>
            <span className="lang-sep">/</span>
            <a href="https://mitzilessa.com.br/en" className="lang-link">EN</a>
          </div>
          <a href="#contato" className="btn">Agendar Atendimento</a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="hero" data-screen-label="01 Hero">
      <LightRays />
      <Nav />
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">Sessões 1:1 · Presencial & Online</div>
          <h1 className="hero-title" style={{ marginTop: 28 }}>
            Um caminho de <span className="em">reconexão</span> com o seu <span className="wine">propósito</span> de vida.
          </h1>
          <p className="hero-sub">
            Sessões de <strong>harmonização energética</strong> e orientação holística
            para promover equilíbrio emocional, clareza interior e bem-estar em momentos
            de transição, mudança ou crise.
          </p>
          <div className="hero-meta">
            <span className="hero-chip">✦ Atendimento PT / EN</span>
            <span className="hero-chip">✦ Mundo todo</span>
            <span className="hero-chip">✦ Sabedoria ancestral</span>
          </div>
          <div className="hero-cta">
            <a href="https://wa.me/+16035028749" target="_blank" rel="noreferrer" className="btn btn--filled">
              Agendar Atendimento
              <svg viewBox="0 0 16 16" fill="none"><path d="M3 8 H13 M9 4 L13 8 L9 12" stroke="currentColor" strokeWidth="1.2"/></svg>
            </a>
          </div>
        </div>

        <div className="hero-portrait hero-portrait-clean">
          <img src={(window.__resources && window.__resources.heroLogo) || "assets/mitzi-bio-logo.png"} alt="Mitzi Lessa - Holística e Intuitiva" className="hero-logo-img" />
        </div>
      </div>

      <div className="hero-footer">
        <span>☉ EST. MMXXIV</span>
        <span>Sabedoria ancestral × abordagens contemporâneas</span>
        <span>USA / Worldwide</span>
      </div>
    </header>
  );
}

function Intro() {
  return (
    <section className="intro">
      <MoonDivider />
      <div className="wrap">
        <div className="eyebrow" style={{ justifyContent: 'center', display: 'flex', marginTop: 8 }}>Bem-vinda(o)</div>
        <p className="intro-quote">
          Fortalecer o seu <em>bem-estar emocional</em> vai além do que você imagina.
          Ter apoio e escuta acolhedora ajuda você a lidar com inseguranças,
          relacionamentos e os desafios do dia a dia. <em>Você não está sozinho(a).</em>
        </p>
        <div className="intro-sig">— Mitzi Lessa</div>
      </div>
    </section>
  );
}

function Pains() {
  const items = [
    { n: "I.", t: <>Você se sente <strong>constantemente sobrecarregada</strong> pelas demandas da vida e não encontra tempo para cuidar de si mesma?</> },
    { n: "II.", t: <>Os relacionamentos estão <strong>trazendo mais estresse</strong> do que felicidade, e você não sabe como mudar essa dinâmica?</> },
    { n: "III.", t: <>Você luta contra <strong>sentimentos de inadequação</strong> e baixa autoestima, mesmo sabendo que é capaz de mais?</> },
  ];
  return (
    <section className="section section--cream" data-screen-label="02 Dores">
      <div className="wrap">
        <div className="pains-head">
          <div>
            <div className="section-num">/ 01 — RECONHECIMENTO</div>
            <h2 className="pains-title" style={{ marginTop: 24 }}>
              Você se <em>identifica</em> com alguma dessas situações?
            </h2>
          </div>
          <p style={{ color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.7, maxWidth: 420, justifySelf: 'end' }}>
            Muitas pessoas enfrentam desafios semelhantes todos os dias.
            Perceber é o primeiro passo de qualquer processo de desenvolvimento pessoal.
          </p>
        </div>

        <div className="pains-grid">
          {items.map((it, i) => (
            <div className="pain-card" key={i}>
              <div className="pain-num">{it.n}</div>
              <p className="pain-text">{it.t}</p>
            </div>
          ))}
        </div>

        <div className="pains-foot">
          <p>
            Se você <strong>respondeu “sim”</strong> a alguma dessas perguntas,
            saiba que estou <strong>pronta para te acompanhar</strong>.
          </p>
          <a href="https://wa.me/+16035028749" target="_blank" rel="noreferrer" className="btn">
            Agendar Atendimento
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Intro, Pains });