/* Pricing Calculator — Angebots-Konfigurator (erweitert) */
const { useState: useStateP, useMemo: useMemoP, useEffect: useEffectP, useRef: useRefP } = React;

// Placetel AI Minutenpakete: Preis pro Laufzeit (12 Mo nutzt 1-Monats-Preis, 24 Mo nutzt 24-Monats-Preis)
const AI_MINUTE_PACKAGES = {
  p250: { minutes: 250, price: { 12: 40.00, 24: 37.50 } },
  p500: { minutes: 500, price: { 12: 80.00, 24: 75.00 } },
  p1000: { minutes: 1000, price: { 12: 150.00, 24: 140.00 } },
  p2500: { minutes: 2500, price: { 12: 375.00, 24: 350.00 } },
  p5000: { minutes: 5000, price: { 12: 700.00, 24: 650.00 } },
  p10000: { minutes: 10000, price: { 12: 1300.00, 24: 1200.00 } }
};

function PricingCalculator({ onOfferSubmitted }) {
  const [users, setUsers] = useStateP(10);
  const [term, setTerm] = useStateP(24);
  const [support, setSupport] = useStateP(false);
  const [email, setEmail] = useStateP(true);
  const [phone, setPhone] = useStateP(false);
  const [aiRecep, setAiRecep] = useStateP(false);
  const [aiMinutes, setAiMinutes] = useStateP('none'); // none | later | p250 | p500 | p1000 | p2500 | p5000 | p10000
  const [partnerDS, setPartnerDS] = useStateP(false);
  const [partnerE5, setPartnerE5] = useStateP(false);
  const [partnerCam, setPartnerCam] = useStateP(false);
  const [partnerAuto, setPartnerAuto] = useStateP(false);
  const [modalOpen, setModalOpen] = useStateP(false);

  // Tier ableiten und Add-On-Presets bei Tier-Wechsel automatisch setzen
  const isCustom = users >= 50;
  const currentTier = users >= 50 ? 'Custom' : users > 25 ? 'Enterprise' : users > 10 ? 'Scale' : 'Core';
  const prevTierRef = useRefP(currentTier);
  useEffectP(() => {
    if (prevTierRef.current === currentTier) return;
    prevTierRef.current = currentTier;
    if (currentTier === 'Core') {
      setEmail(true);
      setSupport(false);
      setPhone(false);
      setAiRecep(false);
      setPartnerDS(false);
    } else if (currentTier === 'Scale') {
      setEmail(true);
      setSupport(true);
      setPhone(true);
      setAiRecep(false);
      setPartnerDS(false);
    } else if (currentTier === 'Enterprise' || currentTier === 'Custom') {
      setEmail(true);
      setSupport(true);
      setPhone(true);
      setAiRecep(true);
      setPartnerDS(true);
      setPartnerAuto(true);
    }
  }, [currentTier]);

  const calc = useMemoP(() => {
    const baseFee = 550;
    const extraUsers = Math.max(0, users - 3);
    const userCost = extraUsers * 50;
    const subtotal = baseFee + userCost;

    const supportCost = support ? 100 * users : 0;
    const emailCost = email ? 5 * users : 0;
    const phoneCost = phone ? 11.90 * users : 0;
    const aiCost = aiRecep ? 20.90 : 0;
    // Minutenpaket-Preis abhängig von Laufzeit (12 Mo → 1-Monats-Preis, 24 Mo → 24-Monats-Preis)
    const aiMinutesPrice = aiRecep ? AI_MINUTE_PACKAGES[aiMinutes]?.price?.[term] || 0 : 0;
    const addonsCost = supportCost + emailCost + phoneCost + aiCost + aiMinutesPrice;

    // 10%-Aufschlag bei 12-Monats-Laufzeit auf den GESAMTEN MRR (Basis + User + Add-ons)
    const preTerm = subtotal + addonsCost;
    const termMultiplier = term === 12 ? 1.10 : 1.0;
    const termSurcharge = preTerm * (termMultiplier - 1);
    const baseMRR = subtotal * termMultiplier; // für Setup-Kalkulation
    const totalMRR = preTerm * termMultiplier;

    let tier = 'Core',firewall = 1550;
    if (users >= 50) {tier = 'Custom';firewall = 5735;} else
    if (users > 25) {tier = 'Enterprise';firewall = 5735;} else
    if (users > 10) {tier = 'Scale';firewall = 2600;}

    const hddCount = Math.max(Math.ceil(users * 1.4 * 1.3 / 4), 2) * 4;
    const hardware = { rack: 200, install: 300, ups: 560, switch: 345, wifi: 90, nas: 585, cloudKey: 290, hdds: 35 * hddCount, firewall };
    const hardwareTotal = Object.values(hardware).reduce((a, b) => a + b, 0);
    // Setup: IMMER auf 24-Monats-Basis und OHNE Support-Wartung berechnet
    // Telefon/KI fließen NICHT in die 20%-Setup-Basis ein, sondern als FESTE Aufschläge.
    const setupMRRBase = subtotal + emailCost; // nur Basis + User + E-Mail-Security
    const phoneSetup = phone ? 250 : 0;
    const aiSetup = aiRecep ? 1000 : 0;
    const setup = 0.20 * (hardwareTotal + setupMRRBase * 24) + phoneSetup + aiSetup;

    return { baseFee, extraUsers, userCost, subtotal, baseMRR, supportCost, emailCost, phoneCost, aiCost, aiMinutesPrice, addonsCost, totalMRR, termSurcharge, tier, firewall, hddCount, hardware, hardwareTotal, setup, phoneSetup, aiSetup };
  }, [users, term, support, email, phone, aiRecep, aiMinutes]);

  /* ── AIVA-INTEGRATION ────────────────────────────────────────────────
     1) Aktuellen Konfigurator-Stand auf window.__aivaCalcState publishen,
        damit Aiva ihn als Kontext mit ins Backend schickt.
     2) Auf aiva:action Events lauschen und Konfigurator entsprechend bedienen.
  */
  useEffectP(() => {
    window.__aivaCalcState = {
      users, term, tier: calc.tier,
      support, email, phone, aiRecep, aiMinutes,
      partnerDS, partnerE5, partnerCam, partnerAuto,
      totalMRR: Math.round(calc.totalMRR),
      setup: Math.round(calc.setup),
      hardwareTotal: calc.hardwareTotal
    };
  }, [users, term, support, email, phone, aiRecep, aiMinutes, partnerDS, partnerE5, partnerCam, partnerAuto, calc]);

  useEffectP(() => {
    const setters = {
      support: setSupport, email: setEmail, phone: setPhone, aiRecep: setAiRecep,
      partnerDS: setPartnerDS, partnerE5: setPartnerE5, partnerCam: setPartnerCam, partnerAuto: setPartnerAuto
    };
    const handler = (e) => {
      const a = e.detail;
      if (!a || !a.type) return;
      switch (a.type) {
        case 'set_users':{
            const v = Math.max(3, Math.min(50, Number(a.value) || 10));
            setUsers(v);
            break;
          }
        case 'set_term':setTerm(Number(a.value) === 12 ? 12 : 24);break;
        case 'toggle_addon':{
            const fn = setters[a.name];
            if (fn) fn(Boolean(a.value));
            break;
          }
        case 'set_ai_minutes':{
            const valid = ['none', 'later', 'p250', 'p500', 'p1000', 'p2500', 'p5000', 'p10000'];
            if (valid.includes(a.value)) {
              setAiRecep(true);
              setAiMinutes(a.value);
            }
            break;
          }
        case 'scroll_to':{
            const id = a.value === 'risiko' ? 'risiko' : 'preis';
            const el = document.getElementById(id);
            if (el) {
              const top = el.getBoundingClientRect().top + window.pageYOffset - 80;
              window.scrollTo({ top, behavior: 'smooth' });
            }
            break;
          }
        case 'open_lead_modal':setModalOpen(true);break;
        default:break;
      }
    };
    window.addEventListener('aiva:action', handler);
    return () => window.removeEventListener('aiva:action', handler);
  }, []);

  const tiers = [
  { name: 'Core', range: '3–10 User', active: users <= 10 && !isCustom },
  { name: 'Scale', range: '11–25 User', active: users > 10 && users <= 25 && !isCustom },
  { name: 'Enterprise', range: '26–49 User', active: users > 25 && !isCustom }];


  const supportRate = support ? 100 : 150;

  return (
    <div className="calc-shell calc-shell--sticky">
      <div className="calc-grid">
        <div className="calc-inputs">
          <div className="calc-tag"><Icon.Building size={14} /> Phase 2 — Angebots-Konfigurator</div>
          <h3 className="calc-h3">Ihr individuelles IT-Paket</h3>

          <div className="input-group">
            <label className="input-label">Anzahl User / Mitarbeiter</label>
            <div className="slider-wrap">
              <input type="range" className="range-input" min="3" max="50" step="1" value={users} onChange={(e) => setUsers(+e.target.value)} />
              <div className="range-value">{isCustom ? '50+' : users}</div>
            </div>
            <div className="tier-grid" style={{ marginTop: 14 }}>
              {tiers.map((t) =>
              <div key={t.name} className={`tier-card ${t.active ? 'active' : ''}`}>
                  <div className="tier-name">{t.name}</div>
                  <div className="tier-range">{t.range}</div>
                </div>
              )}
            </div>
            {isCustom &&
            <a href="projekt-portal.html" className={`tier-custom ${isCustom ? 'active' : ''}`}>
                <div className="tier-custom-left">
                  <div className="tier-custom-badge"><Icon.Building size={14} /> Ab 50 User</div>
                  <div className="tier-custom-name">Custom</div>
                  <div className="tier-custom-desc">Individuelles Projekt — direkte Anfrage über unser Projekt-Portal. Bis 250 User, dedizierter Account-Manager, individuelles Hardware- &amp; Compliance-Setup.</div>
                </div>
                <div className="tier-custom-cta">
                  Zum Projekt-Portal <Icon.Arrow />
                </div>
              </a>
            }
          </div>

          <div className="input-group">
            <label className="input-label">Vertragslaufzeit</label>
            <div className="term-toggle">
              <button className={term === 24 ? 'active' : ''} onClick={() => setTerm(24)}>
                24 Monate <span className="meta">Bestpreis · empfohlen</span>
              </button>
              <button className={term === 12 ? 'active' : ''} onClick={() => setTerm(12)}>
                12 Monate <span className="meta">+10%</span>
              </button>
            </div>
          </div>

          {/* SUPPORT-VERGLEICH */}
          <div className="support-compare">
            <div className="sc-head">
              <Icon.Headset size={16} />
              <span>Support-Logik im Vergleich</span>
              <InfoTip text="Im Basispaket sind 3 Stunden Remote-Support pro Monat enthalten. Zusätzliche Stunden werden mit 150 €/h abgerechnet — mit Wartungsvertrag nur 100 €/h." />
            </div>
            <div className="sc-grid">
              <div className={`sc-cell ${!support ? 'sc-active' : ''}`}>
                <div className="sc-label">Ohne Wartungsvertrag</div>
                <div className="sc-rate">150 €<span>/Stunde</span></div>
                <div className="sc-meta">3 h Remote/Monat inklusive</div>
              </div>
              <div className={`sc-cell ${support ? 'sc-active' : ''}`}>
                <div className="sc-label">Mit Wartungsvertrag</div>
                <div className="sc-rate" style={{ color: 'var(--color-gold)' }}>100 €<span>/Stunde</span></div>
                <div><span className="sc-save">−33 % Supportkosten</span></div>
                <div className="sc-meta">1 h pro User/Monat inklusive</div>
              </div>
            </div>
          </div>

          <div className="input-group">
            <label className="input-label">Add-ons</label>
            <div className="addon-list">
              <div className={`addon ${support ? 'checked' : ''}`} onClick={() => setSupport(!support)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{support && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name">
                      <Icon.Headset size={14} /> &nbsp;Support-Wartungsvertrag
                      <span className="addon-rec">empfohlen</span>
                    </div>
                    <div className="meta">1 Std. Support/User/Monat </div>
                  </div>
                </div>
                <div className="addon-right">100 €/User</div>
              </div>
              <div className={`addon ${email ? 'checked' : ''}`} onClick={() => setEmail(!email)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{email && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Mail size={14} /> &nbsp;E-Mail Security</div>
                    <div className="meta">Spam- &amp; Phishing-Schutz pro Postfach</div>
                  </div>
                </div>
                <div className="addon-right">5 €/User</div>
              </div>
              <div className={`addon ${phone ? 'checked' : ''}`} onClick={() => setPhone(!phone)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{phone && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Phone size={14} /> &nbsp;Cloud-Telefonanlage</div>
                    <div className="meta">Placetel SIP inkl. Feature-Set</div>
                  </div>
                </div>
                <div className="addon-right">11,90 €/User</div>
              </div>
              <div className={`addon ${aiRecep ? 'checked' : ''}`} onClick={() => setAiRecep(!aiRecep)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{aiRecep && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Bot size={14} /> &nbsp;KI-Rezeptionist</div>
                    <div className="meta">Automatisierte Telefonannahme 24/7</div>
                  </div>
                </div>
                <div className="addon-right">20,90 €/Mtl.</div>
              </div>
              {aiRecep &&
              <div className="ai-minutes-wrap">
                <label className="ai-minutes-label">
                  Minutenpaket
                  <InfoTip text="Wählen Sie ein Minutenpaket für Ihren KI-Rezeptionisten. Ohne Paket fallen 0,19 € pro Gesprächsminute an. Innerhalb eines Pakets gilt der dort hinterlegte günstigere Minutenpreis, darüber hinaus wieder der reguläre Minutenpreis. Falls Ihr monatlicher Verbrauch noch nicht bekannt ist, können wir das Paket nachträglich gemeinsam festlegen." />
                </label>
                <select
                  className="ai-minutes-select"
                  value={aiMinutes}
                  onChange={(e) => setAiMinutes(e.target.value)}
                  onClick={(e) => e.stopPropagation()}>
                  <option value="none">Kein Paket — 0,19 €/Min.</option>
                  <option value="later">Verbrauch unklar — wird nachgereicht</option>
                  <option value="p250">250 Min. — {term === 24 ? '37,50 € (0,15 €/Min.)' : '40,00 € (0,16 €/Min.)'}</option>
                  <option value="p500">500 Min. — {term === 24 ? '75,00 € (0,15 €/Min.)' : '80,00 € (0,16 €/Min.)'}</option>
                  <option value="p1000">1.000 Min. — {term === 24 ? '140,00 € (0,14 €/Min.)' : '150,00 € (0,15 €/Min.)'}</option>
                  <option value="p2500">2.500 Min. — {term === 24 ? '350,00 € (0,14 €/Min.)' : '375,00 € (0,15 €/Min.)'}</option>
                  <option value="p5000">5.000 Min. — {term === 24 ? '650,00 € (0,13 €/Min.)' : '700,00 € (0,14 €/Min.)'}</option>
                  <option value="p10000">10.000 Min. — {term === 24 ? '1.200,00 € (0,12 €/Min.)' : '1.300,00 € (0,13 €/Min.)'}</option>
                </select>
                {aiMinutes !== 'none' && aiMinutes !== 'later' && AI_MINUTE_PACKAGES[aiMinutes] &&
                <div className="ai-minutes-detail">
                    <span><strong>{AI_MINUTE_PACKAGES[aiMinutes].minutes.toLocaleString('de-DE')}</strong> Minuten inkl.</span>
                    <span>{fmtEURExact(AI_MINUTE_PACKAGES[aiMinutes].price[term])} / Monat</span>
                  </div>
                }
                {(aiMinutes === 'none' || aiMinutes === 'later') &&
                <div className="ai-minutes-detail muted">
                    {aiMinutes === 'later' ? 'Paket wird nachträglich festgelegt' : 'Abrechnung pro Gesprächsminute (0,19 €)'}
                  </div>
                }
              </div>
              }
            </div>
          </div>

          {/* PARTNERDIENSTE */}
          <div className="input-group">
            <label className="input-label">Erweiterbare Lösungen (optional)</label>
            <div className="addon-list partner-list">
              <div className={`addon partner ${partnerDS ? 'checked' : ''}`} onClick={() => setPartnerDS(!partnerDS)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{partnerDS && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Shield size={14} />  Compliance-Lösung<InfoTip text="All-in-One Datenschutz- und Compliance-Paket in Zusammenarbeit mit ap-Datenschutz. Beinhaltet DSGVO-Audit, Erstellung und Pflege aller Richtlinien sowie laufende Dokumentation. Sie erhalten einen externen Datenschutzbeauftragten — vorausschauend statt reaktiv." /></div>
                    <div className="meta">All-in-One Datenschutz- &amp; Compliance-Lösung (DSGVO, Richtlinien, Dokumentation)</div>
                  </div>
                </div>
                <div className="addon-right partner-price">Preis auf Anfrage</div>
              </div>
              <div className={`addon partner ${partnerE5 ? 'checked' : ''}`} onClick={() => setPartnerE5(!partnerE5)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{partnerE5 && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Bolt size={14} />  Marketing-Lösung<InfoTip text="Spezialisierte Marketing-Agentur (element5) für Website-Entwicklung, Branding und digitale Kundengewinnung. Von der Markenstrategie über SEO bis hin zu Performance-Kampagnen — alles aus einer Hand. Skalierbar nach Bedarf, individuelles Angebot." /></div>
                    <div className="meta">Spezialisierte Marketing-Agentur für Website, Branding und digitale Kundengewinnung</div>
                  </div>
                </div>
                <div className="addon-right partner-price">Preis auf Anfrage</div>
              </div>
              <div className={`addon partner ${partnerAuto ? 'checked' : ''}`} onClick={() => setPartnerAuto(!partnerAuto)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{partnerAuto && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Refresh size={14} /> &nbsp;Prozess-Automatisierung<InfoTip text="Automatisierung wiederkehrender Geschäftsprozesse — z. B. Rechnungseingang, Freigabe-Workflows, Kunden-Onboarding, Datentransfer zwischen Systemen. Wir analysieren Ihre Abläufe, identifizieren Automatisierungspotenziale und implementieren passgenaue Lösungen über Power Automate, n8n oder Make. Spart Zeit, reduziert Fehlerquellen und entlastet Ihre Mitarbeiter." /></div>
                    <div className="meta">Wiederkehrende Workflows automatisieren — Power Automate, n8n, Make. Mehr Zeit fürs Kerngeschäft</div>
                  </div>
                </div>
                <div className="addon-right partner-price">Preis auf Anfrage</div>
              </div>
              <div className={`addon partner ${partnerCam ? 'checked' : ''}`} onClick={() => setPartnerCam(!partnerCam)}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flex: 1 }}>
                  <div className="checkbox-fake">{partnerCam && <Icon.Check size={14} />}</div>
                  <div className="addon-info">
                    <div className="name"><Icon.Camera size={14} /> &nbsp;Kamerasysteme<InfoTip text="Professionelle Videoüberwachung für Gebäude- und Objektsicherheit. Wir übernehmen Planung, Installation und laufende Wartung der Hardware — inkl. DSGVO-konformer Konfiguration und sicherer Aufzeichnung. Individuelles Angebot je nach Standort und Anforderung." /></div>
                    <div className="meta">Professionelle Videoüberwachung für Gebäude- und Objektsicherheit — Planung, Installation, Wartung</div>
                  </div>
                </div>
                <div className="addon-right partner-price">Preis auf Anfrage</div>
              </div>
            </div>
          </div>
        </div>

        <div className="calc-output">
          <div className="calc-tag"><Icon.Bolt size={14} /> Live-Kalkulation</div>

          <div className="pricing-summary">
            <div className="ps-block ps-block--main">
              <div className="ps-label">monatlich</div>
              <div className="ps-amount">{fmtEURExact(calc.totalMRR)}</div>
            </div>
            <div className="pricing-sub">
              {users} User · {term} Monate · Tier <strong style={{ color: 'var(--color-gold)' }}>{calc.tier}</strong>
            </div>
            <div className="ps-secondary">
              <div className="ps-secondary-item">
                <span className="ps-secondary-label">Hardware einmalig</span>
                <span className="ps-secondary-value">{fmtEURExact(calc.hardwareTotal)}</span>
              </div>
              <div className="ps-secondary-item">
                <span className="ps-secondary-label">Setup &amp; Installation einmalig</span>
                <span className="ps-secondary-value">ca. {fmtEURExact(calc.setup)}</span>
              </div>
              <div className="ps-secondary-item ps-secondary-total">
                <span className="ps-secondary-label">Einmalig gesamt</span>
                <span className="ps-secondary-value">ca. {fmtEURExact(calc.hardwareTotal + calc.setup)}</span>
              </div>
            </div>
          </div>

          {/* CYBER-VERSICHERUNG INKLUSIVE */}
          <div className="insurance-included">
            <div className="ii-icon"><Icon.Shield size={18} /></div>
            <div className="ii-body">
              <div className="ii-title">
                Cyber-Versicherung: <strong>inklusive</strong>
                <InfoTip text="Im monatlichen Paketpreis ist eine Cyber-Versicherung über unseren Makler-Partner enthalten. Die Versicherungssumme richtet sich nach Ihrem Umsatz und Ihrer Tätigkeit; typischer Marktwert einer vergleichbaren Einzelpolice ca. 1.100 €/Jahr." />
              </div>
              <div className="ii-meta">Wert: ⌀ 1.100 € / Jahr · enthalten für die Dauer der Vertragslaufzeit</div>
            </div>
            <div className="ii-badge">+0 €</div>
          </div>


          {/* COLLAPSIBLE: ALLE EINZELNEN POSITIONEN */}
          <details className="pricing-details">
            <summary className="pricing-details-summary">
              <span className="pricing-details-label">Alle Positionen anzeigen</span>
              <span className="pricing-details-chevron" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
              </span>
            </summary>
            <div className="pricing-rows">
            <div className="pricing-row">
              <span className="label">Basisgebühr (inkl. 3 User)</span>
              <span className="val">{fmtEURExact(calc.baseFee)}</span>
            </div>
            {calc.extraUsers > 0 &&
            <div className="pricing-row">
                <span className="label">+{calc.extraUsers} weitere User × 50 €<InfoTip text="Ab dem 4. User berechnen wir 50 € pro zusätzlichem User und Monat." /></span>
                <span className="val">{fmtEURExact(calc.userCost)}</span>
              </div>
            }
            {support && <div className="pricing-row"><span className="label">Wartungsvertrag × {users}</span><span className="val">{fmtEURExact(calc.supportCost)}</span></div>}
            {email && <div className="pricing-row"><span className="label">E-Mail Security × {users}</span><span className="val">{fmtEURExact(calc.emailCost)}</span></div>}
            {phone && <div className="pricing-row"><span className="label">Telefonanlage × {users}</span><span className="val">{fmtEURExact(calc.phoneCost)}</span></div>}
            {aiRecep && <div className="pricing-row"><span className="label">KI-Rezeptionist</span><span className="val">{fmtEURExact(calc.aiCost)}</span></div>}
            {aiRecep && aiMinutes !== 'none' && aiMinutes !== 'later' && AI_MINUTE_PACKAGES[aiMinutes] &&
            <div className="pricing-row">
                <span className="label">Minutenpaket {AI_MINUTE_PACKAGES[aiMinutes].minutes.toLocaleString('de-DE')} Min.</span>
                <span className="val">{fmtEURExact(calc.aiMinutesPrice)}</span>
              </div>
            }

            {term === 12 &&
            <div className="pricing-row">
                <span className="label">12-Monats-Aufschlag (+10%)<InfoTip text="Bei 12 statt 24 Monaten Laufzeit fällt ein Aufschlag von 10 % auf den gesamten Monatspreis (Basis + User + Add-ons) an. 24 Monate ist unser Bestpreis." /></span>
                <span className="val">{fmtEURExact(calc.termSurcharge)}</span>
              </div>
            }

            <div className="pricing-row subtotal">
              <span className="label">Einmalig: Hardware ({calc.tier})<InfoTip text="Server, Firewall, Switch, USV, NAS, Backup-HDDs, WiFi. Skaliert mit Tier (Core/Scale/Enterprise)." /></span>
              <span className="val">{fmtEURExact(calc.hardwareTotal)}</span>
            </div>
            <div className="pricing-row">
              <span className="label">Einmalig: Setup &amp; Installation (geschätzt)<InfoTip text="Geschätzt ca. 20 % aus Hardware + 24 Monatsgebühren (Basis + User + E-Mail/Telefon/KI). Unabhängig von Laufzeit (immer auf 24-Monats-Basis) und unabhängig vom Support-Wartungsvertrag. Telefonanlage: +250 € Setup. KI-Rezeptionist: +1.000 € Setup. Finaler Preis nach technischer Erstbegehung." /></span>
              <span className="val">ca. {fmtEURExact(calc.setup)}</span>
            </div>

            {(partnerDS || partnerE5 || partnerCam || partnerAuto) &&
            <div className="pricing-row partner-line">
                <span className="label">Partnerdienste: <em>{[partnerDS && 'Compliance-Lösung', partnerE5 && 'Marketing-Lösung', partnerAuto && 'Prozess-Automatisierung', partnerCam && 'Kamerasysteme'].filter(Boolean).join(' · ')}</em></span>
                <span className="val partner-price">auf Anfrage</span>
              </div>
            }
          </div>

          </details>

          <button onClick={() => setModalOpen(true)} className="btn btn-primary btn-lg pricing-cta" style={{ width: '100%' }}>
            Angebot erhalten <Icon.Arrow />
          </button>
          <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--color-text-muted)', marginTop: 12, fontFamily: 'var(--font-ui)' }}>Finale Setup-Gebühr nach technischer Erstbegehung

          </div>
        </div>
      </div>

      <LeadCaptureModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onSubmitted={onOfferSubmitted}
        summary={{ tier: calc.tier, users, term, totalMRR: fmtEURExact(calc.totalMRR) }} />
      
    </div>);

}

window.PricingCalculator = PricingCalculator;