// Variation 1 — Editorial Bege
// Sophisticated, feminine, calm. Beige background, lilac as hero accent.

const { useState, useEffect, useRef } = React;

const v1Styles = {
  wrap: {
    width: '100%',
    paddingTop: 86,
    background: '#f5f1ec',
    color: '#344846',
    fontFamily: '"Inter", system-ui, sans-serif',
    fontSize: '16px',
    lineHeight: 1.55,
    WebkitFontSmoothing: 'antialiased',
  },
};

// ————————————————————————————————————————————————————————————————
// NAV
// ————————————————————————————————————————————————————————————————
const V1Nav = () => {
  const link = { color: '#344846', textDecoration: 'none', fontSize: 12, letterSpacing: '.02em', fontWeight: 450 };
  const dot = { color: 'rgba(115,136,157,0.5)', fontSize: 12, userSelect: 'none' };
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 40,
      padding: '12px 56px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'rgba(245,241,236,0.94)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid rgba(115,136,157,0.15)',
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
        <img src="brand/logo-t2-h-tight.png" alt="Lya Coelho" style={{ height: 42 }} />
      </a>
      <nav style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        <a href="#sobre" style={link}>Sobre</a>
        <span style={dot}>·</span>
        <a href="#a-consulta" style={link}>A consulta</a>
        <span style={dot}>·</span>
        <a href="#atuacao" style={link}>Áreas de atuação</a>
        <span style={dot}>·</span>
        <a href="#consultorio" style={link}>Consultório</a>
        <span style={dot}>·</span>
        <a href="#depoimentos" style={link}>Depoimentos</a>
        <span style={dot}>·</span>
        <a href="#contato" style={link}>Contato</a>
        <a href={`https://wa.me/${LYA_INFO.phoneLink}?text=${LYA_INFO.whatsappMessage}`} target="_blank" rel="noreferrer"
          style={{
            marginLeft: 18,
            padding: '10px 18px',
            background: '#73889d', color: '#fff',
            borderRadius: 999, fontSize: 13, letterSpacing: '.04em',
            textDecoration: 'none', fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'background .2s',
          }}
          onMouseEnter={e => e.currentTarget.style.background = '#5d7286'}
          onMouseLeave={e => e.currentTarget.style.background = '#73889d'}
        >
          Agendar consulta
          <LyaIcon name="arrow" size={14} />
        </a>
      </nav>
    </div>
  );
};

// ————————————————————————————————————————————————————————————————
// HERO — editorial, photograph + calm lilac monogram
// ————————————————————————————————————————————————————————————————
const V1Hero = () => (
  <section id="top" style={{
    padding: '32px 56px 100px',
    display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 72, alignItems: 'center',
    position: 'relative', overflow: 'hidden',
  }}>
    {/* Background brand pattern — very subtle */}
    <img src="brand/padrao-3.png" alt="" style={{
      position: 'absolute', right: -120, top: 40, width: 520, opacity: 0.5, zIndex: 0, pointerEvents: 'none',
    }} />

    <div style={{ position: 'relative', zIndex: 2 }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '6px 14px', border: '1px solid rgba(115,136,157,0.3)',
        borderRadius: 999, fontSize: 12, letterSpacing: '.14em',
        textTransform: 'uppercase', color: '#73889d', marginBottom: 32,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#be90bf' }} />
        Endocrinologista em Fortaleza
      </div>

      <h1 style={{
        fontFamily: '"Outfit", sans-serif',
        fontSize: 'clamp(48px, 5.5vw, 84px)',
        lineHeight: 0.98, letterSpacing: '-0.025em',
        fontWeight: 300, margin: 0, color: '#344846',
      }}>
        Cuidado hormonal <br />
        <span style={{ fontStyle: 'italic', fontWeight: 300, color: '#be90bf' }}>com evidência</span>
        {' '}e ciência.
      </h1>

      <p style={{
        marginTop: 32, fontSize: 19, lineHeight: 1.55,
        color: '#6b7d7b', maxWidth: 520, textWrap: 'pretty',
      }}>
        Prazer, sou <b style={{ color: '#344846', fontWeight: 600 }}>Dra. Lya Coelho</b>,
        médica endocrinologista. A endocrinologia, para mim, não se resume ao tratamento
        de um diagnóstico isolado.
      </p>
      <p style={{
        marginTop: 18, fontSize: 19, lineHeight: 1.55,
        color: '#6b7d7b', maxWidth: 520, textWrap: 'pretty',
      }}>
        Procuro conduzir as consultas com atenção à história de cada paciente, considerando
        não apenas os exames, mas também o contexto de vida, hábitos e possíveis fatores
        associados às queixas apresentadas. A escuta cuidadosa e o olhar mais amplo fazem
        parte do meu modo de trabalhar.
      </p>

      <div style={{ marginTop: 40, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
        <a href={`https://wa.me/${LYA_INFO.phoneLink}?text=${LYA_INFO.whatsappMessage}`} target="_blank" rel="noreferrer"
          style={{
            padding: '16px 28px',
            background: '#344846', color: '#fff',
            borderRadius: 999, fontSize: 15, letterSpacing: '.02em',
            textDecoration: 'none', fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 12,
            transition: 'transform .2s, background .2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.background = '#73889d'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.background = '#344846'; }}
        >
          <LyaIcon name="whatsapp" size={18} />
          Agendar pelo WhatsApp
        </a>
        <a href="#atuacao" style={{
          padding: '16px 4px', color: '#344846', fontSize: 15, fontWeight: 450,
          textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10,
          borderBottom: '1px solid rgba(52,72,70,0.2)',
        }}>
          Conheça as áreas de atuação
          <LyaIcon name="arrow" size={14} />
        </a>
      </div>

      <div style={{ marginTop: 56, display: 'flex', gap: 40, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: '"Outfit", sans-serif', fontSize: 32, fontWeight: 300, color: '#344846' }}>22811</div>
          <div style={{ fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: '#73889d' }}>CRM-CE</div>
        </div>
        <div style={{ width: 1, height: 36, background: 'rgba(115,136,157,0.3)' }} />
        <div>
          <div style={{ fontFamily: '"Outfit", sans-serif', fontSize: 32, fontWeight: 300, color: '#344846' }}>16066</div>
          <div style={{ fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: '#73889d' }}>RQE</div>
        </div>
        <div style={{ width: 1, height: 36, background: 'rgba(115,136,157,0.3)' }} />
        <div>
          <div style={{ fontFamily: '"Outfit", sans-serif', fontSize: 32, fontWeight: 300, color: '#344846' }}>19302</div>
          <div style={{ fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: '#73889d' }}>RQE</div>
        </div>
      </div>
    </div>

    {/* Photo with brand frame */}
    <div style={{ position: 'relative', zIndex: 1 }}>
      <div style={{
        position: 'absolute', inset: -5,
        background: '#be90bf', borderRadius: '300px 300px 12px 12px',
        opacity: 0.95,
      }} />
      <img src="photos/foto-laranja.jpeg" alt="Dra. Lya Coelho" style={{
        position: 'relative', width: '100%', aspectRatio: '3/4', objectFit: 'cover',
        borderRadius: '280px 280px 8px 8px',
        boxShadow: '0 30px 80px -30px rgba(52,72,70,0.35)',
      }} />
    </div>
  </section>
);

window.V1Nav = V1Nav;
window.V1Hero = V1Hero;