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

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

// Título do hero é editável no admin. Palavras entre *asteriscos* viram <em>
// (o destaque vermelho da marca). Ex.: "Aceite o *desafio*. Corra."
const DEFAULT_HERO_TITLE = "Aceite o *desafio*. Corra. Conquiste sua *medalha*.";
function renderEmphasis(text) {
  return String(text || "").split("*").map((seg, i) => i % 2 ? <em key={i}>{seg}</em> : seg);
}

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">
      {content.showHeroSun !== false && <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">
            {renderEmphasis(content.heroTitle || DEFAULT_HERO_TITLE)}
          </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>
          <img className="hero__medal-img" src={medalSrc} alt={`Medalha ${content.edition || ""}`.trim()} />
          <div className="hero__medal-meta">
            EDIÇÃO Nº {content.editionNo || "12"}<br/>
            CHALLENGE LAMONIÊ
          </div>
        </div>
      </div>
    </section>
  );
}

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>
  );
}

// Galeria de artes das edições anteriores — alimentada pela aba "Galeria" do
// admin (tabela gallery_images). Busca sozinha e some quando não há imagens,
// então não quebra em modo demo nem em etapa recém-criada.
function GalleryWall() {
  const [images, setImages] = useState([]);
  useEffect(() => {
    if (!window.SB?.ready) return;
    window.SB.listGalleryImages()
      .then(setImages)
      .catch((err) => console.warn("[galeria] fetch falhou:", err));
  }, []);
  if (!images.length) return null;
  return (
    <section className="section gallery" id="galeria">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="section__index">07 / Galeria</div>
            <h2 className="section__title">Desafios que<br/>já rolaram.</h2>
          </div>
          <p className="section__lede">As artes e medalhas das etapas anteriores. Toda edição vira item de colecionador.</p>
        </div>
        <div className="gallery__grid">
          {images.map(img => (
            <figure className="gallery__item" key={img.id}>
              <img src={img.url} alt={img.title || "Arte de desafio anterior"} loading="lazy"/>
              {(img.title || img.edition_slug) && (
                <figcaption>
                  {img.title && <span>{img.title}</span>}
                  {img.edition_slug && <small>{img.edition_slug}</small>}
                </figcaption>
              )}
            </figure>
          ))}
        </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>
  );
}

// Destinos dos links do rodapé — tudo num lugar só pra facilitar ajuste.
// WHATSAPP: número em formato internacional, só dígitos (ex.: "5511987654321").
// Campos vazios ("") viram texto simples, sem link.
const FOOTER_CONTACT = {
  whatsapp:  "",
  instagram: "https://www.instagram.com/challengelamonie",
  strava:    "",
  youtube:   "",
};
const waHref = (msg) => FOOTER_CONTACT.whatsapp
  ? `https://wa.me/${FOOTER_CONTACT.whatsapp}?text=${encodeURIComponent(msg)}`
  : "";

// <li> que vira link quando tem destino; externo abre em nova aba.
function FootItem({ href, children }) {
  if (!href) return <li>{children}</li>;
  const external = /^https?:/.test(href);
  return (
    <li>
      <a href={href} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>
        {children}
      </a>
    </li>
  );
}

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>
              <FootItem href="#distancias">Distâncias</FootItem>
              <FootItem href="#medalha">Medalha da etapa</FootItem>
              <FootItem href="#cronograma">Cronograma</FootItem>
              <FootItem href="#galeria">Desafios anteriores</FootItem>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Suporte</h5>
            <ul>
              <FootItem href="#regulamento">FAQ · Regulamento</FootItem>
              <FootItem href={waHref("Olá! Vim pelo site do Challenge Lamoniê.")}>WhatsApp</FootItem>
              <FootItem href={waHref("Olá! Preciso trocar o tamanho do meu kit.")}>Trocar tamanho</FootItem>
              <FootItem href={waHref("Olá! Quero saber o status do meu pedido.")}>Status do pedido</FootItem>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Social</h5>
            <ul>
              <FootItem href={FOOTER_CONTACT.instagram}>@challengelamonie</FootItem>
              <FootItem href={FOOTER_CONTACT.strava}>Strava Club</FootItem>
              <FootItem href={FOOTER_CONTACT.youtube}>YouTube</FootItem>
            </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, GalleryWall, CtaBand, Footer, fmtPrice
});