// ── CodeBraz Hub — Hero + Systems ──────────────────────────────────────────

// ─── Char-by-char reveal (typing feel) ────────────────────────────────────
function CharSpans({ text, delay = 0, stagger = 18 }) {
  const words = text.split(' ');
  let charIdx = 0;
  return (
    <>
      {words.map((word, wi) => {
        const wordSpans = (
          <span key={`w-${wi}`} style={{ display: 'inline-block', whiteSpace: 'pre' }}>
            {word.split('').map((ch, ci) => {
              const i = charIdx++;
              return (
                <span key={ci} className="hub-char-r"
                  style={{ animationDelay: `${delay + i * stagger}ms` }}>{ch}</span>
              );
            })}
          </span>
        );
        const space = wi < words.length - 1 ? (
          <span key={`s-${wi}`} className="hub-char-r"
            style={{ animationDelay: `${delay + (charIdx++) * stagger}ms` }}>{' '}</span>
        ) : null;
        return <React.Fragment key={wi}>{wordSpans}{space}</React.Fragment>;
      })}
    </>
  );
}

// ─── Hero Hub ──────────────────────────────────────────────────────────────

const HERO_VARIANTS = [
  { line1: 'Sistemas que transformam',   accent: 'como você trabalha.'        },
  { line1: 'Software inteligente,',      accent: 'feito para o Brasil.'        },
  { line1: 'Automatize, gerencie,',      accent: 'cresça com IA.'              },
  { line1: 'Da ideia ao produto,',       accent: 'entregamos software real.'   },
  { line1: 'Tecnologia brasileira',      accent: 'que resolve de verdade.'     },
];

