/* eslint-disable */
// Sections-3.jsx — Sobre o Dr., FAQ, Footer, WhatsApp FAB (mobile-first)

/* ─── SOBRE O DR. ─── */
const sobreCredenciais = [
{ title: "Cirurgia Plástica", sub: "Residência médica em Cirurgia Plástica" },
{ title: "Mastologia Oncológica", sub: "Residência médica em Mastologia" },
{ title: "Aperfeiçoamento", sub: "Hospital Israelita Albert Einstein" },
{ title: "Membro da SBCP", sub: "Sociedade Brasileira de Cirurgia Plástica" }];


const Sobre = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  const [idx, setIdx] = useState(0);
  const photos = [
  "assets/dr-emilio-about-1.png",
  "assets/dr-emilio-about-2.png",
  "assets/dr-emilio-hero.png"];

  return (
    <section data-screen-label="05 Sobre" style={{
      background: "#fff",
      padding: isMobile ? "64px 20px" : "96px 32px"
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        display: "flex",
        flexDirection: isMobile ? "column" : "row",
        gap: isMobile ? 32 : 56
      }}>
        {/* photo carousel */}
        <div style={{ width: isMobile ? "100%" : 480, flexShrink: 0 }}>
          <div style={{
            position: "relative",
            width: "100%",
            height: isMobile ? 440 : 600,
            borderRadius: 16,
            overflow: "hidden",
            boxShadow: "0 16px 32px -12px rgba(60, 40, 10, 0.18)"
          }}>
            <div style={{
              width: "100%", height: "100%",
              backgroundImage: `url(${photos[idx]})`,
              backgroundSize: "cover", backgroundPosition: "center top",
              transition: "background-image 400ms var(--ease)"
            }} />
            <button
              onClick={() => setIdx((idx - 1 + photos.length) % photos.length)}
              aria-label="Foto anterior"
              style={{
                position: "absolute", top: "50%", left: 14, transform: "translateY(-50%)",
                width: 38, height: 38, borderRadius: 9999,
                background: "rgba(255,255,255,0.92)",
                border: 0, cursor: "pointer",
                boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
              <IconChevronLeft size={16} />
            </button>
            <button
              onClick={() => setIdx((idx + 1) % photos.length)}
              aria-label="Próxima foto"
              style={{
                position: "absolute", top: "50%", right: 14, transform: "translateY(-50%)",
                width: 38, height: 38, borderRadius: 9999,
                background: "rgba(255,255,255,0.92)",
                border: 0, cursor: "pointer",
                boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
              <IconChevronRight size={16} />
            </button>
            <div style={{
              position: "absolute", bottom: 18, left: 0, right: 0,
              display: "flex", justifyContent: "center", gap: 8
            }}>
              {photos.map((_, i) =>
              <button key={i} onClick={() => setIdx(i)} aria-label={`Foto ${i + 1}`} style={{
                width: i === idx ? 24 : 8, height: 8, borderRadius: 9999,
                background: i === idx ? "var(--gold)" : "rgba(255,255,255,0.7)",
                border: 0, cursor: "pointer",
                transition: "width 200ms var(--ease)"
              }} />
              )}
            </div>
          </div>
        </div>

        {/* RIGHT — text */}
        <div style={{ flex: 1, paddingTop: isMobile ? 0 : 8 }}>
          <Eyebrow color="var(--ink-soft)" letterSpacing="0.18em">Sobre o Dr.</Eyebrow>
          <h2 style={{
            font: `400 ${isMobile ? 34 : 42}px/118% var(--font-serif)`,
            fontVariantCaps: "small-caps",
            letterSpacing: "0.01em",
            color: "var(--ink)",
            margin: "16px 0 24px"
          }}>
            <span style={{ fontStyle: "italic", color: "var(--gold-hover)" }}>Dr. Emilio Rengel</span>
          </h2>

          <div style={{
            borderLeft: "3px solid var(--gold)",
            paddingLeft: isMobile ? 20 : 24,
            margin: "0 0 28px"
          }}>
            <p style={{
              font: `400 ${isMobile ? 18 : 22}px/138% var(--font-serif)`,
              fontStyle: "italic",
              color: "var(--ink-strong)",
              margin: 0,
              textWrap: "pretty"
            }}>
              "Cada corpo tem uma proporção que faz sentido para quem o habita. Meu trabalho é encontrar a sua."
            </p>
          </div>

          <p style={{
            font: `400 ${isMobile ? 14 : 15}px/170% var(--font-sans)`,
            color: "var(--ink-body)",
            margin: "0 0 28px",
            padding: "16px 0",
            borderTop: "1px solid var(--border-card)",
            borderBottom: "1px solid var(--border-card)"
          }}>
            <strong style={{ color: "var(--ink)", fontWeight: 600 }}>35 anos operando.</strong>{" "}
            <strong style={{ color: "var(--ink)", fontWeight: 600 }}>Mais de 50.000 cirurgias realizadas.</strong>{" "}
            E o mesmo cuidado desde a primeira consulta até o último retorno.
          </p>

          <p style={{ font: `400 ${isMobile ? 14 : 15}px/170% var(--font-sans)`, color: "var(--ink-body)", margin: "0 0 18px" }}>
            O Dr. Emilio Rengel é cirurgião plástico e mastologista formado e especializado, com residência médica em Cirurgia Plástica e em Mastologia Oncológica, e aperfeiçoamento em centros de referência como o Hospital Israelita Albert Einstein.
          </p>
          <p style={{ font: `400 ${isMobile ? 14 : 15}px/170% var(--font-sans)`, color: "var(--ink-body)", margin: "0 0 32px" }}>
            Cada cirurgia é planejada do início ao fim com atenção ao que você quer, ao que é possível para o seu caso e ao que vai fazer sentido para a sua vida. Não existe resultado padrão aqui — existe o resultado certo para você.
          </p>

          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)",
            gap: isMobile ? "14px" : "14px 32px",
            marginBottom: 32
          }}>
            {sobreCredenciais.map((c, i) =>
            <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <IconCheck stroke="#C5973B" size={20} />
                <div>
                  <p style={{ font: "600 14px/1.4 var(--font-sans)", color: "var(--ink)", margin: 0 }}>{c.title}</p>
                  <p style={{ font: "400 13px/1.4 var(--font-sans)", color: "var(--ink-mute)", margin: "2px 0 0" }}>{c.sub}</p>
                </div>
              </div>
            )}
          </div>

          <div style={{ borderTop: "1px solid var(--border-card)", paddingTop: 24, marginBottom: 32 }}>
            <p style={{
              font: "600 11px/1.5 var(--font-sans)",
              color: "var(--ink-soft)",
              textTransform: "uppercase",
              letterSpacing: "0.18em",
              margin: "0 0 16px"
            }}>MEMBRO</p>
            <div style={{ display: "flex", alignItems: "center", gap: isMobile ? 20 : 40, flexWrap: "wrap" }}>
              <img
                src="assets/logo-sbcp.png"
                alt="Sociedade Brasileira de Cirurgia Plástica"
                style={{
                  height: isMobile ? 52 : 64,
                  width: "auto",
                  objectFit: "contain",
                }}
              />
            </div>
          </div>

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

};

/* ─── FAQ ─── */
const faqData = [
{
  q: "A prótese de silicone é segura? Pode causar doenças?",
  a: "Sim, é segura. As próteses utilizadas pelo Dr. Emilio são certificadas e aprovadas pela Anvisa. Décadas de estudos clínicos não estabeleceram relação causal entre próteses de silicone e doenças sistêmicas. Na consulta, o Dr. Emilio apresenta todas as informações sobre os materiais utilizados e esclarece qualquer dúvida com base em evidências."
},
{
  q: "Quanto tempo dura a prótese? Precisa trocar?",
  a: "As próteses modernas não têm prazo de validade fixo. Não existe uma regra de \"trocar a cada 10 anos\" — isso é um mito comum. A troca é indicada apenas se houver alguma intercorrência, como ruptura, ou se a paciente desejar uma mudança. O acompanhamento periódico com o cirurgião é suficiente para monitorar a integridade da prótese."
},
{
  q: "O resultado vai parecer natural?",
  a: "Depende diretamente da escolha da prótese e do planejamento cirúrgico. O Dr. Emilio avalia as proporções individuais de cada paciente — estrutura corporal, largura do tórax, volume atual — para indicar o tipo e tamanho mais adequados. O objetivo é um resultado que pareça parte do corpo, não uma adição evidente."
},
{
  q: "A cicatriz fica visível?",
  a: "A incisão é feita em regiões estratégicas — geralmente na dobra abaixo da mama — para que a cicatriz fique discreta e encoberta. Com o tempo e os cuidados adequados, ela tende a clarear significativamente. A maioria das pacientes fica satisfeita com a discrição da cicatriz já nos primeiros meses."
},
{
  q: "Tem parcelamento? Como funciona?",
  a: "Sim. O consultório oferece o Plano Programado, uma forma de parcelamento direto em até 30 vezes, sem envolver banco ou financeira. A paciente paga as parcelas mensalmente e, ao concluir, agenda a cirurgia. É uma forma de se planejar com disciplina e realizar a cirurgia sem comprometer o orçamento de uma só vez. Além disso, há a opção de parcelamento em 20x no cartão de crédito."
}];


const FAQ = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  const [open, setOpen] = useState(0);
  return (
    <section data-screen-label="06 FAQ" style={{
      background: "var(--bg-cream)",
      padding: isMobile ? "64px 20px" : "96px 32px"
    }}>
      <div style={{
        maxWidth: 1152, margin: "0 auto",
        display: "flex",
        flexDirection: isMobile ? "column" : "row",
        gap: isMobile ? 32 : 56
      }}>
        <div style={{ width: isMobile ? "100%" : "42%", position: "relative" }}>
          {!isMobile &&
          <span style={{
            position: "absolute", top: -16, left: -10,
            font: "700 180px/1 var(--font-serif)",
            color: "rgba(184,134,11,0.05)",
            letterSpacing: "-0.02em",
            pointerEvents: "none", userSelect: "none"
          }}>FAQ</span>
          }
          <div style={{ position: "relative", paddingTop: isMobile ? 0 : 64 }}>
            <Eyebrow color="var(--ink-soft)" letterSpacing="0.18em">Perguntas Frequentes</Eyebrow>
            <h2 style={{
              font: `400 ${isMobile ? 32 : 42}px/118% var(--font-serif)`,
              fontVariantCaps: "small-caps",
              letterSpacing: "0.01em",
              margin: "16px 0 16px"
            }}>
              <span style={{ fontStyle: "italic", color: "var(--ink)", display: "block" }}>Tire suas dúvidas sobre</span>
              <span style={{ color: "var(--gold-hover)" }}>implante de silicone</span>
            </h2>
            <p style={{
              font: `400 ${isMobile ? 15 : 16}px/1.625 var(--font-sans)`,
              color: "var(--ink-body)", margin: 0, maxWidth: 420
            }}>
              Reunimos as perguntas mais comuns sobre a cirurgia, a recuperação e o atendimento com o Dr. Emilio. Qualquer outra dúvida, fale com a equipe pelo WhatsApp.
            </p>
            {!isMobile &&
            <div style={{ marginTop: 28 }}>
                <Button href={WA}>
                  <IconWhatsAppOutline size={20} />
                  Agendar Consulta
                </Button>
              </div>
            }
          </div>
        </div>
        <div style={{ width: isMobile ? "100%" : "58%" }}>
          <div style={{ borderTop: "1px solid var(--border-divider)" }}>
            {faqData.map((item, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: "1px solid var(--border-divider)" }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", background: "none", border: 0,
                      padding: isMobile ? "18px 0" : "22px 4px",
                      display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                      cursor: "pointer", textAlign: "left",
                      font: isOpen ? "600 15px/1.4 var(--font-sans)" : "500 15px/1.4 var(--font-sans)",
                      color: isOpen ? "var(--gold-hover)" : "var(--ink)",
                      transition: "color 200ms var(--ease)"
                    }}>
                    <span>{item.q}</span>
                    <span style={{
                      transform: isOpen ? "rotate(180deg)" : "none",
                      transition: "transform 300ms var(--ease)",
                      color: "var(--gold-hover)",
                      flexShrink: 0
                    }}>
                      <IconChevronDown size={18} />
                    </span>
                  </button>
                  {isOpen &&
                  <div style={{ padding: isMobile ? "0 0 20px" : "0 4px 24px" }}>
                      <p style={{ font: "400 14px/1.7 var(--font-sans)", color: "var(--ink-body)", margin: 0 }}>{item.a}</p>
                    </div>
                  }
                </div>);

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

};

