/* ═══════════════════════════════════════════════════════════
   HERO — badge, seletor de público, título, lede (dinâmica),
   2 CTAs, screenshot real do odontograma + cards flutuantes
   ═══════════════════════════════════════════════════════════ */

const heroStyles = {
  dotRed: { background: '#ff5f57' },
  dotYellow: { background: '#febc2e' },
  dotGreen: { background: '#28c840' },
  valueGreen: { color: 'var(--green)' },
};

/* Um único título vale para os 3 públicos; só a lede muda,
   trocando o contexto sem reescrever a promessa central. */
const AUDIENCES = [
  {
    id: 'solo',
    label: 'Dentista Autônomo',
    sub: 'Organize sua agenda, pacientes e financeiro, mesmo atendendo em clínicas diferentes.',
  },
  {
    id: 'clinica',
    label: 'Clínica',
    sub: 'Gerencie agenda, equipe, prontuário e financeiro da sua clínica em um só lugar.',
  },
  {
    id: 'multi',
    label: 'Múltiplas Clínicas',
    sub: 'Acompanhe agenda, equipe e financeiro de todas as suas unidades, sem perder a visão do conjunto.',
  },
];

function AudienceSwitch({ active, onChange }) {
  return (
    <div className="hero-audience reveal reveal-delay-1" role="tablist" aria-label="Para quem é o Klyvo">
      {AUDIENCES.map((a) => (
        <button
          key={a.id}
          role="tab"
          aria-selected={active === a.id}
          className={`hero-audience-pill${active === a.id ? ' active' : ''}`}
          onClick={() => onChange(a.id)}
        >
          {a.label}
        </button>
      ))}
    </div>
  );
}

function Hero() {
  const [audience, setAudience] = React.useState('clinica');
  const current = AUDIENCES.find((a) => a.id === audience);

  return (
    <section className="hero" id="topo">
      <div className="container">
        {/* ── Coluna de texto ── */}
        <div>
          <div className="hero-badge reveal">
            <span className="dot" />
            Fundado por dentistas
          </div>

          <AudienceSwitch active={audience} onChange={setAudience} />

          <h1 className="reveal reveal-delay-2">
            O sistema completo para a{' '}
            <span className="highlight">
              rotina
              <svg
                className="highlight-underline"
                viewBox="0 0 300 14"
                preserveAspectRatio="none"
                aria-hidden="true"
              >
                <path d="M2 9.5C60 3 140 2 165 6.5S260 12 298 5" />
              </svg>
            </span>{' '}
            odontológica
          </h1>

          <p className="hero-sub reveal reveal-delay-2">
            {current.sub}
          </p>

          <div className="hero-cta-row reveal reveal-delay-3">
            <a
              href={LINKS.cadastro}
              className="btn btn-primary btn-lg"
              onClick={(e) => trackCta('cta_start_free_trial', { placement: 'hero' }, e)}
            >
              <Icon d={ICONS.arrowRight} size={18} strokeWidth={2.5} />
              Começar grátis
            </a>
            <a
              href="#funcionalidades"
              className="btn btn-outline btn-lg"
              onClick={(e) => scrollToSection('#funcionalidades', e)}
            >
              Ver como funciona
            </a>
          </div>

          <p className="hero-microcopy reveal reveal-delay-4">
            15 dias grátis · Sem cartão de crédito
          </p>
        </div>

        {/* ── Coluna visual ── */}
        <div className="hero-visual reveal reveal-delay-2">
          <div className="hero-visual-glow" aria-hidden="true" />
          <div className="hero-mockup">
            <div className="mockup-topbar">
              <span className="mockup-dot" style={heroStyles.dotRed} />
              <span className="mockup-dot" style={heroStyles.dotYellow} />
              <span className="mockup-dot" style={heroStyles.dotGreen} />
            </div>
            <img
              src="img/odontograma-hero.png"
              alt="Odontograma interativo do Klyvo com histórico do paciente, alergias e marcações de canal, implante, restauração e extração"
              className="mockup-screenshot"
              width="2200"
              height="1886"
              loading="eager"
            />
          </div>

          <div className="hero-float hero-float-1">
            <div className="float-label">Receita este mês</div>
            <div className="float-value" style={heroStyles.valueGreen}>
              R$ 28.400
            </div>
            <div className="float-chip">▲ 23% vs mês anterior</div>
          </div>

          <div className="hero-float hero-float-2">
            <div className="float-label">Faltas hoje</div>
            <div className="float-value" style={heroStyles.valueGreen}>
              0
            </div>
            <div className="float-note">Lembretes enviados ✓</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });