// How it works — 3 variants
const HOW_STEPS = [
{
  n: "01",
  title: "Conversamos",
  body: "Por WhatsApp ou videochamada. Você descreve seu serviço, seus horários, suas formas de pagamento.",
  detail: "Por WhatsApp ou videochamada. Você descreve seu serviço, seus horários, suas formas de trabaho. A gente traz sua empresa para o digital.",
  icon: "chat"
},
{
  n: "02",
  title: "Site no ar em 48 horas (em média)",
  body: "Montamos seu site, identidade visual ajustada e tudo testado no celular.",
  detail: "Hospedagem, SSL, design responsivo, chatbot,Google Maps, botão do WhatsApp. ",
  icon: "spark"
},
{
  n: "03",
  title: "Você atende, a gente cuida",
  body: "Suporte humano, atualizações e ajustes contínuos. Sua agenda enche; sua vida não complica.",
  detail: "Mudanças no catálogo, novos serviços, ajustes sazonais, tudo é possível. Você manda mensagem, a gente resolve.",
  icon: "shield"
}];


const StepIcon = ({ kind }) => {
  const common = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "chat") return (
    <svg {...common}><path d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7l-5 4v-4H6a2 2 0 0 1-2-2V5Z" /><circle cx="9" cy="9" r=".5" fill="currentColor" /><circle cx="12" cy="9" r=".5" fill="currentColor" /><circle cx="15" cy="9" r=".5" fill="currentColor" /></svg>);

  if (kind === "spark") return (
    <svg {...common}><path d="M12 2v6M12 16v6M2 12h6M16 12h6" /><path d="M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4" /></svg>);

  return (
    <svg {...common}><path d="M12 3 4 6v6c0 4.5 3.4 8.4 8 9 4.6-.6 8-4.5 8-9V6l-8-3Z" /><path d="m9 12 2 2 4-4" /></svg>);

};

// ─── How A: horizontal stepped cards ─────────────────
const HowA = () =>
<section className="section how howA" id="como-funciona">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">
</div>
          <h2>Como funciona o <span className="italic">nosso</span> trabalho.</h2>
        </div>
        <p className="lede">Três passos para o seu sucesso. 


      </p>
      </div>

      <div className="howA-grid">
        {HOW_STEPS.map((s, i) => <article key={i} className="howA-card">
            <div className="howA-card-head">
              <span className="mono howA-num">{s.n}</span>
              <span className="howA-icon"><StepIcon kind={s.icon} /></span>
            </div>
            <h3>{s.title}</h3>
            <p>{s.detail}</p>
            <div className="howA-line">
              <div className="howA-line-dot" /><div className="howA-line-rule" />
            </div>
          </article>
      )}
      </div>
    </div>
  </section>;


// ─── How B: vertical timeline with mini-mockups ──────
const HowB = () =>
<section className="section how howB" id="como-funciona">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">como funciona</div>
          <h2>Três passos.<br /><span className="italic">Zero dor de cabeça.</span></h2>
        </div>
        <p className="lede">
          A gente desenha um processo lento o suficiente para acertar,
          rápido o suficiente para você não esperar.
        </p>
      </div>

      <div className="howB-stack">
        {HOW_STEPS.map((s, i) =>
      <article key={i} className="howB-row">
            <div className="howB-rail">
              <span className="howB-rail-num mono">{s.n}</span>
              <span className="howB-rail-bar" />
            </div>
            <div className="howB-body">
              <div className="howB-meta">
                <span className="mono">PASSO {s.n}</span>
                <span className="howB-dot">·</span>
                <span className="mono">{i === 0 ? "20 min" : i === 1 ? "48 h" : "contínuo"}</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.detail}</p>
            </div>
            <div className="howB-visual">
              <HowMockMini step={i} />
            </div>
          </article>
      )}
      </div>
    </div>
  </section>;


const HowMockMini = ({ step }) => {
  if (step === 0) return (
    <div className="howmm howmm-chat">
      <div className="hmm-bub them">Tenho um salão e quero parar de marcar tudo no WhatsApp 🥲</div>
      <div className="hmm-bub us">Perfeito. Posso te ligar amanhã às 14h?</div>
      <div className="hmm-typing"><span /><span /><span /></div>
    </div>);

  if (step === 1) return (
    <div className="howmm howmm-build">
      <div className="hmm-build-bar"><span /><span /><span /></div>
      <div className="hmm-build-body">
        <div className="hmm-build-title">studiolia.com.br</div>
        <div className="hmm-build-prog"><div className="hmm-build-prog-fill" /></div>
        <div className="hmm-build-row"><span>Identidade</span><span className="mono done">✓</span></div>
        <div className="hmm-build-row"><span>Agenda</span><span className="mono done">✓</span></div>
        <div className="hmm-build-row"><span>Pagamento</span><span className="mono">…</span></div>
      </div>
    </div>);

  return (
    <div className="howmm howmm-live">
      <div className="hmm-live-card">
        <div className="mono hmm-live-eye">SUPORTE</div>
        <div className="hmm-live-msg">"Pode trocar a foto da home pela nova?"</div>
        <div className="hmm-live-foot"><span className="mono">respondido em 4min</span></div>
      </div>
      <div className="hmm-live-card hmm-live-card-2">
        <div className="mono hmm-live-eye">RESERVAS DA SEMANA</div>
        <div className="hmm-live-big mono">+ 23</div>
      </div>
    </div>);

};

// ─── How C: numbered editorial spreads ───────────────
const HowC = () =>
<section className="section how howC" id="como-funciona">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">como funciona</div>
          <h2>Um processo<br /><span className="italic">editorial.</span></h2>
        </div>
        <p className="lede">
          Sem fluxograma, sem reunião que poderia ser e-mail.
          Cada passo é uma página do seu negócio sendo escrita.
        </p>
      </div>

      <div className="howC-spread">
        {HOW_STEPS.map((s, i) =>
      <article key={i} className={"howC-page " + (i % 2 ? "alt" : "")}>
            <div className="howC-folio mono">— {s.n} —</div>
            <div className="howC-num">{s.n}</div>
            <h3 className="howC-title">{s.title}</h3>
            <p className="howC-body">{s.detail}</p>
            <div className="howC-foot">
              <span className="mono">duração</span>
              <span className="howC-foot-val">{i === 0 ? "20 minutos" : i === 1 ? "48 horas" : "vida útil do site"}</span>
            </div>
          </article>
      )}
      </div>
    </div>
  </section>;


window.HowA = HowA;
window.HowB = HowB;
window.HowC = HowC;