// VoiceMockup: animated phone-call visual for the Voice AI hero
const VoiceMockup = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t+1), 1200);
    return () => clearInterval(id);
  }, []);
  const lines = [
    { who: 'caller', text: 'Guten Tag, ich brauche einen Termin nächste Woche.' },
    { who: 'ai',     text: 'Gerne! Welcher Tag passt Ihnen am besten?' },
    { who: 'caller', text: 'Mittwoch wäre gut, am Vormittag.' },
    { who: 'ai',     text: 'Mittwoch um 10:00 Uhr ist frei. Soll ich das eintragen?' },
  ];
  const visible = Math.min(lines.length, tick % (lines.length + 2) + 1);
  return (
    <div style={{
      borderRadius: 16, background:'#0A0A0A', padding: 24,
      display:'flex', flexDirection:'column', gap: 12, minHeight: 400,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10, paddingBottom: 12, borderBottom:'1px solid #2E2E2E' }}>
        <div style={{ width: 32, height: 32, borderRadius:'50%', background:'#FFD500', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="phone" size={16} stroke={2} color="#0A0A0A"/>
        </div>
        <div>
          <div style={{ font:'600 14px Roboto, sans-serif', color:'#fff' }}>Goma Voice AI · Live-Demo</div>
          <div style={{ font:'400 12px Roboto, sans-serif', color:'#A3A3A3' }}>
            Live · {String(Math.floor(tick/2)).padStart(2,'0')}:{String((tick*7)%60).padStart(2,'0')}
          </div>
        </div>
        <div style={{ marginLeft:'auto', display:'flex', gap: 4 }}>
          {[0,1,2,3,4].map(i => (
            <div key={i} style={{
              width: 3, height: 14 + ((tick + i*3) % 3) * 6,
              background:'#FFD500', borderRadius: 2, transition:'height 300ms',
            }}/>
          ))}
        </div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
        {lines.slice(0, visible).map((l, i) => (
          <div key={i} style={{
            alignSelf: l.who === 'ai' ? 'flex-start' : 'flex-end',
            maxWidth:'80%', padding:'10px 14px', borderRadius: 12,
            background: l.who === 'ai' ? '#FFD500' : '#2E2E2E',
            color:    l.who === 'ai' ? '#0A0A0A' : '#fff',
            font:'500 13px/1.4 Roboto, sans-serif',
          }}>{l.text}</div>
        ))}
      </div>
    </div>
  );
};

// WorkflowMockup: animated nodes/edges visual for Prozess-Automatisierung
const WorkflowMockup = () => {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s+1) % 4), 1200);
    return () => clearInterval(id);
  }, []);
  const nodes = [
    { x: 40,  y: 60,  label:'E-Mail',    icon:'mail' },
    { x: 200, y: 30,  label:'KI-Agent',  icon:'sparkle' },
    { x: 200, y: 150, label:'PDF (OCR)', icon:'file' },
    { x: 360, y: 90,  label:'SevDesk',   icon:'check' },
  ];
  const edges = [[0,1],[0,2],[1,3],[2,3]];
  return (
    <div style={{
      borderRadius: 16, background:'#0A0A0A', padding: 24, position:'relative', minHeight: 280,
    }}>
      <div style={{ font:'500 12px Roboto, sans-serif', color:'#A3A3A3', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 12 }}>
        n8n Workflow · Rechnungs-Eingang
      </div>
      <svg viewBox="0 0 460 220" style={{ width:'100%', height: 240 }}>
        {edges.map(([a,b], i) => {
          const active = (step >= 1 && i < step + 1);
          return (
            <line key={i} x1={nodes[a].x+30} y1={nodes[a].y+20} x2={nodes[b].x} y2={nodes[b].y+20}
                  stroke={active ? '#FFD500' : '#2E2E2E'} strokeWidth="2" strokeDasharray="4 4"/>
          );
        })}
        {nodes.map((n,i)=>{
          const active = i <= step;
          return (
            <g key={i} transform={`translate(${n.x}, ${n.y})`}>
              <rect width="70" height="40" rx="6"
                    fill={active ? '#FFD500' : '#1A1A1A'}
                    stroke={active ? '#FFD500' : '#2E2E2E'} strokeWidth="1"/>
              <text x="35" y="25" textAnchor="middle"
                    fontFamily="Roboto, sans-serif" fontSize="11" fontWeight="600"
                    fill={active ? '#0A0A0A' : '#A3A3A3'}>{n.label}</text>
            </g>
          );
        })}
      </svg>
      <div style={{ display:'flex', gap: 8, marginTop: 8 }}>
        {[0,1,2,3].map(i => (
          <div key={i} style={{
            flex: 1, height: 3, borderRadius: 2,
            background: i <= step ? '#FFD500' : '#2E2E2E',
          }}/>
        ))}
      </div>
    </div>
  );
};

