/* Website UI kit — Signature: Eye Rejuvenation + Before/After slider */
function Signature() {
  const { Badge, Button } = window.DrRenanMouraDesignSystem_c23fa8;
  const [pos, setPos] = React.useState(50);

  return (
    <section id="rejuvenescimento" className="rm-x40" style={{ background: "var(--surface-page-pure)", padding: "var(--section-pad-y) 40px" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto" }}>
        <div className="rm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "96px", alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "24px" }} data-reveal>
            <Badge variant="gold">Técnica exclusiva</Badge>
            <h2 style={{ fontSize: "var(--text-display-lg)", lineHeight: 1.05, color: "var(--text-primary)", margin: 0 }}>
              Rejuvenescimento do olhar
            </h2>
            <p style={{ fontSize: "19px", lineHeight: 1.65, color: "var(--text-secondary)", margin: 0, maxWidth: "46ch" }}>
              Nossa assinatura. Diferente dos procedimentos tradicionais focados em remover pele, restauramos a harmonia do olhar de forma natural — preservando a expressão e criando resultados elegantes e duradouros.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: "16px" }}>
              {["Minimamente invasivo", "Expressão preservada", "Resultado natural e duradouro"].map((t) => (
                <li key={t} style={{ display: "flex", alignItems: "center", gap: "16px", fontSize: "16px", color: "var(--text-primary)" }}>
                  <span style={{ width: 28, height: 1, background: "var(--rm-gold-500)", flex: "none" }} />
                  {t}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: "16px" }}>
              <Button variant="primary" size="lg" href="#contato">Agendar avaliação</Button>
            </div>
          </div>

          <div data-reveal>
            <div style={{ position: "relative", aspectRatio: "5 / 4", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-media)", userSelect: "none" }}>
              <img src="assets/images/rejuv-depois.png" alt="Depois" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, width: pos + "%", overflow: "hidden" }}>
                <img src="assets/images/rejuv-antes.png" alt="Antes" style={{ position: "absolute", inset: 0, width: (100 / pos) * 100 + "%", maxWidth: "none", height: "100%", objectFit: "cover" }} />
                <span style={{ position: "absolute", left: 16, bottom: 16, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#fff", background: "rgba(20,27,38,0.5)", padding: "6px 12px", borderRadius: 999 }}>Antes</span>
              </div>
              <span style={{ position: "absolute", right: 16, bottom: 16, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#fff", background: "rgba(20,27,38,0.5)", padding: "6px 12px", borderRadius: 999 }}>Depois</span>
              <div style={{ position: "absolute", top: 0, bottom: 0, left: pos + "%", width: 2, background: "#fff", transform: "translateX(-1px)", boxShadow: "0 0 12px rgba(0,0,0,0.3)" }}>
                <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 44, height: 44, borderRadius: "50%", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-md)", color: "var(--rm-navy-700)", fontSize: 14 }}>&#8596;</div>
              </div>
              <input type="range" min="0" max="100" value={pos} onChange={(e) => setPos(+e.target.value)}
                aria-label="Comparar antes e depois"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "ew-resize", margin: 0 }} />
            </div>
            <p style={{ fontSize: "12px", color: "var(--text-muted)", marginTop: "12px", textAlign: "center" }}>Arraste para comparar</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Signature = Signature;