/* Funnel page: Risiko-Check (Phase 1) → Pricing-Konfigurator (Phase 2) */
const { useState: useStateFnl, useEffect: useEffectFnl } = React;

function FunnelStepNav({ step }) {
  const steps = [
  { n: 1, label: 'Risiko erkennen', href: '#risiko' },
  { n: 2, label: 'Paket konfigurieren', href: '#preis' },
  { n: 3, label: 'Angebot erhalten', href: '#preis' }];

  return (
    <div className="funnel-nav">
      <div className="container">
        <div className="funnel-steps">
          {steps.map((s, i) =>
          <React.Fragment key={s.n}>
              <a href={s.href} className={`funnel-step ${step === s.n ? 'current' : step > s.n ? 'done' : ''}`}>
                <span className="fs-num">{step > s.n ? <Icon.Check size={14} /> : s.n}</span>
                <span className="fs-label">{s.label}</span>
              </a>
              {i < steps.length - 1 && <span className="fs-bar" />}
            </React.Fragment>
          )}
        </div>
      </div>
    </div>);

}

function FunnelHero() {
  return (
    <section className="hero" style={{ padding: '160px 0 60px' }}>
      <div className="hero-grid-bg" />
      <div className="hero-glow" />
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
        <span className="eyebrow"><span className="dot" />3-Phasen · Selbstdiagnose</span>
        <h1 style={{ fontSize: 'clamp(2.4rem, 5vw, 4.4rem)', margin: '24px 0' }}>
          Erkennen Sie Ihr <span className="accent">echtes Cyber-Risiko</span>.
        </h1>
        <p className="lead" style={{ margin: '0 auto 0', maxWidth: 640 }}>Sofortige Klarheit über Schadenpotenzial und monatliche Investition.


        </p>
      </div>
    </section>);

}

function FunnelPage() {
  const [step, setStep] = useStateFnl(1);
  const [offerSubmitted, setOfferSubmitted] = useStateFnl(false);

  useEffectFnl(() => {
    if (offerSubmitted) return;
    const sections = [
    { id: 'risiko', step: 1 },
    { id: 'preis', step: 2 }];

    const onScroll = () => {
      const scrollPos = window.scrollY + window.innerHeight * 0.4;
      let active = 1;
      sections.forEach((s) => {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= scrollPos) {
          active = s.step;
        }
      });
      setStep(active);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [offerSubmitted]);

  useEffectFnl(() => {
    if (offerSubmitted) setStep(3);
  }, [offerSubmitted]);

  return (
    <React.Fragment>
      <SiteHeader active="funnel-risiko" />
      <FunnelHero />
      <FunnelStepNav step={step} />

      {/* PHASE 1 */}
      <section className="section" id="risiko" style={{ paddingTop: 60 }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><Icon.Gauge size={14} />Phase 1 von 3 · Risiko-Analyse</span>
            <h2>Was kostet Sie ein Cyber-Vorfall <span style={{ color: 'var(--color-gold)' }}>wirklich</span>?</h2>
            <p>Die durchschnittliche Ransomware-Attacke legt KMU für 17 Tage lahm.<br/>Berechnen Sie in 60 Sekunden, was das für Ihr Unternehmen bedeutet.</p>
          </div>
          <RiskCalculator />
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <a href="#preis" className="btn btn-brand btn-lg" onClick={() => setStep(2)}>
              Weiter zu Phase 2: Paket konfigurieren <Icon.Arrow />
            </a>
          </div>
        </div>
      </section>

      {/* PHASE 2 */}
      <section className="section" id="preis" style={{ background: 'linear-gradient(180deg, transparent, rgba(15, 82, 186, 0.05), transparent)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow"><Icon.Building size={14} />Phase 2 von 3 · Konfigurator</span>
            <h2>Konfigurieren Sie Ihr <span style={{ color: 'var(--color-gold)' }}>IT-Paket</span> — transparent &amp; sofort</h2>
            <p>Keine versteckten Kosten. Kein Sales-Call für die Preisanfrage.<br />Sehen Sie monatliche und einmalige Kosten in Echtzeit.</p>
          </div>
          <PricingCalculator onOfferSubmitted={() => setOfferSubmitted(true)} />
        </div>
      </section>

      <CtaStrip heading="Phase 3: Sprechen wir über Ihre Zahlen."
      sub="Kostenlose 30-Min-Potenzialanalyse mit einem MaliTech-Experten — wir gehen Ihr Risiko & Paket gemeinsam durch."
      primary="Termin buchen"
      primaryHref="kontakt.html" />
      
      <SiteFooter />

      {/* Aiva Chat-Assistant (Floating Bubble unten rechts) */}
      <AivaChat />
    </React.Fragment>);

}
ReactDOM.createRoot(document.getElementById('root')).render(<FunnelPage />);