// Sections 6-11: Prozess, Team, Aufgaben, FAQs, Downloads, Next Step

// ====== Section 6: Der Prozess — vertikale Timeline ======
function PhaseRow({ phase, isLast, isCurrent }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '120px 1fr',
      gap: 'clamp(20px, 3vw, 48px)',
      position: 'relative',
      paddingBottom: isLast ? 0 : 'clamp(48px, 6vw, 72px)',
    }} className="phase-row">
      {/* Left rail + number badge */}
      <div style={{ position: 'relative' }}>
        {!isLast && (
          <div style={{
            position: 'absolute',
            left: '50%', top: 96, bottom: -16,
            width: 2,
            background: 'var(--rule-dark)',
            transform: 'translateX(-50%)',
            zIndex: 1,
          }} />
        )}
        <div style={{
          position: 'relative', zIndex: 2,
          width: 92, height: 92,
          margin: '0 auto',
          borderRadius: '50%',
          background: isCurrent ? 'var(--forest)' : 'var(--off)',
          border: isCurrent ? '2px solid var(--lime)' : '2px solid var(--rule-dark)',
          display: 'grid', placeItems: 'center',
          color: isCurrent ? 'var(--lime)' : 'var(--forest)',
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 30, fontWeight: 700, letterSpacing: '-0.02em',
          boxShadow: isCurrent ? '0 16px 36px -14px rgba(168,224,98,0.5)' : 'none',
          transition: 'all 0.3s ease',
        }} className="phase-badge">
          {phase.num}
        </div>
        {isCurrent && (
          <div style={{
            position: 'absolute',
            top: 100, left: '50%', transform: 'translateX(-50%)',
            padding: '4px 10px',
            background: 'var(--lime)', color: 'var(--forest-deep)',
            borderRadius: 999,
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 9, fontWeight: 700, letterSpacing: '0.12em',
            whiteSpace: 'nowrap',
          }}>
            DU BIST HIER
          </div>
        )}
      </div>

      {/* Right content */}
      <div style={{ paddingTop: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap', marginBottom: 16 }}>
          <div style={{ flex: '1 1 280px' }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em', color: isCurrent ? 'var(--forest)' : 'var(--muted-dark)', marginBottom: 10, fontWeight: 600 }}>
              PHASE · {phase.duration.toUpperCase()}
            </div>
            <h3 style={{ fontSize: 'clamp(24px, 3vw, 32px)', marginBottom: 10, lineHeight: 1.05 }}>{phase.title}</h3>
            <p style={{ fontSize: 16, color: 'var(--muted-dark)', maxWidth: 540, lineHeight: 1.45 }}>{phase.short}</p>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '6px 16px 6px 6px',
            background: 'var(--off-warm)', borderRadius: 999,
            border: '1px solid var(--rule-dark)',
            flexShrink: 0, marginTop: 4,
          }}>
            <div className="portrait" style={{ width: 28, height: 28, borderRadius: '50%', aspectRatio: 'auto', background: 'var(--forest)', color: 'var(--lime)', fontSize: 13 }}>
              <span className="initials">{phase.contact[0]}</span>
            </div>
            <span style={{ fontSize: 13, fontWeight: 500 }}>Mit {phase.contact}</span>
          </div>
        </div>

        <ul style={{
          listStyle: 'none',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: '10px 28px',
          marginTop: 20,
          paddingTop: 20,
          borderTop: '1px solid var(--rule-dark)',
        }}>
          {phase.details.map((d, i) => (
            <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{
                flexShrink: 0,
                width: 18, height: 18, borderRadius: '50%',
                background: 'rgba(168,224,98,0.18)',
                color: 'var(--forest)',
                display: 'grid', placeItems: 'center',
                fontSize: 10, fontWeight: 700,
                marginTop: 3,
              }}>✓</span>
              <span style={{ fontSize: 14.5, lineHeight: 1.45, color: 'var(--char)' }}>{d}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function ProzessSection() {
  const phases = window.RBData.PHASES;

  return (
    <section id="prozess" className="sect" style={{ background: 'var(--off)' }} data-screen-label="06 Prozess">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 64 }}>
          <span className="eyebrow dark">Sektion 06 · Vom Erstcall bis Skalierung</span>
          <h2>
            In 6 Phasen <br />
            <span style={{ color: 'var(--forest)' }}>zum eigenen Franchise.</span>
          </h2>
          <p>
            Realistischer Zeitplan, keine Marketing-Sprüche. Nach 90 Tagen bist du mit erstem Gast live.
          </p>
        </div>

        {/* Vertical timeline */}
        <div style={{ maxWidth: 980, margin: '0 auto 56px' }}>
          {phases.map((p, i) => (
            <PhaseRow
              key={i}
              phase={p}
              isLast={i === phases.length - 1}
              isCurrent={i === 0}
            />
          ))}
        </div>

        {/* Expectation management */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 14,
        }}>
          {[
            { icon: '🎯', title: 'Realistisch', text: 'Nach 90 Tagen mit dem ersten Gast live.' },
            { icon: '⏱️', title: 'Dein Aufwand', text: '1–2 h pro Woche nach Setup-Phase.' },
            { icon: '🙅', title: 'Du brauchst nicht', text: 'Erfahrung in Hospitality, Tech-Skills, oder Vollzeit-Zeit.' },
          ].map((x, i) => (
            <div key={i} style={{ padding: '22px 24px', background: 'var(--forest-deep)', borderRadius: 14, color: 'var(--off)' }}>
              <div style={{ fontSize: 22, marginBottom: 10 }}>{x.icon}</div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--lime)', marginBottom: 6 }}>{x.title.toUpperCase()}</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(248,247,242,0.85)' }}>{x.text}</div>
            </div>
          ))}
        </div>

        <style>{`
          @media (max-width: 640px) {
            .phase-row { grid-template-columns: 72px 1fr !important; gap: 16px !important; }
            .phase-badge { width: 64px !important; height: 64px !important; font-size: 22px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ====== Section 7: Team ======
function TeamCard({ member, onClick }) {
  const bg = member.highlight
    ? 'linear-gradient(135deg, #1C3A2D 0%, #5a8847 100%)'
    : 'linear-gradient(135deg, #122620 0%, #1C3A2D 60%, #25503e 100%)';
  return (
    <button
      onClick={onClick}
      style={{
        textAlign: 'left',
        background: 'var(--off)',
        border: member.highlight ? '2px solid var(--lime)' : '1px solid var(--rule-dark)',
        borderRadius: 18,
        padding: 22,
        cursor: 'pointer',
        transition: 'all 0.25s ease',
        position: 'relative',
        height: '100%',
        display: 'flex', flexDirection: 'column',
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; if (!member.highlight) e.currentTarget.style.borderColor = 'var(--forest)'; e.currentTarget.style.boxShadow = '0 18px 40px -22px rgba(28,58,45,0.3)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; if (!member.highlight) e.currentTarget.style.borderColor = 'var(--rule-dark)'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      {member.highlight && (
        <div style={{ position: 'absolute', top: -10, right: 16, padding: '4px 12px', borderRadius: 999, background: 'var(--lime)', color: 'var(--forest-deep)', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em' }}>
          DEIN ANSPRECHPARTNER
        </div>
      )}
      <div className="portrait" style={{ aspectRatio: '1 / 1', background: bg, marginBottom: 16 }}>
        <span className="initials">{member.initials}</span>
      </div>
      <h4 style={{ fontSize: 19, marginBottom: 4 }}>{member.name}</h4>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: member.highlight ? 'var(--forest)' : 'var(--forest)', marginBottom: 10, textTransform: 'uppercase', fontWeight: 600 }}>
        {member.role}
      </div>
      <p style={{ fontSize: 13, color: 'var(--muted-dark)', lineHeight: 1.5, marginBottom: 12, flex: 1 }}>{member.short}</p>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {member.skills.map(s => <span key={s} className="chip dark" style={{ fontSize: 10 }}>{s}</span>)}
      </div>
    </button>
  );
}

function TeamModal({ member, onClose }) {
  if (!member) return null;
  const bg = 'linear-gradient(135deg, #1C3A2D 0%, #25503e 60%, #5a8847 100%)';
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0 }} className="team-modal-grid">
          <div className="portrait" style={{ borderRadius: '24px 0 0 0', background: bg, aspectRatio: 'auto', minHeight: 300, fontSize: 64 }}>
            <span className="initials">{member.initials}</span>
          </div>
          <div style={{ padding: 32 }}>
            <h3 style={{ fontSize: 28, marginBottom: 4 }}>{member.name}</h3>
            <div className="mono" style={{ fontSize: 12, letterSpacing: '0.08em', color: 'var(--forest)', marginBottom: 18, textTransform: 'uppercase', fontWeight: 600 }}>{member.role}</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, marginBottom: 22 }}>{member.bio}</p>

            <div style={{ padding: '16px 18px', background: 'var(--off-warm)', borderRadius: 12, marginBottom: 14 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em', color: 'var(--muted-dark)', marginBottom: 6 }}>WANN TRIFFST DU MICH</div>
              <div style={{ fontSize: 14 }}>{member.meet}</div>
            </div>

            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {member.skills.map(s => <span key={s} className="chip dark">{s}</span>)}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 640px) {
          .team-modal-grid { grid-template-columns: 1fr !important; }
          .team-modal-grid > div:first-child { border-radius: 24px 24px 0 0 !important; min-height: 220px !important; }
        }
      `}</style>
    </div>
  );
}

