// Sections 4-6: Unterkunftsgalerie, Business Case Deep Dive, Video-Bibliothek

// ====== Section 4: Unterkunftsgalerie ======
const PROPERTY_PALETTES = [
  ['#122620', '#1C3A2D', '#5a8847'],
  ['#1C3A2D', '#25503e', '#76a85a'],
  ['#25503e', '#3d6b4e', '#a8e062'],
  ['#122620', '#2e5a3f', '#76a85a'],
];

function propertyGradient(p) {
  const seed = String(p && p.id || '').split('').reduce((a, c) => a + c.charCodeAt(0), 0);
  const pal = PROPERTY_PALETTES[seed % PROPERTY_PALETTES.length];
  return `linear-gradient(135deg, ${pal[0]} 0%, ${pal[1]} 60%, ${pal[2]} 140%)`;
}

function PropertyCard({ property, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        textAlign: 'left',
        background: 'var(--off)',
        border: '1px solid var(--rule-dark)',
        borderRadius: 18,
        padding: 0,
        overflow: 'hidden',
        cursor: 'pointer',
        transition: 'all 0.25s ease',
        display: 'flex', flexDirection: 'column',
        width: '100%',
      }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--forest)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 18px 40px -22px rgba(28,58,45,0.3)'; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--rule-dark)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      {/* Hero — real Guesty photo */}
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 5',
        background: propertyGradient(property),
        overflow: 'hidden',
      }}>
        {property.picture && (
          <img
            src={property.picture}
            alt={property.name}
            loading="lazy"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
        )}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(18,38,32,0.05) 40%, rgba(18,38,32,0.7) 100%)' }} />
        <div style={{ position: 'absolute', top: 14, left: 14, padding: '4px 10px', borderRadius: 999, background: 'rgba(18,38,32,0.65)', backdropFilter: 'blur(8px)', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.08em', color: 'var(--lime)' }}>
          {String(property.type || '').toUpperCase()}
        </div>
        <div style={{ position: 'absolute', top: 14, right: 14, padding: '4px 10px', borderRadius: 999, background: 'rgba(168,224,98,0.18)', backdropFilter: 'blur(8px)', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.08em', color: 'var(--lime)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--lime)' }} /> LIVE
        </div>
        <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, color: 'var(--off)' }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.08em', color: 'rgba(248,247,242,0.75)', marginBottom: 4 }}>
            {String(property.city || '').toUpperCase()}{property.region ? ` · ${property.region}` : ''}
          </div>
          <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 900, fontSize: 21, lineHeight: 1.05, letterSpacing: '-0.01em' }}>
            {property.name}
          </div>
        </div>
      </div>
      {/* Stats — no financials */}
      <div style={{ padding: '18px 20px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 3 }}>GÄSTE</div>
            <div className="mono" style={{ fontSize: 17, fontWeight: 700 }}>{property.capacity || '–'}</div>
          </div>
          <div>
            <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 3 }}>ONLINE SEIT</div>
            <div className="mono" style={{ fontSize: 17, fontWeight: 700 }}>{property.since}</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
          {(property.tags || []).slice(0, 2).map(t => <span key={t} className="chip dark" style={{ fontSize: 10 }}>{t}</span>)}
          {(property.tags || []).length > 2 && <span style={{ fontSize: 11, color: 'var(--muted-dark)', alignSelf: 'center' }}>+{property.tags.length - 2}</span>}
        </div>
      </div>
    </button>
  );
}

function PropertyModal({ property, onClose }) {
  if (!property) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 640 }}>
        <button className="modal-close" onClick={onClose}>✕</button>
        <div style={{
          aspectRatio: '16 / 10',
          background: propertyGradient(property),
          borderRadius: '24px 24px 0 0',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {property.picture && (
            <img src={property.picture} alt={property.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          )}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(18,38,32,0.1) 35%, rgba(18,38,32,0.7) 100%)' }} />
          <div style={{ position: 'absolute', top: 20, left: 24, display: 'flex', gap: 8 }}>
            <div style={{ padding: '5px 12px', borderRadius: 999, background: 'rgba(18,38,32,0.7)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', color: 'var(--lime)' }}>
              {String(property.type || '').toUpperCase()}
            </div>
            <div style={{ padding: '5px 12px', borderRadius: 999, background: 'rgba(168,224,98,0.18)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', color: 'var(--lime)', display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--lime)' }} /> LIVE · BUCHBAR
            </div>
          </div>
          <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: 'var(--off)' }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(248,247,242,0.8)', marginBottom: 6 }}>
              {String(property.city || '').toUpperCase()}{property.region ? ` · ${String(property.region).toUpperCase()}` : ''}
            </div>
            <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 900, fontSize: 34, lineHeight: 1, letterSpacing: '-0.02em' }}>
              {property.name}
            </div>
          </div>
        </div>
        <div style={{ padding: 32 }}>
          {property.pictures && property.pictures.length > 1 && (
            <div style={{ display: 'flex', gap: 8, marginBottom: 22, overflowX: 'auto' }}>
              {property.pictures.slice(0, 5).map((u, i) => (
                <img key={i} src={u} alt="" loading="lazy" style={{ width: 96, height: 72, objectFit: 'cover', borderRadius: 8, flexShrink: 0 }} />
              ))}
            </div>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24, paddingBottom: 24, borderBottom: '1px solid var(--rule-dark)' }}>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 4 }}>KAPAZITÄT</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{property.capacity || '–'}<span style={{ fontSize: 12, color: 'var(--muted-dark)', marginLeft: 4 }}>Gäste</span></div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 4 }}>SCHLAFZ.</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{property.bedrooms || '–'}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 4 }}>BÄDER</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{property.bathrooms || '–'}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 4 }}>ONLINE SEIT</div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{property.since}</div>
            </div>
          </div>
          {property.tags && property.tags.length > 0 && (
            <div style={{ marginBottom: 22 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--muted-dark)', marginBottom: 12 }}>AUSSTATTUNG</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {property.tags.map(t => <span key={t} className="chip dark">{t}</span>)}
              </div>
            </div>
          )}
          <div style={{ padding: '16px 18px', background: 'var(--off-warm)', borderRadius: 12, fontSize: 13, color: 'var(--muted-dark)', lineHeight: 1.5 }}>
            Genaue Adresse aus Konkurrenzschutz nicht öffentlich. Wenn du diese Unterkunft besuchen möchtest, sprich mit Nils — wir koordinieren das individuell.
          </div>
        </div>
      </div>
    </div>
  );
}

