/* eslint-disable */
// Sections-2.jsx — Diferenciais (com foto modelo verde), Casos

/* ─── DIFERENCIAIS (5 cards: 3 + 2 centered) ─── */
const diferenciaisData = [
  {
    icon: <IconShieldCheck />,
    title: "Sua segurança lado a lado com a estética",
    text: "Sabemos que toda cirurgia tem seus riscos. Para minimizá-los, temos protocolos rigorosos no antes, durante e depois da cirurgia. Para que você viva essa experiência com a maior tranquilidade possível.",
  },
  {
    icon: <IconScalpel />,
    title: "Técnicas cirúrgicas de ponta",
    text: "Dr. Emilio já realizou mais de 50.000 cirurgias plásticas e está sempre atualizado em cursos e congressos com as técnicas mais avançadas na mamoplastia e implantes de silicone.",
  },
  {
    icon: <IconHeart />,
    title: "Ao seu lado em cada momento",
    text: "Sua história é ouvida desde o primeiro contato. Suas expectativas guiam cada decisão — e nossa equipe está presente em cada etapa do processo.",
  },
  {
    icon: <IconWallet />,
    title: "Parcelamento em até 30 vezes",
    text: "Parcelamento direto com o consultório em até 30 vezes pelo Plano Programado (pré-pago), sem banco ou juros, ou parcelamento em até 20 vezes no cartão de crédito.",
  },
  {
    icon: <IconReceipt />,
    title: "TODOS os custos incluídos, sem surpresas",
    text: "Para evitar surpresas, os custos de todo o processo são transparentes — os honorários do Dr. Emilio, da equipe, do hospital e etc.",
  },
];

const DiferencialCard = ({ icon, title, text }) => {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "#fff",
        border: "1px solid var(--border-card)",
        borderRadius: 16,
        padding: 28,
        boxShadow: hover
          ? "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)"
          : "0 2px 8px rgba(0,0,0,0.04)",
        transition: "box-shadow 150ms var(--ease)",
        flex: 1,
        height: "100%",
        boxSizing: "border-box",
      }}>
      <IconCircle size={48}>{icon}</IconCircle>
      <h3 style={{ font: "700 15px/22px var(--font-sans)", color: "var(--ink)", margin: "20px 0 10px" }}>{title}</h3>
      <p style={{ font: "400 14px/22px var(--font-sans)", color: "var(--ink-mute)", margin: 0 }}>{text}</p>
    </div>
  );
};

const Diferenciais = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  return (
    <section data-screen-label="03 Diferenciais" style={{
      background: "#fff",
      padding: isMobile ? "64px 20px 64px" : "96px 32px 80px",
    }}>
      <div style={{ maxWidth: 1152, margin: "0 auto" }}>
        {/* HEADER — image left + intro right (stacks on mobile, image first) */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 0.95fr) minmax(0, 1.05fr)",
          gap: isMobile ? 32 : 56,
          alignItems: "center",
          marginBottom: isMobile ? 40 : 64,
        }}>
          {/* Image — green bikini model with gold-square backdrop */}
          <div style={{
            position: "relative",
            width: "100%",
            height: isMobile ? 380 : 520,
            justifySelf: isMobile ? "center" : "start",
            maxWidth: isMobile ? 360 : "none",
            order: isMobile ? 2 : 1,
          }}>
            {/* Decorative gold square — lighter tones to balance green/skin/hair */}
            <div style={{
              position: "absolute",
              width: isMobile ? 220 : 320,
              height: isMobile ? 220 : 320,
              borderRadius: 10,
              top: isMobile ? 60 : 100,
              left: isMobile ? "50%" : "auto",
              right: isMobile ? "auto" : 30,
              marginLeft: isMobile ? -110 : 0,
              transformOrigin: "center",
              transform: "rotate(45deg)",
              backgroundImage: "linear-gradient(135deg, #F0D78A 0%, #E1BD5F 55%, #D4A94A 100%)",
              opacity: 0.92,
              zIndex: 1,
            }} />
            <div style={{
              position: "absolute",
              width: isMobile ? 130 : 180,
              height: isMobile ? 130 : 180,
              borderRadius: 6,
              top: isMobile ? 20 : 40,
              left: isMobile ? "50%" : "auto",
              right: isMobile ? "auto" : 130,
              marginLeft: isMobile ? -160 : 0,
              opacity: 0.6,
              transformOrigin: "center",
              transform: "rotate(45deg)",
              border: "2px solid var(--gold)",
              zIndex: 1,
            }} />
            {/* Model */}
            <img
              src="assets/model-green.png"
              alt="Modelo"
              style={{
                position: "absolute",
                bottom: 0,
                left: "50%",
                transform: "translateX(-50%)",
                height: isMobile ? 400 : 560,
                width: "auto",
                zIndex: 2,
                filter: "drop-shadow(0 18px 24px rgba(60, 40, 10, 0.18))",
                pointerEvents: "none",
              }}
            />
          </div>

          {/* Intro copy */}
          <div style={{ textAlign: isMobile ? "center" : "left", order: isMobile ? 1 : 2 }}>
            <Eyebrow color="var(--ink-soft)" letterSpacing="0.18em">Implante de Silicone</Eyebrow>
            <h2 style={{
              font: `400 ${isMobile ? 32 : 44}px/116% var(--font-serif)`,
              fontVariantCaps: "small-caps",
              letterSpacing: "0.01em",
              margin: "16px 0 20px",
              textWrap: "balance",
            }}>
              <span style={{ color: "var(--ink)" }}>Porque cada corpo tem</span>{" "}
              <span style={{ color: "var(--gold-hover)", fontStyle: "italic" }}>sua própria harmonia.</span>
            </h2>
            <p style={{
              font: `400 ${isMobile ? 15 : 16}px/170% var(--font-sans)`,
              color: "var(--ink-body)",
              margin: 0,
              maxWidth: 480,
              marginLeft: isMobile ? "auto" : 0,
              marginRight: isMobile ? "auto" : 0,
            }}>
              Cinco compromissos que orientam cada cirurgia — da primeira conversa ao retorno final.
            </p>
          </div>
        </div>

        {/* Cards grid — pulled up to overlap the model's legs */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 16 : 24,
          marginTop: isMobile ? -40 : -90,
          marginBottom: isMobile ? 16 : 24,
          position: "relative",
          zIndex: 3,
        }}>
          {diferenciaisData.slice(0, 3).map((c, i) => <DiferencialCard key={i} {...c} />)}
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(2, minmax(0, 365px))",
          justifyContent: "center",
          gap: isMobile ? 16 : 24,
          marginBottom: isMobile ? 40 : 56,
        }}>
          {diferenciaisData.slice(3).map((c, i) => <DiferencialCard key={i} {...c} />)}
        </div>

        <div style={{ textAlign: "center" }}>
          <Button href={WA} style={isMobile ? { width: "100%", maxWidth: 360 } : {}}>
            <IconWhatsAppOutline size={20} />
            Agendar Consulta
          </Button>
        </div>
      </div>
    </section>
  );
};

