// Industries page
function PageIndustrias({ setPage }) {
  useReveal();
  const t = useT();

  const industries = [
    { t: t('in.i1t'), d: t('in.i1d'), caps: [t('in.i1c1'), t('in.i1c2'), t('in.i1c3')], c: 'var(--crimson)' },
    { t: t('in.i2t'), d: t('in.i2d'), caps: [t('in.i2c1'), t('in.i2c2'), t('in.i2c3')], c: 'var(--crimson-deep)' },
    { t: t('in.i3t'), d: t('in.i3d'), caps: [t('in.i3c1'), t('in.i3c2'), t('in.i3c3')], c: 'var(--ink-2)' },
    { t: t('in.i4t'), d: t('in.i4d'), caps: [t('in.i4c1'), t('in.i4c2'), t('in.i4c3')], c: 'var(--bg-3)' },
    { t: t('in.i5t'), d: t('in.i5d'), caps: [t('in.i5c1'), t('in.i5c2'), t('in.i5c3')], c: 'var(--crimson)' },
    { t: t('in.i6t'), d: t('in.i6d'), caps: [t('in.i6c1'), t('in.i6c2'), t('in.i6c3')], c: 'var(--crimson-deep)' },
  ];

  return (
    <>
      <section style={{ padding: '80px 0 60px', position: 'relative', overflow: 'hidden' }}>
        <div className="tick-grid" />
        <div className="shell" style={{ position: 'relative' }}>
          <Eyebrow>{t('in.ey')}</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 8vw, 124px)', margin: '24px 0', maxWidth: '14ch', lineHeight: 0.98 }}>
            {t('in.h1a')}{' '}
            <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('in.h1em')}</em>
          </h1>
          <p style={{ fontSize: 19, maxWidth: 620, opacity: 0.78, lineHeight: 1.55 }}>
            {t('in.sub')}
          </p>
        </div>
      </section>

      <div className="divider" />

      <section className="section-pad-sm">
        <div className="shell">
          <div className="grid grid-2" style={{ gap: 32 }}>
            {industries.map((ind, i) => (
              <Reveal key={ind.t} delay={(i % 2) * 60}>
                <a href="#" onClick={(e) => e.preventDefault()}
                   className="card-hover"
                   style={{
                     display: 'block',
                     padding: 40,
                     border: '1px solid var(--line)',
                     borderRadius: 22,
                     minHeight: 380,
                     position: 'relative',
                     overflow: 'hidden',
                     background: 'var(--bg-2)',
                   }}>
                  <div style={{
                    position: 'absolute', top: 0, right: 0,
                    width: 180, height: 180, borderRadius: '50%',
                    background: ind.c, opacity: 0.3,
                    filter: 'blur(40px)',
                    transform: 'translate(30%, -30%)'
                  }} />
                  <div style={{ position: 'relative' }}>
                    <Eyebrow>0{i + 1}</Eyebrow>
                    <h3 className="display" style={{ fontSize: 'clamp(32px, 4.2vw, 52px)', margin: '20px 0 14px', lineHeight: 1 }}>{ind.t}</h3>
                    <p style={{ fontSize: 15.5, opacity: 0.72, maxWidth: 380, margin: '0 0 32px', lineHeight: 1.55 }}>{ind.d}</p>
                    <div className="eyebrow" style={{ marginBottom: 12 }}>{t('c.capabilities')}</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                      {ind.caps.map(c => <Chip key={c}>{c}</Chip>)}
                    </div>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Sector spotlight */}
      <section className="surface-dark section-pad">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="spot-grid">
            <div>
              <Eyebrow dark>{t('in.spot_ey')}</Eyebrow>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 72px)', margin: '20px 0 24px', lineHeight: 1 }}>
                {t('in.spot_h2a')}{' '}
                <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('in.spot_em')}</em>{' '}
                {t('in.spot_h2b')}
              </h2>
              <p style={{ fontSize: 17, opacity: 0.75, lineHeight: 1.6 }}>
                {t('in.spot_p')}
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, margin: '36px 0' }}>
                {[
                  [t('in.spot_s1n'), t('in.spot_s1l')],
                  [t('in.spot_s2n'), t('in.spot_s2l')],
                  [t('in.spot_s3n'), t('in.spot_s3l')],
                  [t('in.spot_s4n'), t('in.spot_s4l')],
                ].map(([n, l]) => (
                  <div key={l}>
                    <div className="display" style={{ fontSize: 'clamp(24px, 3vw, 32px)', color: 'var(--crimson)', lineHeight: 1.05 }}>{n}</div>
                    <div className="eyebrow" style={{ color: 'rgba(237,235,230,0.55)', marginTop: 6 }}>{l}</div>
                  </div>
                ))}
              </div>
              <Btn variant="ghost" onClick={() => setPage('contato')}>{t('in.spot_cta')}</Btn>
            </div>
            <div>
              <FintechTransactionViz />
            </div>
          </div>
        </div>
      </section>

      {/* Partnerships — icon row, scaled down */}
      <section className="section-pad">
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
            <SectionHeader
              eyebrow={t('in.stack_ey')}
              title={<>{t('in.stack_h2a')} <em className="display-italic">{t('in.stack_em')}</em></>}
              subtitle={t('in.stack_sub')}
            />
          </div>
          <div className="partner-icons" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(6, 1fr)',
            gap: 14,
          }}>
            {[
              { n: 'AWS',        ic: 'aws' },
              { n: 'Google Cloud',ic: 'gcp' },
              { n: 'Vercel',     ic: 'vercel' },
              { n: 'Anthropic',  ic: 'anthropic' },
              { n: 'OpenAI',     ic: 'openai' },
              { n: 'Supabase',   ic: 'supabase' },
              { n: 'Stripe',     ic: 'stripe' },
              { n: 'Figma',      ic: 'figma' },
              { n: 'HashiCorp',  ic: 'hashi' },
              { n: 'Datadog',    ic: 'datadog' },
              { n: 'Postgres',   ic: 'pg' },
              { n: 'Linear',     ic: 'linear' },
            ].map((p, i) => (
              <Reveal key={p.n} delay={(i % 6) * 30}>
                <div style={{
                  padding: '22px 16px',
                  border: '1px solid var(--line)',
                  borderRadius: 14,
                  background: 'var(--bg-2)',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
                  aspectRatio: '1',
                  justifyContent: 'center',
                  transition: 'all 0.25s',
                  cursor: 'default',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = 'var(--crimson)';
                  e.currentTarget.style.transform = 'translateY(-3px)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = 'var(--line)';
                  e.currentTarget.style.transform = 'translateY(0)';
                }}>
                  <PartnerIcon kind={p.ic} />
                  <div style={{
                    fontFamily: 'var(--mono)', fontSize: 10,
                    letterSpacing: '0.1em', textTransform: 'uppercase',
                    opacity: 0.72,
                  }}>{p.n}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 980px) {
          .spot-grid { grid-template-columns: 1fr !important; }
          .partner-icons { grid-template-columns: repeat(4, 1fr) !important; }
        }
        @media (max-width: 640px) {
          .partner-icons { grid-template-columns: repeat(3, 1fr) !important; }
        }
      `}</style>
    </>
  );
}

// ─── Fintech transaction flow visualization ───────────────────────────────────
function FintechTransactionViz() {
  const ref = React.useRef(null);
  const [count, setCount] = React.useState(47293);

  const core = { x: 150, y: 195 };
  const sats = [
    { x: 150, y: 48,  label: 'BCB',  tag: 'Banco Central' },
    { x: 272, y: 112, label: 'BNK',  tag: 'Banco A' },
    { x: 248, y: 310, label: 'FIN',  tag: 'Fintech' },
    { x: 52,  y: 310, label: 'COO',  tag: 'Cooperativa' },
    { x: 28,  y: 112, label: 'BNK',  tag: 'Banco B' },
  ];
  const statuses = [
    { txt: 'R$ 2.847,00', hot: false },
    { txt: 'APROVADO',    hot: true  },
    { txt: 'R$ 150,00',   hot: false },
    { txt: 'TED OK',      hot: true  },
    { txt: 'R$ 12.500,00',hot: false },
  ];

  React.useEffect(() => {
    if (!window.gsap || !ref.current) return;
    const ctx = gsap.context(() => {
      // Core pulse rings
      gsap.to('.ftv-ring', {
        scale: 2.6, opacity: 0, duration: 2.2, repeat: -1,
        ease: 'power2.out', transformOrigin: '50% 50%', stagger: 0.73,
      });

      // Satellite glow breathe
      gsap.to('.ftv-sat-glow', {
        opacity: 0.7, scale: 1.8, duration: 1.4, repeat: -1, yoyo: true,
        ease: 'sine.inOut', transformOrigin: '50% 50%',
        stagger: { each: 0.28, from: 'random' },
      });

      // Inbound packets: satellite → core
      sats.forEach((s, i) => {
        gsap.fromTo(`.ftv-in-${i}`,
          { attr: { cx: s.x, cy: s.y }, opacity: 0.9 },
          { attr: { cx: core.x, cy: core.y }, opacity: 0,
            duration: 1.3, repeat: -1, ease: 'power1.in', delay: i * 0.38 });
      });

      // Outbound packets: core → satellite
      sats.forEach((s, i) => {
        gsap.fromTo(`.ftv-out-${i}`,
          { attr: { cx: core.x, cy: core.y }, opacity: 0.9 },
          { attr: { cx: s.x, cy: s.y }, opacity: 0,
            duration: 1.5, repeat: -1, ease: 'power1.out', delay: i * 0.38 + 0.65 });
      });

      // Status chips: staggered appear/disappear loops
      statuses.forEach((_, i) => {
        gsap.timeline({ repeat: -1, delay: i * 1.3 })
          .fromTo(`.ftv-chip-${i}`, { autoAlpha: 0, y: -6 }, { autoAlpha: 1, y: 0, duration: 0.28 })
          .to(`.ftv-chip-${i}`, { autoAlpha: 0, y: 4, duration: 0.28 }, '+=1.6');
      });
    }, ref);

    const interval = setInterval(() => {
      setCount(c => c + Math.floor(Math.random() * 9 + 2));
    }, 160);

    return () => { ctx.revert(); clearInterval(interval); };
  }, []);

  return (
    <div ref={ref} style={{
      width: '100%', aspectRatio: '4/5', position: 'relative',
      background: 'var(--bg)', borderRadius: 22,
      border: '1px solid var(--line)', overflow: 'hidden',
    }}>
      {/* Live counter */}
      <div style={{ position: 'absolute', top: 24, left: 28, fontFamily: 'var(--mono)' }}>
        <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', opacity: 0.45, marginBottom: 4 }}>
          Transações / min
        </div>
        <div style={{ fontSize: 34, fontWeight: 700, color: 'var(--crimson)', lineHeight: 1 }}>
          {count.toLocaleString('pt-BR')}
        </div>
      </div>

      {/* Status chips */}
      {statuses.map((s, i) => (
        <div key={i} className={`ftv-chip-${i}`} style={{
          position: 'absolute',
          top: `${18 + i * 14}%`,
          right: 24,
          padding: '5px 12px',
          borderRadius: 999,
          background: 'var(--bg-2)',
          border: `1px solid ${s.hot ? 'var(--crimson)' : 'var(--line)'}`,
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.08em',
          color: s.hot ? 'var(--crimson)' : 'var(--ink-dim)',
          opacity: 0,
          whiteSpace: 'nowrap',
        }}>{s.txt}</div>
      ))}

      <svg viewBox="0 0 300 380" style={{ width: '100%', height: '100%' }} aria-hidden>
        {/* Connection lines */}
        {sats.map((s, i) => (
          <line key={i}
            x1={s.x} y1={s.y} x2={core.x} y2={core.y}
            stroke="rgba(244,243,241,0.1)" strokeWidth="1" strokeDasharray="3 5"/>
        ))}

        {/* Core pulse rings */}
        {[0, 1, 2].map(i => (
          <circle key={i} className="ftv-ring" cx={core.x} cy={core.y} r="20"
            fill="none" stroke="var(--crimson)" strokeWidth="1" opacity="0.45"/>
        ))}

        {/* Core */}
        <circle cx={core.x} cy={core.y} r="22" fill="var(--crimson)"/>
        <text x={core.x} y={core.y + 1} textAnchor="middle" dominantBaseline="middle"
          fill="white" fontSize="8.5" fontFamily="monospace" fontWeight="700" letterSpacing="0.08em">PIX</text>

        {/* Satellites */}
        {sats.map((s, i) => (
          <g key={i}>
            <circle className="ftv-sat-glow" cx={s.x} cy={s.y} r="13"
              fill="var(--crimson)" opacity="0.12"/>
            <circle cx={s.x} cy={s.y} r="11"
              fill="var(--bg-3)" stroke="rgba(244,243,241,0.22)" strokeWidth="1"/>
            <text x={s.x} y={s.y - 1} textAnchor="middle" dominantBaseline="middle"
              fill="rgba(244,243,241,0.75)" fontSize="6" fontFamily="monospace" fontWeight="600">{s.label}</text>
          </g>
        ))}

        {/* Inbound packets */}
        {sats.map((s, i) => (
          <circle key={`in${i}`} className={`ftv-in-${i}`}
            cx={s.x} cy={s.y} r="4" fill="var(--crimson)" opacity="0"/>
        ))}

        {/* Outbound packets */}
        {sats.map((_, i) => (
          <circle key={`out${i}`} className={`ftv-out-${i}`}
            cx={core.x} cy={core.y} r="3" fill="rgba(244,243,241,0.85)" opacity="0"/>
        ))}
      </svg>
    </div>
  );
}

// Abstract, original iconography for each tool. Never reproduce brand logos.
const PARTNER_ICON_URLS = {
  aws:       'https://cdn.jsdelivr.net/npm/simple-icons/icons/amazonwebservices.svg',
  gcp:       'https://cdn.jsdelivr.net/npm/simple-icons/icons/googlecloud.svg',
  vercel:    'https://cdn.jsdelivr.net/npm/simple-icons/icons/vercel.svg',
  anthropic: 'https://cdn.jsdelivr.net/npm/simple-icons/icons/anthropic.svg',
  openai:    'https://cdn.jsdelivr.net/npm/simple-icons/icons/openai.svg',
  supabase:  'https://cdn.jsdelivr.net/npm/simple-icons/icons/supabase.svg',
  stripe:    'https://cdn.jsdelivr.net/npm/simple-icons/icons/stripe.svg',
  figma:     'https://cdn.jsdelivr.net/npm/simple-icons/icons/figma.svg',
  hashi:     'https://cdn.jsdelivr.net/npm/simple-icons/icons/hashicorp.svg',
  datadog:   'https://cdn.jsdelivr.net/npm/simple-icons/icons/datadog.svg',
  pg:        'https://cdn.jsdelivr.net/npm/simple-icons/icons/postgresql.svg',
  linear:    'https://cdn.jsdelivr.net/npm/simple-icons/icons/linear.svg',
};

function PartnerIcon({ kind }) {
  const url = PARTNER_ICON_URLS[kind];
  if (!url) return null;
  return (
    <img
      src={url}
      alt={kind}
      width={36}
      height={36}
      style={{ filter: 'invert(1)', opacity: 0.9 }}
    />
  );
}

Object.assign(window, { PageIndustrias });