// VoiceAIPage: deep-link product page for KI-Telefonservice
const VoiceAIPage = ({ onCTA }) => {
  const features = [
    { t: 'Natürliche Sprache', b: 'Ihr KI-Assistent klingt nicht wie ein Roboter und führt echte Dialoge — statt starrer Drücken-Sie-die-1-Menüs.' },
    { t: 'Termine vereinbaren', b: 'Direkt im Kalender Ihres Teams, mit Konfliktprüfung und Bestätigungs-E-Mail.' },
    { t: 'Lead-Qualifizierung', b: 'Anfragen werden strukturiert erfasst und nach Dringlichkeit sortiert ans Team weitergegeben.' },
    { t: '24 / 7 erreichbar', b: 'Keine Wartezeit, keine verpassten Anrufe — auch am Wochenende und nach Feierabend.' },
  ];
  return (
    <main>
      <section style={{ padding: '96px 24px 64px', background: '#fff' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'center' }}>
          <div>
            <div style={{
              display:'inline-flex', alignItems:'center', gap: 8,
              padding:'6px 12px', borderRadius: 999, background:'#FFF6BF',
              font:'500 12px Roboto, sans-serif', letterSpacing:'0.04em',
              textTransform:'uppercase', color:'#0A0A0A', marginBottom: 24,
            }}>
              <Icon name="phone" size={12} stroke={2}/> Voice AI
            </div>
            <h1 style={{ font:'700 56px/1.05 Roboto, sans-serif', letterSpacing:'-0.02em', margin:'0 0 20px' }}>
              Ihr Telefon klingelt nie wieder ins Leere.
            </h1>
            <p style={{ font:'400 18px/1.6 Roboto, sans-serif', color:'#525252', margin:'0 0 32px' }}>
              Unser KI-Telefonassistent nimmt Anrufe entgegen, beantwortet Fragen und vereinbart
              Termine — rund um die Uhr, in natürlicher Sprache.
            </p>
            <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,
            }}>
              Demo anhören <Icon name="play" size={14} stroke={2}/>
            </button>
          </div>
          <CallMockup />
        </div>
      </section>

      <section style={{ padding: '64px 24px 96px', background: '#fff' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap: 32 }}>
          {features.map((f,i)=>(
            <div key={i} style={{
              padding: 28, borderRadius: 8, border: '1px solid #E5E5E5',
              display:'flex', flexDirection:'column', gap: 8,
            }}>
              <div style={{ width: 32, height: 4, background:'#FFD500', borderRadius: 2, marginBottom: 12 }}/>
              <div style={{ font:'600 20px Roboto, sans-serif', color:'#0A0A0A' }}>{f.t}</div>
              <div style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#525252' }}>{f.b}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
};

const CallMockup = () => {
  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 Wochentag 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: 360,
    }}>
      <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="mic" size={16} stroke={2} color="#0A0A0A"/>
        </div>
        <div>
          <div style={{ font:'600 14px Roboto, sans-serif', color:'#fff' }}>Goma Voice AI</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: '78%', 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>
  );
};

window.VoiceAIPage = VoiceAIPage;