/* ─── VOCÊ SE ENXERGA EM UM DESSES CASOS? ─── */
const casosData = [
  { icon: <IconSparkle />, text: "Sente que ter seios maiores seria um marco importante para si mesma." },
  { icon: <IconHourglass />, text: "Tem esse desejo há tempos, mas nunca o concretizou e acha que agora é o momento." },
  { icon: <IconHeartHand />, text: "A cirurgia é importante para sua feminilidade e autoestima." },
  { icon: <IconShieldUser />, text: "Tem medo dos riscos da cirurgia, por isso busca profissional experiente." },
];

const Casos = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  return (
    <section data-screen-label="04 Casos" style={{
      background: "var(--bg-cream)",
      padding: isMobile ? "64px 20px" : "96px 32px",
    }}>
      <div style={{ maxWidth: 1152, margin: "0 auto" }}>
        <div style={{
          display: isMobile ? "flex" : "flex",
          flexDirection: isMobile ? "column" : "row",
          gap: isMobile ? 32 : 56,
          marginBottom: isMobile ? 32 : 40,
          alignItems: "stretch",
        }}>
          {/* Left — image */}
          <div style={{ width: isMobile ? "100%" : 420, flexShrink: 0 }}>
            <div style={{
              width: "100%",
              height: isMobile ? 460 : 520,
              borderRadius: 16,
              backgroundImage: "url(assets/dr-emilio-about-2.png)",
              backgroundSize: "cover",
              backgroundPosition: isMobile ? "center top" : "center 18%",
              boxShadow: "0 16px 32px -12px rgba(60, 40, 10, 0.18)",
            }} />
          </div>

          {/* Right — intro */}
          <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <Eyebrow color="var(--ink-soft)" letterSpacing="0.18em">Mamoplastia de Aumento</Eyebrow>
            <h2 style={{
              font: `400 ${isMobile ? 30 : 40}px/118% var(--font-serif)`,
              fontVariantCaps: "small-caps",
              letterSpacing: "0.01em",
              margin: "16px 0 16px",
              textWrap: "pretty",
            }}>
              <span style={{ color: "var(--ink)" }}>Implante de silicone —</span>{isMobile ? " " : <br />}
              <span style={{ color: "var(--gold-hover)", fontStyle: "italic" }}>você se enxerga em um desses casos?</span>
            </h2>
            <p style={{
              font: `400 ${isMobile ? 15 : 16}px/170% var(--font-sans)`,
              color: "var(--ink-body)",
              margin: "8px 0 20px",
            }}>
              A decisão por uma cirurgia plástica de mama costuma vir de um lugar muito pessoal. Veja se algum desses sentimentos faz parte da sua história — e, se sim, vale conversar com calma.
            </p>
            <div style={{
              background: "var(--gold-soft)",
              borderLeft: "3px solid var(--gold)",
              borderTopRightRadius: 8, borderBottomRightRadius: 8,
              padding: "14px 20px",
              maxWidth: 520,
            }}>
              <p style={{ font: "400 13px/150% var(--font-sans)", color: "var(--ink-mute)", margin: 0 }}>
                O Dr. Emilio realiza <span style={{ color: "var(--ink-strong)", fontWeight: 500 }}>avaliação individual</span> para indicar a melhor abordagem para cada caso. Sem promessas, sem fórmula pronta.
              </p>
            </div>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)",
          gap: isMobile ? 12 : 16,
          marginBottom: isMobile ? 32 : 40,
        }}>
          {casosData.map((c, i) => (
            <div key={i} style={{
              background: "var(--rose-soft)",
              border: "1px solid var(--rose-border)",
              borderRadius: 14,
              padding: isMobile ? "18px 20px" : "22px 28px",
              display: "flex", alignItems: "center", gap: 16,
            }}>
              <IconCircle size={isMobile ? 40 : 44} style={{ background: "#fff" }}>{c.icon}</IconCircle>
              <span style={{
                font: `400 ${isMobile ? 14 : 15}px/1.5 var(--font-sans)`,
                color: "var(--ink-strong)",
              }}>{c.text}</span>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center" }}>
          <Button href={WA} style={isMobile ? { width: "100%", maxWidth: 360 } : {}}>
            <IconWhatsAppOutline size={20} />
            {isMobile ? "Agendar Consulta" : "Fale com o Dr. Emilio no WhatsApp"}
          </Button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Diferenciais, Casos });