/* global React */

const { useState, useMemo, useEffect, useRef } = React;

/* ============================================================
   KONFIGURATOR — Live-Preisberechnung
   ============================================================ */

const PRICES = {
  vm: 8.90,              // € pro VM / Monat (inkl. WAN-Accelerator)
  storageStdPerGB: 0.06, // € pro GB Standard
  storageImmPerGB: 0.09, // € pro GB Immutable / Hardened
  seeding: 99,           // € einmalig
  setup: 149,            // € einmalig
  monthlySurcharge: 0.15,// +15 % bei monatlicher Kündbarkeit
};

// Storage volume discount staffel (above 1 TB)
function storageDiscount(gb) {
  if (gb >= 5000) return 0.10;
  if (gb >= 2000) return 0.07;
  if (gb >= 1000) return 0.05;
  return 0;
}

// Storage estimation based on Veeam retention chain (3-2-1 inspired)
// Approximation: full backups + incrementals + 25% workspace
function estimateStorage(sourceGB, retention) {
  // 2 vollständige Backups (Vorhalt-Versionen) + retention*~7% incremental
  const fullBlocks = 2;
  const incrementalFraction = 0.07;
  const raw = sourceGB * (fullBlocks + retention * incrementalFraction);
  const withWorkspace = raw * 1.25;
  return Math.round(withWorkspace);
}

function formatEUR(n) {
  return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2 }).format(n);
}

function Slider({ label, suffix, min, max, step, value, onChange, presets }) {
  return (
    <div className="cfg-slider">
      <div className="cfg-slider-head">
        <label className="cfg-label">{label}</label>
        <div className="cfg-value-pill">
          <span className="cfg-value">{value.toLocaleString('de-DE')}</span>
          <span className="cfg-unit">{suffix}</span>
        </div>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="cfg-range"
        style={{ '--p': `${((value - min) / (max - min)) * 100}%` }}
      />
      <div className="cfg-range-scale">
        <span>{min.toLocaleString('de-DE')}</span>
        {presets && presets.map((p) => (
          <button
            key={p}
            type="button"
            className={`cfg-preset ${value === p ? 'is-active' : ''}`}
            onClick={() => onChange(p)}
          >
            {p.toLocaleString('de-DE')}
          </button>
        ))}
        <span>{max.toLocaleString('de-DE')}</span>
      </div>
    </div>
  );
}

function AddonRow({ id, title, sub, price, priceLabel, checked, onChange }) {
  return (
    <label className={`addon-row ${checked ? 'is-checked' : ''}`} htmlFor={id}>
      <div className="addon-check">
        <input
          id={id}
          type="checkbox"
          checked={checked}
          onChange={(e) => onChange(e.target.checked)}
        />
        <span className="addon-box">
          <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden>
            <path d="M2 6.5L4.8 9 10 3.2" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </div>
      <div className="addon-body">
        <div className="addon-title">{title}</div>
        <div className="addon-sub">{sub}</div>
      </div>
      <div className="addon-price">
        <div className="addon-price-num">{formatEUR(price)}</div>
        <div className="addon-price-label">{priceLabel}</div>
      </div>
    </label>
  );
}

function StorageVisual({ sourceGB, retention, totalGB }) {
  const fullSize = sourceGB;
  const incSize = sourceGB * 0.07;
  const workspace = totalGB * 0.2;
  const segments = [
    { label: 'Vollsicherung #1', size: fullSize, color: 'var(--brand-deep)' },
    { label: 'Vollsicherung #2', size: fullSize, color: 'var(--brand)' },
    ...Array.from({ length: Math.min(retention, 12) }).map((_, i) => ({
      label: `Inkrement ${i + 1}`,
      size: incSize,
      color: i % 2 === 0 ? 'oklch(72% 0.10 160)' : 'oklch(80% 0.07 160)',
    })),
    { label: 'Workspace', size: workspace, color: 'var(--edge-strong)' },
  ];
  const total = segments.reduce((s, x) => s + x.size, 0);
  return (
    <div className="storage-visual">
      <div className="storage-bar" role="img" aria-label={`Speicherbedarf ca. ${totalGB} GB`}>
        {segments.map((s, i) => (
          <div
            key={i}
            className="storage-seg"
            style={{ flexGrow: s.size / total, background: s.color }}
            title={`${s.label}: ${Math.round(s.size)} GB`}
          />
        ))}
      </div>
      <div className="storage-legend mono">
        <span><b style={{ color: 'var(--brand-deep)' }}>██</b> Vollsicherungen</span>
        <span><b style={{ color: 'oklch(72% 0.10 160)' }}>██</b> Inkremente</span>
        <span><b style={{ color: 'var(--edge-strong)' }}>██</b> Workspace</span>
      </div>
    </div>
  );
}