function PropertiesSection() {
  const [all, setAll] = React.useState(null); // null = loading
  const [filter, setFilter] = React.useState('all');
  const [bundesland, setBundesland] = React.useState('all');
  const [modalProperty, setModalProperty] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    window.RBListings.load().then(d => { if (!cancelled) setAll(d.listings || []); });
    return () => { cancelled = true; };
  }, []);

  const list = all || [];
  const types = React.useMemo(
    () => Array.from(new Set(list.map(p => p.type).filter(Boolean))).sort(),
    [all]
  );
  const bundeslaender = React.useMemo(
    () => Array.from(new Set(list.map(p => p.region).filter(Boolean))).sort(),
    [all]
  );

  const properties = list.filter(p => {
    if (filter !== 'all' && p.type !== filter) return false;
    if (bundesland !== 'all' && p.region !== bundesland) return false;
    return true;
  });

  return (
    <section id="partner" className="sect" style={{ background: 'var(--off-warm)' }} data-screen-label="04 Unterkünfte">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <span className="eyebrow dark">Sektion 04 · Das Netzwerk</span>
          <h2>
            {all ? `${all.length} Unterkünfte.` : 'Das Netzwerk.'} <br />
            <span style={{ color: 'var(--forest)' }}>Live aus unserem System.</span>
          </h2>
          <p>
            Jede aktive Unterkunft im ROOM BOOM Netzwerk — in Echtzeit aus Guesty.
            Klick auf eine Karte für Fotos und Details.
          </p>
        </div>

        {/* Filters */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', marginBottom: 32, paddingBottom: 24, borderBottom: '1px solid var(--rule-dark)' }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {['all', ...types].map(t => (
              <button
                key={t}
                onClick={() => setFilter(t)}
                style={{
                  padding: '10px 18px',
                  borderRadius: 999,
                  fontSize: 13,
                  fontWeight: 500,
                  background: filter === t ? 'var(--forest)' : 'transparent',
                  color: filter === t ? 'var(--off)' : 'var(--char)',
                  border: `1px solid ${filter === t ? 'var(--forest)' : 'var(--rule-dark)'}`,
                  transition: 'all 0.18s ease',
                }}
              >
                {t === 'all' ? 'Alle Typen' : t}
              </button>
            ))}
          </div>
          <select
            value={bundesland}
            onChange={e => setBundesland(e.target.value)}
            style={{
              padding: '10px 16px',
              borderRadius: 999,
              fontSize: 13,
              border: '1px solid var(--rule-dark)',
              background: 'transparent',
              color: 'var(--char)',
              fontFamily: 'inherit',
            }}
          >
            <option value="all">Alle Regionen</option>
            {bundeslaender.map(b => <option key={b} value={b}>{b}</option>)}
          </select>
        </div>

        {/* Result count */}
        <div style={{ marginBottom: 20, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, letterSpacing: '0.08em', color: 'var(--muted-dark)' }}>
          {all ? `${properties.length} VON ${all.length} UNTERKÜNFTEN` : 'LADE LIVE-DATEN…'}
        </div>

        {!all && (
          <div style={{ padding: 64, textAlign: 'center', background: 'var(--off)', borderRadius: 18, color: 'var(--muted-dark)' }}>
            Lade Unterkünfte aus dem Live-System…
          </div>
        )}

        {all && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 18 }}>
            {properties.map(p => <PropertyCard key={p.id} property={p} onClick={() => setModalProperty(p)} />)}
          </div>
        )}

        {all && properties.length === 0 && (
          <div style={{ padding: 64, textAlign: 'center', background: 'var(--off)', borderRadius: 18, color: 'var(--muted-dark)' }}>
            Keine Unterkünfte für diese Filter. Setz die Filter zurück oder versuch eine andere Kombination.
          </div>
        )}

        <div style={{ marginTop: 32, padding: '20px 24px', background: 'rgba(28,58,45,0.04)', borderRadius: 14, fontSize: 13, color: 'var(--muted-dark)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, padding: '4px 10px', background: 'var(--forest)', color: 'var(--lime)', borderRadius: 4 }}>NOTE</span>
          Live aus unserem Buchungssystem. Aus Konkurrenzschutz zeigen wir Stadt &amp; Region, aber keine genaue Adresse und keine objektbezogenen Umsätze.
        </div>

      </div>
      <PropertyModal property={modalProperty} onClose={() => setModalProperty(null)} />
    </section>
  );
}

