// sections-b.jsx — Vorteile, Für wen, Preise, FAQ, CTA, Footer
// Exports: Benefits, Audience, Pricing, FAQ, FinalCTA, Footer

/* ---------- Vorteile (split: list + product band w/ image slot) ---------- */
function Benefits() {
  const items = [
  'Intuitive Bedienung', 'Automatische Stundenberechnung', 'Mehrere Planversionen möglich',
  'Dienstpläne als PDF per E-Mail versenden', 'Weniger Verwaltungsaufwand', 'Sofort einsatzbereit'];

  return (
    <section className="section bg-2" id="vorteile">
      <div className="container ben">
        <div className="ben__copy reveal">
          <span className="eyebrow">Vorteile</span>
          <h2 className="h-1">Weniger Aufwand. Mehr Überblick.</h2>
          <p className="lead">NuKlaroPlan nimmt Ihnen die Verwaltung ab und gibt Ihnen die Zeit zurück – ohne Schulung, sofort startklar.</p>
          <ul className="checks" style={{ marginTop: 6 }}>
            {items.map((t) =>
            <li key={t}><Icon name="check" size={19} color="var(--accent)" /><span style={{ fontWeight: 500 }}>{t}</span></li>
            )}
          </ul>
        </div>
        <div className="ben__media reveal">
          <div className="ben__statcard">
            <div className="ben__stat"><span className="ben__big">Σ</span><div><b>Automatisch</b><span>Nacht · Sonntag · Feiertag</span></div></div>
            <hr className="rule" />
            <image-slot id="nkp-screenshot" class="ben__slot" shape="rounded" radius="14"
            placeholder="Eigenen Screenshot ablegen (optional)"></image-slot>
            <p className="ben__cap muted">Tipp: Hier können Sie später einen echten Screenshot Ihrer Auswertung einsetzen.</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Für wen ---------- */
function Audience() {
  const who = [
  ['shield', 'Sicherheitsdienste'], ['spark', 'Reinigungsunternehmen'], ['building', 'Hausmeisterdienste'],
  ['users', 'Serviceunternehmen'], ['layers', 'Dienstleistungsbetriebe']];

  return (
    <section className="section" id="fuerwen">
      <div className="container">
        <div className="sec__head sec__head--center reveal">
          <span className="eyebrow">Für wen</span>
          <h2 className="h-1">Gemacht für Teams, die planen müssen –<br />nicht verwalten wollen.</h2>
          <p className="lead" style={{ maxWidth: 640 }}>Ideal für Unternehmen, die Dienstpläne erstellen und Arbeitsstunden erfassen, ohne eine große Personalsoftware einzuführen.</p>
        </div>
        <div className="aud">
          {who.map(([ic, t], i) =>
          <div key={t} className="aud__card reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <span className="itile"><Icon name={ic} size={22} /></span>
              <span className="aud__t">{t}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Preise ---------- */
const PLANS = [
['Starter', 39, 'Für kleine Teams.', ['Bis zu 15 Mitarbeiter', 'Bis zu 10 Objekte'], false],
['Team', 79, 'Für wachsende Unternehmen.', ['Bis zu 35 Mitarbeiter', 'Bis zu 25 Objekte'], true],
['Business', 129, 'Für größere Organisationen.', ['Bis zu 75 Mitarbeiter', 'Bis zu 50 Objekte'], false]];

const SHARED = ['Unbegrenzte Schichten', 'Unbegrenzte Dienstpläne', 'Mehrere Planversionen', 'Stundenberechnung', 'Planversand per E-Mail'];
function Pricing() {
  return (
    <section className="section bg-2" id="preise">
      <div className="container">
        <div className="sec__head sec__head--center reveal">
          <span className="eyebrow">Preise</span>
          <h2 className="h-1">Faire Preise. Voller Funktionsumfang.</h2>
          <p className="lead" style={{ maxWidth: 560 }}>Jeder Tarif enthält alle Funktionen – Sie wählen nur nach Team- und Objektgröße.</p>
        </div>
        <div className="price">
          {PLANS.map(([name, eur, sub, limits, hot]) =>
          <div key={name} className={'price__card reveal' + (hot ? ' price__card--hot' : '')}>
              {hot && <span className="price__flag">Beliebt</span>}
              <h3 className="price__name">{name}</h3>
              <p className="muted price__sub">{sub}</p>
              <div className="price__amt"><span className="price__eur">{eur}</span><span className="price__per"> € / Monat</span></div>
              <ul className="checks price__list">
                {limits.map((t) => <li key={t}><Icon name="check" size={18} color="var(--accent)" /><b style={{ fontWeight: 700 }}>{t}</b></li>)}
                {SHARED.map((t) => <li key={t}><Icon name="check" size={18} color="var(--accent)" /><span>{t}</span></li>)}
              </ul>
            </div>
          )}
        </div>

        <p className="price__note reveal"><Icon name="check" size={16} color="var(--accent)" /> Sie müssen sich jetzt nicht festlegen – den passenden Tarif wählen Sie später direkt in NuKlaroPlan.</p>

        {/* free trial callout */}
        <div className="trial reveal" id="test">
          <div className="trial__l">
            <span className="badge" style={{ background: 'rgba(255,255,255,.15)', color: '#fff' }}><Icon name="spark" size={15} /> Kostenlos testen</span>
            <h3 className="h-2" style={{ color: '#fff' }}>7 Tage kostenlos – voller Funktionsumfang.</h3>
            <p style={{ color: 'rgba(255,255,255,.78)', maxWidth: 460 }}>Bis zu 35 Mitarbeiter, keine Kreditkarte, keine Verpflichtungen. Nach Ablauf wählen Sie einfach das passende Paket.</p>
          </div>
          <div className="trial__r">
            <a href="/register" className="btn btn--light btn--lg" style={{ justifyContent: 'center' }}>Jetzt 7 Tage testen <Icon name="arrow" size={18} /></a>
            <div className="trial__mini">
              {['Voller Funktionsumfang', 'Keine Kreditkarte', 'Keine Verpflichtungen'].map((t) =>
              <span key={t}><Icon name="check" size={15} color="#fff" /> {t}</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
const QA = [
['Was ist NuKlaroPlan?', 'Eine einfache Dienstplanungssoftware für Unternehmen, die ihre Planung ohne Chaos organisieren möchten. Der Fokus liegt auf Dienstplanung, Schichtverwaltung und automatischer Stundenberechnung.'],
['Für wen ist NuKlaroPlan geeignet?', 'Für Unternehmen, die Mitarbeiter auf verschiedene Objekte oder Standorte planen müssen. Typische Einsatzbereiche:', ['Sicherheitsdienste', 'Reinigungsunternehmen', 'Hausmeisterdienste', 'Serviceunternehmen', 'Sonstige Dienstleistungsbetriebe']],
['Benötige ich eine Installation?', 'Nein. NuKlaroPlan läuft vollständig im Browser und kann von jedem internetfähigen Gerät genutzt werden.'],
['Kann ich NuKlaroPlan kostenlos testen?', 'Ja. Jedes Unternehmen kann NuKlaroPlan 7 Tage kostenlos testen – ohne Kreditkarte und ohne Verpflichtungen. Während der Testphase steht der volle Funktionsumfang zur Verfügung.'],
['Welche Funktionen bietet NuKlaroPlan?', 'Mit NuKlaroPlan können Sie:', ['Objekte anlegen', 'Schichten pro Objekt definieren', 'Mitarbeiter anlegen', 'Dienstpläne erstellen', 'Mehrere Planversionen verwalten', 'Arbeitsstunden automatisch berechnen', 'Dienstpläne per E-Mail versenden']],
['Werden Löhne oder Gehälter berechnet?', 'Nein. NuKlaroPlan ist keine Lohnabrechnungssoftware. Das System berechnet lediglich Arbeitszeiten und stellt diese übersichtlich dar – z. B. Gesamt-, Nacht-, Sonntags- und Feiertagsstunden. Die Daten können anschließend in bestehende Lohn- oder Abrechnungssysteme übernommen werden.'],
['Können Dienstpläne an Mitarbeiter versendet werden?', 'Ja. Dienstpläne können direkt aus NuKlaroPlan als PDF per E-Mail an Mitarbeiter versendet werden.'],
['Sind mehrere Planversionen möglich?', 'Ja. Sie können beliebig viele Planversionen erstellen und bei Bedarf zwischen verschiedenen Planständen wechseln.'],
['Wie viele Mitarbeiter kann ich planen?', 'Das hängt vom gewählten Paket ab:', ['Starter – 39 € / Monat: bis zu 15 Mitarbeiter, bis zu 10 Objekte', 'Team – 79 € / Monat: bis zu 35 Mitarbeiter, bis zu 25 Objekte', 'Business – 129 € / Monat: bis zu 75 Mitarbeiter, bis zu 50 Objekte']],
['Kann ich später in ein größeres Paket wechseln?', 'Ja. Ein Upgrade auf ein größeres Paket ist jederzeit möglich.'],
['Gibt es eine Mindestlaufzeit?', 'Nein. NuKlaroPlan kann monatlich gekündigt werden.'],
['Welche Daten werden für die Registrierung benötigt?', 'Für die Registrierung benötigen Sie lediglich E-Mail-Adresse, Passwort und Firmenname. Weitere Daten werden erst benötigt, wenn Sie nach der Testphase ein Paket buchen möchten.'],
['Sind meine Daten sicher?', 'Ja. Ihre Daten werden verschlüsselt übertragen und in professionellen Rechenzentren gespeichert.'],
['Kann ich meine Daten exportieren?', 'Ja. Ihre Planungsdaten und Stundenübersichten können jederzeit exportiert werden.'],
['Was unterscheidet NuKlaroPlan von Excel?', 'Excel ist eine Tabellenkalkulation – NuKlaroPlan wurde speziell für Dienstplanung entwickelt und bietet u. a.:', ['Schichtverwaltung', 'Automatische Stundenberechnung', 'Mehrere Planversionen', 'E-Mail-Versand von Dienstplänen', 'Zentrale Verwaltung aller Planungen']]];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const entries = QA.map((row, i) => ({ q: row[0], a: row[1], bullets: row[2], i }));
  const mid = Math.ceil(entries.length / 2);
  const cols = [entries.slice(0, mid), entries.slice(mid)];
  return (
    <section className="section" id="faq">
      <div className="container faq">
        <div className="sec__head sec__head--center reveal">
          <span className="eyebrow">FAQ</span>
          <h2 className="h-1">Häufige Fragen.</h2>
          <p className="lead" style={{ maxWidth: 560 }}>Alles Wichtige zu Funktionen, Tarifen und Datenschutz – kurz und klar.</p>
        </div>
        <div className="faq__cols">
          {cols.map((group, ci) =>
          <div className="faq__list" key={ci}>
              {group.map(({ q, a, bullets, i }) =>
            <div key={i} className={'faq__item' + (open === i ? ' faq__item--open' : '')}>
                  <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <span>{q}</span>
                    <Icon name={open === i ? 'minus' : 'plus'} size={20} color="var(--accent)" />
                  </button>
                  <div className="faq__a">
                    <div className="faq__a-in">
                      <p className="muted">{a}</p>
                      {bullets &&
                  <ul className="faq__bullets">
                          {bullets.map((b) =>
                    <li key={b}><Icon name="check" size={16} color="var(--accent)" /><span>{b}</span></li>
                    )}
                        </ul>
                  }
                    </div>
                  </div>
                </div>
            )}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section className="section finalcta">
      <div className="container finalcta__in reveal">
        <h2 className="h-1" style={{ color: '#fff', maxWidth: 620 }}>Holen Sie sich die Zeit zurück, die der Plan kostet.</h2>
        <p style={{ color: 'rgba(255,255,255,.78)', fontSize: 19, maxWidth: 520 }}>Starten Sie heute mit NuKlaroPlan – schlank, schnell, übersichtlich.</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="/register" className="btn btn--light btn--lg">7 Tage kostenlos testen <Icon name="arrow" size={18} /></a>
          <a href="#funktionen" className="btn btn--lg finalcta__ghost"><Icon name="bolt" size={17} /> Funktionen</a>
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  const cols = [
  ['Produkt', ['Funktionen', 'Preise', 'Für wen', 'Kostenlos testen']],
  ['Unternehmen', ['Über uns', 'Kontakt', 'Blog']],
  ['Rechtliches', ['Impressum', 'Datenschutz', 'AGB']]];

  return (
    <footer className="footer">
      <div className="container footer__in">
        <div className="footer__brand">
          <Logo />
          <p className="muted" style={{ fontSize: 15, maxWidth: 280, marginTop: 14 }}>Dienstplanung ohne Chaos. Schlank, modern und auf das Wesentliche fokussiert.</p>
        </div>
        <div className="footer__cols">
          {cols.map(([h, links]) =>
          <div key={h} className="footer__col">
              <span className="footer__h">{h}</span>
              {links.map((l) => <a key={l} href="#" className="footer__l">{l}</a>)}
            </div>
          )}
        </div>
      </div>
      <div className="container footer__bottom">
        <span className="muted" style={{ fontSize: 14 }}>© 2026 NuKlaroPlan</span>
        <span className="muted" style={{ fontSize: 14 }}>Made in Germany 🇩🇪</span>
      </div>
    </footer>);

}

Object.assign(window, { Benefits, Audience, Pricing, FAQ, FinalCTA, Footer });