// V1 — Depoimentos, Instagram, Contato/Footer

const DOCTORALIA_REVIEWS = [
  { src: 'uploads/depo1_anon.png', alt: 'Depoimento de paciente — Doctoralia' },
  { src: 'uploads/depo2_anon.png', alt: 'Depoimento de paciente — Doctoralia' },
  { src: 'uploads/depo3_anon.png', alt: 'Depoimento de paciente — Doctoralia' },
  { src: 'uploads/depo4_anon.png', alt: 'Depoimento de paciente — Doctoralia' },
];

const V1Depoimentos = () => {
  // Two-up carousel: pages of 2 cards each
  const PER_PAGE = 2;
  const pages = Math.ceil(DOCTORALIA_REVIEWS.length / PER_PAGE);
  const [page, setPage] = useState(0);
  const visible = DOCTORALIA_REVIEWS.slice(page * PER_PAGE, page * PER_PAGE + PER_PAGE);

  return (
    <section id="depoimentos" style={{
      padding: '120px 56px',
      background: '#344846',
      color: '#f5f1ec',
      position: 'relative', overflow: 'hidden',
    }}>
      <img src="brand/padrao-2.png" alt="" style={{
        position: 'absolute', right: -80, top: -40, width: 500, opacity: 0.1, pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ fontSize: 15, letterSpacing: '.2em', textTransform: 'uppercase', color: '#be90bf', marginBottom: 24, fontWeight: 500, textAlign: 'center' }}>
          Depoimentos
        </div>
        <h2 style={{
          fontFamily: '"Outfit", sans-serif',
          fontSize: 'clamp(32px, 3vw, 48px)',
          lineHeight: 1.1, letterSpacing: '-0.02em',
          fontWeight: 300, margin: '0 0 16px', textAlign: 'center',
        }}>
          O que pacientes <span style={{ fontStyle: 'italic', color: '#be90bf' }}>contam.</span>
        </h2>

        {/* Doctoralia rating badge */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          marginBottom: 56,
        }}>
          <div style={{ display: 'flex', gap: 2, color: '#00a99d' }}>
            {[0,1,2,3,4].map(i => (
              <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
              </svg>
            ))}
          </div>
          <span style={{ fontSize: 13, color: 'rgba(245,241,236,0.75)', letterSpacing: '.06em' }}>
            Avaliação Doctoralia · <strong style={{ color: '#f5f1ec' }}>5,0</strong>
          </span>
        </div>

        {/* Two-up carousel */}
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 20 }}>
          <button
            onClick={() => setPage((page - 1 + pages) % pages)}
            aria-label="Anterior"
            style={{
              flexShrink: 0, width: 44, height: 44, borderRadius: '50%',
              background: 'rgba(245,241,236,0.08)', color: '#f5f1ec',
              border: '1px solid rgba(245,241,236,0.2)', cursor: 'pointer',
              display: 'grid', placeItems: 'center', transition: 'background .2s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(190,144,191,0.25)'}
            onMouseLeave={e => e.currentTarget.style.background = 'rgba(245,241,236,0.08)'}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
          </button>

          <div style={{
            flex: 1,
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24,
            alignItems: 'start',
          }}>
            {visible.map((r, i) => (
              <div key={page + '-' + i} style={{
                background: '#f5f1ec',
                borderRadius: 8,
                padding: 18,
                boxShadow: '0 12px 32px -12px rgba(0,0,0,0.35)',
                border: '1px solid rgba(245,241,236,0.08)',
                animation: 'fadeInDepo .4s ease',
              }}>
                <img src={r.src} alt={r.alt} style={{
                  width: '100%', height: 'auto', display: 'block',
                  borderRadius: 4,
                }} />
              </div>
            ))}
          </div>

          <button
            onClick={() => setPage((page + 1) % pages)}
            aria-label="Próximo"
            style={{
              flexShrink: 0, width: 44, height: 44, borderRadius: '50%',
              background: 'rgba(245,241,236,0.08)', color: '#f5f1ec',
              border: '1px solid rgba(245,241,236,0.2)', cursor: 'pointer',
              display: 'grid', placeItems: 'center', transition: 'background .2s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(190,144,191,0.25)'}
            onMouseLeave={e => e.currentTarget.style.background = 'rgba(245,241,236,0.08)'}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
          </button>
        </div>

        {/* Page dots */}
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center', gap: 10 }}>
          {Array.from({ length: pages }).map((_, i) => (
            <button key={i} onClick={() => setPage(i)} aria-label={`Página ${i + 1}`} style={{
              width: page === i ? 36 : 10, height: 10,
              borderRadius: 999, border: 'none',
              background: page === i ? '#be90bf' : 'rgba(245,241,236,0.25)',
              cursor: 'pointer', transition: 'width .3s, background .3s', padding: 0,
            }} />
          ))}
        </div>

        {/* Link to Doctoralia */}
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="https://www.doctoralia.com.br/lya-coelho/endocrinologista-endocrinologia-pediatrica/fortaleza"
            target="_blank" rel="noreferrer"
            style={{
              fontSize: 13, color: 'rgba(245,241,236,0.6)',
              textDecoration: 'none', letterSpacing: '.05em',
              borderBottom: '1px solid rgba(245,241,236,0.25)', paddingBottom: 2,
            }}
          >
            Ver todas as avaliações no Doctoralia →
          </a>
        </div>
      </div>

      <style>{`
        @keyframes fadeInDepo {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: none; }
        }
      `}</style>
    </section>
  );
};

