// HERO — sistemas a medida como protagonista
const heroStyles = {
  wrap: {
    position: 'relative',
    paddingTop: 200,
    paddingBottom: 80,
    overflow: 'hidden',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)',
    gap: 64,
    alignItems: 'center',
  },
  left: { position: 'relative', zIndex: 2 },
  title: { marginTop: 24, marginBottom: 24 },
  sub: { fontSize: 18, color: 'var(--fg-2)', maxWidth: 560, marginBottom: 36, lineHeight: 1.55 },
  ctas: { display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' },
  stats: {
    marginTop: 64,
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 24,
    paddingTop: 32,
    borderTop: '1px solid var(--line)',
  },
  stat: { display: 'flex', flexDirection: 'column', gap: 4 },
  statNum: { fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', background: 'var(--grad)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' },
  statLabel: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)' },
};

function HeroCodePanel() {
  const lines = [
    { t: '// sistema-ventas/api/orders.controller.ts', c: 'var(--fg-3)' },
    { t: '@Controller("orders")', c: '#A855F7' },
    { t: 'export class OrdersController {', c: 'var(--fg)' },
    { t: '  constructor(private svc: OrdersService) {}', c: 'var(--fg-2)' },
    { t: '', c: '' },
    { t: '  @Post() async create(@Body() dto: CreateOrderDto) {', c: '#4F8CFF' },
    { t: '    const order = await this.svc.place(dto);', c: 'var(--fg-2)' },
    { t: '    this.events.emit("order.created", order);', c: 'var(--fg-2)' },
    { t: '    return { ok: true, id: order.id };', c: '#22D3EE' },
    { t: '  }', c: 'var(--fg)' },
    { t: '}', c: 'var(--fg)' },
  ];
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    let i = 0;
    const t = setInterval(() => {
      i++;
      setShown(i);
      if (i >= lines.length) clearInterval(t);
    }, 280);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{
      position: 'relative',
      borderRadius: 18,
      background: 'linear-gradient(180deg, rgba(19,24,45,0.92), rgba(10,14,31,0.92))',
      border: '1px solid var(--line-2)',
      boxShadow: '0 40px 100px -30px rgba(79,140,255,0.4), 0 0 0 1px rgba(79,140,255,0.06) inset',
      overflow: 'hidden',
      transform: 'perspective(1200px) rotateY(-6deg) rotateX(2deg)',
      transformStyle: 'preserve-3d',
    }}>
      {/* window chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '14px 18px', borderBottom: '1px solid var(--line)', background: 'rgba(255,255,255,0.02)' }}>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }}/>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }}/>
        <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }}/>
        <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em' }}>orders.controller.ts — sistema-ventas</span>
      </div>
      {/* code body */}
      <div style={{ padding: '22px 22px 22px 22px', fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.75, minHeight: 320 }}>
        {lines.slice(0, shown).map((l, i) => (
          <div key={i} style={{ color: l.c, whiteSpace: 'pre' }}>
            <span style={{ color: 'var(--fg-4)', display: 'inline-block', width: 24 }}>{String(i+1).padStart(2,'0')}</span>
            {l.t || ' '}
          </div>
        ))}
        {shown < lines.length && (
          <span style={{ display: 'inline-block', width: 8, height: 16, background: 'var(--accent)', verticalAlign: 'middle', marginLeft: 24, animation: 'blink 1s steps(2) infinite' }}/>
        )}
      </div>
      <style>{`@keyframes blink{50%{opacity:0}}`}</style>
    </div>
  );
}

function HeroFloatingCard({ x, y, children, delay = 0 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      padding: '12px 16px',
      borderRadius: 12,
      background: 'linear-gradient(180deg, rgba(19,24,45,0.95), rgba(10,14,31,0.95))',
      border: '1px solid var(--line-2)',
      boxShadow: '0 20px 60px -20px rgba(79,140,255,0.45)',
      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.05em',
      animation: `float 6s ease-in-out ${delay}s infinite`,
      zIndex: 3,
      whiteSpace: 'nowrap',
    }}>
      {children}
      <style>{`@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}`}</style>
    </div>
  );
}