function TeamSection() {
  const team = window.RBData.TEAM;
  const [modalMember, setModalMember] = React.useState(null);
  const nils = team.find(t => t.highlight);

  return (
    <section id="team" className="sect" style={{ background: 'var(--off-warm)' }} data-screen-label="07 Team">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 36 }}>
          <span className="eyebrow dark">Sektion 07 · Das Team</span>
          <h2>
            Das Team hinter <br />
            <span style={{ color: 'var(--forest)' }}>ROOM BOOM.</span>
          </h2>
        </div>

        {/* Nils hero */}
        <div style={{
          background: 'var(--forest)', color: 'var(--off)',
          borderRadius: 24, padding: 'clamp(28px, 4vw, 40px)',
          marginBottom: 32,
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 28, alignItems: 'center',
        }} className="nils-hero">
          <div className="portrait" style={{ width: 92, height: 92, aspectRatio: 'auto', background: 'linear-gradient(135deg, #A8E062, #5a8847)', color: 'var(--forest-deep)', fontSize: 38 }}>
            <span className="initials">N</span>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Dein Ansprechpartner</div>
            <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 800, fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.2, letterSpacing: '-0.01em', marginBottom: 8 }}>
              Nils meldet sich nach diesem Vault bei dir.
            </div>
            <div style={{ fontSize: 14, color: 'rgba(248,247,242,0.7)', lineHeight: 1.5 }}>
              Onboarding & Key Account · ab Tag 1 dein direkter Draht ins Team
            </div>
          </div>
          <button onClick={() => setModalMember(nils)} className="btn btn-lime">
            Mehr über Nils →
          </button>
        </div>

        {/* Team grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 18 }}>
          {team.map((m, i) => (
            <TeamCard key={i} member={m} onClick={() => setModalMember(m)} />
          ))}
        </div>

        <TeamModal member={modalMember} onClose={() => setModalMember(null)} />

        <style>{`
          @media (max-width: 740px) {
            .nils-hero { grid-template-columns: 1fr !important; text-align: left !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ====== Section 9 (NEW): Wer macht was? — Aufgabenverteilung ======
function AufgabenColumn({ side, data, accent }) {
  const totalCount = data.groups.reduce((acc, g) => acc + g.items.length, 0);
  const isDark = side === 'wir';
  const bg = isDark ? 'var(--forest)' : 'var(--off)';
  const fg = isDark ? 'var(--off)' : 'var(--char)';
  const muted = isDark ? 'rgba(248,247,242,0.65)' : 'var(--muted-dark)';
  const checkBg = isDark ? 'rgba(168,224,98,0.18)' : 'rgba(28,58,45,0.08)';
  const checkFg = isDark ? 'var(--lime)' : 'var(--forest)';
  const divider = isDark ? 'rgba(255,255,255,0.1)' : 'var(--rule-dark)';
  const labelColor = isDark ? 'var(--lime)' : 'var(--forest)';

  return (
    <div style={{
      background: bg,
      color: fg,
      borderRadius: 22,
      padding: 'clamp(28px, 3.5vw, 40px)',
      border: isDark ? '1px solid var(--lime)' : '1px solid var(--rule-dark)',
      boxShadow: isDark ? '0 30px 60px -30px rgba(28,58,45,0.4)' : '0 18px 40px -22px rgba(28,58,45,0.1)',
      position: 'relative', overflow: 'hidden',
    }} className={isDark ? 'grain' : ''}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, position: 'relative', zIndex: 2 }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.12em', color: labelColor, marginBottom: 10, fontWeight: 600 }}>
            {data.icon} · {totalCount} AUFGABEN
          </div>
          <h3 style={{ fontSize: 'clamp(24px, 2.6vw, 32px)', marginBottom: 6, color: fg }}>{data.label}</h3>
          <p style={{ fontSize: 14, color: muted, lineHeight: 1.5 }}>{data.sub}</p>
        </div>
      </div>

      {/* Time stat callout */}
      <div style={{
        padding: '16px 18px',
        marginBottom: 28,
        borderRadius: 12,
        background: isDark ? 'rgba(168,224,98,0.08)' : 'var(--off-warm)',
        borderLeft: `3px solid ${labelColor}`,
        position: 'relative', zIndex: 2,
      }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', color: muted, marginBottom: 6 }}>
          ZEITAUFWAND
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
          <span className="mono" style={{ fontSize: 24, fontWeight: 700, color: labelColor, letterSpacing: '-0.02em' }}>
            {data.timeNote}
          </span>
          <span style={{ fontSize: 12, color: muted }}>{data.timeContext}</span>
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        {data.groups.map((group, gi) => (
          <div key={gi} style={{ marginBottom: gi < data.groups.length - 1 ? 28 : 0 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.1em',
              color: muted, marginBottom: 14,
              paddingBottom: 10, borderBottom: `1px solid ${divider}`,
              textTransform: 'uppercase', fontWeight: 500,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: labelColor }} />
              {group.label}
              <span style={{ marginLeft: 'auto', opacity: 0.6 }}>{String(group.items.length).padStart(2, '0')}</span>
            </div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {group.items.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{
                    flexShrink: 0,
                    width: 22, height: 22, borderRadius: '50%',
                    background: checkBg, color: checkFg,
                    display: 'grid', placeItems: 'center',
                    fontSize: 11, fontWeight: 700,
                    marginTop: 1,
                  }}>✓</span>
                  <span style={{ fontSize: 14.5, lineHeight: 1.5, color: fg }}>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

function AufgabenSection() {
  const data = window.RBData.AUFGABEN;
  const duCount = data.du.groups.reduce((a, g) => a + g.items.length, 0);
  const wirCount = data.wir.groups.reduce((a, g) => a + g.items.length, 0);

  return (
    <section id="aufgaben" className="sect" style={{ background: 'var(--off)' }} data-screen-label="08 Wer macht was?">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow dark">Sektion 08 · Verantwortung</span>
          <h2>
            Wer macht was? <br />
            <span style={{ color: 'var(--forest)' }}>Klare Aufteilung, ohne Grauzonen.</span>
          </h2>
          <p>
            Du machst, was lokal sein muss — Vermieter, Behörden, Steuer.
            Wir machen den Rest: Marketing, Tech, Operations, Gäste.
          </p>
        </div>

        {/* Quick summary bar */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12,
          marginBottom: 32,
        }}>
          {[
            { label: 'Aufgaben bei dir', value: duCount, suffix: '', color: 'var(--char)' },
            { label: 'Aufgaben bei uns', value: wirCount, suffix: '', color: 'var(--forest)' },
            { label: 'Dein Aufwand', value: '1–2', suffix: ' h/Wo', color: 'var(--char)' },
            { label: 'Unser Aufwand', value: '40+', suffix: ' h/Wo', color: 'var(--forest)' },
          ].map((s, i) => (
            <div key={i} style={{ padding: '18px 20px', background: 'var(--off-warm)', borderRadius: 14 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', color: 'var(--muted-dark)', marginBottom: 6 }}>
                {s.label.toUpperCase()}
              </div>
              <div className="mono" style={{ fontSize: 28, fontWeight: 700, color: s.color, letterSpacing: '-0.02em' }}>
                {s.value}<span style={{ fontSize: 14, color: 'var(--muted-dark)', fontWeight: 500 }}>{s.suffix}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Two-column responsibility split */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }} className="aufgaben-grid">
          <AufgabenColumn side="du" data={data.du} />
          <AufgabenColumn side="wir" data={data.wir} />
        </div>

        <div style={{ marginTop: 28, 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>
          Diese Aufteilung ist Vertragsbestandteil. Im Mustervertrag (Sektion 10) Wort für Wort nachlesbar.
        </div>

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

// ====== Section 10: FAQs ======
function FAQItem({ item, isOpen, onToggle }) {
  return (
    <div style={{
      borderRadius: 14,
      background: isOpen ? 'rgba(28,58,45,0.04)' : 'transparent',
      borderLeft: isOpen ? '3px solid var(--lime)' : '3px solid transparent',
      transition: 'all 0.25s ease',
    }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%', textAlign: 'left',
          padding: '22px 22px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          fontFamily: 'Epilogue, sans-serif', fontWeight: 700, fontSize: 18,
          letterSpacing: '-0.01em', lineHeight: 1.3,
          color: 'var(--char)',
        }}
      >
        <span>{item.q}</span>
        <span style={{
          flexShrink: 0,
          width: 32, height: 32, borderRadius: '50%',
          background: isOpen ? 'var(--lime)' : 'transparent',
          border: `1px solid ${isOpen ? 'var(--lime)' : 'var(--rule-dark)'}`,
          color: isOpen ? 'var(--forest-deep)' : 'var(--char)',
          display: 'grid', placeItems: 'center',
          fontSize: 18, fontWeight: 400,
          transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'all 0.25s ease',
        }}>
          +
        </span>
      </button>
      {isOpen && (
        <div style={{ padding: '0 22px 24px 22px', maxWidth: 760 }}>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--char-soft)' }}>{item.a}</p>
        </div>
      )}
    </div>
  );
}

function FAQsSection() {
  const faqs = window.RBData.FAQS;
  const [tab, setTab] = React.useState('money');
  const [open, setOpen] = React.useState(0); // index in current tab
  React.useEffect(() => { setOpen(null); }, [tab]);

  const currentTab = faqs[tab];

  return (
    <section id="faqs" className="sect" style={{ background: 'var(--off)' }} data-screen-label="09 FAQs">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <span className="eyebrow dark">Sektion 09 · 26 ehrliche Fragen</span>
          <h2 style={{ maxWidth: 980 }}>
            Die Fragen, die du dich nicht traust zu stellen.
            <br />
            <span style={{ color: 'var(--forest)' }}>Wir beantworten sie trotzdem.</span>
          </h2>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32, paddingBottom: 24, borderBottom: '1px solid var(--rule-dark)' }}>
          {Object.entries(faqs).map(([key, cat]) => (
            <button
              key={key}
              onClick={() => setTab(key)}
              style={{
                padding: '12px 20px',
                borderRadius: 999,
                fontSize: 14, fontWeight: 500,
                background: tab === key ? 'var(--forest)' : 'transparent',
                color: tab === key ? 'var(--off)' : 'var(--char)',
                border: `1px solid ${tab === key ? 'var(--forest)' : 'var(--rule-dark)'}`,
                transition: 'all 0.18s ease',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}
            >
              <span style={{ fontSize: 16 }}>{cat.icon}</span>
              {cat.label}
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, opacity: 0.6, marginLeft: 2 }}>{cat.items.length}</span>
            </button>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }} className="faq-grid">
          {currentTab.items.map((item, i) => (
            <FAQItem
              key={i}
              item={item}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? null : i)}
            />
          ))}
        </div>

        <div style={{ marginTop: 40, padding: '24px 28px', background: 'var(--off-warm)', borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 700, fontSize: 17, marginBottom: 4 }}>
              Deine Frage ist nicht dabei?
            </div>
            <div style={{ fontSize: 13, color: 'var(--muted-dark)' }}>
              Notiere sie und nimm sie ins Zweitgespräch mit Nils mit.
            </div>
          </div>
          <a href="#nextstep" className="btn btn-ghost-dark" data-track="booking" data-track-label="faq-cta">Call mit Nils buchen →</a>
        </div>

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

// ====== Section 10: Downloads ======
function DownloadCard({ item, idx }) {
  const palette = [
    'linear-gradient(135deg, #1C3A2D, #5a8847)',
    'linear-gradient(135deg, #122620, #1C3A2D)',
    'linear-gradient(135deg, #25503e, #5a8847)',
    'linear-gradient(135deg, #1C3A2D, #25503e)',
    'linear-gradient(135deg, #122620, #5a8847)',
  ];
  return (
    <div style={{
      border: '1px solid var(--rule-dark)',
      borderRadius: 18,
      background: 'var(--off)',
      overflow: 'hidden',
      transition: 'all 0.25s ease',
      display: 'flex', flexDirection: 'column',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--forest)'; e.currentTarget.style.boxShadow = '0 18px 40px -22px rgba(28,58,45,0.3)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--rule-dark)'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      {/* PDF preview */}
      <div style={{
        aspectRatio: '4 / 5',
        background: palette[idx % palette.length],
        position: 'relative',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        padding: 22,
        color: 'var(--off)',
        overflow: 'hidden',
      }}>
        {/* Faux document lines */}
        <div style={{ position: 'absolute', inset: '22px 18px', display: 'flex', flexDirection: 'column', gap: 6, opacity: 0.16 }}>
          <div style={{ height: 8, width: '60%', background: 'var(--off)', borderRadius: 2 }} />
          <div style={{ height: 4, width: '90%', background: 'var(--off)', borderRadius: 2, marginTop: 24 }} />
          <div style={{ height: 4, width: '85%', background: 'var(--off)', borderRadius: 2 }} />
          <div style={{ height: 4, width: '70%', background: 'var(--off)', borderRadius: 2 }} />
          <div style={{ height: 4, width: '88%', background: 'var(--off)', borderRadius: 2, marginTop: 14 }} />
          <div style={{ height: 4, width: '80%', background: 'var(--off)', borderRadius: 2 }} />
          <div style={{ height: 4, width: '55%', background: 'var(--off)', borderRadius: 2 }} />
        </div>
        <div style={{ position: 'relative', zIndex: 2, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', color: 'var(--lime)' }}>
          PDF · {String(idx + 1).padStart(2, '0')} / 05
        </div>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 900, fontSize: 24, lineHeight: 1.1, letterSpacing: '-0.01em' }}>
            {item.title}
          </div>
          <div style={{ marginTop: 12, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'rgba(248,247,242,0.6)', letterSpacing: '0.06em' }}>
            {item.pages} SEITEN · {item.size}
          </div>
        </div>
      </div>
      <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <p style={{ fontSize: 14, color: 'var(--muted-dark)', lineHeight: 1.5, flex: 1, marginBottom: 18 }}>{item.desc}</p>
        <button
          className="btn btn-lime"
          style={{ width: '100%', justifyContent: 'center', padding: '14px 22px' }}
          data-track="download"
          data-track-label={item.title}
        >
          PDF herunterladen
          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 0 v9 M3 6 L7 10 L11 6 M0 13 H14" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
        </button>
      </div>
    </div>
  );
}

function DownloadsSection() {
  const downloads = window.RBData.DOWNLOADS;
  return (
    <section id="downloads" className="sect" style={{ background: 'var(--off-warm)' }} data-screen-label="10 Downloads">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow dark">Sektion 10 · Zum Mitnehmen</span>
          <h2>
            Die wichtigsten <br />
            <span style={{ color: 'var(--forest)' }}>Dokumente.</span>
          </h2>
          <p>
            Alles, was du offline lesen, drucken oder mit deinem Steuerberater
            durchgehen möchtest.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18 }}>
          {downloads.map((d, i) => <DownloadCard key={i} item={d} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

// ====== Section 11: Next Step ======
function NextStepSection({ firstName }) {
  return (
    <section id="nextstep" className="sect forest-deep-bg grain" style={{ paddingBottom: 60 }} data-screen-label="11 Next Step">
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto 56px' }}>
          <span className="eyebrow" style={{ justifyContent: 'center' }}>Sektion 11 · Der nächste Schritt</span>
          <h2 style={{ color: 'var(--off)', fontSize: 'clamp(40px, 6vw, 80px)', marginTop: 20, marginBottom: 24 }}>
            Du hast alles gesehen, <span style={{ color: 'var(--lime)' }}>{firstName}</span>. <br />
            Bereit für den nächsten Schritt?
          </h2>
          <p style={{ color: 'rgba(248,247,242,0.7)', fontSize: 'clamp(17px, 1.7vw, 21px)', lineHeight: 1.5, maxWidth: 680, margin: '0 auto' }}>
            Buch dir 45 Minuten mit Nils für deine offenen Fragen — und sprecht über den Start.
          </p>
        </div>

        {/* Calendly mockup */}
        <div style={{ background: 'var(--off)', borderRadius: 24, padding: 'clamp(20px, 3vw, 32px)', maxWidth: 1080, margin: '0 auto', boxShadow: '0 40px 80px -20px rgba(0,0,0,0.4)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 24 }} className="calendly-grid">
            {/* Left info */}
            <div style={{ padding: 12 }}>
              <div className="portrait" style={{ width: 56, height: 56, aspectRatio: 'auto', borderRadius: '50%', background: 'linear-gradient(135deg, #A8E062, #5a8847)', color: 'var(--forest-deep)', fontSize: 22, marginBottom: 16 }}>
                <span className="initials">N</span>
              </div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 4 }}>MIT NILS</div>
              <h3 style={{ fontSize: 24, marginBottom: 12, lineHeight: 1.1 }}>Zweitgespräch ROOM BOOM Franchise</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
                {[
                  { icon: '⏱', text: '45 Minuten' },
                  { icon: '📹', text: 'Video-Call (Zoom)' },
                  { icon: '🌍', text: 'Zeitzone: Europe/Berlin' },
                ].map((m, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, fontSize: 13, color: 'var(--char)' }}>
                    <span>{m.icon}</span>
                    <span>{m.text}</span>
                  </div>
                ))}
              </div>
              <div style={{ padding: '14px 16px', background: 'var(--off-warm)', borderRadius: 10, fontSize: 12, color: 'var(--muted-dark)', lineHeight: 1.5 }}>
                Nils kennt deinen Vault-Verlauf. Du musst nichts wiederholen — wir steigen da ein, wo deine Fragen aufhören.
              </div>
            </div>

            {/* Right calendar */}
            <div style={{ padding: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 700, fontSize: 20 }}>Mai 2026</div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button style={{ width: 32, height: 32, borderRadius: 8, border: '1px solid var(--rule-dark)' }}>‹</button>
                  <button style={{ width: 32, height: 32, borderRadius: 8, border: '1px solid var(--rule-dark)' }}>›</button>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, marginBottom: 24 }}>
                {['MO', 'DI', 'MI', 'DO', 'FR', 'SA', 'SO'].map(d => (
                  <div key={d} style={{ textAlign: 'center', fontSize: 11, color: 'var(--muted-dark)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.04em', padding: 4 }}>{d}</div>
                ))}
                {Array.from({ length: 31 }, (_, i) => {
                  const day = i + 1;
                  const isWeekend = (day + 3) % 7 === 0 || (day + 3) % 7 === 6;
                  const available = !isWeekend && day >= 18 && day <= 30;
                  const selected = day === 22;
                  return (
                    <button key={i} style={{
                      aspectRatio: '1',
                      borderRadius: 10,
                      fontSize: 14,
                      fontWeight: selected ? 700 : 500,
                      background: selected ? 'var(--forest)' : (available ? 'rgba(168,224,98,0.1)' : 'transparent'),
                      color: selected ? 'var(--lime)' : (available ? 'var(--forest)' : 'var(--rule-dark)'),
                      border: 'none',
                      cursor: available ? 'pointer' : 'default',
                    }}>{day}</button>
                  );
                })}
              </div>
              <div>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', color: 'var(--muted-dark)', marginBottom: 12 }}>
                  FREITAG, 22. MAI · VERFÜGBARE SLOTS
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: 8 }}>
                  {['09:00', '10:00', '11:00', '14:00', '15:00', '16:00'].map((t, i) => (
                    <button key={i}
                      data-track="booking"
                      data-track-label={`slot-${t}`}
                      onClick={() => {
                        const url = (typeof window !== 'undefined' && window.__RB_CALENDLY__) || '';
                        if (url) window.open(url, '_blank', 'noopener');
                      }}
                      style={{
                      padding: '12px 14px',
                      borderRadius: 10,
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 13, fontWeight: 600,
                      background: i === 2 ? 'var(--lime)' : 'transparent',
                      color: i === 2 ? 'var(--forest-deep)' : 'var(--char)',
                      border: `1px solid ${i === 2 ? 'var(--lime)' : 'var(--rule-dark)'}`,
                      cursor: 'pointer',
                      transition: 'all 0.15s ease',
                    }}>
                      {t}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ marginTop: 80, paddingTop: 40, borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, color: 'rgba(248,247,242,0.55)', fontSize: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 28, height: 28, background: 'var(--lime)', color: 'var(--forest-deep)', borderRadius: 8, display: 'grid', placeItems: 'center', fontFamily: 'Epilogue, sans-serif', fontWeight: 900 }}>RB</div>
            <div>
              <div style={{ fontFamily: 'Epilogue, sans-serif', fontWeight: 800, fontSize: 14, color: 'var(--off)' }}>ROOM BOOM</div>
              <div>Maurice Schoenewolf · Geschäftsführer</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'center', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.04em', fontSize: 11 }}>
            <a href="#" style={{ color: 'rgba(248,247,242,0.55)' }}>IMPRESSUM</a>
            <a href="#" style={{ color: 'rgba(248,247,242,0.55)' }}>DATENSCHUTZ</a>
            <span>VAULT V1.0 · MAI 2026</span>
          </div>
        </div>

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

Object.assign(window, { ProzessSection, TeamSection, AufgabenSection, FAQsSection, DownloadsSection, NextStepSection });