// Variation 1 — Sections: Sobre, Atuação, Consultório

// ————————————————————————————————————————————————————————————————
// SOBRE A MÉDICA
// ————————————————————————————————————————————————————————————————
const V1Sobre = () => (
  <section id="sobre" style={{
    padding: '120px 56px',
    background: '#ffffff',
    position: 'relative',
  }}>
    <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center' }}>
      <div style={{ position: 'relative' }}>
        <img src="photos/foto-branca.jpeg" alt="Dra. Lya Coelho no consultório" style={{
          width: '100%', aspectRatio: '3/4', objectFit: 'cover',
          borderRadius: '280px 280px 8px 8px',
          boxShadow: '0 30px 80px -30px rgba(52,72,70,0.35)',
        }} />
        <div style={{
          position: 'absolute', bottom: -40, right: -40,
          width: 180, height: 180, borderRadius: '50%',
          background: '#f5f1ec',
          boxShadow: '0 12px 40px -12px rgba(52,72,70,0.25)',
          display: 'grid', placeItems: 'center',
        }}>
          <img src="brand/brasao.png" alt="" style={{
            width: 150, height: 150, objectFit: 'contain',
          }} />
        </div>
      </div>

      <div>
        <div style={{ fontSize: 15, letterSpacing: '.2em', textTransform: 'uppercase', color: '#be90bf', marginBottom: 24, fontWeight: 500 }}>
          Sobre mim
        </div>

        <p style={{ fontSize: 18, lineHeight: 1.65, color: '#6b7d7b', margin: '0 0 40px', textWrap: 'pretty', maxWidth: 580 }}>
          Sou médica endocrinologista formada em medicina pela Universidade Federal do Ceará.
          Possuo residência em Clínica Médica pelo Hospital Universitário Walter Cantídio e
          realizei minha segunda residência em Endocrinologia e Metabologia pelo Hospital
          Geral de Fortaleza.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, padding: '32px 0', borderTop: '1px solid rgba(115,136,157,0.2)', borderBottom: '1px solid rgba(115,136,157,0.2)' }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#73889d', marginBottom: 6 }}>Registro profissional</div>
            <div style={{ fontFamily: '"Outfit", sans-serif', fontSize: 18, color: '#344846', fontWeight: 400 }}>{LYA_INFO.crm}</div>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#73889d', marginBottom: 6 }}>Especialidade</div>
            <div style={{ fontFamily: '"Outfit", sans-serif', fontSize: 18, color: '#344846', fontWeight: 400 }}>Endocrinologia & Metabologia</div>
          </div>
        </div>

        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {LYA_DIFFERENTIALS.map(d => (
            <div key={d.label} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: '#f5f1ec', color: '#be90bf',
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>
                <LyaIcon name="check" size={16} />
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15, color: '#344846', marginBottom: 2 }}>{d.label}</div>
                <div style={{ fontSize: 14, color: '#6b7d7b', lineHeight: 1.5 }}>{d.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ————————————————————————————————————————————————————————————————
// A CONSULTA
// ————————————————————————————————————————————————————————————————
const V1AConsulta = () => (
  <section id="a-consulta" style={{
    padding: '120px 56px',
    background: '#f5f1ec',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <img src="brand/padrao-3.png" alt="" style={{
      position: 'absolute', right: -100, bottom: -60, width: 420, opacity: 0.4, pointerEvents: 'none',
    }} />
    <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center' }}>
      <div style={{ position: 'relative' }}>
        <img src="photos/foto-consulta.jpeg" alt="Dra. Lya Coelho em consulta" style={{
          width: '100%', aspectRatio: '3/4', objectFit: 'cover',
          borderRadius: '280px 280px 8px 8px',
          boxShadow: '0 30px 80px -30px rgba(52,72,70,0.35)',
        }} />
      </div>

      <div>
        <div style={{ fontSize: 15, letterSpacing: '.2em', textTransform: 'uppercase', color: '#be90bf', marginBottom: 24, fontWeight: 500 }}>
          A consulta
        </div>

        <p style={{ fontSize: 18, lineHeight: 1.65, color: '#6b7d7b', margin: '0 0 20px', textWrap: 'pretty', maxWidth: 580 }}>
          A consulta é realizada com tempo adequado para uma avaliação cuidadosa.
        </p>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: '#6b7d7b', margin: '0 0 20px', textWrap: 'pretty', maxWidth: 580 }}>
          A partir da queixa trazida pelo paciente, conduzo a consulta mantendo sempre
          espaço aberto para que ele possa relatar outros sintomas ou incômodos que
          considere importantes. Esse momento de escuta é fundamental para uma
          compreensão mais completa do quadro.
        </p>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: '#6b7d7b', margin: '0 0 20px', textWrap: 'pretty', maxWidth: 580 }}>
          Durante a consulta, realizo medidas antropométricas e um exame físico de acordo
          com a necessidade de cada caso. Quando pertinente, também utilizo a bioimpedância
          como ferramenta complementar de avaliação.
        </p>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: '#6b7d7b', margin: '0 0 20px', textWrap: 'pretty', maxWidth: 580 }}>
          Também realizo a análise de exames prévios e, quando necessário, solicito novos
          exames para complementar a investigação e condução do caso.
        </p>
        <p style={{ fontSize: 18, lineHeight: 1.65, color: '#6b7d7b', margin: 0, textWrap: 'pretty', maxWidth: 580 }}>
          Ao final, o paciente recebe, por e-mail ou WhatsApp, um documento com o resumo
          do que foi discutido na consulta e um plano terapêutico individualizado, elaborado
          de acordo com seus objetivos e contexto clínico.
        </p>
      </div>
    </div>
  </section>
);

