const aboutStyles = {
  label: { fontSize: 15, color: "rgba(255,255,255,0.55)", letterSpacing: "0.10em", textTransform: "uppercase", marginBottom: 20, fontWeight: 500 },
  title: {
    fontFamily: "'Outfit', sans-serif", fontSize: "clamp(34px, 4.5vw, 54px)",
    lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 400,
    marginBottom: 28, textWrap: "balance", color: "white"
  },
  para: { fontSize: 17, lineHeight: 1.7, color: "rgba(255,255,255,0.8)", marginBottom: 20, textWrap: "pretty" },
  pillRow: { display: "flex", gap: 10, flexWrap: "wrap", marginTop: 16 },
  pill: {
    padding: "8px 14px", borderRadius: 999,
    background: "rgba(255,255,255,0.06)",
    border: "1px solid rgba(255,255,255,0.08)",
    fontSize: 13, color: "rgba(255,255,255,0.85)"
  },
  whatsappBtn: {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 24px", borderRadius: 999,
    background: "#1A9E4A", color: "white",
    fontSize: 15, fontWeight: 500, marginTop: 28,
    transition: "transform 0.2s, background 0.2s"
  }
};

const About = ({ onWhatsApp }) => (
  <section
    className="about-wrap"
    id="sobre"
    style={{
      position: "relative",
      overflow: "hidden",
      background: "#000",
      padding: "0"
    }}
  >

    {/* Foto — estilo hero, à esquerda, com mask gradiente (blur na borda direita) */}
    <img
      className="about-photo"
      src="img/fotos%20diana%20(2)_1200w.jpg"
      srcSet="img/fotos%20diana%20(2)_800w.jpg 800w, img/fotos%20diana%20(2)_1200w.jpg 1200w, img/fotos%20diana%20(2)_1600w.jpg 1600w"
      sizes="(max-width: 960px) 100vw, 50vw"
      alt="Diana Vicente, Nutricionista Esportiva"
      loading="lazy"
      decoding="async"
      style={{
        position: "absolute",
        left: 0, top: 0,
        width: "50%", height: "100%",
        objectFit: "cover",
        objectPosition: "center top",
        zIndex: 0,
        display: "block",
        imageRendering: "high-quality",
        WebkitMaskImage: "linear-gradient(to right, black 0%, black 70%, transparent 100%)",
        maskImage: "linear-gradient(to right, black 0%, black 70%, transparent 100%)"
      }}
    />

    {/* Gradiente sobre toda a seção — preto do lado direito (texto), transparente no lado da foto (esquerda) */}
    <div aria-hidden className="about-fade" style={{
      position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
      background: "linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,0.5) 65%, #000 100%)"
    }} />

    {/* Bolha sobre a foto — canto superior esquerdo */}
    <div className="about-bubble" style={{
      position: "absolute", top: 80, left: 40,
      background: "rgba(20,7,2,0.85)", color: "rgba(255,255,255,0.9)",
      backdropFilter: "blur(12px)",
      padding: "12px 16px", borderRadius: 12,
      fontFamily: "'Outfit', sans-serif", fontSize: 13, fontStyle: "italic",
      maxWidth: 220, lineHeight: 1.4,
      border: "1px solid rgba(255,255,255,0.08)",
      zIndex: 2,
      boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
    }}>
      "Resultado vem de acompanhamento estratégico, não de achismo."
    </div>

    {/* Conteúdo — coluna da direita, sobre o gradiente */}
    <div className="about-content-grid" style={{
      position: "relative", zIndex: 2,
      maxWidth: 1280, margin: "0 auto",
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gap: 64,
      alignItems: "center",
      minHeight: "min(80vh, 720px)",
      padding: "0 40px"
    }}>

      {/* Coluna esquerda vazia — deixa a foto respirar */}
      <div aria-hidden></div>

      {/* Coluna direita — texto */}
      <div className="about-text-block" style={{ maxWidth: 580 }}>

        <div data-anim className="about-header">
          <div style={aboutStyles.label}>Prazer, eu sou a Diana</div>
          <h2 style={aboutStyles.title}>
            Uma nutricionista que constrói estratégia para o <em style={{ color: "var(--sage-200)", fontWeight: 300 }}>seu corpo</em>.
          </h2>
        </div>

        <div data-anim data-delay="1" className="about-text">
          <p style={aboutStyles.para}>
            Sou nutricionista esportiva e especialista em estética feminina.
          </p>
          <p style={aboutStyles.para}>
            Nos últimos anos, já ajudei mais de <strong>400 mulheres</strong> a reduzir gordura corporal, desenvolver massa muscular e conquistar um <strong>shape magro, definido e sustentável</strong>.
          </p>
          <p style={aboutStyles.para}>
            Mas minha missão vai além da estética.
          </p>
          <p style={aboutStyles.para}>
            Meu trabalho é reconstruir sua relação com a comida, te ensinar a comer com <strong>liberdade</strong>, desenvolver constância e fazer com que o processo deixe de ser uma guerra diária.
          </p>
          <p style={aboutStyles.para}>
            Aqui você aprende a evoluir comendo o que gosta, sem restrições extremas, sem culpa e sem viver presa a uma rotina impossível de sustentar.
          </p>
          <p style={aboutStyles.para}>
            Cada estratégia é construída respeitando sua individualidade, sua rotina, seu metabolismo e seus objetivos.
          </p>

          <button
            style={aboutStyles.whatsappBtn}
            onClick={onWhatsApp}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = "#157A3A"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.background = "#1A9E4A"; }}
          >
            Quero começar agora
          </button>

          <div style={aboutStyles.pillRow}>
            {["CRN SC 14264", "Treino Personalizado", "Shape Feminino", "Atendimento Online", "Presencial Florianópolis SC"].map(p => (
              <span key={p} style={aboutStyles.pill}>{p}</span>
            ))}
          </div>
        </div>

      </div>
    </div>

    <style>{`
      /* Mobile: foto no topo, texto embaixo em fundo preto sólido */
      @media (max-width: 960px) {
        .about-wrap {
          padding: 0 0 60px 0 !important;
        }
        .about-photo {
          position: relative !important;
          width: 100% !important;
          height: 56svh !important;
          min-height: 360px !important;
          max-height: 520px !important;
          object-position: 50% 25% !important;
          -webkit-mask-image: none !important;
          mask-image: none !important;
        }
        .about-fade {
          background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0,0,0,0.5) 75%, #000 100%) !important;
        }
        .about-bubble {
          top: auto !important;
          left: 20px !important;
          bottom: auto !important;
          margin-top: -90px !important;
        }
        .about-content-grid {
          grid-template-columns: 1fr !important;
          align-items: start !important;
          min-height: 0 !important;
          padding: 40px 20px 0 20px !important;
          gap: 0 !important;
        }
        .about-text-block { max-width: 100% !important; }
      }
      @media (max-width: 560px) {
        .about-photo { height: 48svh !important; min-height: 320px !important; }
        .about-bubble { max-width: 180px !important; font-size: 12px !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { About });