// Hero: bold headline + sub + CTA, with auto-cycling product-mockup demo on the right
const Hero = ({ onCTA }) => {
  const slides = [
    { id: 'voice',    label: 'Voice AI',    Comp: window.VoiceMockup,    href: 'https://goma-it.at/voice-ai/' },
    { id: 'chatbot',  label: 'Chatbot',     Comp: window.ChatbotMockup,  href: 'https://goma-it.at/chatbot-vorarlberg/' },
    { id: 'workflow', label: 'Workflow',    Comp: window.WorkflowMockup, href: 'https://goma-it.at/agenten-workflows/' },
    { id: 'content',  label: 'Content',     Comp: window.ContentMockup,  href: 'https://goma-it.at/content-automation-marketing-bots/' },
    { id: 'rag',      label: 'Wissens-KI',  Comp: window.RagMockup,      href: 'https://goma-it.at/rag-wissensdatenbanken/' },
  ];

  const [idx, setIdx]     = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % slides.length), 4500);
    return () => clearInterval(id);
  }, [paused, slides.length]);

  const current = slides[idx];
  const goTo = (href) => { if (href) window.location.href = href; };

  return (
    <section style={{ padding: '96px 24px 64px', background: '#fff' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: '#FFF6BF', color: '#0A0A0A',
            fontSize: 12, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase',
            marginBottom: 24,
          }}>
            <span style={{width: 6, height: 6, borderRadius: '50%', background: '#0A0A0A'}}/>
            KI aus Vorarlberg
          </div>
          <h1 style={{
            font: '700 64px/1.05 Roboto, sans-serif',
            letterSpacing: '-0.02em', color: '#0A0A0A', margin: '0 0 20px',
          }}>
            Wir automatisieren Ihr Unternehmen mit KI.
          </h1>
          <p style={{
            font: '400 20px/1.5 Roboto, sans-serif', color: '#525252',
            maxWidth: 560, margin: '0 0 32px',
          }}>
            Mehr Kapazität, weniger Verwaltung. Goma-IT bringt künstliche Intelligenz in den
            Mittelstand — vom KI-Telefonassistenten bis zur vollautomatischen Dokumentenverarbeitung.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={onCTA} style={{
              height: 52, padding: '0 24px', border: 'none', borderRadius: 8,
              background: '#FFD500', color: '#0A0A0A',
              font: '600 15px Roboto, sans-serif', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              transition: 'background 200ms',
            }}
            onMouseEnter={(e)=>e.currentTarget.style.background='#F5C400'}
            onMouseLeave={(e)=>e.currentTarget.style.background='#FFD500'}>
              Kostenlose Potenzial-Analyse starten
              <Icon name="arrowRight" size={16} stroke={2}/>
            </button>
          </div>
        </div>

        {/* Right column: cycling mockup carousel */}
        <div
          style={{ position: 'relative' }}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          {/* Stage: mockups stacked with crossfade */}
          <div
            onClick={() => goTo(current && current.href)}
            style={{
              position: 'relative',
              borderRadius: 16,
              overflow: 'hidden',
              cursor: current ? 'pointer' : 'default',
              minHeight: 400,
              boxShadow: '0 12px 32px rgba(10,10,10,0.06)',
            }}
          >
            {slides.map((s, i) => {
              const Comp = s.Comp;
              return (
                <div key={s.id} style={{
                  position: i === 0 ? 'relative' : 'absolute',
                  inset: 0,
                  opacity: i === idx ? 1 : 0,
                  transition: 'opacity 500ms ease',
                  pointerEvents: i === idx ? 'auto' : 'none',
                }}>
                  {Comp ? <Comp/> : null}
                </div>
              );
            })}
          </div>

          {/* Indicator strip: clickable labels with active dot */}
          <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            gap: 4, marginTop: 20, flexWrap: 'wrap',
          }}>
            {slides.map((s, i) => {
              const active = i === idx;
              return (
                <button key={s.id}
                  onClick={(e) => { e.stopPropagation(); setIdx(i); setPaused(true); }}
                  style={{
                    appearance: 'none',
                    border: 'none',
                    background: active ? '#0A0A0A' : 'transparent',
                    color: active ? '#fff' : '#737373',
                    padding: '6px 12px',
                    borderRadius: 999,
                    cursor: 'pointer',
                    font: '500 12px Roboto, sans-serif',
                    letterSpacing: '0.02em',
                    transition: 'background 200ms, color 200ms',
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                  }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: '50%',
                    background: active ? '#FFD500' : '#D4D4D4',
                  }}/>
                  {s.label}
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;