// sections-a.jsx — Nav, Problem, Funktionen, So funktioniert's
// Exports: Nav, Problem, Features, Steps

function Nav({ onHero, hero }) {
  const [open, setOpen] = React.useState(false);
  const links = [['Funktionen', '#funktionen'], ['Für wen', '#fuerwen'], ['Preise', '#preise'], ['FAQ', '#faq'], ['Kontakt', '#kontakt']];
  return (
    <nav className="nav">
      <div className="container nav__in">
        <a href="#top" aria-label="NuKlaroPlan"><Logo /></a>
        <div className="nav__links">
          {links.map(([t, h]) => <a key={t} href={h} className="nav__link">{t}</a>)}
        </div>
        <div className="nav__actions">
          <a href="/login" className="nav__link nav__login">Anmelden</a>
          <a href="/register" className="btn btn--primary btn--sm">Kostenlos testen</a>
          <button className="nav__burger" aria-label="Menü" onClick={() => setOpen(o => !o)}>
            <Icon name={open ? 'x' : 'layers'} size={22} />
          </button>
        </div>
      </div>
      {open && (
        <div className="nav__mobile">
          {links.map(([t, h]) => <a key={t} href={h} className="nav__mlink" onClick={() => setOpen(false)}>{t}</a>)}
          <a href="/register" className="btn btn--primary" onClick={() => setOpen(false)}>Kostenlos testen</a>
        </div>
      )}
    </nav>
  );
}

/* ---------- Problem: Chaos → Klarheit ---------- */
function Problem() {
  const pains = [
    ['layers', 'Planungschaos in Excel', 'Kopien, Versionen und Änderungen überall verteilt.'],
    ['sum', 'Stunden werden nachgerechnet', 'Besonders Nacht- und Sonntagsstunden kosten Zeit.'],
    ['mail', 'Infos erreichen nicht jeden', 'Planänderungen gehen zwischen E-Mails und WhatsApp unter.'],
  ];
  const wins = [
    'Ein Plan statt vieler Dateien',
    'Stunden automatisch berechnet',
    'Änderungen sofort sichtbar',
    'Dienstpläne bereitstellen mit einem Klick',
  ];
  return (
    <section className="section section--tight" id="problem">
      <div className="container">
        <div className="prob__head reveal">
          <span className="eyebrow">Das Problem</span>
          <h2 className="h-1">Dienstplanung frisst Zeit, die Sie nicht haben.</h2>
        </div>
        <div className="prob__grid">
          {pains.map(([ic, t, d], i) => (
            <div key={i} className="prob__card reveal" style={{ transitionDelay: `${i * 70}ms` }}>
              <span className="prob__x"><Icon name={ic} size={18} /></span>
              <h3 className="prob__t">{t}</h3>
              <p className="muted" style={{ fontSize: 15.5 }}>{d}</p>
            </div>
          ))}
          <div className="prob__arrow reveal" aria-hidden><Icon name="arrow" size={26} color="var(--accent)" /></div>
          <div className="prob__sol reveal">
            <span className="badge"><Icon name="check" size={15} /> Mit NuKlaroPlan</span>
            <ul className="prob__sol-list">
              {wins.map((t) => (
                <li key={t}><span>{t}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Features ---------- */
const FEATURES = [
  ['building', 'Objekte verwalten', 'Legen Sie Einsatzorte, Standorte und Bereiche an und organisieren Sie Ihre Planung übersichtlich danach.'],
  ['clock', 'Schichten definieren', 'Individuelle Schichten je Objekt – mit festen Arbeitszeiten und eigenen Kürzeln.'],
  ['users', 'Mitarbeiter verwalten', 'Mitarbeiter mit Name und E-Mail anlegen und direkt in die Planung übernehmen.'],
  ['calendar', 'Dienstpläne erstellen', 'Planen Sie per Klick in einer übersichtlichen Monatsansicht – mit mehreren Planversionen.'],
  ['sum', 'Stunden automatisch berechnen', 'Gesamt-, Nacht-, Sonntags- und Feiertagsstunden je Mitarbeiter – fertig für den Lohn-Export.'],
  ['send', 'Dienstpläne sicher bereitstellen', 'Mitarbeiter öffnen ihren Plan über einen persönlichen Zugang per E-Mail-Code und sehen immer die aktuelle Version – ohne PDF-Anhänge oder Excel-Dateien.'],
];
function Features() {
  return (
    <section className="section bg-2" id="funktionen">
      <div className="container">
        <div className="sec__head reveal">
          <span className="eyebrow">Funktionen</span>
          <h2 className="h-1">So einfach wie eine Tabelle – gemacht für Dienstplanung.</h2>
          <p className="lead" style={{ maxWidth: 600 }}>Schichten, Mitarbeiter und Stunden im Blick – ohne Funktionen, die im Alltag niemand braucht.</p>
        </div>
        <div className="feat__grid">
          {FEATURES.map(([ic, t, d], i) => (
            <div key={i} className="feat__card reveal" style={{ transitionDelay: `${(i % 3) * 70}ms` }}>
              <span className="itile"><Icon name={ic} size={24} /></span>
              <h3 className="feat__t">{t}</h3>
              <p className="muted" style={{ fontSize: 15.5 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- So funktioniert's ---------- */
function Steps() {
  const steps = [
    ['Objekte & Schichten anlegen', 'Einsatzorte definieren und passende Schichten mit Kürzeln hinterlegen.'],
    ['Mitarbeiter einplanen', 'Per Klick einteilen oder direkt in die Planung schreiben – ganz ohne komplizierte Eingabemasken.'],
    ['Plan veröffentlichen', 'Fertige Dienstpläne für Mitarbeiter bereitstellen – Änderungen und Stunden sind sofort verfügbar.'],
  ];
  return (
    <section className="section" id="ablauf">
      <div className="container">
        <div className="sec__head sec__head--center reveal">
          <span className="eyebrow">So funktioniert's</span>
          <h2 className="h-1">In drei Schritten zum fertigen Plan.</h2>
        </div>
        <div className="steps">
          {steps.map(([t, d], i) => (
            <div key={i} className="step reveal" style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="step__num">{i + 1}</span>
              <h3 className="step__t">{t}</h3>
              <p className="muted" style={{ fontSize: 15.5 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Problem, Features, Steps });