// Carrossel de depoimentos com efeito coverflow.
function TestimonialCarousel() {
  const TOTAL = 15;
  const [active, setActive] = React.useState(0);
  // Armazena { w, h } natural de cada imagem após carregamento
  const [sizes, setSizes] = React.useState({});

  const images = Array.from({ length: TOTAL }, (_, i) => `../../assets/depoimentos/${i + 1}.jpg`);

  const go = (dir) => setActive(a => (a + dir + TOTAL) % TOTAL);

  const offsetOf = (i) => {
    let off = ((i - active) % TOTAL + TOTAL) % TOTAL;
    if (off > TOTAL / 2) off -= TOTAL;
    return off;
  };

  // Largura base por posição
  const baseW = (abs) => abs === 0 ? 500 : abs === 1 ? 310 : 240;

  // Dimensões reais usando o aspect ratio natural da imagem
  const dimsOf = (i, abs) => {
    const w = baseW(abs);
    const s = sizes[i];
    if (!s) return { width: w, height: Math.round(w * 0.9) }; // fallback até carregar
    return { width: w, height: Math.round(w * s.h / s.w) };
  };

  const styleOf = (offset, i) => {
    const abs = Math.abs(offset);
    const sign = offset < 0 ? -1 : 1;
    const { width, height } = dimsOf(i, Math.min(abs, 2));
    if (abs === 0) return { opacity: 1,  width, height, tx: 0,          z: 10, shadow: true  };
    if (abs === 1) return { opacity: 0.8, width, height, tx: sign * 455, z: 7,  shadow: false };
    return               { opacity: 0,  width, height, tx: sign * 680, z: 1,  shadow: false };
  };

  // Altura do container acompanha a imagem central carregada
  const cs = sizes[active];
  const containerH = cs ? Math.round(500 * cs.h / cs.w) + 40 : 480;

  return (
    <div>
      {/* Track */}
      <div style={{ position: 'relative', height: containerH, overflow: 'hidden', userSelect: 'none', transition: 'height 0.48s cubic-bezier(0.4,0,0.2,1)' }}>
        {images.map((src, i) => {
          const off = offsetOf(i);
          const s = styleOf(off, i);
          return (
            <div
              key={i}
              onClick={() => { if (off === 1) go(1); else if (off === -1) go(-1); }}
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                width: s.width,
                height: s.height,
                transform: `translateX(calc(-50% + ${s.tx}px)) translateY(-50%)`,
                opacity: s.opacity,
                zIndex: s.z,
                transition: 'opacity 0.48s cubic-bezier(0.4,0,0.2,1), transform 0.48s cubic-bezier(0.4,0,0.2,1), width 0.48s cubic-bezier(0.4,0,0.2,1), height 0.48s cubic-bezier(0.4,0,0.2,1), box-shadow 0.48s ease',
                borderRadius: 16,
                overflow: 'hidden',
                cursor: Math.abs(off) === 1 ? 'pointer' : 'default',
                boxShadow: s.shadow ? '0 24px 64px rgba(74,46,31,0.28)' : 'none',
                background: 'var(--cream-50)',
              }}
            >
              <img
                src={src}
                alt=""
                onLoad={(e) => {
                  const { naturalWidth: w, naturalHeight: h } = e.target;
                  setSizes(prev => ({ ...prev, [i]: { w, h } }));
                }}
                style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block', pointerEvents: 'none' }}
              />
            </div>
          );
        })}

        {/* Setas */}
        {[-1, 1].map((dir) => (
          <button
            key={dir}
            onClick={() => go(dir)}
            style={{
              position: 'absolute',
              top: '50%',
              [dir === -1 ? 'left' : 'right']: 32,
              transform: 'translateY(-50%)',
              zIndex: 20,
              width: 44,
              height: 44,
              borderRadius: '50%',
              border: '1px solid var(--border-default)',
              background: 'var(--surface-card)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              cursor: 'pointer',
              boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
              color: 'var(--color-primary)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--color-primary)'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'var(--color-primary)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--surface-card)'; e.currentTarget.style.color = 'var(--color-primary)'; e.currentTarget.style.borderColor = 'var(--border-default)'; }}
          >
            <i data-lucide={dir === -1 ? 'chevron-left' : 'chevron-right'} style={{ width: 20, height: 20 }}></i>
          </button>
        ))}
      </div>

      {/* Dots */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 7, marginTop: 28 }}>
        {images.map((_, i) => (
          <button
            key={i}
            onClick={() => setActive(i)}
            style={{
              width: i === active ? 22 : 8,
              height: 8,
              borderRadius: 4,
              border: 'none',
              background: i === active ? 'var(--color-primary)' : 'var(--border-default)',
              cursor: 'pointer',
              padding: 0,
              transition: 'all 0.3s ease',
            }}
          />
        ))}
      </div>
    </div>
  );
}

