/* 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">Holistic & Intuitive</div>
          </div>
        </div>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#practices">Practices</a>
          <a href="#sessions">Sessions</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <a href="https://mitzilessa.com.br" className="lang-link">PT</a>
            <span className="lang-sep">/</span>
            <span className="lang-active">EN</span>
          </div>
          <a href="#contact" className="btn">Book Now</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">1:1 Sessions · In-Person & Online</div>
          <h1 className="hero-title" style={{ marginTop: 28 }}>
            A path of <span className="em">reconnection</span> with your soul’s <span className="wine">purpose</span>.
          </h1>
          <p className="hero-sub">
            <strong>Energy balancing</strong> sessions and holistic guidance to nurture
            emotional balance, inner clarity, and well-being through moments of
            transition, change, or crisis.
          </p>
          <div className="hero-meta">
            <span className="hero-chip">✦ EN / PT sessions</span>
            <span className="hero-chip">✦ Worldwide</span>
            <span className="hero-chip">✦ Ancient wisdom</span>
          </div>
          <div className="hero-cta">
            <a href="https://wa.me/+16035028749" target="_blank" rel="noreferrer" className="btn btn--filled">
              Book Now
              <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 - Holistic & Intuitive" className="hero-logo-img" />
        </div>
      </div>

      <div className="hero-footer">
        <span>☉ EST. MMXXIV</span>
        <span>Ancient wisdom × contemporary practice</span>
        <span>New Hampshire, 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 }}>Welcome</div>
        <p className="intro-quote">
          Strengthening your <em>emotional well-being</em> goes deeper than you imagine.
          Having warm support and a listening presence helps you face insecurities,
          relationships, and the everyday challenges of life. <em>You are not alone.</em>
        </p>
        <div className="intro-sig">— Mitzi Lessa</div>
      </div>
    </section>);

}

function Pains() {
  const items = [
  { n: "I.", t: <>Do you feel <strong>constantly overwhelmed</strong> by life’s demands and can’t find time to care for yourself?</> },
  { n: "II.", t: <>Are your relationships bringing <strong>more stress than joy</strong>, and you don’t know how to shift the dynamic?</> },
  { n: "III.", t: <>Do you struggle with <strong>feelings of inadequacy</strong> and low self-worth, even knowing you are capable of more?</> }];

  return (
    <section className="section section--cream" data-screen-label="02 Pains">
      <div className="wrap">
        <div className="pains-head">
          <div>
            <div className="section-num">/ 01 — RECOGNITION</div>
            <h2 className="pains-title" style={{ marginTop: 24 }}>
              Do you <em>recognize</em> yourself in any of these?
            </h2>
          </div>
          <p style={{ color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.7, maxWidth: 420, justifySelf: 'end' }}>
            Many people face these same challenges every day. Awareness
            is the first step in any process of personal growth.
          </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>
            If you <strong>answered “yes”</strong> to any of these questions,
            know that I am <strong>ready to walk this path with you</strong>.
          </p>
          <a href="https://wa.me/+16035028749" target="_blank" rel="noreferrer" className="btn">
            Book Now
          </a>
        </div>
      </div>
    </section>);

}

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