// heroes.jsx — 3 hero layouts for NuKlaroPlan. Exports: HeroA, HeroB, HeroC
// HeroA = Split (Text links / Mockup rechts) — empfohlen
// HeroB = Zentriert (Text zentriert, Mockup darunter)
// HeroC = Vollbild-Mockup (Text oben, breites Mockup angeschnitten)

const HeroBullets = () => (
  <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 4 }}>
    {['Keine Kreditkarte', '7 Tage kostenlos', 'Sofort einsatzbereit'].map((t) => (
      <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 14.5, color: 'var(--ink-2)', fontWeight: 500 }}>
        <Icon name="check" size={16} color="var(--accent)" /> {t}
      </span>
    ))}
  </div>
);

const HeroCTAs = ({ center }) => (
  <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: center ? 'center' : 'flex-start' }}>
    <a className="btn btn--primary btn--lg" href="/register">7 Tage kostenlos testen <Icon name="arrow" size={18} /></a>
    <a className="btn btn--ghost btn--lg" href="#funktionen"><Icon name="bolt" size={17} /> Funktionen ansehen</a>
  </div>
);

/* ---------- A · Split ---------- */
function HeroA() {
  return (
    <header className="hero hero--split">
      <div className="container hero__split">
        <div className="hero__copy reveal">
          <span className="badge"><Icon name="spark" size={15} /> Dienstplanung ohne Chaos</span>
          <h1 className="h-display">Dienstpläne in Minuten<span className="hl"> statt Stunden</span></h1>
          <p className="lead">NuKlaroPlan ist die Dienstplan-Software für Objekte, Schichten und Stunden – fokussiert auf das Wesentliche, ohne überladene Personalverwaltung.</p>
          <HeroCTAs />
          <HeroBullets />
        </div>
        <div className="hero__media reveal">
          <PlanMockup />
        </div>
      </div>
    </header>
  );
}

/* ---------- B · Zentriert ---------- */
function HeroB() {
  return (
    <header className="hero hero--center">
      <div className="container hero__center">
        <span className="badge reveal"><Icon name="spark" size={15} /> Dienstplanung ohne Chaos</span>
        <h1 className="h-display reveal" style={{ maxWidth: 880 }}>Die ganze Dienstplanung.<br /><span className="hl">Endlich übersichtlich.</span></h1>
        <p className="lead reveal" style={{ maxWidth: 620 }}>Objekte anlegen, Mitarbeiter planen, Schichten verwalten und Stunden automatisch berechnen – schnell, modern und ohne unnötige Funktionen.</p>
        <div className="reveal"><HeroCTAs center /></div>
        <div className="reveal"><HeroBullets /></div>
        <div className="hero__shot reveal">
          <PlanMockup />
        </div>
      </div>
    </header>
  );
}

/* ---------- C · Vollbild-Mockup ---------- */
function HeroC() {
  return (
    <header className="hero hero--full">
      <div className="container hero__full-top">
        <h1 className="h-display reveal" style={{ maxWidth: 760 }}>Dienstpläne in Minuten <span className="hl">statt Stunden</span></h1>
        <div className="hero__full-side reveal">
          <p className="lead">Die schlanke Dienstplan-Software für Objekte, Schichten und Stunden – fokussiert auf das Wesentliche.</p>
          <HeroCTAs />
        </div>
      </div>
      <div className="hero__full-shot reveal">
        <div className="container"><PlanMockup /></div>
      </div>
    </header>
  );
}

Object.assign(window, { HeroA, HeroB, HeroC });