// HowItWorksScreen — Explica o modelo de locação por temporada da SBL.
function HowItWorksScreen({ onAnnounce }) {
  const { Button, Badge, Stat } = window.SBLImVeisDesignSystem_08a506;
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();

  const platforms = [
    {
      icon: 'layout-grid',
      badge: 'Uma plataforma',
      badgeColor: 'info',
      title: 'Ex.: somente Airbnb',
      pros: [
        'Processo mais simples e centralizado',
        'Menor risco de conflito de reservas',
        'Suporte e garantias da plataforma',
        'Ideal para quem está começando',
      ],
      cons: 'Exposição limitada a uma única audiência — menor volume de reservas e rentabilidade mais baixa.',
      security: 3,
      rentability: 1,
    },
    {
      icon: 'layers',
      badge: 'Múltiplas plataformas',
      badgeColor: 'warning',
      title: 'Ex.: Airbnb + Booking + outros',
      pros: [
        'Maior alcance e visibilidade',
        'Taxa de ocupação mais alta',
        'Rentabilidade significativamente maior',
        'Diversificação de canais de venda',
      ],
      cons: 'Gestão mais complexa de calendários. Risco de double-booking se não houver sincronização profissional.',
      security: 1,
      rentability: 3,
    },
    {
      icon: 'handshake',
      badge: 'Direto com a SBL',
      badgeColor: 'success',
      title: 'Reserva pela própria corretora',
      pros: [
        'Atendimento personalizado ao hóspede',
        'Sem dependência de plataformas externas',
        'Acesso à base própria de clientes da SBL',
        'Condições flexíveis de negociação',
      ],
      cons: 'Menor alcance orgânico comparado às grandes plataformas — indicado como canal complementar.',
      security: 2,
      rentability: 2,
    },
  ];

  const Dots = ({ filled, total }) => (
    <div style={{ display: 'flex', gap: 5 }}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} style={{
          width: 10, height: 10, borderRadius: '50%',
          background: i < filled ? 'var(--color-primary)' : 'var(--border-default)',
          display: 'inline-block',
        }} />
      ))}
    </div>
  );

  return (
    <div style={{ background: 'var(--color-bg)' }}>

      {/* HERO */}
      <section style={{ background: 'var(--brown-900)', position: 'relative', overflow: 'hidden' }}>
        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=80" alt=""
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.18 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px 56px' : '80px 40px 72px' }}>
          <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 18 }}>{t('Locação por Temporada')}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 32 : 50, color: 'var(--cream-50)', margin: '0 0 20px', lineHeight: 1.08, maxWidth: 720 }}>
            {t('Entenda como funciona a gestão do seu imóvel de temporada')}
          </h1>
          <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 21, color: 'var(--rose-100)', lineHeight: 1.55, margin: '0 0 40px', maxWidth: 640 }}>
            {t('A SBL administra todo o processo — da divulgação ao repasse — para que você só precise acompanhar os resultados.')}
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: isMobile ? 24 : 48 }}>
            <Stat value="20%" label={t('Comissão sobre diárias')} align="left" onDark />
            <Stat value="24h" label={t('Para publicar o anúncio')} align="left" onDark />
            <Stat value="92%" label={t('Taxa média de ocupação')} align="left" onDark />
          </div>
        </div>
      </section>

      {/* PLATAFORMAS */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px' : '80px 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="sbl-eyebrow" style={{ marginBottom: 14 }}>{t('Canais de divulgação')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, color: 'var(--text-strong)', margin: '0 0 16px' }}>
            {t('Como você quer divulgar seu imóvel?')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-muted)', margin: 0, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.65 }}>
            {t('Existem três formas de anunciar. Cada uma tem um perfil diferente de segurança e rentabilidade — a escolha certa depende do seu objetivo.')}
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 24 }}>
          {platforms.map((p) => (
            <div key={p.badge} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: '36px 30px', display: 'flex', flexDirection: 'column' }}>
              <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-lg)', background: 'var(--surface-accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                <i data-lucide={p.icon} style={{ width: 26, height: 26, color: 'var(--color-primary)' }}></i>
              </div>
              <Badge variant={p.badgeColor} style={{ alignSelf: 'flex-start', marginBottom: 10 }}>{t(p.badge)}</Badge>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: 'var(--text-strong)', margin: '0 0 20px', lineHeight: 1.3 }}>{t(p.title)}</h3>

              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 20px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                {p.pros.map((pro) => (
                  <li key={pro} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <i data-lucide="check" style={{ width: 16, height: 16, color: 'var(--color-success)', flexShrink: 0, marginTop: 2 }}></i>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-body)', lineHeight: 1.5 }}>{t(pro)}</span>
                  </li>
                ))}
              </ul>

              <div style={{ background: 'var(--color-bg-alt)', borderRadius: 'var(--radius-md)', padding: '12px 14px', marginBottom: 22 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                  <i data-lucide="alert-circle" style={{ width: 15, height: 15, color: 'var(--color-warning)', flexShrink: 0, marginTop: 2 }}></i>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{t(p.cons)}</span>
                </div>
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 16, borderTop: '1px solid var(--border-subtle)' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-subtle)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>{t('Segurança')}</div>
                  <Dots filled={p.security} total={3} />
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--text-subtle)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>{t('Rentabilidade')}</div>
                  <Dots filled={p.rentability} total={3} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* DEPOIMENTOS */}
      <section style={{ background: '#ffffff', padding: '60px 0 56px' }}>
        <div style={{ textAlign: 'center', marginBottom: 52, padding: isMobile ? '0 20px' : '0 40px' }}>
          <div className="sbl-eyebrow" style={{ marginBottom: 14 }}>{t('Depoimentos reais')}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: isMobile ? 28 : 38, color: 'var(--text-strong)', margin: '0 0 14px' }}>
            {t('O que dizem nossos hóspedes')}
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-muted)', margin: 0, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.65 }}>
            {t('Experiências reais de quem já se hospedou em imóveis gerenciados pela SBL em João Pessoa.')}
          </p>
        </div>
        <TestimonialCarousel />
      </section>

      {/* COMISSÕES */}
      <section style={{ background: 'var(--brown-900)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '60px 20px' : '80px 40px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 64, alignItems: 'start' }}>
            <div>
              <div className="sbl-eyebrow" style={{ color: 'var(--rose-300)', marginBottom: 16 }}>{t('Transparência total')}</div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, color: 'var(--cream-50)', margin: '0 0 18px', lineHeight: 1.1 }}>
                {t('Comissões e taxas sem surpresa')}
              </h2>
              <p style={{ fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 19, color: 'var(--rose-100)', lineHeight: 1.55, margin: '0 0 32px' }}>
                {t('A SBL cobra apenas sobre o que você recebe — sem mensalidades fixas, sem taxas de adesão.')}
              </p>
              <Button variant="accent" size="lg" iconLeft="plus" onClick={onAnnounce}>{t('Anunciar meu imóvel')}</Button>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                {
                  icon: 'percent',
                  title: '20% sobre o valor das diárias',
                  desc: 'É a comissão cobrada pela SBL para administrar o imóvel de temporada — cobre divulgação, gestão de reservas, atendimento aos hóspedes e repasse.',
                },
                {
                  icon: 'sparkles',
                  title: 'Taxa de limpeza — paga pelo hóspede',
                  desc: 'O custo da limpeza é cobrado do hóspede separadamente nas plataformas (não está embutido na diária), portanto não impacta a rentabilidade do proprietário.',
                },
                {
                  icon: 'handshake',
                  title: 'Comissão negociável',
                  desc: 'Proprietários com dois ou mais imóveis sob gestão da SBL podem negociar condições especiais de comissão. Entre em contato para discutir.',
                },
              ].map((item) => (
                <div key={item.title} style={{ background: 'color-mix(in srgb, var(--brown-800) 60%, transparent)', border: '1px solid var(--brown-600)', borderRadius: 'var(--radius-lg)', padding: '22px 24px', display: 'flex', gap: 18 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--brown-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <i data-lucide={item.icon} style={{ width: 22, height: 22, color: 'var(--rose-300)' }}></i>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: 'var(--cream-50)', marginBottom: 6 }}>{t(item.title)}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--brown-100)', lineHeight: 1.6 }}>{t(item.desc)}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}
window.HowItWorksScreen = HowItWorksScreen;