function Hero() {
  return (
    <header id="top" style={heroStyles.wrap}>
      <div className="glow-blob" style={{ left: '-200px', top: '-200px', width: 700, height: 700, background: 'radial-gradient(circle, rgba(79,140,255,0.35), transparent 60%)' }}/>
      <div className="glow-blob" style={{ right: '-300px', top: '40px', width: 800, height: 800, background: 'radial-gradient(circle, rgba(168,85,247,0.25), transparent 60%)' }}/>

      <div className="container">
        <div style={heroStyles.grid} className="hero-grid">
          <div style={heroStyles.left}>
            <span className="eyebrow">Software a medida · Sistemas con IA · Arequipa, Perú</span>
            <h1 style={heroStyles.title}>
              Construimos los <span className="gradient-text">sistemas</span> que mueven tu empresa.<br/>
              <span style={{ color: 'var(--fg-2)', fontWeight: 400 }}>Potenciados con </span><span className="gradient-text" style={{ position: 'relative' }}>IA<span style={{
                position: 'absolute', left: -8, right: -8, bottom: -6, height: 8,
                background: 'linear-gradient(90deg, transparent, rgba(168,85,247,.5), transparent)',
                borderRadius: 4, filter: 'blur(8px)', zIndex: -1,
              }}/></span><span style={{ color: 'var(--fg-2)', fontWeight: 400 }}>.</span>
            </h1>
            <p style={heroStyles.sub}>
              Diseñamos sistemas informáticos a medida — ERPs, plataformas SaaS, apps web y móviles —
              y les <strong style={{ color: 'var(--fg)' }}>integramos IA</strong>: chatbots, asistentes
              inteligentes y automatización que reemplazan tareas manuales y hacen crecer tu operación.
            </p>
            <div style={heroStyles.ctas}>
              <a href="#contacto" className="btn btn-primary">
                Cotiza tu sistema
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M5 12h14M13 6l6 6-6 6"/>
                </svg>
              </a>
              <a href="#proyectos" className="btn btn-ghost">
                Ver proyectos
              </a>
            </div>

            <div style={heroStyles.stats} className="hero-stats">
              {[
                ['+9', 'Años entregando software'],
                ['80+', 'Sistemas en producción'],
                ['12', 'Sectores atendidos'],
                ['99.9%', 'Uptime promedio'],
              ].map(([n, l]) => (
                <div style={heroStyles.stat} key={l}>
                  <span style={heroStyles.statNum}>{n}</span>
                  <span style={heroStyles.statLabel}>{l}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
            {/* Big floating logo ABOVE the code panel */}
            <div style={{
              position: 'relative',
              width: 240, height: 240,
              pointerEvents: 'none',
              animation: 'heroLogoFloat 8s ease-in-out infinite',
              alignSelf: 'center',
              marginTop: -180,
              marginBottom: 8,
            }} className="hero-logo">
              <div style={{
                position: 'absolute', inset: '-15%',
                background: 'radial-gradient(circle, rgba(79,140,255,0.5), rgba(168,85,247,0.25) 45%, transparent 70%)',
                filter: 'blur(28px)', zIndex: 0,
              }}/>
              <img src="assets/logo.png" alt="" style={{
                position: 'relative', width: '100%', height: '100%',
                objectFit: 'contain', zIndex: 1,
                filter: 'drop-shadow(0 20px 40px rgba(79,140,255,0.5)) drop-shadow(0 0 60px rgba(168,85,247,0.35))',
              }}/>
              <style>{`
                @keyframes heroLogoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-2deg)}}
                @media (max-width: 980px){ .hero-logo{ display: none !important; } }
              `}</style>
            </div>
            <div style={{ width: '100%', position: 'relative' }}>
              <HeroCodePanel/>
            <HeroFloatingCard x={-40} y={-20} delay={0}>
              <span style={{ color: '#22D3EE' }}>●</span> &nbsp;BUILD PASSING · 2.3s
            </HeroFloatingCard>
            <HeroFloatingCard x={-60} y={340} delay={1.5}>
              <span style={{ color: '#A855F7' }}>↗</span> &nbsp;DEPLOY · sistema-ventas v2.4
            </HeroFloatingCard>
            <HeroFloatingCard x={'70%'} y={420} delay={3}>
              <span style={{ color: '#4F8CFF' }}>{'{ }'}</span> &nbsp;1,284 commits · main
            </HeroFloatingCard>
            <HeroFloatingCard x={'-20px'} y={500} delay={0.8}>
              <span style={{ color: '#A855F7' }}>✨</span> &nbsp;AI POWERED · Claude · OpenAI
            </HeroFloatingCard>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px){
          .hero-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
          .hero-stats{ grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </header>
  );
}
window.Hero = Hero;