/* global React, Reveal, Eyebrow, StepBadge, SlashMotif */

/* ============================================================
   FEEDBACK SEMANAL — RH 24/7
   ============================================================ */
function FeedbackCardMockup() {
  const colaboradores = [
    { nome: "Rafael M.", cad: "Cadeira 01", nota: 92, trend: "up", delta: "+14%", perdidas: 3 },
    { nome: "Diego S.", cad: "Cadeira 02", nota: 61, trend: "down", delta: "−9%", perdidas: 17 },
    { nome: "Lucas P.", cad: "Cadeira 03", nota: 78, trend: "up", delta: "+4%", perdidas: 8 },
  ];
  const [sel, setSel] = React.useState(1);
  const c = colaboradores[sel];
  const linhas = [
    ["✓", "melhorou", "Ticket médio subiu de R$ 62 para R$ 71 — passou a oferecer barba em 4 de cada 10 cortes."],
    ["!", "piorou", "Tempo médio de atendimento subiu 9 min vs. a semana passada. Isso custou 6 encaixes."],
    ["→", "próximo passo", "Oferecer produto no fechamento da comanda. Meta: 3 vendas/dia = +R$ 780 no mês."],
  ];
  return (
    <div className="fb-tech">
      <div className="fb-tech__chrome">
        <span className="fb-tech__live"><span className="fb-dot" />RH AUTÔNOMO · 24/7</span>
        <span>SEMANA 34 · SEG A SÁB</span>
      </div>

      <div className="fb-tech__tabs">
        {colaboradores.map((x, i) => (
          <button key={x.nome} className={"fb-tab " + (i === sel ? "is-on" : "")} onClick={() => setSel(i)}>
            <span className="fb-tab__n">{x.nome}</span>
            <span className="fb-tab__c">{x.cad}</span>
          </button>
        ))}
      </div>

      <div className="fb-tech__body">
        <div className="fb-hero">
          <div className="fb-score">
            <span className="fb-score__v">{c.nota}</span>
            <span className="fb-score__u">/100</span>
            <span className="fb-score__l">índice de performance</span>
          </div>
          <div className={"fb-trend fb-trend--" + c.trend}>
            <span className="fb-trend__arrow">{c.trend === "up" ? "↗" : "↘"}</span>
            <span>
              <strong>{c.delta}</strong>
              <em>vs. semana anterior</em>
            </span>
          </div>
          <div className="fb-lost">
            <span className="fb-lost__v">{c.perdidas}</span>
            <span className="fb-lost__l">oportunidades<br />perdidas</span>
          </div>
        </div>

        <div className="fb-log">
          {linhas.map(([ic, k, t]) => (
            <div className="fb-row" key={k}>
              <span className={"fb-row__ic fb-row__ic--" + k.split(" ")[0]}>{ic}</span>
              <span className="fb-row__txt">
                <span className="fb-row__k">{k}</span>
                <span className="fb-row__t">{t}</span>
              </span>
            </div>
          ))}
        </div>
      </div>

      <div className="fb-tech__foot">
        <span className="fb-tech__foot-l"><span className="fb-dot" />Enviado no WhatsApp · toda segunda, 08:00</span>
        <span className="fb-tech__cta">Sem reunião →</span>
      </div>

      <span className="fb-b fb-b--tl" aria-hidden="true" />
      <span className="fb-b fb-b--tr" aria-hidden="true" />
      <span className="fb-b fb-b--bl" aria-hidden="true" />
      <span className="fb-b fb-b--br" aria-hidden="true" />

      <style>{`
        .fb-tech { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-md);
          background: linear-gradient(180deg, #0a1320, #060a13);
          box-shadow: var(--shadow-lg), 0 0 90px -34px rgba(var(--accent-rgb), 0.5); overflow: hidden; }
        .fb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); display: inline-block; flex: 0 0 auto; }
        .fb-tech__chrome { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .fb-tech__live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        .fb-tech__tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .fb-tab { flex: 1; appearance: none; background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,0.06);
          padding: 12px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; text-align: left;
          transition: background 220ms ease; }
        .fb-tab:last-child { border-right: 0; }
        .fb-tab:hover { background: rgba(255,255,255,0.03); }
        .fb-tab.is-on { background: rgba(var(--accent-rgb),0.10); box-shadow: inset 0 -2px 0 var(--accent); }
        .fb-tab__n { font-family: var(--ff-body); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.86); }
        .fb-tab.is-on .fb-tab__n { color: var(--accent); }
        .fb-tab__c { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
        .fb-tech__body { padding: 26px 22px 16px; }
        .fb-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
          padding-bottom: 20px; border-bottom: 1px dashed rgba(255,255,255,0.1); }
        .fb-score { display: flex; flex-direction: column; line-height: 1; }
        .fb-score__v { font-family: var(--ff-display); font-weight: 700; font-size: 54px; color: var(--accent);
          letter-spacing: -0.04em; text-shadow: 0 0 32px rgba(var(--accent-rgb),0.45); }
        .fb-score__u { font-family: var(--ff-mono); font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.16em; margin-top: -2px; }
        .fb-score__l { font-family: var(--ff-mono); font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 9px; }
        .fb-trend { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px;
          border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
        .fb-trend__arrow { font-family: var(--ff-mono); font-size: 20px; }
        .fb-trend strong { display: block; font-family: var(--ff-condensed); font-size: 22px; letter-spacing: 0.01em; line-height: 1; }
        .fb-trend em { display: block; font-style: normal; font-family: var(--ff-mono); font-size: 9px;
          letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 4px; }
        .fb-trend--up { color: var(--accent); border-color: rgba(var(--accent-rgb),0.45); }
        .fb-trend--down { color: #ff8a6a; border-color: rgba(255,138,106,0.4); }
        .fb-lost { text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
        .fb-lost__v { font-family: var(--ff-condensed); font-size: 34px; color: #ffce6a; }
        .fb-lost__l { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 6px; }
        .fb-log { padding-top: 6px; }
        .fb-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start; padding: 12px 0;
          border-bottom: 1px solid rgba(255,255,255,0.05); }
        .fb-row:last-child { border-bottom: 0; }
        .fb-row__ic { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto;
          font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
          background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
        .fb-row__ic--piorou { background: rgba(255,138,106,0.16); color: #ff8a6a; }
        .fb-row__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .fb-row__k { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
        .fb-row__t { font-family: var(--ff-body); font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.84); text-wrap: pretty; }
        .fb-tech__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
          border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .fb-tech__foot-l { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        .fb-tech__cta { color: #fff; border: 1px solid var(--accent); padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 14px -3px rgba(var(--accent-rgb),0.6); white-space: nowrap; }
        .fb-b { position: absolute; width: 18px; height: 18px; border: 1px solid var(--accent); opacity: 0.6; pointer-events: none; }
        .fb-b--tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
        .fb-b--tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
        .fb-b--bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
        .fb-b--br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
        @media (max-width: 620px) {
          .fb-hero { grid-template-columns: 1fr; gap: 14px; }
          .fb-lost { align-items: flex-start; text-align: left; }
          .fb-trend { align-self: flex-start; }
          .fb-tech__foot { flex-wrap: wrap; }
          .fb-tech__chrome { font-size: 9px; letter-spacing: 0.1em; }
        }
      `}</style>
    </div>
  );
}