// ChatbotMockup: web-chat widget for Smarte Web-Chatbots
const ChatbotMockup = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t+1), 1400);
    return () => clearInterval(id);
  }, []);
  const lines = [
    { who:'bot',  text:'Hallo! Wonach suchen Sie heute?' },
    { who:'user', text:'Was kostet eine neue Wärmepumpe?' },
    { who:'bot',  text:'Gerne! Wie groß ist das Haus ungefähr?' },
    { who:'bot',  text:'📅 Termin frei: Di 14:00 — buchen?' },
  ];
  const visible = Math.min(lines.length, tick % (lines.length + 2) + 1);
  return (
    <div style={{
      borderRadius: 16, background:'#FAFAFA', padding: 20, minHeight: 360,
      border:'1px solid #E5E5E5',
      display:'flex', flexDirection:'column',
    }}>
      <div style={{ font:'500 12px Roboto, sans-serif', color:'#737373', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom: 16 }}>
        ihre-website.at
      </div>
      <div style={{
        marginTop:'auto', alignSelf:'flex-end', width: 320,
        background:'#fff', border:'1px solid #E5E5E5', borderRadius: 14,
        boxShadow:'0 8px 24px rgba(10,10,10,0.08)', overflow:'hidden',
      }}>
        <div style={{ background:'#0A0A0A', color:'#fff', padding:'12px 16px', display:'flex', alignItems:'center', gap: 10 }}>
          <div style={{ width: 28, height: 28, borderRadius:'50%', background:'#FFD500', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="messageCircle" size={14} stroke={2} color="#0A0A0A"/>
          </div>
          <div>
            <div style={{ font:'600 13px Roboto, sans-serif' }}>Goma-Verkäufer</div>
            <div style={{ font:'400 11px Roboto, sans-serif', color:'#A3A3A3' }}>● online</div>
          </div>
        </div>
        <div style={{ padding: 14, display:'flex', flexDirection:'column', gap: 8, minHeight: 180 }}>
          {lines.slice(0, visible).map((l,i)=>(
            <div key={i} style={{
              alignSelf: l.who === 'bot' ? 'flex-start' : 'flex-end',
              maxWidth:'82%', padding:'8px 12px', borderRadius: 10,
              background: l.who === 'bot' ? '#F5F5F5' : '#FFD500',
              color:'#0A0A0A',
              font:'400 13px/1.4 Roboto, sans-serif',
            }}>{l.text}</div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ContentMockup: voice → multi-channel fan-out
const ContentMockup = () => {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s+1) % 5), 900);
    return () => clearInterval(id);
  }, []);
  const outs = [
    { label:'Blogartikel',   icon:'fileText' },
    { label:'LinkedIn-Post', icon:'share' },
    { label:'Newsletter',    icon:'mail' },
    { label:'Insta-Skript',  icon:'play' },
  ];
  return (
    <div style={{
      borderRadius: 16, background:'#0A0A0A', padding: 24, minHeight: 360,
      display:'grid', gridTemplateColumns:'1fr 2fr', gap: 24, alignItems:'center',
    }}>
      <div>
        <div style={{ font:'500 11px Roboto, sans-serif', color:'#A3A3A3', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 10 }}>Input</div>
        <div style={{
          padding: 16, borderRadius: 12, background:'#1A1A1A', border:'1px solid #2E2E2E',
          display:'flex', flexDirection:'column', gap: 10, alignItems:'center',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius:'50%', background:'#FFD500',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
          }}>
            <Icon name="mic" size={20} stroke={2} color="#0A0A0A"/>
          </div>
          <div style={{ font:'600 13px Roboto, sans-serif', color:'#fff' }}>Sprachnotiz</div>
          <div style={{ display:'flex', gap: 2, alignItems:'flex-end', height: 24 }}>
            {[0,1,2,3,4,5,6,7].map(i => (
              <div key={i} style={{
                width: 2, height: 8 + ((step + i) % 4) * 4,
                background:'#FFD500', borderRadius: 1,
              }}/>
            ))}
          </div>
          <div style={{ font:'400 11px Roboto, sans-serif', color:'#A3A3A3' }}>3:24 min</div>
        </div>
      </div>
      <div>
        <div style={{ font:'500 11px Roboto, sans-serif', color:'#A3A3A3', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom: 10 }}>Output</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
          {outs.map((o,i)=>{
            const active = step >= i+1 || step === 0;
            return (
              <div key={i} style={{
                padding:'12px 14px', borderRadius: 10,
                background: active ? '#FFD500' : '#1A1A1A',
                color: active ? '#0A0A0A' : '#737373',
                border: active ? '1px solid #FFD500' : '1px solid #2E2E2E',
                display:'flex', alignItems:'center', gap: 8,
                font:'500 13px Roboto, sans-serif',
                transition:'all 300ms',
              }}>
                <Icon name={o.icon} size={14} stroke={2} color={active ? '#0A0A0A' : '#525252'}/>
                {o.label}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// RagMockup: search-with-citations interface
const RagMockup = () => {
  const [typed, setTyped] = React.useState(0);
  const query = 'Wie reiche ich Urlaub ein?';
  React.useEffect(() => {
    const id = setInterval(() => setTyped(t => (t+1) % (query.length + 14)), 80);
    return () => clearInterval(id);
  }, []);
  const showAnswer = typed > query.length + 4;
  return (
    <div style={{
      borderRadius: 16, background:'#fff', border:'1px solid #E5E5E5', padding: 20, minHeight: 360,
      boxShadow:'0 8px 24px rgba(10,10,10,0.04)',
    }}>
      <div style={{ font:'500 12px Roboto, sans-serif', color:'#737373', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom: 14 }}>
        Goma Wissens-KI · intern
      </div>
      <div style={{
        display:'flex', alignItems:'center', gap: 10, padding:'12px 14px',
        border:'1px solid #E5E5E5', borderRadius: 10, marginBottom: 16,
      }}>
        <Icon name="search" size={16} stroke={2} color="#737373"/>
        <div style={{ font:'400 14px Roboto, sans-serif', color:'#0A0A0A' }}>
          {query.slice(0, Math.min(typed, query.length))}
          <span style={{ opacity: typed % 2 ? 1 : 0 }}>|</span>
        </div>
      </div>
      {showAnswer && (
        <div style={{
          padding: 16, borderRadius: 10, background:'#FAFAFA',
          font:'400 14px/1.55 Roboto, sans-serif', color:'#0A0A0A', marginBottom: 12,
        }}>
          Urlaubsanträge laufen über das HR-Tool BambooHR. Mindestens 2 Wochen
          vorher beantragen, der Vorgesetzte erhält automatisch die Genehmigungs-Mail.
        </div>
      )}
      {showAnswer && (
        <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
          <div style={{ font:'500 11px Roboto, sans-serif', color:'#737373', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom: 4 }}>Quellen</div>
          {['Mitarbeiterhandbuch.pdf · S. 12','HR-Onboarding 2025.docx'].map((s,i)=>(
            <div key={i} style={{
              display:'flex', alignItems:'center', gap: 8, padding:'8px 10px',
              background:'#fff', border:'1px solid #E5E5E5', borderRadius: 6,
              font:'500 12px Roboto, sans-serif', color:'#0A0A0A',
            }}>
              <Icon name="fileText" size={12} stroke={2} color="#737373"/>
              {s}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

window.VoiceMockup = VoiceMockup;
window.WorkflowMockup = WorkflowMockup;
window.ChatbotMockup = ChatbotMockup;
window.ContentMockup = ContentMockup;
window.RagMockup = RagMockup;