function HeroHub() {
  const [variant] = React.useState(() => {
    try {
      const raw = localStorage.getItem('cb_hub_variant');
      const next = raw == null ? 0 : (parseInt(raw, 10) + 1) % HERO_VARIANTS.length;
      localStorage.setItem('cb_hub_variant', String(next));
      return HERO_VARIANTS[next];
    } catch {
      return HERO_VARIANTS[0];
    }
  });

  const line1Len = variant.line1.replace(/ /g,'').length + variant.line1.split(' ').length - 1;
  const accentDelay = 250 + line1Len * 18 + 120;

  return (
    <section className="hub-hero" id="topo">
      <div className="hub-hero-glow" aria-hidden="true" />
      <div className="container">
        <div className="hub-hero-content">
          <p className="hub-eyebrow">
            <span className="hub-eyebrow-dot" aria-hidden="true"></span>
            SOFTWARE INTELIGENTE · FEITO NO BRASIL
          </p>
          <h1 className="hub-hero-heading">
            <CharSpans text={variant.line1} delay={250} stagger={18} />
            <br />
            <em><CharSpans text={variant.accent} delay={accentDelay} stagger={22} /></em>
          </h1>
          <p className="hub-hero-sub">
            Desenvolvemos software inteligente para atendimento,
            gestão e automação — feito para o mercado brasileiro.
          </p>
          <div className="hub-ctas">
            <a
              href="https://wa.me/5533999364685"
              target="_blank"
              rel="noopener noreferrer"
              className="hub-btn-primary"
            >
              <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15" aria-hidden="true">
                <path d="M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2Zm5.4 14.4c-.2.7-1.3 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-5-4.3-5.1-4.5-.2-.2-1.2-1.6-1.2-3 0-1.5.7-2.2 1-2.5.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.9 2c.1.2 0 .4-.1.5l-.3.4-.3.4c-.1.1-.2.2-.1.5.1.2.6 1.1 1.4 1.8 1 .9 1.8 1.2 2 1.3.2.1.4.1.5-.1l.6-.7c.2-.2.4-.2.6-.1l1.9.9c.2.1.4.2.5.2.1.1.1.7-.1 1.4Z"/>
              </svg>
              Falar no WhatsApp
            </a>
            <a href="#sistemas" className="hub-btn-ghost">
              Ver sistemas
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
                strokeLinecap="round" strokeLinejoin="round" width="14" height="14" aria-hidden="true">
                <line x1="5" y1="12" x2="19" y2="12"/>
                <polyline points="12 5 19 12 12 19"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Systems data ──────────────────────────────────────────────────────────

const SYSTEMS = [
  {
    id: 'bravochat',
    name: 'BravoChat',
    tagline: 'Atendimento ao cliente com IA',
    desc: 'Automatize respostas no WhatsApp com um agente treinado para o seu negócio. Disponível 24h, sem contratar mais atendentes.',
    badge: 'IA · WhatsApp',
    url: 'https://chat.gigadesk.com.br',
    domain: 'chat.gigadesk.com.br',
    accent: '#4ade80',
    logo: 'logo_bravochat.png',
    icon: null,
  },
  {
    id: 'bravocondo',
    name: 'BravoCondo',
    tagline: 'Gestão de condomínios',
    desc: 'Financeiro, comunicados, reservas e ocorrências em um só lugar. Simples para síndicos, transparente para moradores.',
    badge: 'SaaS · Condomínios',
    url: 'https://bravocondo.cloud',
    domain: 'bravocondo.cloud',
    accent: '#818cf8',
    logo: 'logo_bravo_condo.png',
    icon: null,
  },
  {
    id: 'bravoso',
    name: 'BravoSO',
    tagline: 'Plataforma enterprise condominial',
    desc: 'Versão avançada para condomínios de médio e grande porte. Integração bancária, automação de cobranças e relatórios detalhados.',
    badge: 'Enterprise',
    url: 'https://bravo.gigadesk.com.br',
    domain: 'bravo.gigadesk.com.br',
    accent: '#c084fc',
    logo: 'logo_bravo_so.png',
    icon: null,
  },
  {
    id: 'ia-custom',
    name: 'IA para Negócios',
    tagline: 'Agentes de IA personalizados',
    desc: 'Treinamos um agente com seus produtos, tom de voz e dúvidas reais dos seus clientes. Apresentamos em uma demo de 20 minutos.',
    badge: 'Customizado',
    url: 'demo.html',
    domain: 'Testar agora →',
    accent: '#fbbf24',
    logo: null,
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
        strokeLinecap="round" strokeLinejoin="round" width="20" height="20">
        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
      </svg>
    ),
  },
];

// ─── System Card ───────────────────────────────────────────────────────────

function SystemCard({ id, name, tagline, desc, badge, url, domain, accent, logo, icon }) {
  const isExternal = url.startsWith('http');
  return (
    <a
      href={url}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener noreferrer' : undefined}
      className="hub-sys-card"
      style={{ '--acc': accent }}
    >
      <div className="hub-sys-top">
        {logo ? (
          <span className="hub-sys-icon hub-sys-icon--logo">
            <img src={logo} alt={name} />
          </span>
        ) : (
          <span className="hub-sys-icon">{icon}</span>
        )}
        <span className="hub-sys-badge">{badge}</span>
      </div>

      <div className="hub-sys-body">
        <h3 className="hub-sys-name">{name}</h3>
        <p className="hub-sys-tagline">{tagline}</p>
        <p className="hub-sys-desc">{desc}</p>
      </div>

      <div className="hub-sys-foot">
        <span className="hub-sys-domain">{domain}</span>
        <svg
          className="hub-sys-arrow"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          width="13"
          height="13"
          aria-hidden="true"
        >
          <path d="M3 8h10M8 3l5 5-5 5"/>
        </svg>
      </div>
    </a>
  );
}

// ─── Systems Section ───────────────────────────────────────────────────────

function Systems() {
  return (
    <section className="hub-systems section" id="sistemas">
      <div className="container">
        <div className="hub-sec-hd">
          <p className="hub-eyebrow">
            <span className="hub-eyebrow-dot" aria-hidden="true"></span>
            NOSSOS SISTEMAS
          </p>
          <h2 className="hub-sec-heading">
            Um produto para cada desafio.
          </h2>
          <p className="hub-sec-sub">
            Cada sistema foi criado para resolver um problema real do mercado brasileiro.
          </p>
        </div>
        <div className="hub-sys-grid">
          {SYSTEMS.map(s => <SystemCard key={s.id} {...s} />)}
        </div>
      </div>
    </section>
  );
}