/* HomeScreen — composes the public homepage with slightly softer copy */

const HomeScreen = ({ onNav }) => (
  <div data-screen-label="Home">
    <Hero onCta={() => onNav("antrag")} onSecondary={() => {
      const el = document.getElementById("verfahren");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }}/>

    <section className="dlg-process" id="verfahren">
      <ProcessStyles/>
      <div className="container">
        <Eyebrow tone="navy">Antragsverfahren</Eyebrow>
        <h2>In vier Schritten zum Zertifikat.</h2>
        <ol className="dlg-process__steps">
          {[
            ["01","Antrag stellen","Online-Antrag mit Betriebsdaten und gewünschtem Geltungs­bereich."],
            ["02","Eingangsprüfung","Wir prüfen Vollständigkeit und Zulässigkeit innerhalb von 5 Werktagen."],
            ["03","Vor-Ort-Audit","Unabhängige:r Prüfer:in besucht Ihren Betrieb und dokumentiert die Prüfung."],
            ["04","Ausstellung","Bei Bestehen: Urkunde, Türschild und Werbe­materialien für Druck und Web."],
          ].map(([n,t,d],i)=>(
            <li key={i}>
              <div className="dlg-process__n">{n}</div>
              <div className="dlg-process__t">{t}</div>
              <div className="dlg-process__d">{d}</div>
            </li>
          ))}
        </ol>
      </div>
    </section>

    <ServiceGrid/>
    <Gebuehrenordnung/>

    <section className="dlg-trust">
      <TrustStyles/>
      <div className="container">
        <div className="dlg-trust__grid">
          <div>
            <Eyebrow tone="gold">Anerkennung</Eyebrow>
            <h2>Unabhängig. Nachvollziehbar. Bundesweit ausstellbar.</h2>
            <p>
              Jedes von uns ausgestellte Zertifikat ist über das öffentliche DLG-Register überprüfbar.
              Auf Antrag stellen wir Berufs­urkunden auch in englischer Sprache aus — für internationale
              Tätig­keiten Ihrer Kundinnen und Kunden.
            </p>
            <Notice title="Grundsätze des Zulassungsverfahrens"
                    meta="DLG-RL-2025-01 · Stand 04 / 2025">
              Die Zertifizierung gilt ausschließlich für die im Antrag bezeichneten Betriebsstätten.
              Eine Übertragung auf Filialen oder Rechtsnachfolger ist nur nach erneuter Prüfung möglich.
            </Notice>
          </div>
          <div className="dlg-trust__card">
            <Card accent>
              <Eyebrow tone="gold">Auszug aus dem Register</Eyebrow>
              <h3 style={{fontFamily:"var(--font-serif)",fontSize:22,margin:"10px 0 16px",color:"var(--dlg-navy-900)"}}>
                Zuletzt zertifiziert
              </h3>
              <ul className="dlg-trust__list">
                {[
                  ["Studio Hagedorn GmbH", "Berlin-Mitte", "BSO 2011 · 04 / 2026"],
                  ["Kosmetik Atelier Lux", "München", "BSO 2079 · 04 / 2026"],
                  ["Fußpflege Praxis Vogt", "Hamburg-Eppendorf", "BSO 2011 · 03 / 2026"],
                  ["Akademie Nguyen Duc", "Köln", "AZAV · 03 / 2026"],
                ].map(([n,c,t],i)=>(
                  <li key={i}>
                    <div className="n">{n}</div>
                    <div className="c">{c}</div>
                    <div className="t">{t}</div>
                  </li>
                ))}
              </ul>
            </Card>
          </div>
        </div>
      </div>
    </section>

    <NewsList onNav={onNav}/>

    <section className="dlg-final-cta">
      <FinalCtaStyles/>
      <div className="container--narrow" style={{textAlign:"center"}}>
        <Eyebrow tone="white">Bereit für Ihren Antrag?</Eyebrow>
        <h2>Wir prüfen — Sie zeigen Qualität.</h2>
        <p>Online-Antrag in rund 8 Minuten. Eingangsbestätigung innerhalb von 5 Werktagen.</p>
        <div style={{display:"flex",gap:12,justifyContent:"center",marginTop:24,flexWrap:"wrap"}}>
          <Button variant="gold" size="lg" iconRight="arrowR" onClick={()=>onNav("antrag")}>Antrag stellen</Button>
          <Button variant="ghost" size="lg" icon="mail" onClick={()=>onNav("kontakt")}
                  style={{color:"#fff",borderColor:"rgba(255,255,255,0.25)"}}>Frage stellen</Button>
        </div>
      </div>
    </section>
  </div>
);

const ProcessStyles = () => (
  <style>{`
    .dlg-process { background: #fff; padding: 96px 0; }
    .dlg-process h2 { font-family: var(--font-serif); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--dlg-navy-900); margin: 12px 0 40px; letter-spacing: -0.015em; }
    .dlg-process__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
    .dlg-process__steps li { padding: 24px 0 0; border-top: 2px solid var(--dlg-navy-700); position: relative; }
    .dlg-process__steps li:not(:last-child)::after {
      content: ""; position: absolute; top: -2px; right: -14px; width: 12px; height: 2px; background: var(--dlg-gold-500);
    }
    .dlg-process__n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--dlg-gold-700); letter-spacing: 2px; margin-bottom: 10px; }
    .dlg-process__t { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--dlg-navy-900); margin-bottom: 8px; }
    .dlg-process__d { font-size: 14px; line-height: 1.55; color: var(--fg-2); }
  `}</style>
);

const TrustStyles = () => (
  <style>{`
    .dlg-trust { background: var(--dlg-paper-2); padding: 96px 0; }
    .dlg-trust__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: flex-start; }
    .dlg-trust h2 { font-family: var(--font-serif); font-size: 36px; font-weight: 700; line-height: 1.15; color: var(--dlg-navy-900); margin: 12px 0 16px; letter-spacing: -0.015em; }
    .dlg-trust p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 24px; max-width: 580px; }
    .dlg-trust__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
    .dlg-trust__list li { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--border); align-items: baseline; }
    .dlg-trust__list li:last-child { border-bottom: 0; }
    .dlg-trust__list .n { font-weight: 700; color: var(--dlg-navy-900); font-size: 14px; }
    .dlg-trust__list .c { color: var(--fg-3); font-size: 13px; }
    .dlg-trust__list .t { font-family: var(--font-mono); font-size: 11.5px; color: var(--dlg-gold-700); }
  `}</style>
);

const FinalCtaStyles = () => (
  <style>{`
    .dlg-final-cta { padding: 88px 0 96px; background: var(--dlg-navy-800); color: #fff; position: relative; overflow: hidden; }
    .dlg-final-cta::before {
      content: ""; position: absolute; inset: 0;
      background-image: radial-gradient(circle at 50% 0%, rgba(212,167,60,0.12), transparent 60%);
    }
    .dlg-final-cta > * { position: relative; }
    .dlg-final-cta h2 { font-family: var(--font-serif); font-size: 44px; font-weight: 700; color: #fff; margin: 12px 0 12px; letter-spacing: -0.015em; }
    .dlg-final-cta p { font-size: 17px; color: #d3def0; margin: 0; }
  `}</style>
);

Object.assign(window, { HomeScreen });