// 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 sicher bereitstellen und jederzeit aktuell halten.', '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', 'Reinigungs- und Hausmeisterdienste'], ['bolt', 'Handwerks- und Servicebetriebe'],
  ['building', 'Gastronomie und Einzelhandel'], ['calendar', 'Unternehmen mit Dienst- oder Schichtplanung']];

  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">Für Unternehmen, die einfach planen möchten.</h2>
          <p className="lead" style={{ maxWidth: 640 }}>Besonders geeignet für Unternehmen, die ihre Planung bisher mit Excel, Papier oder mehreren Dateien organisieren.</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 PRICE_FEATURES = [
  'Unbegrenzte Objekte',
  'Unbegrenzte Schichten',
  'Unbegrenzte Dienstpläne',
  'Mehrere Planversionen',
  'Stundenberechnung',
  'Dienstpläne digital bereitstellen',
];

function Pricing() {
  const [raw, setRaw] = React.useState('25');
  const emp = Math.max(1, parseInt(raw, 10) || 0);
  const price = 19 + emp * 2;

  function handleInput(e) {
    const v = e.target.value.replace(/[^0-9]/g, '');
    setRaw(v);
  }

  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">Flexible Preise.</h2>
          <p className="lead" style={{ maxWidth: 560 }}>Sie zahlen nur für die Mitarbeiter, die Sie tatsächlich planen.</p>
        </div>

        <div className="price-wrap reveal">
          <div className="price__card price__card--hot price-widget">

            {/* Linke Seite: Eingabe + Preis */}
            <div className="price-col price-col--left">
              <div className="price__amt">
                <span className="price__eur" aria-live="polite" aria-atomic="true">{raw === '' ? '–' : price}</span>
                <span className="price__per"> € / Monat</span>
              </div>
              <p className="muted price__sub" style={{ marginTop: -30 }} aria-live="polite">
                {raw === '' ? 'Anzahl eingeben' : `Für ${emp} Mitarbeiter`}
              </p>

              <div className="price-slider-wrap">
                <div className="price-input-row">
                  <label className="price-slider-label" htmlFor="empInput">Anzahl Mitarbeiter</label>
                  <input
                    id="empInput"
                    type="text"
                    inputMode="numeric"
                    className="kontakt__input price-input"
                    value={raw}
                    onChange={handleInput}
                    placeholder="25"
                    aria-label="Anzahl Mitarbeiter"
                  />
                </div>
                <input
                  type="range"
                  className="price-range"
                  min={1} max={999} value={Math.min(emp, 999)}
                  onChange={e => setRaw(e.target.value)}
                  aria-hidden="true"
                  tabIndex={-1}
                  style={{ background: `linear-gradient(to right, var(--accent) 0%, var(--accent) ${Math.min((emp - 1) / 998 * 100, 100)}%, var(--line-2) ${Math.min((emp - 1) / 998 * 100, 100)}%, var(--line-2) 100%)` }}
                />
              </div>

              <ul className="checks price__list">
                {PRICE_FEATURES.map(t => (
                  <li key={t}><Icon name="check" size={18} color="var(--accent)" /><span>{t}</span></li>
                ))}
              </ul>
            </div>

            {/* Trennlinie */}
            <div className="price-divider" aria-hidden="true" />

            {/* Rechte Seite: Preisübersicht + Hinweis */}
            <div className="price-col price-col--right">
              <p className="price-slider-label">Preisübersicht</p>

              <div className="price-breakdown">
                <div className="price-breakdown__row">
                  <span className="price-breakdown__label">Grundpreis</span>
                  <span className="price-breakdown__val">19 € / Monat</span>
                </div>
                <div className="price-breakdown__row">
                  <span className="price-breakdown__label" aria-live="polite">{emp} Mitarbeiter</span>
                  <span className="price-breakdown__val" aria-live="polite">{emp * 2} € / Monat</span>
                </div>
                <div className="price-breakdown__row price-breakdown__row--total">
                  <span className="price-breakdown__label">Gesamt</span>
                  <span className="price-breakdown__val" aria-live="polite">{price} € / Monat</span>
                </div>
              </div>

              <div className="price-notice">
                <Icon name="help" size={16} color="var(--ink-3)" />
                <p>Diese Übersicht dient nur zur Orientierung, Sie starten kostenlos. Nach der Testphase wählen Sie den passenden Plan anhand Ihrer Mitarbeiteranzahl.</p>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <p className="price__note" style={{ justifyContent: 'flex-start', margin: 0, fontSize: 14 }}>
                  <Icon name="check" size={15} color="var(--accent)" /> Monatlich kündbar.
                </p>
                <p className="price__note" style={{ justifyContent: 'flex-start', margin: 0, fontSize: 14 }}>
                  <Icon name="check" size={15} color="var(--accent)" /> Keine Einrichtungsgebühr.
                </p>
              </div>

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

        {/* free trial callout */}
        <div className="trial reveal" id="test">
          <div className="trial__l">
            <h3 className="h-2" style={{ color: '#fff' }}>30 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 30 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 = [
['Wie sehen Mitarbeiter ihren Dienstplan?', 'Mitarbeiter erhalten einen persönlichen Zugang und sehen jederzeit die aktuelle Version ihres Dienstplans. Freigegebene Änderungen sind sofort sichtbar.'],
['Ist NuKlaroPlan eine Personalsoftware?', 'Nein. NuKlaroPlan konzentriert sich auf Dienstplanung, Stundenübersicht und Planbereitstellung. Funktionen wie Lohnabrechnung oder Bewerbermanagement stehen bewusst nicht im Fokus.'],
['Werden Brutto- oder Nettolöhne berechnet?', 'Nein. NuKlaroPlan dient der Dienstplanung und Stundenübersicht. Berechnet werden Arbeitsstunden sowie Nacht-, Sonn- und Feiertagsstunden – keine Lohn- oder Gehaltsabrechnungen.'],
['Sind meine Daten sicher?', 'Ja. Die Daten werden verschlüsselt übertragen und in Rechenzentren von Google innerhalb der Europäischen Union gespeichert. Mitarbeiter sehen ausschließlich die für sie freigegebenen Informationen.'],
['Muss ich die Testphase kündigen?', 'Nein. Nach Ablauf der kostenlosen Testphase entstehen keine Kosten. Erst wenn Sie sich für einen Plan entscheiden, wird ein kostenpflichtiges Abonnement aktiviert. Eine Kündigung der Testphase ist nicht erforderlich.']];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const entries = QA.map((row, i) => ({ q: row[0], a: row[1], bullets: row[2], i }));
  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 }}>Die wichtigsten Fragen – kurz und verständlich beantwortet.</p>
        </div>
        <div className="faq__list" style={{ maxWidth: 760, margin: '0 auto' }}>
          {entries.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>
    </section>);

}

