const footerStyles = {
  wrap: { background: "#0f0f0f", color: "var(--cream-50)", padding: "80px 40px 40px" },
  inner: { maxWidth: 1280, margin: "0 auto" },
  cta: {
    display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 60,
    paddingBottom: 60, borderBottom: "1px solid rgba(251,248,242,0.1)",
    alignItems: "center"
  },
  ctaTitle: { fontFamily: "'Outfit', sans-serif", fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance" },
  ctaSub: { fontSize: 16, color: "rgba(251,248,242,0.7)", marginTop: 16, lineHeight: 1.5 },
  ctaBtns: { display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" },
  primaryBtn: {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
    padding: "18px 26px", borderRadius: 999,
    background: "var(--sage-700)", color: "white",
    fontSize: 16, fontWeight: 500, transition: "background 0.2s"
  },
  whatsBtn: {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
    padding: "18px 26px", borderRadius: 999,
    background: "#1A9E4A", color: "white",
    fontSize: 16, fontWeight: 500, transition: "background 0.2s"
  },
  bottom: {
    display: "grid", gridTemplateColumns: "2fr 1fr 1fr",
    gap: 48, paddingTop: 60, paddingBottom: 40
  },
  brandBlock: { maxWidth: 340 },
  brand: { fontFamily: "'Outfit', sans-serif", fontSize: 28, fontWeight: 400, marginBottom: 12 },
  brandDesc: { fontSize: 14, color: "rgba(251,248,242,0.6)", lineHeight: 1.55 },
  col: { display: "flex", flexDirection: "column", gap: 12 },
  colTitle: { fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(251,248,242,0.5)", marginBottom: 8 },
  colLink: { fontSize: 14, color: "rgba(251,248,242,0.85)", cursor: "pointer" },
  socials: { display: "flex", gap: 10, marginTop: 16 },
  socialIcon: {
    width: 44, height: 44, borderRadius: "50%",
    background: "rgba(255,255,255,0.1)", color: "white",
    display: "flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0
  },
  legal: {
    display: "flex", justifyContent: "space-between", gap: 20,
    paddingTop: 32, borderTop: "1px solid rgba(251,248,242,0.1)",
    fontSize: 13, color: "rgba(251,248,242,0.5)", flexWrap: "wrap"
  }
};

const Footer = ({ onOpenForm, onWhatsApp }) => (
  <footer style={footerStyles.wrap}>
    <div style={footerStyles.inner}>
      <div className="footer-cta" style={footerStyles.cta}>
        <div>
          <h3 style={footerStyles.ctaTitle}>
            Seu shape <span style={{ color: "#e8324a" }}>não precisa</span> ser construído no sofrimento.
          </h3>
          <p style={footerStyles.ctaSub}>
            Com a estratégia certa, suporte individual e acompanhamento de perto, seu corpo evolui com constância.
            A transformação que você busca começa com uma decisão. Clique abaixo e dê o primeiro passo para construir seu melhor físico.
          </p>
        </div>
        <div style={footerStyles.ctaBtns}>
          <button style={{ ...footerStyles.whatsBtn, background: "#e8324a" }} onClick={onWhatsApp}
            onMouseEnter={e => e.currentTarget.style.background = "#c4203a"}
            onMouseLeave={e => e.currentTarget.style.background = "#e8324a"}
          >
            Quero entrar para o time
          </button>
        </div>
      </div>

      <div className="footer-bottom" style={footerStyles.bottom}>
        <div style={footerStyles.brandBlock}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <span style={{
              width: 44, height: 44, borderRadius: "50%",
              overflow: "hidden", flexShrink: 0,
              border: "2px solid rgba(251,248,242,0.2)"
            }}>
              <img
                src="img/hero_avatar.jpg"
                srcSet="img/hero_avatar.jpg 1x, img/hero_avatar@2x.jpg 2x"
                alt="Diana Vicente"
                loading="eager"
                decoding="async"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center center", display: "block", imageRendering: "high-quality" }}
              />
            </span>
            <span style={footerStyles.brand}>Diana Vicente</span>
          </div>
          <p style={footerStyles.brandDesc}>
            Nutricionista esportiva CRN SC 14264. Atendimento online para todo o Brasil e
            presencial em Florianópolis SC. Estratégia real para resultado real.
          </p>
          <div style={footerStyles.socials}>
            <a href="https://www.instagram.com/dianavicente.nutri/" target="_blank" rel="noopener noreferrer" style={footerStyles.socialIcon}><IconInstagram size={18} /></a>
            <a href="https://www.tiktok.com/@dianalvicente" target="_blank" rel="noopener noreferrer" style={footerStyles.socialIcon}><IconTikTok size={18} /></a>
            <a href="https://www.youtube.com/@diana.vicente" target="_blank" rel="noopener noreferrer" style={footerStyles.socialIcon}><IconYouTube size={18} /></a>
            <a onClick={onWhatsApp} style={footerStyles.socialIcon}><IconWhatsApp size={18} color="currentColor" /></a>
          </div>
        </div>

        <div style={footerStyles.col}>
          <div style={footerStyles.colTitle}>Atendimento</div>
          <span style={footerStyles.colLink}>Online • todo o Brasil</span>
          <span style={footerStyles.colLink}>Presencial • Florianópolis SC</span>
          <a href="mailto:contato@dianavicente.com.br" className="footer-email" style={footerStyles.colLink}>contato@dianavicente.com.br</a>
          <span style={footerStyles.colLink}>CRN SC 14264</span>
        </div>
      </div>

      <div style={footerStyles.legal}>
        <span>© 2026 Diana Vicente Nutrição • CRN SC 14264 • Todos os direitos reservados.</span>
        <span>Política de Privacidade • Termos</span>
      </div>
    </div>
    <style>{`
      @media (max-width: 860px) {
        .footer-cta { grid-template-columns: 1fr !important; gap: 32px !important; }
        .footer-bottom { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
      }
      @media (max-width: 520px) {
        footer { padding: 64px 20px 88px !important; }
        .footer-bottom { grid-template-columns: 1fr !important; }
        .footer-bottom a,
        .footer-bottom span {
          min-height: 44px !important;
          display: flex !important;
          align-items: center !important;
        }
      }
    `}</style>
  </footer>
);

Object.assign(window, { Footer });