// ————————————————————————————————————————————————————————————————
// ÁREAS DE ATUAÇÃO
// ————————————————————————————————————————————————————————————————
const V1Atuacao = () => {
  const [active, setActive] = useState(0);
  return (
    <section id="atuacao" style={{
      padding: '120px 56px',
      background: '#f5f1ec',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <img src="brand/padrao-4.png" alt="" style={{
        position: 'absolute', left: -60, top: 40, width: 380, opacity: 0.55, pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 40 }}>
          <div>
            <div style={{ fontSize: 15, letterSpacing: '.2em', textTransform: 'uppercase', color: '#be90bf', marginBottom: 20, fontWeight: 500 }}>
              Áreas de atuação
            </div>
            <h2 style={{
              fontFamily: '"Outfit", sans-serif',
              fontSize: 'clamp(36px, 3.5vw, 56px)',
              lineHeight: 1.05, letterSpacing: '-0.02em',
              fontWeight: 300, margin: 0, color: '#344846',
              maxWidth: 640,
            }}>
              O que cuido no <span style={{ fontStyle: 'italic', color: '#73889d' }}>consultório.</span>
            </h2>
          </div>

        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {LYA_AREAS.map((a, i) => {
            const isActive = active === i;
            return (
              <div
                key={a.title}
                onMouseEnter={() => setActive(i)}
                style={{
                  padding: '32px 26px',
                  background: isActive ? '#344846' : '#ffffff',
                  color: isActive ? '#f5f1ec' : '#344846',
                  borderRadius: 4,
                  cursor: 'default',
                  transition: 'background .3s ease, transform .3s ease',
                  transform: isActive ? 'translateY(-4px)' : 'none',
                  display: 'flex', flexDirection: 'column',
                  minHeight: 220,
                  position: 'relative', overflow: 'hidden',
                }}
              >
                <div style={{
                  color: isActive ? '#be90bf' : '#73889d',
                  marginBottom: 20,
                }}>
                  <LyaIcon name={AREA_ICONS[a.title]} size={28} />
                </div>
                <div style={{
                  fontFamily: '"Outfit", sans-serif',
                  fontSize: 20, fontWeight: 400, marginBottom: 10,
                  letterSpacing: '-0.01em',
                }}>
                  {a.title}
                </div>
                <div style={{ fontSize: 13.5, lineHeight: 1.55, color: isActive ? 'rgba(245,241,236,0.8)' : '#6b7d7b' }}>
                  {a.desc}
                </div>
                <div style={{
                  position: 'absolute', bottom: 20, right: 20,
                  fontSize: 11, letterSpacing: '.18em',
                  color: isActive ? 'rgba(245,241,236,0.5)' : 'rgba(115,136,157,0.4)',
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ————————————————————————————————————————————————————————————————
// CONSULTÓRIO
// ————————————————————————————————————————————————————————————————
const V1Consultorio = () => (
  <section id="consultorio" style={{
    padding: '120px 56px',
    background: '#ffffff',
  }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div style={{ fontSize: 17.5, letterSpacing: '.2em', textTransform: 'uppercase', color: '#be90bf', marginBottom: 20, fontWeight: 500 }}>
          Locais de atendimento
        </div>
        <h2 style={{
          fontFamily: '"Outfit", sans-serif',
          fontSize: 'clamp(48px, 4.5vw, 72px)',
          lineHeight: 1.05, letterSpacing: '-0.02em',
          fontWeight: 300, margin: 0, color: '#344846',
        }}>
          Onde você pode me <span style={{ fontStyle: 'italic', color: '#73889d' }}>encontrar.</span>
        </h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28, alignItems: 'stretch' }}>
        {/* Clínica FFAZ — principal */}
        <LocalCard
          title="Clínica FFAZ"
          address="Rua Monsenhor Bruno, 1906"
          district="Aldeota · Fortaleza, CE"
          phone="(85) 9 8616-1228"
          phoneLink="5585986161228"
          icon="pin"
          accent="#be90bf"
          mapQuery="Rua Monsenhor Bruno, 1906, Aldeota, Fortaleza, CE"
          fullWidth
        />

        {/* Outros locais de atendimento */}
        <LocalCard
          title="Clínica Dr Erik Nery"
          address="Rua Lígia Monte, 220"
          district="Cocó · Fortaleza, CE"
          phone="(85) 9 9279-5532"
          phoneLink="5585992795532"
          icon="stethoscope"
          accent="#73889d"
          mapQuery="Rua Lígia Monte, 220, Cocó, Fortaleza, CE"
          fullWidth
        />
        <LocalCard
          title="Prontomed Quixeramobim"
          address="Rua da Cruz, 253"
          district="Quixeramobim, CE"
          phone="(88) 3441-0511"
          phoneLink="558834410511"
          icon="pin"
          accent="#be90bf"
          mapQuery="Rua da Cruz, 253, Quixeramobim, CE"
          fullWidth
        />
        <LocalCard
          title="Telemedicina"
          address="Atendimento online"
          district="Todo o Brasil"
          phone="(85) 9 9236-7720"
          phoneLink="558592367720"
          icon="sparkle"
          accent="#344846"
          fullWidth
        />
      </div>
    </div>
  </section>
);

const InfoRow = ({ icon, label, value }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
    <div style={{
      width: 38, height: 38, borderRadius: '50%',
      background: '#ffffff', color: '#73889d',
      display: 'grid', placeItems: 'center', flexShrink: 0,
    }}>
      <LyaIcon name={icon} size={16} />
    </div>
    <div>
      <div style={{ fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', color: '#73889d', marginBottom: 2 }}>{label}</div>
      <div style={{ fontSize: 15, color: '#344846', fontWeight: 500 }}>{value}</div>
    </div>
  </div>
);

const LocalCard = ({ title, address, district, phone, phoneLink, icon, accent, fullWidth, mapQuery }) => {
  const hasMap = !!mapQuery;
  return (
    <div style={{
      borderRadius: 6, overflow: 'hidden',
      background: '#f5f1ec',
      border: '1px solid rgba(115,136,157,0.15)',
      gridColumn: fullWidth ? 'span 2' : 'auto',
      display: hasMap ? 'grid' : 'flex',
      flexDirection: hasMap ? undefined : 'column',
      gridTemplateColumns: hasMap ? '1fr 1fr' : undefined,
      minHeight: hasMap ? 360 : undefined,
    }}>
      {hasMap && (
        <div style={{ position: 'relative', minHeight: 360 }}>
          <iframe
            title={`Mapa ${title}`}
            src={`https://www.google.com/maps?q=${encodeURIComponent(mapQuery)}&hl=pt-BR&output=embed`}
            style={{
              width: '100%', height: '100%', minHeight: 360,
              border: 0, position: 'absolute', inset: 0,
              filter: 'saturate(0.85) contrast(0.95)',
            }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
        </div>
      )}
      <div style={{
        padding: '40px 36px',
        display: 'flex', flexDirection: 'column', gap: 20,
        position: 'relative',
        background: '#f5f1ec',
      }}>
        <div style={{
          position: 'absolute', top: 28, right: 28,
          width: 48, height: 48, borderRadius: '50%',
          background: '#be90bf', color: '#fff',
          display: 'grid', placeItems: 'center',
        }}>
          <LyaIcon name={icon} size={22} />
        </div>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: '#be90bf', marginBottom: 10, fontWeight: 600 }}>
            Local
          </div>
          <div style={{ fontFamily: '"Outfit", sans-serif', fontSize: 24, lineHeight: 1.25, color: '#344846', fontWeight: 400, marginBottom: 8, maxWidth: '80%' }}>
            {title}
          </div>
          <div style={{ fontSize: 15, color: '#344846', marginBottom: 2 }}>{address}</div>
          <div style={{ fontSize: 14, color: '#6b7d7b' }}>{district}</div>
        </div>
        <div style={{ height: 1, background: 'rgba(115,136,157,0.2)' }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginTop: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <LyaIcon name="phone" size={16} stroke="#be90bf" />
            <span style={{ fontSize: 15, color: '#344846', fontWeight: 500 }}>{phone}</span>
          </div>
          <a href={`https://wa.me/${phoneLink}?text=${LYA_INFO.whatsappMessage}`} target="_blank" rel="noreferrer"
            style={{
              padding: '10px 18px',
              background: 'transparent', color: '#be90bf',
              borderRadius: 999, fontSize: 13, fontWeight: 500,
              textDecoration: 'none',
              border: '1px solid #be90bf',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}
          >
            <LyaIcon name="whatsapp" size={14} />
            Agendar
          </a>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { V1Sobre, V1AConsulta, V1Atuacao, V1Consultorio, InfoRow, LocalCard });