function Configurator() {
  const [vms, setVms] = useState(5);
  const [sourceGB, setSourceGB] = useState(500);
  const [retention, setRetention] = useState(7);
  const [immutable, setImmutable] = useState(false);
  const [seeding, setSeeding] = useState(false);
  const [setup, setSetup] = useState(true);
  const [term, setTerm] = useState('annual'); // 'annual' default | 'monthly' = +15%
  const [highlight, setHighlight] = useState(false);

  // Preset-Laden aus Paket-Klick
  useEffect(() => {
    const onPreset = (e) => {
      const p = e.detail || {};
      if (typeof p.vms === 'number') setVms(p.vms);
      if (typeof p.sourceGB === 'number') setSourceGB(p.sourceGB);
      if (typeof p.retention === 'number') setRetention(p.retention);
      if (typeof p.immutable === 'boolean') setImmutable(p.immutable);
      if (typeof p.setup === 'boolean') setSetup(p.setup);
      if (typeof p.seeding === 'boolean') setSeeding(p.seeding);
      if (typeof p.term === 'string') setTerm(p.term);
      // Highlight-Pulse triggern
      setHighlight(true);
      setTimeout(() => setHighlight(false), 1800);
      // Sanft scrollen
      const el = document.getElementById('konfigurator');
      if (el) {
        const headerOffset = 80;
        const top = el.getBoundingClientRect().top + window.scrollY - headerOffset;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    };
    window.addEventListener('vc-load-preset', onPreset);
    return () => window.removeEventListener('vc-load-preset', onPreset);
  }, []);

  const storageGB = useMemo(() => estimateStorage(sourceGB, retention), [sourceGB, retention]);

  const discount = useMemo(() => storageDiscount(storageGB), [storageGB]);
  const storageRate = immutable ? PRICES.storageImmPerGB : PRICES.storageStdPerGB;
  const storageGross = storageGB * storageRate;
  const storageNet = storageGross * (1 - discount);
  const vmCost = vms * PRICES.vm;

  const baseMonthly = vmCost + storageNet;
  const monthlySurchargeAmt = term === 'monthly' ? baseMonthly * PRICES.monthlySurcharge : 0;
  const monthly = baseMonthly + monthlySurchargeAmt;

  const oneTime = (seeding ? PRICES.seeding : 0) + (setup ? PRICES.setup : 0);
  const yearTotal = monthly * 12 + oneTime;

  // Suggested plan based on Variante B
  const plan = useMemo(() => {
    if (vms <= 1 && sourceGB <= 250) return { name: 'Starter', tone: 'starter' };
    if (vms <= 3 && sourceGB <= 1000) return { name: 'Business S', tone: 'business' };
    if (vms <= 5 && sourceGB <= 2000) return { name: 'Business M', tone: 'business' };
    if (vms <= 10 && sourceGB <= 5000) return { name: 'Business L', tone: 'business' };
    return { name: 'Enterprise', tone: 'enterprise' };
  }, [vms, sourceGB]);

  // Globalen Konfigurations-Snapshot bereitstellen — Kontaktformular liest den aus
  useEffect(() => {
    window.__vcCurrentConfig = {
      vms,
      sourceGB,
      retention,
      storageGB,
      immutable,
      storageType: immutable ? 'Immutable / Hardened' : 'Standard',
      storageRate,
      vmCost,
      storageGross,
      storageNet,
      discount,
      seeding,
      setup,
      term,
      monthlyNet: monthly,
      oneTime,
      yearTotal,
      plan: plan.name,
    };
  }, [vms, sourceGB, retention, storageGB, immutable, storageRate, vmCost, storageGross, storageNet, discount, seeding, setup, term, monthly, oneTime, yearTotal, plan]);

  return (
    <section id="konfigurator" className={`cfg-section ${highlight ? 'is-highlighted' : ''}`}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">04 / Konfigurator</div>
            <h2 className="mt-16">Konfigurieren Sie Ihr Cloud-Backup<br/>in unter einer Minute.</h2>
          </div>
          <p className="lead">
            Stellen Sie Anzahl der virtuellen Maschinen, Datenvolumen und Versionshaltung ein —
            wir zeigen Ihnen sofort den benötigten Speicher, die monatlichen Kosten und den passenden Tarif.
            Alle Preise zzgl. MwSt.
          </p>
        </div>

        <div className="cfg-grid">
          {/* LEFT: Inputs */}
          <div className="cfg-panel cfg-panel-inputs">
            <div className="cfg-block">
              <div className="cfg-block-head">
                <span className="idx mono">01 / Workload</span>
                <h3>Was möchten Sie sichern?</h3>
              </div>
              <Slider
                label="Virtuelle Maschinen"
                suffix={vms === 1 ? 'VM' : 'VMs'}
                min={1} max={50} step={1}
                value={vms} onChange={setVms}
                presets={[3, 10, 25]}
              />
              <Slider
                label="Backup-Quelldaten"
                suffix="GB"
                min={50} max={10000} step={50}
                value={sourceGB} onChange={setSourceGB}
                presets={[500, 2000, 5000]}
              />
              <Slider
                label="Versionen / Restore Points"
                suffix={retention === 1 ? 'Version' : 'Versionen'}
                min={1} max={30} step={1}
                value={retention} onChange={setRetention}
                presets={[7, 14, 21]}
              />
            </div>

            <div className="cfg-block">
              <div className="cfg-block-head">
                <span className="idx mono">02 / Sicherheitsstufe</span>
                <h3>Standard oder Immutable Storage?</h3>
              </div>
              <div className="storage-tier-toggle" role="radiogroup">
                <button
                  type="button"
                  role="radio"
                  aria-checked={!immutable}
                  className={!immutable ? 'is-active' : ''}
                  onClick={() => setImmutable(false)}
                >
                  <div className="st-head">
                    <span>Standard</span>
                    <span className="st-price mono">0,06 € / GB</span>
                  </div>
                  <div className="st-sub">Veeam Cloud Connect Repository. Für alle Standard-Backup-Szenarien.</div>
                </button>
                <button
                  type="button"
                  role="radio"
                  aria-checked={immutable}
                  className={immutable ? 'is-active' : ''}
                  onClick={() => setImmutable(true)}
                >
                  <div className="st-head">
                    <span>
                      Immutable
                      <span className="st-badge mono">NIS2 · DORA</span>
                    </span>
                    <span className="st-price mono">0,09 € / GB</span>
                  </div>
                  <div className="st-sub">Hardened Repository. Schreibgeschützte Backups gegen Ransomware — Pflicht für Cyberversicherung.</div>
                </button>
              </div>
            </div>

            <div className="cfg-block">
              <div className="cfg-block-head">
                <span className="idx mono">03 / Einmalkosten</span>
                <h3>Onboarding</h3>
              </div>
              <AddonRow
                id="opt-setup"
                title="Ersteinrichtung durch 4its-Techniker"
                sub="Cloud Repository, Backup-Job und 3-2-1-Strategie remote eingerichtet. Empfohlen für Erstkunden."
                price={PRICES.setup}
                priceLabel="einmalig"
                checked={setup} onChange={setSetup}
              />
              <AddonRow
                id="opt-seeding"
                title="Initialsicherung per Offline-Seeding"
                sub="Sie schicken den USB-Datenträger nach Hamburg, wir spielen die Erstsicherung im Rechenzentrum ein. Inkl. Versand."
                price={PRICES.seeding}
                priceLabel="einmalig"
                checked={seeding} onChange={setSeeding}
              />
            </div>

            <div className="cfg-block">
              <div className="cfg-block-head">
                <span className="idx mono">04 / Laufzeit</span>
                <h3>Vertrag</h3>
              </div>
              <div className="term-toggle" role="tablist">
                <button
                  role="tab"
                  className={term === 'annual' ? 'is-active' : ''}
                  onClick={() => setTerm('annual')}
                >
                  <div>12 Monate</div>
                  <small>Standard · planbar</small>
                </button>
                <button
                  role="tab"
                  className={term === 'monthly' ? 'is-active' : ''}
                  onClick={() => setTerm('monthly')}
                >
                  <div>Monatlich kündbar</div>
                  <small>+15 % Sondertarif</small>
                </button>
              </div>
            </div>
          </div>

          {/* RIGHT: Summary (sticky) */}
          <aside className="cfg-panel cfg-panel-summary">
            <div className="summary-card">
              <div className="summary-plan">
                <span className={`plan-pill plan-${plan.tone}`}>{plan.name}-Tarif passend</span>
              </div>

              <div className="summary-storage">
                <div className="row" style={{ justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div>
                    <div className="muted mono" style={{ fontSize: 12, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Cloud-Speicherbedarf</div>
                    <div className="summary-storage-num">
                      <span>{storageGB.toLocaleString('de-DE')}</span>
                      <span className="summary-storage-unit">GB</span>
                    </div>
                  </div>
                  <div className="mono muted" style={{ fontSize: 12, textAlign: 'right' }}>
                    aus {sourceGB.toLocaleString('de-DE')} GB<br/>Quelldaten
                  </div>
                </div>
                <StorageVisual sourceGB={sourceGB} retention={retention} totalGB={storageGB} />
              </div>

              <div className="summary-lines">
                <div className="summary-line">
                  <span>{vms} {vms === 1 ? 'VM' : 'VMs'} × {formatEUR(PRICES.vm)} <small className="muted" style={{ fontSize: 11 }}>inkl. WAN-Acc.</small></span>
                  <span>{formatEUR(vmCost)}</span>
                </div>
                <div className="summary-line">
                  <span>
                    {storageGB.toLocaleString('de-DE')} GB × {formatEUR(storageRate)}
                    {immutable && <span className="st-tag">Immutable</span>}
                  </span>
                  <span>{formatEUR(storageGross)}</span>
                </div>
                {discount > 0 && (
                  <div className="summary-line summary-discount">
                    <span>Mengenrabatt ab {storageGB >= 5000 ? '5 TB' : storageGB >= 2000 ? '2 TB' : '1 TB'}</span>
                    <span>−{(discount * 100).toFixed(0)} %</span>
                  </div>
                )}
                {term === 'monthly' && (
                  <div className="summary-line summary-surcharge">
                    <span>Monatliche Kündbarkeit</span>
                    <span>+15 %</span>
                  </div>
                )}
              </div>

              <div className="summary-total">
                <div>
                  <div className="muted mono" style={{ fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Monatlich</div>
                  <div className="summary-total-num">{formatEUR(monthly)}</div>
                  <div className="muted" style={{ fontSize: 13 }}>zzgl. {formatEUR(monthly * 0.19)} MwSt.</div>
                </div>
                {oneTime > 0 && (
                  <div className="summary-onetime">
                    <div className="muted mono" style={{ fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Einmalig</div>
                    <div className="summary-onetime-num">{formatEUR(oneTime)}</div>
                  </div>
                )}
              </div>

              <div className="summary-cta">
                <a
                  href="#kontakt"
                  className="btn btn-brand"
                  onClick={(e) => {
                    e.preventDefault();
                    window.dispatchEvent(new CustomEvent('vc-request-quote', { detail: window.__vcCurrentConfig }));
                  }}
                >
                  Angebot anfordern
                  <span className="arrow">→</span>
                </a>
                <a
                  href="#kontakt"
                  className="btn btn-ghost"
                  onClick={(e) => {
                    e.preventDefault();
                    window.dispatchEvent(new CustomEvent('vc-request-quote', { detail: { ...window.__vcCurrentConfig, mode: 'trial' } }));
                  }}
                >
                  30 Tage kostenfrei testen
                </a>
              </div>

              <div className="summary-foot mono">
                <div>Jahressumme: {formatEUR(yearTotal)}</div>
                <div>· Monatlich kündbar · Rechenzentrum Deutschland · DSGVO-konform</div>
              </div>
            </div>
          </aside>
        </div>
      </div>

      {/* Configurator-specific styles */}
      <style>{`
        .cfg-section { background: var(--paper-2); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); transition: background .4s ease; scroll-margin-top: 80px; }
        .cfg-section.is-highlighted .cfg-panel-summary { animation: cfg-pulse 1.6s cubic-bezier(.2,.7,.3,1); }
        @keyframes cfg-pulse {
          0%   { box-shadow: 0 0 0 0 var(--brand), var(--shadow-md); }
          30%  { box-shadow: 0 0 0 8px oklch(from var(--brand) l c h / 0.18), var(--shadow-md); }
          100% { box-shadow: 0 0 0 0 transparent, var(--shadow-md); }
        }
        .cfg-grid {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: 32px;
          align-items: start;
        }
        @media (max-width: 1040px) { .cfg-grid { grid-template-columns: 1fr; } }

        .cfg-panel { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-xl); }
        .cfg-panel-inputs { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
        .cfg-block { padding: 28px; border-radius: var(--r-lg); }
        .cfg-block + .cfg-block { border-top: 1px solid var(--edge); border-radius: 0; }
        .cfg-block-head { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
        .cfg-block-head h3 { margin: 0; }

        .cfg-slider { padding: 14px 0; }
        .cfg-slider + .cfg-slider { border-top: 1px dashed var(--edge); }
        .cfg-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
        .cfg-label { font-weight: 500; color: var(--ink); }
        .cfg-value-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); border: 1px solid var(--brand-line); }
        .cfg-value { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
        .cfg-unit { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; }

        .cfg-range {
          -webkit-appearance: none;
          appearance: none;
          width: 100%;
          height: 6px;
          background: linear-gradient(to right, var(--brand) 0%, var(--brand) var(--p, 50%), var(--stone) var(--p, 50%), var(--stone) 100%);
          border-radius: 999px;
          outline: none;
          cursor: pointer;
        }
        .cfg-range::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 22px; height: 22px;
          border-radius: 50%;
          background: white;
          border: 2px solid var(--brand-deep);
          box-shadow: 0 2px 6px rgba(0,0,0,.15);
          cursor: grab;
          transition: transform .15s ease;
        }
        .cfg-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
        .cfg-range::-moz-range-thumb {
          width: 22px; height: 22px;
          border-radius: 50%;
          background: white;
          border: 2px solid var(--brand-deep);
          box-shadow: 0 2px 6px rgba(0,0,0,.15);
          cursor: grab;
        }

        .cfg-range-scale {
          display: flex;
          gap: 8px;
          justify-content: space-between;
          margin-top: 14px;
          font-family: var(--f-mono);
          font-size: 11px;
          color: var(--mute);
          align-items: center;
          flex-wrap: wrap;
        }
        .cfg-preset {
          background: transparent;
          border: 1px solid var(--edge);
          padding: 4px 10px;
          border-radius: 999px;
          font-family: var(--f-mono);
          font-size: 11px;
          color: var(--ink-soft);
          cursor: pointer;
          transition: all .15s ease;
        }
        .cfg-preset:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
        .cfg-preset.is-active { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }

        .addon-row {
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 16px;
          align-items: flex-start;
          padding: 18px;
          margin: -1px 0;
          border: 1px solid var(--edge);
          border-radius: var(--r-md);
          cursor: pointer;
          transition: all .2s ease;
          background: var(--paper);
        }
        .addon-row + .addon-row { margin-top: 10px; }
        .addon-row:hover { border-color: var(--edge-strong); background: var(--paper-2); }
        .addon-row.is-checked { border-color: var(--brand); background: var(--brand-soft); }
        .addon-check { padding-top: 2px; }
        .addon-check input { position: absolute; opacity: 0; pointer-events: none; }
        .addon-box {
          display: inline-flex;
          align-items: center; justify-content: center;
          width: 22px; height: 22px;
          border: 1.5px solid var(--edge-strong);
          border-radius: 6px;
          background: white;
          color: white;
          transition: all .2s ease;
        }
        .addon-box svg { opacity: 0; transition: opacity .15s ease; }
        .addon-row.is-checked .addon-box { background: var(--brand-deep); border-color: var(--brand-deep); }
        .addon-row.is-checked .addon-box svg { opacity: 1; }
        .addon-title { font-weight: 600; color: var(--ink-deep); }
        .addon-sub { font-size: 13px; color: var(--mute); line-height: 1.45; margin-top: 4px; }
        .addon-price { text-align: right; min-width: 100px; }
        .addon-price-num { font-family: var(--f-display); font-weight: 700; color: var(--ink-deep); }
        .addon-price-label { font-family: var(--f-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.05em; text-transform: uppercase; }

        /* Storage tier (Standard / Immutable) */
        .storage-tier-toggle {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
        }
        @media (max-width: 640px) { .storage-tier-toggle { grid-template-columns: 1fr; } }
        .storage-tier-toggle button {
          text-align: left;
          background: var(--paper);
          border: 1px solid var(--edge);
          border-radius: var(--r-md);
          padding: 18px;
          cursor: pointer;
          transition: all .2s ease;
          font-family: inherit;
        }
        .storage-tier-toggle button:hover { border-color: var(--edge-strong); background: var(--paper-2); }
        .storage-tier-toggle button.is-active {
          border-color: var(--brand);
          background: var(--brand-soft);
          box-shadow: 0 0 0 3px oklch(from var(--brand) l c h / 0.08);
        }
        .st-head {
          display: flex; justify-content: space-between; align-items: baseline;
          font-weight: 600; color: var(--ink-deep); margin-bottom: 6px;
        }
        .st-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
        .st-price { font-size: 12px; color: var(--ink-soft); }
        .storage-tier-toggle button.is-active .st-price { color: var(--brand-deep); }
        .st-sub { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
        .st-badge {
          font-size: 9px; letter-spacing: 0.06em;
          padding: 2px 6px; border-radius: 3px;
          background: var(--accent); color: white; text-transform: uppercase;
        }
        .st-tag {
          display: inline-block; margin-left: 6px;
          font-family: var(--f-mono); font-size: 10px;
          padding: 1px 6px; border-radius: 3px;
          background: var(--accent-soft); color: var(--accent-deep); letter-spacing: 0.04em;
        }
        .summary-surcharge { color: var(--accent-deep); }
        .summary-surcharge span:last-child { color: var(--accent-deep); }

        .term-toggle {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          padding: 4px;
          background: var(--paper-2);
          border-radius: var(--r-md);
        }
        .term-toggle button {
          padding: 14px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 8px;
          cursor: pointer;
          font-family: var(--f-body);
          text-align: left;
          color: var(--ink-soft);
          transition: all .2s ease;
        }
        .term-toggle button div { font-weight: 600; }
        .term-toggle button small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
        .term-toggle button.is-active {
          background: var(--paper);
          border-color: var(--ink-deep);
          color: var(--ink-deep);
          box-shadow: var(--shadow-sm);
        }
        .term-toggle button.is-active small { color: var(--brand-deep); font-weight: 500; }

        /* Summary */
        .cfg-panel-summary { position: sticky; top: 24px; padding: 0; overflow: hidden; }
        .summary-card { padding: 0; display: flex; flex-direction: column; }
        .summary-plan { padding: 22px 28px; border-bottom: 1px solid var(--edge); display: flex; align-items: center; gap: 12px; }
        .plan-pill {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--f-mono); font-size: 11px; font-weight: 500;
          letter-spacing: 0.06em; text-transform: uppercase;
          padding: 6px 12px; border-radius: 999px;
        }
        .plan-pill::before {
          content: "●"; font-size: 10px;
        }
        .plan-starter { background: var(--tech-soft); color: oklch(40% 0.10 220); }
        .plan-business { background: var(--brand-soft); color: var(--brand-deep); }
        .plan-enterprise { background: oklch(28% 0.04 280); color: white; }

        .summary-storage { padding: 28px; border-bottom: 1px solid var(--edge); }
        .summary-storage-num { font-family: var(--f-display); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; margin-top: 4px; color: var(--ink-deep); }
        .summary-storage-unit { font-size: 22px; font-weight: 500; color: var(--mute); }

        .storage-visual { margin-top: 22px; }
        .storage-bar {
          display: flex;
          width: 100%; height: 14px;
          border-radius: 6px;
          overflow: hidden;
          gap: 2px;
          background: var(--stone);
        }
        .storage-seg { min-width: 2px; transition: flex-grow .3s ease; }
        .storage-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 10px; color: var(--mute); flex-wrap: wrap; }
        .storage-legend b { letter-spacing: -2px; margin-right: 4px; }

        .summary-lines { padding: 20px 28px; border-bottom: 1px solid var(--edge); display: flex; flex-direction: column; gap: 8px; }
        .summary-line { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 13px; color: var(--ink-soft); }
        .summary-line b, .summary-line span:last-child { color: var(--ink-deep); font-weight: 500; }
        .summary-discount { color: var(--brand-deep); }
        .summary-discount span:last-child { color: var(--brand-deep); }

        .summary-total {
          padding: 24px 28px;
          background: var(--ink-deep);
          color: var(--paper);
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }
        .summary-total .muted { color: oklch(70% 0.012 240) !important; }
        .summary-total-num { font-family: var(--f-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; margin-top: 4px; color: var(--paper); }
        .summary-onetime { text-align: right; }
        .summary-onetime-num { font-family: var(--f-display); font-weight: 600; font-size: 22px; color: var(--paper); margin-top: 4px; }

        .summary-cta { padding: 22px 28px 8px; display: flex; flex-direction: column; gap: 10px; }
        .summary-cta .btn { width: 100%; }

        .summary-foot { padding: 12px 28px 22px; font-size: 11px; color: var(--mute); letter-spacing: 0.02em; }
        .summary-foot div + div { margin-top: 2px; }
      `}</style>
    </section>
  );
}

window.Configurator = Configurator;
window.formatEUR = formatEUR;