/* Hero — full-bleed navy panel + tilted seal sticker. Slightly less formal copy. */

const Hero = ({ onCta, onSecondary }) => (
  <section className="dlg-hero" data-screen-label="Hero">
    <HeroStyles/>
    <div className="dlg-hero__bg"/>
    <div className="container dlg-hero__grid">
      <div className="dlg-hero__copy">
        <Eyebrow tone="white">Zertifizierungsstelle für Kosmetik, Fußpflege &amp; Wellness · Berlin</Eyebrow>
        <h1 className="dlg-hero__h1">
          Zertifizierung schafft Vertrauen.<br/>
          <em>Vertrauen schafft Geschäft.</em>
        </h1>
        <p className="dlg-hero__lede">
          Die DLG bescheinigt nach unabhängiger Prüfung die fachliche Eignung und die Einhaltung
          anerkannter Berufsstandards — für Kosmetik-, Fußpflege-, Nagel- und Wimpernbetriebe sowie
          für Schulungsträger nach AZAV.
        </p>
        <div className="dlg-hero__cta">
          <Button variant="gold" size="lg" iconRight="arrowR" onClick={onCta}>
            Antrag stellen
          </Button>
          <Button variant="ghost" size="lg" icon="file" onClick={onSecondary}>
            So läuft die Prüfung ab
          </Button>
        </div>

        <div className="dlg-hero__stats">
          <Stat value="5" label="Verfahren" hint="BSO · ISO · AZAV"/>
          <Stat value="14" label="Bundesländer" hint="Vor-Ort-Audits"/>
          <Stat value="5 Tage" label="Eingangsprüfung" hint="ab Antragseingang"/>
        </div>
      </div>

      <div className="dlg-hero__seal">
        <img src="assets/zertifikat-siegel.svg" alt="DLG Zertifikat" width="320" height="384"/>
      </div>
    </div>
  </section>
);

const HeroStyles = () => (
  <style>{`
    .dlg-hero { position: relative; color: #fff; overflow: hidden; background: var(--dlg-navy-800); }
    .dlg-hero__bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(1200px 480px at 80% 30%, rgba(212,167,60,0.18), transparent 60%),
        linear-gradient(180deg, var(--dlg-navy-900) 0%, var(--dlg-navy-700) 100%);
    }
    .dlg-hero__bg::after {
      content: ""; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: linear-gradient(180deg, transparent, #000 30%, #000 80%, transparent);
    }
    .dlg-hero__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; padding: 80px 24px 96px; }
    .dlg-hero__h1 { font-family: var(--font-serif); font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 18px 0 18px; color: #fff; text-wrap: balance; }
    .dlg-hero__h1 em { color: var(--dlg-gold-400); font-style: italic; }
    .dlg-hero__lede { font-size: 18px; line-height: 1.55; color: #d3def0; max-width: 540px; margin: 0 0 28px; }
    .dlg-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .dlg-hero__cta .dlg-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
    .dlg-hero__cta .dlg-btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }

    .dlg-hero__stats { display: grid; grid-template-columns: repeat(3, auto); gap: 40px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12); }
    .dlg-hero__stats .dlg-stat__v { color: #fff; }
    .dlg-hero__stats .dlg-stat__l { color: var(--dlg-gold-400); }
    .dlg-hero__stats .dlg-stat__h { color: #c2d4eb; }

    .dlg-hero__seal { display: flex; justify-content: center; }
    .dlg-hero__seal img { filter: drop-shadow(0 12px 32px rgba(0,0,0,0.4)); transform: rotate(-4deg); }
  `}</style>
);

Object.assign(window, { Hero });