const faqStyles = {
  label: { fontSize: 13, color: "rgba(255,255,255,0.55)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16, fontWeight: 500 },
  title: { fontFamily: "'Outfit', sans-serif", fontSize: "clamp(34px, 4.5vw, 54px)", lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance", color: "white" },
  item: {
    background: "rgba(255,255,255,0.04)",
    borderRadius: 14,
    padding: "18px 22px",
    cursor: "pointer",
    marginBottom: 10,
    border: "1px solid rgba(255,255,255,0.08)"
  },
  q: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "nowrap" },
  qTextWrap: { flex: 1, display: "flex", justifyContent: "flex-start", padding: "0 8px" },
  qText: { fontFamily: "'Outfit', sans-serif", fontSize: 18, fontWeight: 400, letterSpacing: "-0.01em", color: "white", lineHeight: 1.3, textAlign: "left" },
  a: { fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.8)", maxWidth: 760, marginTop: 16 }
};

const faqs = [
  { q: "Precisarei parar de comer o que gosto?", a: "Não. 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." },
  { q: "O Método Shape Blindado é só para quem quer emagrecer?", a: "Não. O acompanhamento é voltado para mulheres que querem reduzir gordura, ganhar massa muscular, melhorar a composição corporal ou ter mais performance e confiança com o próprio corpo." },
  { q: "Vocês analisam meus exames?", a: "Sim. Realizamos análise criteriosa dos seus exames para identificar deficiências que possam estar impactando composição corporal, metabolismo, retenção, disposição, recuperação muscular e performance." },
  { q: "O acompanhamento inclui treino?", a: "Sim. O Método Shape Blindado une dieta e treino em uma estratégia integrada. O plano de treino é pensado para caminhar junto com a alimentação, respeitando seu objetivo, nível e rotina." },
  { q: "Como funciona o suporte após receber o plano?", a: "Nada de abandono após a entrega. Seu progresso é monitorado de perto, você recebe orientações diárias e o plano é ajustado conforme seu corpo responde." },
  { q: "Quanto tempo leva para ver resultado?", a: "Os primeiros resultados costumam aparecer entre 4 e 8 semanas, com constância. O ritmo varia de acordo com o objetivo e a resposta individual do seu corpo." },
  { q: "Como funciona o pagamento?", a: "Facilitamos o seu pagamento para tornar possível você alcançar o shape dos sonhos com estratégia e direcionamento certo." }
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section
      id="faq"
      className="faq-wrap"
      style={{
        position: "relative",
        overflow: "hidden",
        background: "#000",
        padding: "0"
      }}
    >
      {/* Foto da Diana — à direita, com mask gradiente (blur) na borda esquerda */}
      <div className="faq-photo-col" style={{
        position: "absolute",
        right: 0, top: 0,
        width: "40%", height: "100%",
        zIndex: 0,
        overflow: "hidden"
      }}>
        <img
          className="faq-photo"
          src="img/fotos%20diana%20(4)_1200w.jpg"
          srcSet="img/fotos%20diana%20(4)_800w.jpg 800w, img/fotos%20diana%20(4)_1200w.jpg 1200w, img/fotos%20diana%20(4)_1600w.jpg 1600w"
          sizes="(max-width: 960px) 0px, 40vw"
          alt="Diana Vicente"
          loading="lazy"
          decoding="async"
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center top",
            display: "block",
            imageRendering: "high-quality",
            WebkitMaskImage: "linear-gradient(to left, black 0%, black 70%, transparent 100%)",
            maskImage: "linear-gradient(to left, black 0%, black 70%, transparent 100%)"
          }}
        />
      </div>

      {/* Gradiente sobre o section — preto do lado do texto (esquerda), transparente do lado da foto (direita) */}
      <div aria-hidden className="faq-fade" style={{
        position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
        background: "linear-gradient(to right, #000 0%, rgba(0,0,0,0.5) 35%, transparent 60%)"
      }} />

      <div className="faq-inner" style={{
        position: "relative",
        zIndex: 2,
        maxWidth: 1280,
        margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1.2fr 0.8fr",
        gap: 80,
        alignItems: "start",
        padding: "120px 40px"
      }}>
        {/* Coluna esquerda: perguntas */}
        <div>
          <div style={{ textAlign: "left", marginBottom: 48 }}>
            <div style={faqStyles.label}>Dúvidas frequentes</div>
            <h2 style={faqStyles.title}>Tudo que você quer saber antes de começar.</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {faqs.map((f, i) => (
              <div key={i} className="faq-item" style={faqStyles.item} onClick={() => setOpen(open === i ? -1 : i)}>
                <div style={faqStyles.q}>
                  <span className="faq-chevron" style={{
                    transform: open === i ? "rotate(180deg)" : "rotate(0deg)",
                    transition: "transform 0.25s",
                    color: "var(--sage-700)",
                    display: "inline-flex",
                    flexShrink: 0
                  }}>
                    <IconChevronDown size={20} />
                  </span>
                  <span className="faq-q-text faq-q-wrap" style={faqStyles.qTextWrap}>
                    <span style={faqStyles.qText}>{f.q}</span>
                  </span>
                  <span style={{ width: 28, flexShrink: 0 }} />
                </div>
                <div style={{
                  overflow: "hidden",
                  maxHeight: open === i ? 200 : 0,
                  transition: "max-height 0.3s ease, opacity 0.3s",
                  opacity: open === i ? 1 : 0
                }}>
                  <p style={faqStyles.a}>{f.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Coluna direita — vazia (a foto está atrás, com mask) */}
        <div className="faq-photo-col-spacer" aria-hidden></div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .faq-wrap { padding: 0 0 60px 0 !important; }
          .faq-photo-col {
            position: relative !important;
            width: 100% !important;
            height: 56svh !important;
            min-height: 360px !important;
            max-height: 520px !important;
          }
          .faq-fade {
            background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0,0,0,0.5) 75%, #000 100%) !important;
          }
          .faq-photo {
            -webkit-mask-image: none !important;
            mask-image: none !important;
            object-position: 50% 50% !important; object-fit: contain !important;
          }
          .faq-inner { grid-template-columns: 1fr !important; padding: 0 20px !important; }
          .faq-inner > div:first-child { padding-top: 40px !important; }
          .faq-inner > div:last-child { display: none !important; }
        }
        @media (max-width: 560px) {
          .faq-photo-col { height: 48svh !important; min-height: 320px !important; }
          .faq-item { padding: 14px 16px !important; }
          .faq-q-text { font-size: 15px !important; line-height: 1.3 !important; }
          .faq-chevron { display: none !important; }
          .faq-q-wrap { padding: 0 4px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { FAQ });