/* global React, SEQ_UI, SEQ_DATA */
const { Icon, brl } = window.SEQ_UI;
const { PROPOSTAS } = window.SEQ_DATA;

function Publica() {
  const p = PROPOSTAS[0];
  const [accepted, setAccepted] = React.useState(false);
  const [progress, setProgress] = React.useState(8);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      const el = ref.current; if (!el) return;
      const total = el.scrollHeight - el.clientHeight;
      const pct = Math.min(100, Math.max(0, (el.scrollTop / total) * 100));
      setProgress(pct);
    };
    const el = ref.current; if (el) el.addEventListener("scroll", onScroll);
    return () => el && el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div style={{ height: "calc(100vh - 80px)", background: "#EFEDE6", display: "flex", flexDirection: "column" }}>
      {/* "Browser" frame so user understands this is the public link */}
      <div style={{ background: "var(--kp-soft)", borderBottom: "1.5px solid var(--kp-ink)", padding: "8px 16px", display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--kp-muted)" }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#FF5F57", border: "1px solid var(--kp-ink)" }}/>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#FEBC2E", border: "1px solid var(--kp-ink)" }}/>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#28C840", border: "1px solid var(--kp-ink)" }}/>
        </div>
        <span>{p.link}</span>
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 6, color: "var(--kp-pink)" }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--kp-pink)", animation: "kp-pulse 1.6s infinite" }} />
          REC · sessão sendo gravada pra Sequência
        </span>
      </div>

      {/* Reading progress */}
      <div style={{ height: 4, background: "var(--kp-paper)" }}>
        <div style={{ height: "100%", width: progress + "%", background: "var(--kp-blue)", transition: "width .15s ease" }}/>
      </div>

      <div ref={ref} className="scroll-clean" style={{ flex: 1, overflowY: "auto", padding: "48px 24px 80px" }}>
        <article style={{ maxWidth: 760, margin: "0 auto", background: "var(--kp-paper)", padding: "48px 56px", border: "1.5px solid var(--kp-ink)", boxShadow: "8px 8px 0 0 var(--kp-ink)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 32 }}>
            <span className="kp-eyebrow"><span className="kp-dot"/>Proposta · Nº 0042</span>
            <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>19 abr 2026</span>
          </div>
          <h1 className="kp-display" style={{ fontSize: 52, lineHeight: 1.0, margin: 0 }}>{p.title}</h1>
          <p style={{ fontSize: 14, color: "var(--kp-muted)", marginTop: 16 }}>Para <em style={{ color: "var(--kp-ink)" }}>{p.cliente}</em> · {p.empresa}</p>

          <hr style={{ border: "none", borderTop: "1.5px solid var(--kp-ink)", margin: "36px 0" }}/>

          <h2 className="kp-display" style={{ fontSize: 28 }}>Sobre o projeto</h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 14 }}>Com base nas evoluções discutidas, estruturamos este módulo para permitir que o agente avance além da qualificação, conduzindo o lead até o agendamento de forma automatizada.</p>
          <p style={{ fontSize: 16, lineHeight: 1.65, marginTop: 14 }}>O objetivo é reduzir o atrito no processo comercial, permitindo que o próprio agente interprete a intenção do lead, sugira horários e realize o agendamento diretamente na agenda.</p>

          <h2 className="kp-display" style={{ fontSize: 28, marginTop: 40 }}>Escopo</h2>
          <ul style={{ fontSize: 16, lineHeight: 1.7, paddingLeft: 22, marginTop: 12 }}>
            <li>Integração com a agenda existente (Google Calendar)</li>
            <li>Fluxo conversacional de qualificação + sugestão de horários</li>
            <li>Lembretes automáticos (e-mail + WhatsApp) 24h e 1h antes</li>
            <li>Painel de leads agendados com origem</li>
            <li>QA + ajustes finos durante 30 dias</li>
          </ul>

          <h2 className="kp-display" style={{ fontSize: 28, marginTop: 40 }}>Investimento</h2>
          <div style={{ marginTop: 14, padding: 24, background: "var(--kp-ink)", color: "var(--kp-paper)" }}>
            <div className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--kp-faint)" }}>VALOR DA PROPOSTA</div>
            <div className="kp-display" style={{ fontSize: 64, fontStyle: "italic", lineHeight: 1, color: "var(--kp-paper)", marginTop: 6 }}>R$ 4.000,00</div>
            <div style={{ fontSize: 13, color: "rgba(247,241,232,0.7)", marginTop: 10 }}>Pagamento: 50% entrada + 50% na entrega</div>
          </div>

          <hr style={{ border: "none", borderTop: "1.5px solid var(--kp-ink)", margin: "40px 0" }}/>
          <h2 className="kp-display" style={{ fontSize: 28 }}>Próximos passos</h2>
          <p style={{ fontSize: 15, color: "var(--kp-muted)", marginTop: 8 }}>Aceitando esta proposta, você é redirecionado pro checkout da entrada.</p>

          <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
            <a href="#/checkout" className="kp-btn kp-btn-ink" onClick={()=>setAccepted(true)} style={{ padding: "14px 22px", fontSize: 11 }}>
              Aceitar e ir pro checkout →
            </a>
            <button className="kp-btn">Pedir ajuste</button>
          </div>
          {accepted && <div style={{ marginTop: 14, padding: 12, background: "var(--kp-green)", border: "1.5px solid var(--kp-ink)" }}>✓ Aceite registrado às {new Date().toLocaleTimeString("pt-BR")}</div>}

          <p style={{ marginTop: 36, fontSize: 11, color: "var(--kp-muted)", fontFamily: "var(--kp-mono)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
            Esta proposta está sendo monitorada · Tempo nesta página · {Math.round(progress)}% lida
          </p>
        </article>
      </div>
    </div>
  );
}

window.SEQ_PUBLICA = Publica;