function FeedbackRH() {
  return (
    <section className="gen-section" id="feedback-rh" data-screen-label="07 Feedback Semanal RH">
      <div className="gen-container">
        <div className="gen-grid gen-grid--12" style={{ alignItems: "center", marginBottom: 72 }}>
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="05 · 06">RH Autônomo · Feedback Semanal</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2" style={{ marginTop: 0, marginBottom: 24 }}>
                Um gestor de RH <span style={{ color: "var(--accent)" }}>24 horas por dia</span>, 7 dias por semana.
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead" style={{ marginBottom: 20 }}>
                Toda semana o GÊNESIS entrega a cada colaborador um feedback individual: o que ele fez,
                o que <strong style={{ color: "var(--fg)" }}>melhorou</strong> e o que <strong style={{ color: "var(--fg)" }}>piorou</strong> em
                relação à semana e ao mês anterior — com o número exato de oportunidades que ele deixou passar.
              </p>
            </Reveal>
            <Reveal stagger={3}>
              <p className="gen-lead" style={{ marginBottom: 0 }}>
                Você não precisa mais parar a operação para fazer reunião todo dia ou toda semana
                para falar de desempenho. <strong style={{ color: "var(--accent)" }}>O GÊNESIS faz por você.</strong>
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal stagger={2}>
              <FeedbackCardMockup />
            </Reveal>
          </div>
        </div>

        <div className="gen-grid gen-grid--3 gen-cc-cards">
          {[
            { k: "01", t: "O que ele fez", d: "Atendimentos, ticket médio, serviços vendidos, retenção de clientes e tempo por cadeira — número por número, sem achismo." },
            { k: "02", t: "Melhorou ou piorou", d: "Comparação automática com a semana e o mês anterior. Cada indicador com a variação real e o impacto em reais." },
            { k: "03", t: "O que fazer agora", d: "As oportunidades perdidas viram um plano curto e específico: o que mudar, quanto isso vale e até quando." },
          ].map((b, i) => (
            <Reveal key={b.k} stagger={i + 1} as="div" className="gen-cc-card">
              <span className="gen-cc-card__bar" aria-hidden="true" />
              <div className="gen-cc-num">— {b.k}</div>
              <h3 className="gen-h3 gen-cc-card__t" style={{ marginBottom: 12 }}>{b.t}</h3>
              <p className="gen-cc-card__d">{b.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   METAS DIÁRIAS — COBRANÇA AUTOMÁTICA
   ============================================================ */
function MetasMockup() {
  const equipe = [
    { n: "Rafael M.", feito: 640, meta: 800, dicas: "Faltam 2 cortes + 1 barba. Confirme os 2 encaixes das 18h." },
    { n: "Diego S.", feito: 310, meta: 700, dicas: "Ofereça combo corte+barba nos próximos 3 clientes: fecha R$ 210." },
    { n: "Lucas P.", feito: 720, meta: 750, dicas: "Falta R$ 30. Uma pomada no fechamento resolve o dia." },
  ];
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((x) => (x + 1) % equipe.length), 3200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="mt-tech">
      <div className="mt-tech__chrome">
        <span className="mt-tech__live"><span className="fb-dot" />COBRANÇA DIÁRIA · 100% AUTOMÁTICA</span>
        <span>HOJE · 16:40</span>
      </div>

      <div className="mt-tech__body">
        {equipe.map((p, i) => {
          const pct = Math.min(100, Math.round((p.feito / p.meta) * 100));
          const falta = p.meta - p.feito;
          return (
            <div className={"mt-card " + (i === tick ? "is-on" : "")} key={p.n}>
              <div className="mt-card__top">
                <span className="mt-card__n">{p.n}</span>
                <span className="mt-card__v">
                  R$ {p.feito.toLocaleString("pt-BR")}
                  <em> / {p.meta.toLocaleString("pt-BR")}</em>
                </span>
              </div>
              <div className="mt-track">
                <span className="mt-fill" style={{ width: pct + "%" }} />
                <span className="mt-goal" />
              </div>
              <div className="mt-card__meta">
                <span className={"mt-pct " + (pct >= 90 ? "is-ok" : pct >= 60 ? "is-mid" : "is-low")}>{pct}% da meta</span>
                <span className="mt-falta">faltam R$ {falta.toLocaleString("pt-BR")}</span>
              </div>
              <div className="mt-tip">
                <span className="mt-tip__ic">▲</span>
                <span className="mt-tip__t">{p.dicas}</span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="mt-tech__foot">
        <span className="mt-tech__foot-l"><span className="fb-dot" />Nada acumula para amanhã</span>
        <span className="fb-tech__cta">Cobrar agora →</span>
      </div>

      <span className="fb-b fb-b--tl" aria-hidden="true" />
      <span className="fb-b fb-b--tr" aria-hidden="true" />
      <span className="fb-b fb-b--bl" aria-hidden="true" />
      <span className="fb-b fb-b--br" aria-hidden="true" />

      <style>{`
        .mt-tech { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-md);
          background: linear-gradient(180deg, #0a1320, #060a13);
          box-shadow: var(--shadow-lg), 0 0 90px -34px rgba(var(--accent-rgb), 0.5); overflow: hidden; }
        .mt-tech__chrome { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .mt-tech__live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        .mt-tech__body { padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 14px; }
        .mt-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 15px 16px;
          background: rgba(255,255,255,0.02); transition: border-color 320ms ease, background 320ms ease, box-shadow 320ms ease; }
        .mt-card.is-on { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.06);
          box-shadow: 0 0 30px -16px rgba(var(--accent-rgb),0.8); }
        .mt-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 11px; }
        .mt-card__n { font-family: var(--ff-body); font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
        .mt-card__v { font-family: var(--ff-condensed); font-size: 20px; color: var(--accent); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
        .mt-card__v em { font-style: normal; font-family: var(--ff-mono); font-size: 11px; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; }
        .mt-track { position: relative; height: 9px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
        .mt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
          background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.62));
          box-shadow: 0 0 12px rgba(var(--accent-rgb),0.5); transition: width 900ms cubic-bezier(0.22,0.61,0.36,1); }
        .mt-goal { position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,0.35); }
        .mt-card__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px;
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
        .mt-pct.is-ok { color: var(--accent); }
        .mt-pct.is-mid { color: #ffce6a; }
        .mt-pct.is-low { color: #ff8a6a; }
        .mt-falta { color: rgba(255,255,255,0.4); }
        .mt-tip { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: flex-start; margin-top: 12px;
          padding-top: 11px; border-top: 1px dashed rgba(255,255,255,0.1); }
        .mt-tip__ic { font-family: var(--ff-mono); font-size: 9px; color: var(--accent); padding-top: 3px; }
        .mt-tip__t { font-family: var(--ff-body); font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.7); text-wrap: pretty; }
        .mt-tech__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
          border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .mt-tech__foot-l { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        @media (max-width: 620px) {
          .mt-tech__chrome { font-size: 9px; letter-spacing: 0.1em; }
          .mt-tech__foot { flex-wrap: wrap; }
          .mt-card__top { flex-direction: column; gap: 4px; }
        }
      `}</style>
    </div>
  );
}

function MetasDiarias() {
  return (
    <section className="gen-section" id="metas" data-screen-label="08 Metas Diárias">
      <SlashMotif opacity={0.04} />
      <div className="gen-container" style={{ position: "relative" }}>
        <div className="gen-grid gen-grid--12" style={{ alignItems: "center", marginBottom: 72 }}>
          <div style={{ gridColumn: "span 6", order: 2 }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="06 · 06">Metas · Cobrança Diária</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2" style={{ marginTop: 0, marginBottom: 24 }}>
                Meta cobrada <span style={{ color: "var(--accent)" }}>todos os dias</span>. Nada acumula para o fim do mês.
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead" style={{ marginBottom: 20 }}>
                Todo dia o GÊNESIS chama cada colaborador e mostra exatamente
                o que falta para bater a meta daquele dia — quanto em reais, quantos serviços,
                quantos clientes. Sem esperar o fechamento do mês para descobrir que a meta não veio.
              </p>
            </Reveal>
            <Reveal stagger={3}>
              <p className="gen-lead" style={{ marginBottom: 0 }}>
                E não para na cobrança: junto vai a <strong style={{ color: "var(--fg)" }}>dica prática</strong> do
                que ele precisa fazer nas próximas horas para chegar lá.
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: "span 6", order: 1 }} className="gen-col-12-mobile">
            <Reveal stagger={2}>
              <MetasMockup />
            </Reveal>
          </div>
        </div>

        <div className="gen-grid gen-grid--3 gen-cc-cards">
          {[
            { k: "01", t: "Meta do dia, não do mês", d: "A meta mensal é quebrada em metas diárias por colaborador. Todo dia começa com o número claro na mão." },
            { k: "02", t: "Cobrança sem desgaste", d: "O sistema chama, mostra o gap e registra. Você deixa de ser o vilão da cobrança e volta a ser gestor." },
            { k: "03", t: "Dica no momento certo", d: "Combo, produto, reagendamento, encaixe: a IA indica a ação de maior impacto para fechar o gap ainda hoje." },
          ].map((b, i) => (
            <Reveal key={b.k} stagger={i + 1} as="div" className="gen-cc-card">
              <span className="gen-cc-card__bar" aria-hidden="true" />
              <div className="gen-cc-num">— {b.k}</div>
              <h3 className="gen-h3 gen-cc-card__t" style={{ marginBottom: 12 }}>{b.t}</h3>
              <p className="gen-cc-card__d">{b.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FeedbackRH, MetasDiarias });
