// Landing sections — Challenge Lamoniê
const { useState, useEffect } = React;

const fmtPrice = (v) => {
  const [int, cents] = v.toFixed(2).split(".");
  return { int, cents };
};

function TopBar({ brand, edition, onCta }) {
  return (
    <header className="topbar">
      <div className="container topbar__inner">
        <div className="brandmark">
          <div className="brandmark__glyph">CL</div>
          <span>{brand}</span>
        </div>
        <nav className="topnav">
          <a href="#como">Como funciona</a>
          <a href="#distancias">Distâncias</a>
          <a href="#medalha">Medalha</a>
          <a href="#cronograma">Cronograma</a>
          <a href="#regulamento">Regulamento</a>
        </nav>
        <button className="btn btn--primary" style={{padding: "12px 18px", fontSize: 14}} onClick={onCta}>
          Inscrever <span className="arrow">→</span>
        </button>
      </div>
    </header>
  );
}

function Hero({ content, medalSrc, onCta }) {
  return (
    <section className="hero">
      <div className="hero__sun"></div>
      <div className="container hero__grid">
        <div>
          <div className="kicker-bar">
            <span className="dot"></span>
            <span>{content.eyebrow}</span>
            <span style={{opacity: 0.5}}>·</span>
            <span>{content.edition}</span>
          </div>
          <h1 className="hero__title">
            Aceite o <em>desafio</em>. Corra. Conquiste sua <em>medalha</em>.
          </h1>
          <p className="hero__sub">{content.heroSubtitle}</p>
          <div className="hero__ctas">
            <button className="btn btn--primary btn--lg" onClick={onCta}>
              {content.primaryCta} <span className="arrow">→</span>
            </button>
            <a href="#distancias" className="btn btn--ghost btn--lg">Ver distâncias</a>
          </div>
          <div className="hero__stats">
            {content.stats.map((s, i) => (
              <div className="hero__stat" key={i}>
                <div className="hero__stat-value">{s.value}</div>
                <div className="hero__stat-label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hero__medal-wrap">
          <div className="hero__medal-frame"></div>
          <div className="hero__medal-tag">⬢ {content.month}</div>
          <SakuraBranch />
          <img className="hero__medal-img" src={medalSrc} alt="Medalha Etapa Tóquio" />
          <div className="hero__medal-meta">
            EDIÇÃO Nº 12<br/>
            CHALLENGE LAMONIÊ
          </div>
        </div>
      </div>
    </section>
  );
}

function SakuraBranch() {
  return (
    <svg className="hero__sakura" viewBox="0 0 100 100" fill="none">
      <path d="M5 5 Q 30 25, 55 30 T 95 50" stroke="#2a1f1a" strokeWidth="1.5" fill="none"/>
      {[[18,18],[34,24],[52,30],[68,40],[84,48]].map(([x,y],i)=> (
        <g key={i} transform={`translate(${x},${y})`}>
          {[0,72,144,216,288].map(a => (
            <ellipse key={a} cx="0" cy="-5" rx="3.5" ry="6" fill="#f6d2dc" transform={`rotate(${a})`} opacity="0.95"/>
          ))}
          <circle r="1.3" fill="#e6132a"/>
        </g>
      ))}
    </svg>
  );
}

function HowItWorks({ steps }) {
  return (
    <section className="section" id="como">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__index">01 / Como funciona</div>
            <h2 className="section__title">Três passos pra<br/>colar a medalha na parede.</h2>
          </div>
          <p className="section__lede">Inscreveu. Correu. Recebeu. Sem letras miúdas, sem chip, sem fila de largada — você corre quando quiser, no seu ritmo.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step__icon">PASSO 0{i+1}</div>
              <div className="step__n">{s.n}</div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Distances({ modalities, onPick }) {
  return (
    <section className="section" id="distancias" style={{paddingTop: 40}}>
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__index">02 / Escolha seu desafio</div>
            <h2 className="section__title">Você decide<br/>até onde vai.</h2>
          </div>
          <p className="section__lede">Da primeira corrida ao ultra, da pedalada do fim de semana ao brevet. Todo mundo leva a mesma medalha — o que muda é o suor.</p>
        </div>
        {Object.entries(modalities).map(([key, m]) => (
          <div className="modality" key={key}>
            <div className="modality__head">
              <div className="modality__icon">{m.icon}</div>
              <div className="modality__label">{m.label}</div>
              <div className="modality__blurb">{m.blurb}</div>
            </div>
            <div className="tiers">
              {m.tiers.map(t => {
                const p = fmtPrice(t.price);
                return (
                  <button className="tier" key={t.km} onClick={() => onPick(key, t.km)}>
                    {t.tag && <div className="tier__tag">{t.tag}</div>}
                    <div className="tier__km">{t.km}<small> km</small></div>
                    <div className="tier__price">
                      <span className="tier__price-currency">R$</span>
                      <span className="tier__price-value">{p.int}</span>
                      <span className="tier__price-cents">,{p.cents}</span>
                    </div>
                    <div className="tier__cta">Escolher <span>→</span></div>
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MedalShowcase({ medal, medalSrc }) {
  return (
    <section className="section medalshow" id="medalha">
      <div className="container medalshow__grid">
        <div className="medalshow__img">
          <img src={medalSrc} alt="Medalha Etapa Tóquio"/>
          <div className="medalshow__caption">FOTO · MEDALHA REAL ETAPA TÓQUIO</div>
        </div>
        <div>
          <div className="section__index">03 / A medalha</div>
          <h2 className="medalshow__title">{medal.title}</h2>
          <p className="medalshow__body">{medal.body}</p>
          <ul className="medalshow__spec">
            {medal.spec.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Testimonials({ items }) {
  return (
    <section className="section section--paper">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__index">04 / Quem já correu</div>
            <h2 className="section__title">Eles já levaram<br/>pra casa.</h2>
          </div>
          <p className="section__lede">Mais de 8 mil atletas já completaram alguma etapa. Esses são alguns deles.</p>
        </div>
        <div className="testimonials__grid">
          {items.map((t, i) => (
            <div className="testi" key={i}>
              <p className="testi__quote">{t.quote}</p>
              <div className="testi__meta">
                <div className="testi__avatar">{t.name[0]}</div>
                <div>
                  <div className="testi__name">{t.name}</div>
                  <div className="testi__sub">{t.city} · {t.km}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Schedule({ items }) {
  return (
    <section className="section" id="cronograma" style={{paddingTop: 80}}>
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__index">05 / Cronograma</div>
            <h2 className="section__title">Maio em<br/>quatro datas.</h2>
          </div>
          <p className="section__lede">Você tem o mês inteiro pra correr. A gente cuida do resto: comprovação simples, envio rápido, medalha na sua mão antes do fim de junho.</p>
        </div>
        <div className="schedule">
          {items.map((s, i) => (
            <div className="sched" key={i}>
              <div className="sched__pin">0{i+1}</div>
              <div className="sched__date">{s.date}</div>
              <div className="sched__label">{s.label}</div>
              <div className="sched__body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Rules({ items }) {
  return (
    <section className="section" id="regulamento" style={{paddingTop: 40}}>
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__index">06 / Regulamento</div>
            <h2 className="section__title">Regras simples.<br/>Sem pegadinha.</h2>
          </div>
          <p className="section__lede">A ideia é fazer você correr, não te enrolar com burocracia. Mesmo assim, dá uma lida.</p>
        </div>
        <div className="rules">
          {items.map((r, i) => (
            <div className="rule" key={i}>
              <div className="rule__n">0{i+1}</div>
              <div>{r}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand({ onCta }) {
  return (
    <section className="ctaband">
      <div className="container">
        <h2 className="ctaband__title">Sua medalha<br/>tá esperando.</h2>
        <p className="ctaband__sub">Inscrição via Pix, confirmação na hora. Tem até dia 31 pra correr.</p>
        <button className="btn btn--primary btn--lg" onClick={onCta}>
          Quero entrar no desafio <span className="arrow">→</span>
        </button>
      </div>
    </section>
  );
}

function Footer({ brand }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__col">
            <div className="brandmark" style={{marginBottom: 14}}>
              <div className="brandmark__glyph">CL</div>
              <span>{brand}</span>
            </div>
            <p style={{fontSize: 13, opacity: 0.7, maxWidth: 280}}>
              Desafios mensais de corrida e ciclismo com medalha colecionável.
              Uma etapa nova, todo mês, em algum lugar do mundo.
            </p>
          </div>
          <div className="footer__col">
            <h5>Etapas</h5>
            <ul>
              <li>Maio · Tóquio</li>
              <li>Abril · Marrakech</li>
              <li>Março · Lisboa</li>
              <li>Ver arquivo</li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Suporte</h5>
            <ul>
              <li>FAQ</li>
              <li>WhatsApp</li>
              <li>Trocar tamanho</li>
              <li>Status do pedido</li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Social</h5>
            <ul>
              <li>@challengelamonie</li>
              <li>Strava Club</li>
              <li>YouTube</li>
            </ul>
          </div>
        </div>
        <div className="footer__legal">
          <span>© 2026 {brand} · CNPJ 00.000.000/0001-00</span>
          <span>Pagamentos via Pix · OpenPix</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  TopBar, Hero, HowItWorks, Distances, MedalShowcase,
  Testimonials, Schedule, Rules, CtaBand, Footer, fmtPrice
});