/* ─── FOOTER ─── */
const Footer = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  return (
    <footer data-screen-label="07 Footer">
      <div style={{ background: "var(--bg-dark)" }}>
        <div style={{
          maxWidth: 1280, margin: "0 auto",
          padding: isMobile ? "48px 20px" : "72px 32px",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1.2fr 1fr",
          gap: isMobile ? 36 : 56
        }}>
          <div>
            <Monogram initials="ER" size={isMobile ? 48 : 56} fontSize={isMobile ? 19 : 22} />
            <p style={{
              font: `600 ${isMobile ? 15 : 16}px/1.4 var(--font-sans)`,
              color: "#fff", letterSpacing: "0.04em",
              margin: "16px 0 4px"
            }}>
              Dr. Emilio Rengel
            </p>
            <p style={{
              font: "400 10px/1.5 var(--font-sans)", color: "var(--ink-faint)",
              textTransform: "uppercase", letterSpacing: "0.2em", margin: "0 0 14px"
            }}>
              Cirurgião Plástico · Mastologista
            </p>
            <p style={{ font: "400 13px/1.6 var(--font-sans)", color: "var(--ink-on-dark)", margin: 0 }}>
              CRM-SP 82.963
            </p>
            <p style={{ font: "400 13px/1.6 var(--font-sans)", color: "var(--ink-on-dark)", margin: "8px 0 0", maxWidth: 280 }}>
              Atendimento particular em consultório de cirurgia plástica em São Paulo.
            </p>
          </div>

          <div>
            <h3 style={{
              font: "600 16px/1.5 var(--font-serif)",
              fontVariantCaps: "small-caps",
              color: "#fff", margin: "0 0 18px"
            }}>Cirurgia Plástica · São Paulo</h3>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {[
              { icon: <IconUser />, text: "Dr. Emilio Rengel — Cirurgião Plástico", href: null },
              { icon: <IconPin />, text: CONTACT.address, href: null },
              { icon: <span style={{ color: "var(--gold)", display: "inline-flex" }}><IconWhatsAppFilled size={18} /></span>, text: CONTACT.whatsappDisplay, href: WA },
              { icon: <IconInstagram />, text: CONTACT.instagramHandle, href: CONTACT.instagramUrl }].
              map((item, i) =>
              <li key={i} style={{
                display: "flex", alignItems: "flex-start", gap: 10,
                font: "400 13px/1.6 var(--font-sans)", color: "var(--ink-on-dark)"
              }}>
                  <span style={{ display: "inline-flex", paddingTop: 2 }}>{item.icon}</span>
                  {item.href
                    ? <a href={item.href} target="_blank" rel="noopener noreferrer" style={{ color: "var(--ink-on-dark)", textDecoration: "none" }}>{item.text}</a>
                    : <span>{item.text}</span>}
                </li>
              )}
            </ul>
          </div>

          <div>
            <h3 style={{
              font: "600 16px/1.5 var(--font-serif)",
              fontVariantCaps: "small-caps",
              color: "#fff", margin: "0 0 18px"
            }}>Localização</h3>
            <div style={{
              width: "100%",
              height: isMobile ? 200 : 260,
              borderRadius: 12,
              overflow: "hidden",
              border: "1px solid rgba(197,151,59,0.25)",
              boxShadow: "0 8px 20px -8px rgba(0,0,0,0.5)",
            }}>
              <iframe
                title="Localização — Rua Pedro de Toledo, 129"
                src="https://www.google.com/maps?q=Rua+Pedro+de+Toledo+129+Vila+Clementino+S%C3%A3o+Paulo&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0, display: "block", filter: "grayscale(0.15) contrast(1.05)" }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
            </div>
          </div>
        </div>
      </div>
      <div style={{ background: "var(--bg-darker)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "18px 32px" }}>
          <p style={{
            font: "400 11px/1.5 var(--font-sans)",
            color: "var(--ink-soft)", textAlign: "center", margin: 0,
            letterSpacing: "0.04em"
          }}>
            Dr. Emilio Rengel — Copyright © 2026.
          </p>
        </div>
      </div>
    </footer>);

};

/* ─── FLOATING WHATSAPP ─── */
const WhatsAppFab = () => {
  const isMobile = useMediaQuery('(max-width: 820px)');
  return (
    <a
      href={WA}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="WhatsApp Dr. Emilio"
      style={{
        position: "fixed",
        bottom: isMobile ? 40 : 28, right: isMobile ? 18 : 28,
        width: isMobile ? 56 : 62,
        height: isMobile ? 56 : 62,
        borderRadius: 9999,
        background: "var(--whatsapp)", color: "#fff",
        display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "0 6px 20px rgba(37, 211, 102, 0.42)",
        zIndex: 100, textDecoration: "none",
        transition: "transform 200ms var(--ease)"
      }}>
      <IconWhatsAppFilled size={isMobile ? 28 : 32} />
    </a>);

};

Object.assign(window, { Sobre, FAQ, Footer, WhatsAppFab });