/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

function Hero({ onCta }) {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', background: 'var(--grad-halo)' }}>
      <Droplets style={{ right: -40, top: 40 }} color="var(--teal-200)" opacity={0.35} size={220} />
      <Droplets style={{ left: -80, bottom: -40 }} color="var(--cyan-200)" opacity={0.28} size={260} />
      {/* subtle grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(20,47,50,0.05) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
      }} />
      <Container style={{ padding: '88px 32px 88px', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
          <Badge tone="accent">
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--cyan-600)', boxShadow: '0 0 0 4px rgba(0,179,186,0.18)' }} />
            Agencia de marketing con IA · México
          </Badge>
        </div>
        <h1 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 'clamp(44px, 6.4vw, 84px)',
          lineHeight: 1.02, letterSpacing: '-0.035em',
          margin: '0 0 24px', maxWidth: 1050, color: 'var(--fg1)',
        }}>
          No es magia. Es marketing con <span style={{
            background: 'var(--grad-brand)', WebkitBackgroundClip: 'text', backgroundClip: 'text',
            color: 'transparent', fontStyle: 'italic', fontWeight: 700,
          }}>IA</span>,<br/>bien hecho.
        </h1>
        <p style={{ fontSize: 'clamp(17px, 1.5vw, 21px)', lineHeight: 1.55, color: 'var(--fg2)', maxWidth: 720, margin: '0 0 36px' }}>
          Combinamos inteligencia artificial, neuromarketing y datos reales para que tu empresa genere más leads, publique mejor contenido y cierre más ventas — sin triplicar tu equipo.
        </p>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>Habla con un estratega</Button>
          <a href="/herramientas/diagnostico-ia" style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            fontSize: 15, fontWeight: 500, color: 'var(--fg2)',
          }}>
            <Icon name="sparkles" size={15} style={{ color: 'var(--brand)' }} />
            Diagnostica tu marketing gratis
          </a>
        </div>

        {/* Quick stats strip */}
        <div className="stats-strip" style={{
          marginTop: 72, gap: 0,
          background: 'rgba(255,255,255,0.7)',
          border: '1px solid var(--border)',
          borderRadius: 28, padding: '4px',
          backdropFilter: 'blur(8px)',
          boxShadow: 'var(--shadow-sm)',
        }}>
          {[
            { n: '+50', l: 'Marcas activas' },
            { n: '10×',  l: 'Volumen de contenido' },
            { n: '−40%', l: 'Costo por lead' },
            { n: '14d',  l: 'Primeros entregables' },
          ].map((s, i) => (
            <div key={s.l} style={{
              padding: '22px 28px',
              borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 4,
            }}>
              <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.025em', color: 'var(--teal-700)', lineHeight: 1 }}>{s.n}</div>
              <div style={{ fontSize: 13, color: 'var(--fg3)' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function LogoBand() {
  const logos = [
    'Tecnológico de Monterrey',
    'AstraZeneca',
    'KLM',
    'Air France',
    'CONTPAQi',
    'Atlético de Madrid',
    'Amnistía Internacional',
    'Flormar',
  ];
  return (
    <section style={{ background: '#fff', borderBottom: '1px solid var(--border)' }}>
      <Container style={{ padding: '40px 32px', display: 'flex', alignItems: 'center', gap: 40, flexWrap: 'wrap' }}>
        <div style={{ flex: '0 0 auto', maxWidth: 240 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: 6 }}>+50 MARCAS</div>
          <div style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.4 }}>Ya lo comprobaron en MX, LATAM y USA.</div>
        </div>
        <div style={{ flex: 1, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '28px 36px', justifyContent: 'flex-end' }}>
          {logos.map(n => (
            <span key={n} style={{
              fontFamily: 'var(--font-heading)',
              fontSize: 15, fontWeight: 600,
              color: 'var(--ink-400)',
              letterSpacing: '-0.005em',
              whiteSpace: 'nowrap',
            }}>{n}</span>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, LogoBand });