// Hero — 3 variants. Default A: live calendar.

const HeroEyebrow = () =>
<div className="hero-eyebrow">
    <span className="eyebrow">
</span>
    <span className="hero-since mono">desde 2021 · feito no Brasil</span>
  </div>;

const HeroTitle = ({ variant = "A" }) => {
  if (variant === "C") {
    return (
      <h1 className="hero-h1 hero-h1-editorial">
        Um site<br />
        <span className="italic">profissional.</span><br />
        Sem o trabalho<br />
        de ter um.
      </h1>);

  }
  return (
    <h1 className="hero-h1" style={{ fontFamily: "-apple-system" }}>
      Um site profissional<br />
      <span className="italic">que FALA</span> por você.
    </h1>);

};

const HeroSub = () =>
<p className="hero-sub lede">Seu site completo e profissional. Prestadores de serviços, eletricistas, salões, terapeutas, academias, veterinárias. Você atende; a gente cuida da sua imagem online.



</p>;


const HeroCTAs = () =>
<div className="hero-ctas">
    <a className="btn btn-primary" href="#contato">
      Começar agora
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
        <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </a>
    <a className="btn btn-ghost" href="#contato">Falar no WhatsApp</a>
  </div>;


const HeroMeta = () =>
<div className="hero-meta">
    <div className="hero-meta-item">
      <div className="num h-stat">48h</div>
      <div className="lab">no ar, em média</div>
    </div>
    <div className="hero-meta-divider" />
    <div className="hero-meta-item">
      <div className="num h-stat">R$49,99<span>/mês</span></div>
      <div className="lab">tudo incluso, sem letra miúda</div>
    </div>
    <div className="hero-meta-divider" />
    <div className="hero-meta-item">
      <div className="num h-stat">+180</div>
      <div className="lab">negócios atendendo melhor</div>
    </div>
  </div>;


// ─── Variant A: Live calendar ───────────────────────────────────
const HeroA = () =>
<section className="hero hero-a">
    <div className="shell hero-shell">
      <div className="hero-copy">
        <HeroEyebrow />
        <HeroTitle variant="A" />
        <HeroSub />
        <HeroCTAs />
        <HeroMeta />
      </div>
      <div className="hero-visual">
        <SBCalendar />
      </div>
    </div>
    <div className="hero-marquee" aria-hidden="true">
      <div className="marquee-track">
        {Array.from({ length: 2 }).map((_, i) =>
      <div key={i} className="marquee-group">
            <span>WordPress + WooCommerce</span><span>·</span>
            <span>Agenda integrada</span><span>·</span>
            <span>Hospedagem inclusa</span><span>·</span>
            <span>SEO</span><span>·</span>
            <span>WhatsApp em 1 clique</span><span>·</span>
            <span>Suporte humano</span><span>·</span>
          </div>
      )}
      </div>
    </div>
  </section>;


// ─── Variant B: Multi-device storefront collage ────────────────
const HeroB = () =>
<section className="hero hero-b">
    <div className="shell hero-shell">
      <div className="hero-copy">
        <HeroEyebrow />
        <HeroTitle variant="B" />
        <HeroSub />
        <HeroCTAs />
        <HeroMeta />
      </div>
      <div className="hero-visual hero-collage">
        {/* Laptop */}
        <div className="dev-laptop">
          <div className="dev-laptop-screen">
            <div className="mock-bar">
              <span /><span /><span />
              <div className="mock-url">estudiopousa.com.br</div>
            </div>
            <div className="laptop-art">
              <div className="la-hero">
                <div className="la-eyebrow mono">ESTÚDIO POUSA · RIO DE JANEIRO</div>
                <div className="la-title">Potencializamos marcas<br />para você.</div>
                <div className="la-cta">Agendar horário →</div>
              </div>
              <div className="la-img" />
            </div>
          </div>
          <div className="dev-laptop-base" />
        </div>
        {/* Phone */}
        <div className="dev-phone">
          <div className="dev-phone-notch" />
          <div className="phone-screen">
            <div className="phs-top">
              <div className="phs-time mono">14:32</div>
              <div className="phs-icons">
                <span /><span /><span />
              </div>
            </div>
            <div className="phs-body">
              <div className="phs-eyebrow mono">RESERVAR</div>
              <div className="phs-title">Serviços<br />Russa</div>
              <div className="phs-slots">
                <div className="phs-slot taken">9:00</div>
                <div className="phs-slot taken">10:30</div>
                <div className="phs-slot sel">12:00</div>
                <div className="phs-slot">13:30</div>
                <div className="phs-slot">15:00</div>
                <div className="phs-slot">16:30</div>
              </div>
              <div className="phs-pay">
                <span>Total</span>
                <strong>R$ 85,00</strong>
              </div>
              <div className="phs-btn">Confirmar e pagar</div>
            </div>
          </div>
        </div>
        {/* Receipt-style ticket */}
        <div className="dev-ticket">
          <div className="dev-ticket-top">
            <div className="mono ticket-kicker">NOVA RESERVA</div>
            <div className="ticket-num mono">#01428</div>
          </div>
          <div className="ticket-name">Camila Andrade</div>
          <div className="ticket-line"><span>Serviço</span><strong>Corte e hidratação</strong></div>
          <div className="ticket-line"><span>Quando</span><strong>Qui, 14 nov · 15:00</strong></div>
          <div className="ticket-line"><span>Valor</span><strong>R$ 85,00 · pago</strong></div>
          <div className="ticket-perf" />
        </div>
      </div>
    </div>
  </section>;


// ─── Variant C: Editorial type-as-hero ─────────────────────────
const HeroC = () =>
<section className="hero hero-c">
    <div className="shell hero-shell hero-shell-c">
      <div className="hero-top-row">
        <HeroEyebrow />
        <div className="hero-c-tag tag">
          <span className="dot green" />
          atendendo +180 negócios
        </div>
      </div>
      <HeroTitle variant="C" />
      <div className="hero-c-bottom">
        <div className="hero-c-bottom-left">
          <HeroSub />
          <HeroCTAs />
        </div>
        <div className="hero-c-mini">
          <div className="cmini-head">
            <div className="cmini-dot" />
            <span className="mono">studiolia.com.br · agendamento</span>
          </div>
          <div className="cmini-week">
            {["SEG", "TER", "QUA", "QUI", "SEX", "SÁB"].map((d, i) =>
          <div key={i} className={"cmini-day " + (i === 3 ? "on" : "")}>
                <div className="mono">{d}</div>
                <div className="cmini-num">{11 + i}</div>
                <div className="cmini-bars">
                  {Array.from({ length: 4 }).map((_, j) =>
              <div key={j} className={"cmini-bar " + (Math.random() > 0.45 ? "f" : "")} />
              )}
                </div>
              </div>
          )}
          </div>
          <div className="cmini-foot">
            <span className="mono">11 agendamentos</span>
            <span className="mono">+R$ 1.840 · sem</span>
          </div>
        </div>
      </div>
      <HeroMeta />
    </div>
  </section>;


window.HeroA = HeroA;
window.HeroB = HeroB;
window.HeroC = HeroC;