// ====== Section 5: Business Case Deep Dive ======
// 5.1 ROI Calculator
function ROICalculator() {
  const [guests, setGuests] = React.useState(20);
  const [tier, setTier] = React.useState(2);
  const [season, setSeason] = React.useState(1);

  // Plausible formula:
  // Base ADR per guest-night (per Gast pro Nacht) — varies by tier
  const adrPerGuest = tier === 1 ? 95 : tier === 2 ? 78 : 62;
  // Occupancy by season mix
  const occupancy = season === 0 ? 0.46 : season === 1 ? 0.62 : 0.74;
  const nightsPerYear = 365 * occupancy;
  const annualRevenue = Math.round(guests * adrPerGuest * nightsPerYear * 0.92); // 92% effective (cleaning fees etc adjusted)
  const partnerShare = Math.round(annualRevenue * 0.8);
  const hqShare = Math.round(annualRevenue * 0.2);
  // Running costs scale with size
  const fixedCosts = Math.round(28000 + guests * 1400);
  const variableCosts = Math.round(annualRevenue * 0.22); // cleaning, utilities, supplies
  const totalCosts = fixedCosts + variableCosts;
  const netCashflow = partnerShare - totalCosts;
  const monthlyNet = Math.round(netCashflow / 12);
  const amortization = netCashflow > 0 ? Math.ceil(50000 / monthlyNet) : 999;

  const fmt = n => new Intl.NumberFormat('de-DE').format(n);
  const fmtEur = n => `${fmt(n)} €`;

  return (
    <div className="grain forest-bg" style={{ borderRadius: 24, padding: 'clamp(28px, 4vw, 48px)', position: 'relative', overflow: 'hidden' }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>5.1 · Interaktiv</div>
      <h3 style={{ color: 'var(--off)', fontSize: 'clamp(28px, 3.5vw, 42px)', marginBottom: 36 }}>
        Dein ROI-Rechner.
      </h3>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 40, position: 'relative', zIndex: 2 }} className="roi-grid">
        {/* Inputs */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <SliderField
            label="Objektgröße"
            value={guests}
            valueLabel={`${guests} Gäste`}
            min={10} max={30} step={5}
            onChange={setGuests}
            ticks={['10', '15', '20', '25', '30']}
          />
          <SliderField
            label="Region-Tier"
            value={tier}
            valueLabel={tier === 1 ? 'Tier 1 · Großstadt' : tier === 2 ? 'Tier 2 · Mittelzentrum' : 'Tier 3 · Ländlich'}
            min={1} max={3} step={1}
            onChange={setTier}
            ticks={['Tier 1', 'Tier 2', 'Tier 3']}
          />
          <SliderField
            label="Saison-Mix"
            value={season}
            valueLabel={season === 0 ? 'Wochenend-Fokus' : season === 1 ? 'Ausgewogen' : 'Ganzjahres-Fokus'}
            min={0} max={2} step={1}
            onChange={setSeason}
            ticks={['Wochenende', 'Mix', 'Ganzjahr']}
          />
        </div>

        {/* Outputs */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <ROIOutput small label="Jahresumsatz" value={fmtEur(annualRevenue)} />
          <ROIOutput small label="HQ-Anteil (20%)" value={fmtEur(hqShare)} />
          <ROIOutput small label="Partner-Anteil (80%)" value={fmtEur(partnerShare)} />
          <ROIOutput small label="Laufende Kosten" value={fmtEur(totalCosts)} />
          <ROIOutput big highlight label="Netto-Cashflow" value={fmtEur(netCashflow)} sub={`${fmtEur(monthlyNet)} / Monat`} />
          <ROIOutput big highlight label="Amortisation Entry Fee" value={`${amortization} Monate`} sub="Bei 50.000 € Investment" />
        </div>
      </div>

      <div style={{
        marginTop: 32,
        padding: '18px 22px',
        borderLeft: '3px solid var(--lime)',
        background: 'rgba(168,224,98,0.06)',
        borderRadius: '0 12px 12px 0',
        position: 'relative', zIndex: 2,
      }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--lime)', marginBottom: 8 }}>HINWEIS · MODELL</div>
        <p style={{ fontSize: 13, lineHeight: 1.55, color: 'rgba(248,247,242,0.7)' }}>
          Modellrechnung auf Basis Netzwerk-Durchschnitt 2024/2025. Keine Zusicherung künftiger Erträge.
          Individuelle Ergebnisse können stark abweichen. Annahmen leicht konservativ kalibriert.
        </p>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .roi-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function SliderField({ label, value, valueLabel, min, max, step, onChange, ticks }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(248,247,242,0.55)' }}>{label}</div>
        <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 700, fontSize: 18, color: 'var(--lime)' }}>{valueLabel}</div>
      </div>
      <input
        type="range"
        min={min} max={max} step={step} value={value}
        onChange={e => onChange(Number(e.target.value))}
        style={{
          width: '100%',
          appearance: 'none',
          height: 4,
          background: 'linear-gradient(to right, var(--lime) 0%, var(--lime) ' + ((value - min) / (max - min) * 100) + '%, rgba(255,255,255,0.1) ' + ((value - min) / (max - min) * 100) + '%, rgba(255,255,255,0.1) 100%)',
          borderRadius: 4,
          outline: 'none',
          cursor: 'pointer',
        }}
      />
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.04em', color: 'rgba(248,247,242,0.4)' }}>
        {ticks.map((t, i) => <span key={i}>{t}</span>)}
      </div>
      <style>{`
        input[type="range"]::-webkit-slider-thumb {
          appearance: none; -webkit-appearance: none;
          width: 22px; height: 22px; border-radius: 50%;
          background: #A8E062; border: 3px solid #122620;
          cursor: pointer;
          box-shadow: 0 4px 12px rgba(168,224,98,0.4);
          transition: transform 0.15s ease;
        }
        input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
        input[type="range"]::-moz-range-thumb {
          width: 22px; height: 22px; border-radius: 50%;
          background: #A8E062; border: 3px solid #122620;
          cursor: pointer;
        }
      `}</style>
    </div>
  );
}

