/* Shared UI primitives for the R3 Club landing page */
const { useState, useEffect, useRef } = React;

/* ---------- Scarcity bar (sticky top) ---------- */
function ScarcityBar({ seatsLeft = 7, showCounter = true }) {
  return (
    <div className="r3-scarcity">
      <div className="r3-scarcity-inner">
        <span className="r3-scarcity-dot" aria-hidden="true"></span>
        <span>Lote 1 aberto</span>
        {showCounter && (<React.Fragment>
          <span className="r3-scarcity-sep">·</span>
          <span><strong>{seatsLeft}</strong> vagas restantes</span>
        </React.Fragment>)}
        <span className="r3-scarcity-sep">·</span>
        <span>R$ 30.000</span>
        {/* <a href="#form" className="r3-scarcity-cta">Solicitar informações →</a> */}
      </div>
    </div>
  );
}

/* ---------- Top nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"r3-nav " + (scrolled ? "is-scrolled" : "")}>
      <div className="r3-nav-inner">
        <a href="#top" className="r3-logo" aria-label="R3 Club">
          <img src="assets/images/logo.svg" alt="R3 Club" className="r3-logo-img" />
        </a>
        <nav className="r3-nav-links" aria-label="Seções">
          <a href="#manifesto">Apresentação</a>
          <a href="#calendario">Programa</a>
          <a href="#arquitetos">Fundadores</a>
          <a href="#lote1">Lote 1</a>
          <a href="#form">Solicitar</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="#form" className="r3-nav-cta">
          Solicitar informações <span aria-hidden="true">→</span>
        </a>
      </div>
    </header>
  );
}

/* ---------- Section eyebrow / number ---------- */
function SectionHeader({ number, eyebrow, children, align = "left" }) {
  return (
    <div className={"r3-section-header r3-align-" + align} data-reveal="">
      <div className="r3-section-meta">
        {number && <span className="r3-section-number">{number}</span>}
        {eyebrow && <span className="r3-section-eyebrow">{eyebrow}</span>}
      </div>
      <h2 className="r3-section-title">{children}</h2>
    </div>
  );
}

/* ---------- Image placeholder ---------- */
function ImageSlot({ label, ratio = "4 / 5", className = "" }) {
  return (
    <div
      className={"r3-img-slot " + className}
      style={{ aspectRatio: ratio }}
      role="img"
      aria-label={label}
    >
      <div className="r3-img-slot-stripes" aria-hidden="true"></div>
      <span className="r3-img-slot-label">{label}</span>
    </div>
  );
}

/* ---------- FAQ accordion ---------- */
function FaqItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={"r3-faq-item " + (open ? "is-open" : "")}>
      <button
        type="button"
        className="r3-faq-q"
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <span>{q}</span>
        <span className="r3-faq-toggle" aria-hidden="true">{open ? "–" : "+"}</span>
      </button>
      <div className="r3-faq-a-wrap" hidden={!open}>
        <div className="r3-faq-a">{a}</div>
      </div>
    </div>
  );
}

/* ---------- Floating WhatsApp ---------- */
function FloatingWhats() {
  return (
    <a
      href="https://wa.me/5519996904283?text=Quero%20tirar%20uma%20d%C3%BAvida%20sobre%20o%20R3%20Club"
      className="r3-whats"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Falar com o R3 Club"
    >
      <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
        <path d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.01zM12.05 20.15h-.01a8.23 8.23 0 0 1-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.21 8.21 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.41a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.8-.23-.08-.39-.12-.56.12-.16.25-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.49-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.57.12.16 1.74 2.66 4.22 3.73.59.25 1.05.41 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.08.14-1.18-.07-.1-.23-.16-.48-.28z"/>
      </svg>
      <span className="r3-whats-label">Falar com o R3 Club</span>
    </a>
  );
}

Object.assign(window, {
  ScarcityBar, Nav, SectionHeader, ImageSlot, FaqItem, FloatingWhats,
});