// 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'], ['Preise', '#preise'], ['Für wen', '#fuerwen'], ['FAQ', '#faq']];
  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 = [
    ['Verstreute Excel-Dateien', 'Mehrere Versionen, niemand weiß, welche aktuell ist.'],
    ['Stunden per Hand zählen', 'Nacht-, Sonntags- und Feiertagsstunden mühsam addieren.'],
    ['Pläne per Mail jonglieren', 'Anhänge hin und her – Änderungen gehen unter.'],
  ];
  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(([t, d], i) => (
            <div key={i} className="prob__card reveal" style={{ transitionDelay: `${i * 70}ms` }}>
              <span className="prob__x"><Icon name="x" 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>
            <p>Ein Plan, alles drin. Schichten per Klick, Stunden automatisch, Versand als PDF per Mail – immer die aktuelle Version.</p>
          </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 versenden', 'Pläne als PDF per Klick an Ihre Mitarbeiter senden – kein Excel-Versand, immer die aktuelle Version.'],
];
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">Alles fürs Wesentliche – nichts darüber hinaus.</h2>
          <p className="lead" style={{ maxWidth: 600 }}>Keine Personalverwaltung, keine Lohnabrechnung, keine unnötigen Funktionen. Nur das, was Dienstplanung wirklich 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 in der Monatsansicht planen – mehrere Versionen möglich.'],
    ['Plan als PDF versenden', 'Fertigen Dienstplan als PDF per Mail verschicken – Stunden sind bereits berechnet.'],
  ];
  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 });