/* ---------- Final CTA ---------- */
/* ---------- Kontakt ---------- */
function Contact() {
  const [status,   setStatus]   = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    setErrorMsg('');
    const f = e.target;
    const vorname  = f.vorname.value.trim();
    const nachname = f.nachname.value.trim();
    const firma    = f.firma.value.trim();
    const email    = f.email.value.trim();
    const telefon  = f.telefon.value.trim();
    const nachricht = f.nachricht.value.trim();
    if (!vorname || !nachname || !email || !nachricht) { setErrorMsg('Bitte füllen Sie alle Pflichtfelder aus.'); return; }
    setStatus('loading');
    try {
      const res  = await fetch('/api/kontakt', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ vorname, nachname, firma, email, telefon, nachricht }) });
      const data = await res.json();
      if (data.success) { setStatus('success'); }
      else { setErrorMsg(data.message || 'Fehler beim Senden.'); setStatus('idle'); }
    } catch (_) { setErrorMsg('Verbindungsfehler. Bitte erneut versuchen.'); setStatus('idle'); }
  }

  return (
    <section className="section bg-2" id="kontakt">
      <div className="container">
        <div className="kontakt__grid">

          <div className="kontakt__info reveal">
            <span className="eyebrow">Kontakt</span>
            <h2 className="h-1">Haben Sie Fragen?</h2>
            <p className="lead">Wir helfen Ihnen gerne weiter – ob technische Fragen, Feedback oder Vertriebsanfragen.</p>
          </div>

          <div className="card reveal" style={{ alignSelf: 'flex-start' }}>
            {status === 'success' ? (
              <div>
                <div className="kontakt__ok">
                  <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
                  Nachricht gesendet!
                </div>
                <p style={{ color: 'var(--ink-2)', fontSize: 15, marginTop: 8 }}>Wir melden uns in Kürze bei Ihnen.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="kontakt__form" noValidate>
                <div className="kontakt__row">
                  <div className="kontakt__field">
                    <label className="kontakt__label" htmlFor="kf-vorname">Vorname *</label>
                    <input className="kontakt__input" type="text" id="kf-vorname" name="vorname" placeholder="Max" autoComplete="given-name" />
                  </div>
                  <div className="kontakt__field">
                    <label className="kontakt__label" htmlFor="kf-nachname">Nachname *</label>
                    <input className="kontakt__input" type="text" id="kf-nachname" name="nachname" placeholder="Mustermann" autoComplete="family-name" />
                  </div>
                </div>
                <div className="kontakt__field">
                  <label className="kontakt__label" htmlFor="kf-firma">Firma</label>
                  <input className="kontakt__input" type="text" id="kf-firma" name="firma" placeholder="Muster GmbH" autoComplete="organization" />
                </div>
                <div className="kontakt__field">
                  <label className="kontakt__label" htmlFor="kf-email">E-Mail *</label>
                  <input className="kontakt__input" type="email" id="kf-email" name="email" placeholder="max@firma.de" autoComplete="email" />
                </div>
                <div className="kontakt__field">
                  <label className="kontakt__label" htmlFor="kf-telefon">Telefon</label>
                  <input className="kontakt__input" type="tel" id="kf-telefon" name="telefon" placeholder="+49 123 456789" autoComplete="tel" />
                </div>
                <div className="kontakt__field">
                  <label className="kontakt__label" htmlFor="kf-nachricht">Nachricht *</label>
                  <textarea className="kontakt__input kontakt__textarea" id="kf-nachricht" name="nachricht" placeholder="Ihre Nachricht…" rows={5} />
                </div>
                {errorMsg && <p className="kontakt__error">{errorMsg}</p>}
                <button className="btn btn--primary" type="submit" disabled={status === 'loading'}>
                  {status === 'loading' ? 'Wird gesendet…' : <React.Fragment>Nachricht senden <Icon name="arrow" size={17} /></React.Fragment>}
                </button>
              </form>
            )}
          </div>

        </div>
      </div>
    </section>
  );
}