const V1Footer = () => (
  <footer id="contato" style={{
    padding: '100px 56px 48px',
    background: '#e8e3df',
    color: '#344846',
    position: 'relative', overflow: 'hidden',
  }}>
    <img src="brand/padrao-3.png" alt="" style={{
      position: 'absolute', right: -80, bottom: -40, width: 440, opacity: 0.5, pointerEvents: 'none',
    }} />
    <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 64, borderBottom: '1px solid rgba(115,136,157,0.25)' }}>
        <div>
          <img src="brand/logo-t2-v-1.png" alt="Lya Coelho" style={{ height: 200, marginBottom: 20, marginLeft: -20 }} />
        </div>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#73889d', marginBottom: 16 }}>Atendimento</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ fontSize: 14, lineHeight: 1.5 }}>
              <div style={{ color: '#344846', fontWeight: 500 }}>Clínica FFAZ</div>
              <div style={{ color: '#6b7d7b' }}>R. Monsenhor Bruno, 1906 · Aldeota</div>
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.5 }}>
              <div style={{ color: '#344846', fontWeight: 500 }}>Clínica Dr Erik Nery</div>
              <div style={{ color: '#6b7d7b' }}>R. Lígia Monte, 220 · Cocó</div>
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.5 }}>
              <div style={{ color: '#344846', fontWeight: 500 }}>Prontomed</div>
              <div style={{ color: '#6b7d7b' }}>R. da Cruz, 253 · Quixeramobim</div>
            </div>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#73889d', marginBottom: 16 }}>Contato</div>
          <div style={{ fontSize: 14, lineHeight: 1.9 }}>
            <a href={`https://wa.me/${LYA_INFO.phoneLink}`} target="_blank" rel="noreferrer" style={{ color: '#344846', textDecoration: 'none', display: 'block' }}>{LYA_INFO.phone}</a>
            <a href={`mailto:${LYA_INFO.email}`} style={{ color: '#344846', textDecoration: 'none', display: 'block' }}>{LYA_INFO.email}</a>
            <a href={LYA_INFO.instagramUrl} target="_blank" rel="noreferrer" style={{ color: '#344846', textDecoration: 'none', display: 'block' }}>{LYA_INFO.instagram}</a>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: '#73889d', marginBottom: 16 }}>Registro</div>
          <div style={{ fontSize: 14, lineHeight: 1.9 }}>
            CRM-CE 22811<br />
            RQE 16066 / 19302<br />
            Endocrinologia & Metabologia
          </div>
        </div>
      </div>
      <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <div style={{ fontSize: 12, color: '#73889d' }}>
          © 2026 Dra. Lya Coelho. Todos os direitos reservados.
        </div>
        <div style={{ fontSize: 12, color: '#73889d' }}>
          CNES · Conselho Regional de Medicina do Ceará
        </div>
      </div>
    </div>
  </footer>
);

// Floating WhatsApp button
const V1FloatWhats = () => (
  <a href={`https://wa.me/${LYA_INFO.phoneLink}?text=${LYA_INFO.whatsappMessage}`} target="_blank" rel="noreferrer"
    style={{
      position: 'fixed', bottom: 28, right: 28, zIndex: 50,
      width: 58, height: 58, borderRadius: '50%',
      background: '#be90bf', color: '#fff',
      display: 'grid', placeItems: 'center',
      boxShadow: '0 12px 28px -8px rgba(52,72,70,0.5)',
      textDecoration: 'none',
      transition: 'transform .2s',
    }}
    onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.08)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'none'}
  >
    <LyaIcon name="whatsapp" size={26} />
  </a>
);

const V1Page = () => (
  <div style={v1Styles.wrap} data-screen-label="V1 Editorial Bege">
    <V1Nav />
    <V1Hero />
    <V1Sobre />
    <V1AConsulta />
    <V1Atuacao />
    <V1Consultorio />
    <V1Depoimentos />
    <V1Footer />
    <V1FloatWhats />
  </div>
);

Object.assign(window, { V1Depoimentos, V1Footer, V1FloatWhats, V1Page });