function ROIOutput({ label, value, sub, big, small, highlight }) {
  return (
    <div style={{
      gridColumn: big ? 'span 2' : 'span 1',
      padding: big ? '24px 22px' : '18px 18px',
      background: highlight ? 'rgba(168,224,98,0.08)' : 'rgba(255,255,255,0.03)',
      borderRadius: 14,
      border: highlight ? '1px solid rgba(168,224,98,0.25)' : '1px solid var(--rule)',
      transition: 'all 0.25s ease',
    }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: highlight ? 'var(--lime)' : 'rgba(248,247,242,0.55)', marginBottom: 8 }}>
        {label}
      </div>
      <div className="mono" style={{
        fontSize: big ? 'clamp(28px, 3vw, 38px)' : 20,
        fontWeight: 700,
        color: 'var(--off)',
        letterSpacing: '-0.02em',
        lineHeight: 1,
      }}>
        {value}
      </div>
      {sub && (
        <div style={{ marginTop: 8, fontSize: 12, color: 'rgba(248,247,242,0.6)' }}>{sub}</div>
      )}
    </div>
  );
}

// 5.2 Scenarios Table
function ScenariosTable() {
  const scenarios = [
    { name: 'Conservative', occ: '52%', adr: '€ 62', revenue: '€ 142.500', costs: '€ 78.400', net: '€ 35.600', roi: '71%', amort: '17 Monate' },
    { name: 'Base Case', occ: '64%', adr: '€ 78', revenue: '€ 218.200', costs: '€ 96.800', net: '€ 77.760', roi: '155%', amort: '8 Monate', highlight: true },
    { name: 'Best Case', occ: '74%', adr: '€ 95', revenue: '€ 308.100', costs: '€ 118.200', net: '€ 128.280', roi: '256%', amort: '5 Monate' },
  ];
  const rows = [
    { label: 'Annahme Auslastung', key: 'occ' },
    { label: 'Annahme ADR', key: 'adr' },
    { label: 'Jahresumsatz', key: 'revenue' },
    { label: 'Laufende Kosten', key: 'costs' },
    { label: 'Netto-Cashflow', key: 'net' },
    { label: 'ROI nach 12 Monaten', key: 'roi' },
    { label: 'Amortisation Entry Fee', key: 'amort' },
  ];
  return (
    <div>
      <div style={{ marginBottom: 20 }}>
        <div className="eyebrow dark" style={{ marginBottom: 8 }}>5.2 · Drei Szenarien</div>
        <h3 style={{ fontSize: 'clamp(24px, 3vw, 34px)' }}>Was kannst du realistisch erwarten?</h3>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 640 }}>
          <thead>
            <tr>
              <th style={{ padding: '16px 18px', textAlign: 'left', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted-dark)', borderBottom: '1px solid var(--rule-dark)', width: 240 }}></th>
              {scenarios.map((s, i) => (
                <th
                  key={i}
                  style={{
                    padding: '20px 22px',
                    textAlign: 'left',
                    fontFamily: 'Epilogue, sans-serif', fontSize: 18, fontWeight: 900,
                    background: s.highlight ? 'var(--forest)' : 'transparent',
                    color: s.highlight ? 'var(--off)' : 'var(--char)',
                    borderBottom: s.highlight ? '2px solid var(--lime)' : '1px solid var(--rule-dark)',
                    borderRadius: s.highlight ? '12px 12px 0 0' : 0,
                  }}
                >
                  {s.highlight && <div style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em', color: 'var(--lime)', marginBottom: 6, fontWeight: 500 }}>EMPFEHLUNG</div>}
                  {s.name}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, ri) => (
              <tr key={ri}>
                <td style={{ padding: '14px 18px', fontSize: 13, color: 'var(--muted-dark)', borderBottom: '1px solid var(--rule-dark)', fontWeight: 500 }}>
                  {r.label}
                </td>
                {scenarios.map((s, ci) => {
                  const isImportant = r.key === 'net' || r.key === 'amort';
                  return (
                    <td
                      key={ci}
                      style={{
                        padding: '14px 22px',
                        fontFamily: 'JetBrains Mono, monospace',
                        fontSize: isImportant ? 16 : 14,
                        fontWeight: isImportant ? 700 : 500,
                        background: s.highlight ? 'rgba(28,58,45,0.04)' : 'transparent',
                        color: s.highlight && isImportant ? 'var(--forest)' : 'var(--char)',
                        borderLeft: s.highlight ? '1px solid rgba(28,58,45,0.06)' : 'none',
                        borderRight: s.highlight ? '1px solid rgba(28,58,45,0.06)' : 'none',
                        borderBottom: '1px solid var(--rule-dark)',
                      }}
                    >
                      {s[r.key]}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// 5.3 Dein Investment — Entry Fee + Revenue Share + Zahlungsmethoden in einer Story
const ENTRY_FEE_INCLUDES = [
  { title: 'Markenrechte & Logo', sub: '5 Jahre Nutzung deutschlandweit' },
  { title: 'Onboarding 1:1 mit Nils', sub: '12 Wochen wöchentlich' },
  { title: 'Objekt-Akquise mit Ciara', sub: 'Pipeline + Verhandlungs-Support' },
  { title: 'Interior-Setup mit Celine', sub: 'Konzept, Sourcing, Vor-Ort' },
  { title: 'Foto-Shooting & Listing-Texte', sub: 'Profi-Shoot vor Go-Live' },
  { title: 'Tech-Stack-Setup', sub: 'Guesty, Channel Manager, Pricing-Tools' },
  { title: 'Anwalts- & Steuerberater-Netzwerk', sub: 'Vertraglich gesicherter Zugang' },
  { title: 'Vertrags-Templates', sub: 'Mietvertrag, Gewerbe, AGB' },
];

const REVENUE_SHARE_COVERS = [
  'Markenführung & Marketing',
  'Listing-Vertrieb (Airbnb, Booking, Direct)',
  'Dynamisches Pricing & Revenue Management',
  'Tech-Stack & Tools laufend',
  '24/7 Gäste-Kommunikation (Afeta-Team)',
  'Beschwerde- & Damage-Management',
  'Reinigungsteam-Koordination',
  'Slack-Support für dich 24/7',
  'Monatliche Reportings & Insights',
];

const INVESTMENT_NOT_INCLUDED = [
  { title: 'Miete oder Kauf des Objekts', sub: 'Du verhandelst direkt mit Vermieter' },
  { title: 'Bettensteuer & lokale Abgaben', sub: 'Stadt- bzw. landesabhängig' },
  { title: 'Versicherung am Objekt', sub: 'Betriebshaftpflicht ~600 €/Jahr' },
  { title: 'Renovierung & Sanierung', sub: 'Falls das Objekt sie braucht' },
  { title: 'Lokales Reinigungspersonal', sub: 'Wir vermitteln, du bezahlst direkt' },
];

function InvestmentBlock() {
  return (
    <div>
      {/* Header */}
      <div style={{ marginBottom: 36 }}>
        <div className="eyebrow dark" style={{ marginBottom: 10 }}>5.3 · Dein Investment</div>
        <h3 style={{ fontSize: 'clamp(28px, 3.5vw, 42px)', marginBottom: 14, lineHeight: 1.05 }}>
          Eine Entry Fee.<br />
          <span style={{ color: 'var(--forest)' }}>Ein Umsatzanteil.</span> Keine Überraschungen.
        </h3>
        <p style={{ fontSize: 17, color: 'var(--muted-dark)', maxWidth: 720, lineHeight: 1.5 }}>
          Die komplette Geld-Architektur in einem Block: Was du einmalig zahlst, was laufend läuft, was du NICHT bezahlst.
        </p>
      </div>

      {/* Hero: einmalig vs laufend */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 56 }} className="invest-hero">
        <div className="grain" style={{
          background: 'var(--forest)', color: 'var(--off)',
          borderRadius: 22, padding: 'clamp(28px, 3.5vw, 40px)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>EINMALIG · ENTRY FEE</div>
          <div className="mono" style={{ fontSize: 'clamp(48px, 6.5vw, 76px)', fontWeight: 700, color: 'var(--off)', letterSpacing: '-0.04em', lineHeight: 0.95, marginBottom: 10, position: 'relative', zIndex: 2 }}>
            50.000 €
          </div>
          <p style={{ fontSize: 15, color: 'rgba(248,247,242,0.7)', lineHeight: 1.5, position: 'relative', zIndex: 2 }}>
            Einmal bei Vertragsabschluss. Deckt alles ab, was du zum Start brauchst — Marke, Setup, Onboarding, Tech-Stack.
          </p>
        </div>
        <div style={{
          background: 'var(--off)', color: 'var(--char)',
          borderRadius: 22, padding: 'clamp(28px, 3.5vw, 40px)',
          border: '2px solid var(--lime)',
        }}>
          <div className="eyebrow dark" style={{ marginBottom: 16 }}>LAUFEND · REVENUE SHARE</div>
          <div className="mono" style={{ fontSize: 'clamp(48px, 6.5vw, 76px)', fontWeight: 700, color: 'var(--forest)', letterSpacing: '-0.04em', lineHeight: 0.95, marginBottom: 10 }}>
            20%
          </div>
          <p style={{ fontSize: 15, color: 'var(--muted-dark)', lineHeight: 1.5 }}>
            Auf jeden Umsatz, ab Tag 1. Deckt alles ab, was im laufenden Betrieb passiert — Marketing, Operations, Tech, Support.
          </p>
        </div>
      </div>

      {/* What Entry Fee unlocks */}
      <div style={{ marginBottom: 48 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
          <h4 style={{ fontSize: 'clamp(20px, 2.4vw, 26px)' }}>Was die Entry Fee einmalig abdeckt</h4>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--muted-dark)' }}>EINMALIG · {ENTRY_FEE_INCLUDES.length} POSTEN</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 12 }}>
          {ENTRY_FEE_INCLUDES.map((item, i) => (
            <div key={i} style={{
              padding: '16px 18px',
              background: 'var(--off-warm)', borderRadius: 12,
              borderLeft: '2px solid var(--forest)',
            }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--char)', marginBottom: 4, lineHeight: 1.3 }}>{item.title}</div>
              <div style={{ fontSize: 12, color: 'var(--muted-dark)' }}>{item.sub}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Two payment methods — compact */}
      <div style={{ marginBottom: 48 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 28, flexWrap: 'wrap' }}>
          <h4 style={{ fontSize: 'clamp(20px, 2.4vw, 26px)' }}>Zwei Wege, die Entry Fee zu zahlen</h4>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--muted-dark)' }}>WÄHLE A ODER B</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="payment-grid">
          {/* Method A */}
          <div style={{
            background: 'var(--off)',
            border: '2px solid var(--lime)',
            borderRadius: 18,
            padding: 'clamp(24px, 3vw, 30px)',
            position: 'relative',
          }}>
            <div style={{ position: 'absolute', top: -12, left: 22, padding: '4px 12px', borderRadius: 999, background: 'var(--lime)', color: 'var(--forest-deep)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em' }}>
              SPARMODELL · −10.000 €
            </div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em', color: 'var(--muted-dark)', marginTop: 10, marginBottom: 12, fontWeight: 600 }}>
              A · SOFORTZAHLUNG
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6, flexWrap: 'wrap' }}>
              <span className="mono" style={{ fontSize: 36, fontWeight: 700, color: 'var(--forest)', letterSpacing: '-0.03em', lineHeight: 1 }}>40.000 €</span>
              <span className="mono" style={{ fontSize: 18, color: 'var(--muted-dark)', textDecoration: 'line-through' }}>50.000 €</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--muted-dark)', marginBottom: 18, lineHeight: 1.4 }}>
              Einmalig bei Vertragsabschluss. Du sparst 10.000 € (20%).
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
              {[
                '40.000 € netto bei Vertragsunterschrift',
                'Volle Direktbuchungs-Marge ab Tag 1',
                'Steuerlich als Einmalbetrag absetzbar',
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 13, alignItems: 'flex-start' }}>
                  <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: '50%', background: 'rgba(168,224,98,0.18)', color: 'var(--forest)', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, marginTop: 2 }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Method B */}
          <div className="grain" style={{
            background: 'var(--forest)', color: 'var(--off)',
            borderRadius: 18,
            padding: 'clamp(24px, 3vw, 30px)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -12, left: 22, padding: '4px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: 'var(--forest-deep)', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em' }}>
              CASHFLOW-FREUNDLICH
            </div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em', color: 'var(--lime)', marginTop: 10, marginBottom: 12, fontWeight: 600, position: 'relative', zIndex: 2 }}>
              B · SPLIT MIT DIREKTBUCHUNGS-DECKEL
            </div>
            <div className="mono" style={{ fontSize: 36, fontWeight: 700, color: 'var(--off)', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 6, position: 'relative', zIndex: 2 }}>
              2 × 25.000 €
            </div>
            <p style={{ fontSize: 14, color: 'rgba(248,247,242,0.7)', marginBottom: 18, lineHeight: 1.4, position: 'relative', zIndex: 2 }}>
              Nur die Hälfte cash. Den Rest übernehmen deine Gäste über die Direktbuchungen.
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9, position: 'relative', zIndex: 2 }}>
              {[
                '25.000 € netto bei Vertragsunterschrift',
                '25.000 € aus deinem Direktbuchungs-Anteil',
                'Gedeckelt — typisch nach 12–18 Monaten gedeckt',
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 13, alignItems: 'flex-start' }}>
                  <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: '50%', background: 'rgba(168,224,98,0.18)', color: 'var(--lime)', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, marginTop: 2 }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* Revenue split visualization */}
      <div style={{ marginBottom: 40 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
          <h4 style={{ fontSize: 'clamp(20px, 2.4vw, 26px)' }}>Wie sich der laufende Umsatz aufteilt</h4>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--muted-dark)' }}>LAUFEND · 20/80</span>
        </div>

        {/* Sankey-style bar */}
        <div style={{ background: 'var(--off-warm)', borderRadius: 18, padding: 24, marginBottom: 24 }}>
          <div style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em', color: 'var(--muted-dark)', marginBottom: 10 }}>
            100% UMSATZ TEILT SICH IN:
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '20fr 80fr', gap: 6, marginBottom: 8 }}>
            <div style={{ height: 56, background: 'var(--lime)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest-deep)', fontWeight: 700, fontSize: 18, fontFamily: 'JetBrains Mono, monospace' }}>20%</div>
            <div style={{ height: 56, background: 'var(--forest)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--off)', fontWeight: 700, fontSize: 22, fontFamily: 'JetBrains Mono, monospace' }}>80%</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '20fr 80fr', gap: 6 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--char)', textAlign: 'center' }}>HQ</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--char)', textAlign: 'center' }}>PARTNER</div>
          </div>
          <div style={{ marginTop: 22 }}>
            <div style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 8, paddingLeft: 'calc(20% + 6px)' }}>
              80% PARTNER-ANTEIL TEILT SICH WEITER:
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '20fr 35fr 45fr', gap: 6 }}>
              <div style={{ height: 36, background: 'transparent' }} />
              <div style={{ height: 36, background: 'rgba(28,58,45,0.6)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--off)', fontSize: 13, fontFamily: 'JetBrains Mono, monospace', fontWeight: 600 }}>~35% Kosten</div>
              <div style={{ height: 36, background: 'var(--lime-glow)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest-deep)', fontSize: 13, fontFamily: 'JetBrains Mono, monospace', fontWeight: 700 }}>~45% Netto</div>
            </div>
          </div>
        </div>

        {/* Two columns: 20% covers + NOT included */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="invest-reveal-grid">
          <div style={{ padding: 24, background: 'var(--off-warm)', borderRadius: 18 }}>
            <div className="eyebrow dark" style={{ marginBottom: 14 }}>20% HQ deckt laufend ab</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
              {REVENUE_SHARE_COVERS.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, alignItems: 'flex-start' }}>
                  <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: '50%', background: 'rgba(168,224,98,0.18)', color: 'var(--forest)', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, marginTop: 2 }}>✓</span>
                  <span style={{ lineHeight: 1.4 }}>{item}</span>
                </li>
              ))}
            </ul>
          </div>

          <div style={{ padding: 24, background: 'rgba(168,65,45,0.06)', borderRadius: 18, border: '1px solid rgba(168,65,45,0.12)' }}>
            <div className="eyebrow dark" style={{ marginBottom: 14, color: '#A8412D' }}>Was du NICHT bezahlst</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {INVESTMENT_NOT_INCLUDED.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{ flexShrink: 0, width: 16, height: 16, borderRadius: '50%', background: 'rgba(168,65,45,0.12)', color: '#A8412D', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, marginTop: 2 }}>✕</span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--char)' }}>{item.title}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted-dark)', marginTop: 1 }}>{item.sub}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <div style={{ padding: '18px 22px', background: 'rgba(28,58,45,0.04)', borderRadius: 14, fontSize: 13, color: 'var(--muted-dark)', lineHeight: 1.55 }}>
        <strong style={{ color: 'var(--char)' }}>14 Tage Bedenkzeit</strong> nach Vertragsunterschrift. Du kannst nach Versand der ersten Rate zurücktreten — dann erstatten wir abzüglich tatsächlich entstandener Kosten.
      </div>

      <style>{`
        @media (max-width: 880px) {
          .invest-hero, .payment-grid, .invest-reveal-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

// 5.4 Comparison table
function ComparisonTable() {
  const cols = [
    { name: 'Solo Airbnb', sub: 'Selbst gemacht', highlight: false },
    { name: 'Andere Franchises', sub: 'Premium-Anbieter', highlight: false },
    { name: 'ROOM BOOM', sub: 'Du, mit uns', highlight: true },
  ];
  const rows = [
    { label: 'Setup-Zeit', values: ['6–12 Monate', '4–6 Monate', '8–12 Wochen'], scores: [0, 1, 2] },
    { label: 'Aufwand / Woche (Steady)', values: ['10–15 h', '3–5 h', '1–2 h'], scores: [0, 1, 2] },
    { label: 'Marketing-Power', values: ['Selbst aufbauen', 'Mitgenutzte Marke', 'Eigenes Brand-Team'], scores: [0, 1, 2] },
    { label: 'Tech-Stack', values: ['Du jonglierst Tools', 'Tools inkludiert', 'Vollständig integriert'], scores: [0, 1, 2] },
    { label: 'Support', values: ['Foren & Google', 'Email-Support', '24/7 Slack + Nils'], scores: [0, 1, 2] },
    { label: 'Marge nach Fees', values: ['~ 100% von wenig', '~ 60–65%', '80% von viel'], scores: [1, 1, 2] },
    { label: 'Skalierbarkeit', values: ['Du = Bottleneck', 'Linear', 'Linear, halber Aufwand'], scores: [0, 1, 2] },
    { label: 'Exit-Möglichkeit', values: ['Schwer zu verkaufen', 'Vertrags-Lock', 'Frei nach 12 Monaten'], scores: [0, 0, 2] },
  ];
  return (
    <div>
      <div style={{ marginBottom: 24 }}>
        <div className="eyebrow dark" style={{ marginBottom: 8 }}>5.4 · Im Vergleich</div>
        <h3 style={{ fontSize: 'clamp(24px, 3vw, 34px)' }}>Drei Wege, ein Ziel — wo bist du am besten aufgehoben?</h3>
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: 0, minWidth: 720 }}>
          <thead>
            <tr>
              <th style={{ width: 220 }}></th>
              {cols.map((c, i) => (
                <th
                  key={i}
                  style={{
                    padding: '24px 22px',
                    textAlign: 'left',
                    background: c.highlight ? 'var(--forest)' : 'transparent',
                    color: c.highlight ? 'var(--off)' : 'var(--char)',
                    border: c.highlight ? '2px solid var(--lime)' : '1px solid var(--rule-dark)',
                    borderBottom: 'none',
                    borderRadius: '14px 14px 0 0',
                  }}
                >
                  <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: c.highlight ? 'var(--lime)' : 'var(--muted-dark)', marginBottom: 6 }}>
                    {c.sub.toUpperCase()}
                  </div>
                  <div style={{ fontFamily: 'Epilogue, sans-serif', fontSize: 20, fontWeight: 900 }}>{c.name}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, ri) => (
              <tr key={ri}>
                <td style={{ padding: '16px 18px', fontSize: 13, color: 'var(--muted-dark)', fontWeight: 500, borderBottom: '1px solid var(--rule-dark)' }}>
                  {r.label}
                </td>
                {r.values.map((v, ci) => {
                  const score = r.scores[ci];
                  const c = cols[ci];
                  const isLast = ri === rows.length - 1;
                  return (
                    <td
                      key={ci}
                      style={{
                        padding: '16px 22px',
                        fontSize: 14,
                        background: c.highlight ? 'rgba(28,58,45,0.04)' : 'transparent',
                        borderLeft: c.highlight ? '2px solid var(--lime)' : 'none',
                        borderRight: c.highlight ? '2px solid var(--lime)' : 'none',
                        borderBottom: isLast ? (c.highlight ? '2px solid var(--lime)' : '1px solid var(--rule-dark)') : '1px solid var(--rule-dark)',
                        borderRadius: isLast && c.highlight ? '0 0 14px 14px' : 0,
                        position: 'relative',
                      }}
                    >
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        {score === 2 && <span style={{ color: c.highlight ? 'var(--forest)' : 'var(--forest)', fontSize: 14, fontWeight: 700 }}>✓</span>}
                        {score === 1 && <span style={{ color: 'var(--muted-dark)', fontSize: 14 }}>—</span>}
                        {score === 0 && <span style={{ color: '#A8412D', fontSize: 14 }}>✕</span>}
                        <span style={{ color: c.highlight ? 'var(--char)' : 'var(--char)', fontWeight: c.highlight ? 600 : 400 }}>{v}</span>
                      </div>
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function BusinessCaseSection() {
  return (
    <section id="businesscase" className="sect" style={{ background: 'var(--off)' }} data-screen-label="05 Business Case">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow dark">Sektion 05 · Das wichtigste Kapitel</span>
          <h2>
            Business Case. <br />
            <span style={{ color: 'var(--forest)' }}>Rechne selbst nach.</span>
          </h2>
          <p>
            Vier Werkzeuge: Ein Rechner, drei Szenarien, deine komplette Investment-Übersicht
            und ein Vergleich mit den realistischen Alternativen.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 80 }}>
          <ROICalculator />
          <ScenariosTable />
          <InvestmentBlock />
          <ComparisonTable />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PropertiesSection, BusinessCaseSection });