/* ---------- FinalCTA ---------- */
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 className="finalcta__actions">
          <a href="/register" className="btn btn--light btn--lg">30 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 appLinks = [
    ['Funktionen', '#funktionen', 'bolt'],
    ['Für wen', '#fuerwen', 'users'],
    ['Preise', '#preise', 'sum'],
    ['FAQ', '#faq', 'help'],
    ['Anmelden', '/login', 'shield'],
    ['Testen', '/register', 'spark', true]
  ];

  return (
    <React.Fragment>
      <footer className="footer">
        <div className="container footer__in">

          <div className="footer__brand">
            <Logo />
            <address className="footer__addr">
              Nuno Rumor<br />
              c/o Block Services<br />
              Stuttgarter Str. 106<br />
              70736 Fellbach<br />
              Deutschland
            </address>
          </div>

          <div className="footer__cols">
            <div className="footer__col">
              <p className="footer__h">Produkt</p>
              <a href="#funktionen" className="footer__l">Funktionen</a>
              <a href="#fuerwen" className="footer__l">Für wen</a>
              <a href="#preise" className="footer__l">Preise</a>
              <a href="#faq" className="footer__l">FAQ</a>
              <a href="#kontakt" className="footer__l">Kontakt</a>
            </div>
            <div className="footer__col">
              <p className="footer__h">Rechtliches</p>
              <a href="/agb" className="footer__l">AGB</a>
              <a href="/datenschutz" className="footer__l">Datenschutz</a>
              <a href="/avv" className="footer__l">AVV</a>
              <a href="/impressum" className="footer__l">Impressum</a>
            </div>
            <div className="footer__col">
              <p className="footer__h">Konto</p>
              <a href="/login" className="footer__l">Anmelden</a>
              <a href="/register" className="footer__l">Kostenlos testen</a>
            </div>
            <div className="footer__col">
              <p className="footer__h">Kontakt</p>
              <a href="mailto:kontakt@nuklaroplan.com" className="footer__l">kontakt@nuklaroplan.com</a>
              <a href="/kontakt" className="footer__l">Kontaktformular</a>
            </div>
          </div>

        </div>
        <div className="container footer__bottom">
          <p className="footer__copy">© {new Date().getFullYear()} NuKlaroPlan. Alle Rechte vorbehalten.</p>
          <p className="footer__copy">Made in Germany <span className="de-flag" aria-label="Deutschland" role="img"></span></p>
        </div>
      </footer>

      <nav className="mobile-appnav" aria-label="Mobile Navigation">
        <div className="mobile-appnav__rail">
          {appLinks.map(([label, href, icon, primary]) =>
            <a key={label} href={href} className={'mobile-appnav__item' + (primary ? ' mobile-appnav__item--primary' : '')} aria-label={primary ? 'Kostenlos testen' : label}>
              <span className="mobile-appnav__icon"><Icon name={icon} size={18} /></span>
              <span className="mobile-appnav__label">{label}</span>
            </a>
          )}
        </div>
      </nav>
    </React.Fragment>
  );
}

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