/* global React */

function FinalCTA() {
  return (
    <section id="contato" style={{
      background: "var(--ink-900)",
      color: "#fff",
      padding: "120px 0 140px",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* huge wordmark behind */}
      <img
        src={(window.__resources && window.__resources.logoWhite) || "assets/logo-cabecalho-white.png"}
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          left: "50%", bottom: -30,
          transform: "translateX(-50%)",
          width: "min(120%, 1600px)",
          opacity: 0.04,
          pointerEvents: "none",
        }}
      />
      <div aria-hidden="true" style={{
        position: "absolute",
        top: "10%", left: "50%",
        transform: "translateX(-50%)",
        width: 900, height: 900,
        background: "radial-gradient(circle, rgba(64,13,166,0.45), transparent 60%)",
        filter: "blur(50px)",
        pointerEvents: "none",
      }} />

      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <span className="eyebrow-tag on-dark" style={{ marginBottom: 28 }}>
          <span className="dot" />
          Fechamento
        </span>
        <h2 style={{
          fontFamily: "var(--font-display)",
          fontWeight: 600,
          fontSize: "clamp(40px, 6vw, 84px)",
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          color: "#fff",
          textWrap: "balance",
          maxWidth: 1100,
          margin: "0 auto",
        }}>
          Sua clínica pode crescer<br />
          muito mais com o que <span style={{ color: "var(--brand-violet-300)" }}>já possui hoje</span>.
        </h2>

        <div style={{
          marginTop: 40,
          display: "flex", justifyContent: "center", gap: 40,
          flexWrap: "wrap",
          color: "rgba(255,255,255,0.65)",
          fontSize: 17,
          fontWeight: 400,
        }}>
          <span><span className="text-strike" style={{ color: "rgba(255,255,255,0.4)" }}>Não falta lead</span></span>
          <span><span className="text-strike" style={{ color: "rgba(255,255,255,0.4)" }}>Não falta mercado</span></span>
          <span><span className="text-strike" style={{ color: "rgba(255,255,255,0.4)" }}>Não falta potencial</span></span>
          <span style={{ color: "#fff", fontWeight: 600 }}>Falta estrutura.</span>
        </div>

        <div style={{ marginTop: 56, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <a href="#diagnostico" className="btn btn-primary" style={{ padding: "18px 28px", fontSize: 16 }}>
            Quero crescer com método
            <span className="arrow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 48,
          paddingBottom: 56,
          borderBottom: "1px solid rgba(255,255,255,0.08)",
        }} className="footer-grid">
          <div>
            <img src={(window.__resources && window.__resources.logoWhite) || "assets/logo-cabecalho-white.png"} alt="MaveUp" style={{ height: 28, marginBottom: 20 }} />
            <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, lineHeight: 1.55, maxWidth: 320, margin: "0 0 24px" }}>
              Assessoria estratégica para clínicas e consultórios de estética.
              Especialistas em harmonização facial e orofacial.
            </p>
            <div style={{ display: "flex", gap: 10 }}>
              <a
                href="https://www.instagram.com/assessoriamave/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram @assessoriamave"
                style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: "rgba(255,255,255,0.06)",
                  border: "1px solid rgba(255,255,255,0.12)",
                  color: "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  textDecoration: "none",
                  transition: "all 200ms cubic-bezier(0.2,0,0,1)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = "var(--brand-violet)";
                  e.currentTarget.style.borderColor = "var(--brand-violet)";
                  e.currentTarget.style.transform = "translateY(-2px)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = "rgba(255,255,255,0.06)";
                  e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)";
                  e.currentTarget.style.transform = "translateY(0)";
                }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
              </a>
              <a
                href="https://api.whatsapp.com/message/L7NMUKPTEBENE1?autoload=1&app_absent=0&utm_source=ig"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="WhatsApp"
                style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: "rgba(255,255,255,0.06)",
                  border: "1px solid rgba(255,255,255,0.12)",
                  color: "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  textDecoration: "none",
                  transition: "all 200ms cubic-bezier(0.2,0,0,1)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = "#25D366";
                  e.currentTarget.style.borderColor = "#25D366";
                  e.currentTarget.style.transform = "translateY(-2px)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = "rgba(255,255,255,0.06)";
                  e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)";
                  e.currentTarget.style.transform = "translateY(0)";
                }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.464 3.488"/>
                </svg>
              </a>
            </div>
          </div>

          <div>
            <h4>Navegação</h4>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="#metodo">Método OPV</a></li>
              <li><a href="#jornada">Jornada</a></li>
              <li><a href="#para-quem">Para quem</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>

          <div>
            <h4>Sede</h4>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>
              Barueri — Alphaville<br />
              São Paulo · SP
            </p>
          </div>

          <div>
            <h4>Diagnóstico</h4>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 14, lineHeight: 1.6, margin: "0 0 14px" }}>
              Identifique os gargalos da sua clínica em uma conversa.
            </p>
            <a href="#diagnostico" style={{ color: "var(--brand-violet-300)", fontWeight: 500, fontSize: 14 }}>
              Solicitar →
            </a>
          </div>
        </div>

        <div style={{
          paddingTop: 32,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 16,
          color: "rgba(255,255,255,0.5)", fontSize: 13,
        }}>
          <span>© {new Date().getFullYear()} Assessoria Mave. Todos os direitos reservados.</span>
          <span>Assessoria Mave — Especialista</span>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
          }
          @media (max-width: 520px) {
            .footer-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;