/* eslint-disable no-undef */
/*
 * Shared design-system pieces used by every page.
 * Babel scripts get isolated scope, so we re-export to window at the bottom.
 */

const { useState, useRef, useEffect } = React;

/* ---------- Icons ---------- */
const Ic = {
  phone:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  mail:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  pin:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  clock:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  arrow:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  arrowMini:<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{width:11,height:11}}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
  check:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  caret:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>,
  shield:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z"/><path d="m9 12 2 2 4-4"/></svg>,
  team:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  tag:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>,
  truck:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="6" width="14" height="11" rx="1"/><path d="M15 9h4l2 3v5h-6"/><circle cx="6" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>,
  user:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
  star:     <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15 9 22 9 17 14 19 22 12 18 5 22 7 14 2 9 9 9"/></svg>,
};

/* ---------- Placeholder helpers (legacy — most bracketed text now replaced with real data) ---------- */
function Ph({children}){ return <span className="ph">{children}</span>; }
function withPh(text){
  const parts = String(text).split(/(\[[^\]]+\])/g);
  return parts.map((p,i)=> p && p.match(/^\[[^\]]+\]$/) ? <span key={i} className="ph">{p}</span> : p);
}

/* ---------- Services data ---------- */
const SERVICES = [
  { id:"fassade",   src:"assets/img/svc-fassade.jpg",  title:"Fassadenreinigung",            tag:"Bis 22 m",
    desc:"Klinker, Putz, Naturstein, WDVS oder Glasfassade — wir entfernen Algen, Schmutz, Vogelkot und Witterungsspuren schonend und ohne Substanzschaden.",
    tags:["Klinker","Putz","Glas","Verblechung"],
    bullets:["Niederdruck & Heißwasser","Material-Vortest","Algen- & Moosentfernung","Imprägnierung optional"] },
  { id:"fenster",   src:"assets/img/svc-fenster.jpg",  title:"Fenster- & Glasreinigung",     tag:"Streifenfrei",
    desc:"Innen wie außen, ab dem ersten Stockwerk bis zum Hochhaus. Mit reinem Osmosewasser, ohne Streifen, ohne Chemiefilm.",
    tags:["Innen & Außen","Reines Osmosewasser","Rahmen mitgereinigt"],
    bullets:["Osmosewasser-Technik","Rahmen, Falz, Bänke","Schaufenster wöchentlich/monatlich","Auch in Dachgeschoss-Höhe"] },
  { id:"jalousien", src:"assets/img/svc-jalousie.jpg", title:"Jalousien & Rollläden",        tag:"Unterschätzt",
    desc:"Außenjalousien, Raffstores und Rollläden — Lamelle für Lamelle. Demontage, Tiefenreinigung, Funktionskontrolle, Wiedermontage. Auf Wunsch im Festpreis.",
    tags:["Demontage inklusive","Funktionsprüfung","Festpreis möglich"],
    bullets:["Demontage & Tiefenreinigung","Funktionskontrolle","Lamellen-, Plissee-, Rollläden","Festpreis ab Sichtung"] },
  { id:"hubsteiger",src:"assets/img/g2.jpg",           title:"Hubsteiger-Einsatz",            tag:"Bis 22 m",
    desc:"Eigener Hubsteiger in der Werkstatt — keine Wartezeit auf Mietgeräte, keine Aufschläge, kein Risiko. Wir kommen, reinigen, sind weg.",
    tags:["Eigene Bühne","DGUV-geprüft","Stadt- & Innenhof-tauglich"],
    bullets:["Eigene Arbeitsbühne","DGUV-zertifizierte Bediener","Schmal & stadttauglich","Auch kurzfristig verfügbar"] },
  { id:"seilzugang",src:"assets/img/g1.jpg",           title:"Industriekletter-Einsatz", tag:"Schwer zugänglich",
    desc:"Wo Hubsteiger nicht hinkommen — enge Innenhöfe, Brückenfassaden, Dachüberhänge — übernehmen unsere FISAT/SZP-zertifizierten Kletterer.",
    tags:["FISAT/SZP-zertifiziert","Enge Geometrien","Ohne Gerüst"],
    bullets:["FISAT/SZP-Zertifizierung","Doppelseilsicherung","Statt Gerüst — günstiger","Brücken, Türme, Atrien"] },
  { id:"sonder",    src:"assets/img/g4.jpg",           title:"Bau- & Sonderreinigung",        tag:"Nach Bedarf",
    desc:"Bauendreinigung, Graffiti-Entfernung, Algen- und Moosbehandlung, Sonderaufträge nach Wasserschaden — Sie nennen das Problem, wir bringen die Lösung.",
    tags:["Bauendreinigung","Graffiti","Algen & Moos"],
    bullets:["Bauend- & Erstreinigung","Graffiti-Entfernung","Algen- & Moosbehandlung","Sonderaufträge"] },
];

/* ---------- Page shell ---------- */
function Ribbon(){
  return (
    <div className="ribbon">
      <div className="container inner">
        <span>{Ic.clock} Mo – Fr · 08:00 – 18:00</span>
        <span className="sep"></span>
        <span>{Ic.shield} Versichert bis 5 Mio. €</span>
        <span className="sep"></span>
        <span>{Ic.check} Festpreis-Garantie</span>
      </div>
    </div>
  );
}

function Nav({ active }){
  const [open, setOpen] = useState(false);
  const wrap = useRef();
  useEffect(()=>{
    const onClick = e => { if(wrap.current && !wrap.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onClick);
    return ()=>document.removeEventListener("mousedown", onClick);
  },[]);
  return (
    <header className="nav">
      <div className="container inner">
        <a href="index.html" className="logo"><img src="assets/ahorn-logo.png" alt="Ahorn Service"/></a>
        <nav className="menu">
          <a href="index.html" className={active==="home"?"active":""}>Start</a>
          <div className="dd-wrap" ref={wrap}
               onMouseEnter={()=>setOpen(true)}
               onMouseLeave={()=>setOpen(false)}>
            <a href="leistungen.html"
               className={"menu-item " + (active==="leistungen"?"active ":"") + (open?"open":"")}>
              Leistungen <span className="caret">{Ic.caret}</span>
            </a>
            <div className={"dd " + (open?"show":"")} role="menu">
              {SERVICES.map(s=>(
                <a key={s.id} className="item" href={"leistungen.html#"+s.id} onClick={()=>setOpen(false)}>
                  <span className="ttl">{s.title}</span>
                </a>
              ))}
              <a className="item" href="leistungen.html" style={{borderTop:"1px solid var(--line-2)",marginTop:6,paddingTop:14}}>
                <span className="ttl" style={{color:"var(--red)"}}>Alle Leistungen ansehen →</span>
              </a>
            </div>
          </div>
          <a href="ueber-uns.html" className={active==="ueber"?"active":""}>Über uns</a>
          <a href="kontakt.html" className={active==="kontakt"?"active":""}>Kontakt</a>
        </nav>
        <div className="nav-cta">
          <a href="tel:+493012345678" className="nav-phone">
            {Ic.phone}
            <span>+49 30 12345678</span>
          </a>
          <a href="kontakt.html" className="btn btn-primary">Angebot anfordern {Ic.arrow}</a>
        </div>
      </div>
    </header>
  );
}

function Footer(){
  return (
    <footer>
      <div className="container">
        <div className="foot-cards">
          <a className="foot-card phone" href="tel:+493012345678">
            <span className="ic">{Ic.phone}</span>
            <span>
              <div className="lbl">Direkt erreichbar</div>
              <div className="val">+49 30 12345678</div>
              <div className="sub">Mo – Fr · 08:00–18:00</div>
            </span>
          </a>
          <a className="foot-card mail" href="mailto:kontakt@ahornservice.de">
            <span className="ic dark">{Ic.mail}</span>
            <span>
              <div className="lbl">E-Mail schreiben</div>
              <div className="val">kontakt@ahornservice.de</div>
              <div className="sub">Antwort innerhalb 24 Std.</div>
            </span>
          </a>
          <a className="foot-card" href="kontakt.html">
            <span className="ic gold">{Ic.pin}</span>
            <span>
              <div className="lbl">Unser Einsatzgebiet</div>
              <div className="val">Berlin + Umkreis 50 km</div>
              <div className="sub">Auf Anfrage auch bundesweit</div>
            </span>
          </a>
        </div>
        <div className="grid">
          <div className="brand">
            <img className="logo-w" src="assets/ahorn-logo.png" alt="Ahorn Service"/>
            <p>Inhabergeführter Fachbetrieb für Fassaden-, Fenster- und Jalousienreinigung. DGUV- &amp; FISAT/SZP-konform.</p>
            <div className="socials">
              <a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
              <a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 1 4.97 8.5a2.5 2.5 0 0 1 .01-5zM3 9.5h4V21H3zM10 9.5h3.8v1.6h.05c.53-1 1.82-2.05 3.75-2.05C21.4 9.05 22 11.34 22 14.4V21h-4v-5.85c0-1.4-.03-3.2-1.95-3.2-1.95 0-2.25 1.52-2.25 3.1V21h-4z"/></svg></a>
              <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 22v-8h2.5l.5-3.5H13V8.2c0-1 .3-1.7 1.8-1.7H16V3.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 4v2.3H7.5V13H10v9h3z"/></svg></a>
            </div>
          </div>
          <div>
            <h5>Leistungen</h5>
            <ul>
              {SERVICES.map(s=><li key={s.id}><a href={"leistungen.html#"+s.id}>{s.title}</a></li>)}
            </ul>
          </div>
          <div>
            <h5>Unternehmen</h5>
            <ul>
              <li><a href="ueber-uns.html">Über uns</a></li>
              <li><a href="index.html#referenzen">Referenzen</a></li>
              <li><a href="#">Karriere</a></li>
              <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
          </div>
          <div>
            <h5>Service-Gebiet</h5>
            <div className="foot-mini">
              <div className="foot-mini-row"><span className="ic">{Ic.pin}</span> Berlin + Umland</div>
              <div className="foot-mini-row"><span className="ic">{Ic.shield}</span> Versichert bis 5 Mio. €</div>
              <div className="foot-mini-row"><span className="ic">{Ic.check}</span> DGUV &amp; FISAT/SZP</div>
            </div>
          </div>
        </div>
        <div className="legal">
          <span>© 2026 Ahorn Service</span>
          <div className="links">
            <a href="impressum.html">Impressum</a>
            <a href="datenschutz.html">Datenschutz</a>
            <a href="agb.html">AGB</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function MobileSticky(){
  return (
    <div className="m-sticky">
      <a className="call" href="tel:+493012345678">{Ic.phone} Anrufen</a>
      <a className="quote" href="kontakt.html">{Ic.arrow} Angebot anfordern</a>
    </div>
  );
}

/* Sub-page banner. No breadcrumb — just eyebrow / title / lede / optional stats. */
function PageHero({ eyebrow, title, lede, bg, variant="image", stats }){
  if(variant==="legal"){
    return (
      <section className="page-hero hero-legal">
        <div className="container">
          <div className="eyebrow">{eyebrow}</div>
          <h1>{title}</h1>
          {lede && <p>{lede}</p>}
        </div>
      </section>
    );
  }
  const bgUrl = bg || "assets/img/hero-bg.jpg";
  return (
    <section className={"page-hero " + (variant==="story"?"hero-story":"")}>
      <div className="hero-bg" style={{backgroundImage:`url('${bgUrl}')`}}></div>
      <div className="container">
        <div className="eyebrow">{eyebrow}</div>
        <h1>{title}</h1>
        {lede && <p>{lede}</p>}
        {stats && (
          <div className="hero-stats">
            {stats.map((s,i)=>(
              <div key={i} className="hero-stat">
                <div className="n">{s.n}</div>
                <div className="l">{s.l}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* Reusable CTA strip — same visual rhythm as homepage. */
function CTAStrip({ children, primaryLabel="Angebot anfordern", primaryHref="kontakt.html", phone=true, ghostLabel, ghostHref }){
  return (
    <div className="sec-cta">
      <span className="txt">{children}</span>
      <a href={primaryHref} className="btn btn-primary">{primaryLabel} {Ic.arrow}</a>
      {ghostLabel && <a href={ghostHref} className="btn btn-ghost">{ghostLabel}</a>}
      {phone && <a href="tel:+493012345678" className="btn btn-ghost">{Ic.phone} +49 30 12345678</a>}
    </div>
  );
}

/* Full contact CTA block — red band with embedded form. Reused on every sub-page. */
function ContactCTA({ heading="Saubere Räume sind nur einen Anruf entfernt.", lede="Erzählen Sie uns kurz von Ihrem Objekt — wir melden uns innerhalb von 24 Stunden mit dem nächsten Schritt.", eyebrow="Jetzt anfragen" }){
  return (
    <section className="section" id="kontakt-cta">
      <div className="container">
        <div className="cta-band">
          <div className="lhs">
            <span className="eyebrow">{eyebrow}</span>
            <h2 className="display">{heading}</h2>
            <p>{lede}</p>
            <div className="ctas">
              <a className="btn btn-white" href="tel:+493012345678">{Ic.phone} +49 30 12345678</a>
              <a className="btn btn-line" href="mailto:kontakt@ahornservice.de">{Ic.mail} kontakt@ahornservice.de</a>
            </div>
          </div>
          <form className="quick-form" onSubmit={e=>{e.preventDefault();alert("Danke! Wir melden uns innerhalb von 24 Std.")}}>
            <h4>In 30 Sekunden zum Angebot</h4>
            <p className="sub">Wir melden uns innerhalb von 24 Stunden zurück.</p>
            <label>Name</label>
            <input type="text" placeholder="Max Mustermann" required/>
            <label>Telefon oder E-Mail</label>
            <input type="text" placeholder="z.B. 0151 ... oder ihre@adresse.de" required/>
            <label>Kurz: um welches Objekt geht es?</label>
            <input type="text" placeholder="z.B. Bürogebäude, 4 Stockwerke, Glasfassade"/>
            <label>Auftragsart</label>
            <select defaultValue="">
              <option value="" disabled>Bitte auswählen ...</option>
              {SERVICES.map(s=><option key={s.id}>{s.title}</option>)}
              <option>Sonstiges</option>
            </select>
            <button className="btn btn-primary" type="submit">Angebot anfordern {Ic.arrow}</button>
            <p className="legal">Mit Absenden stimmen Sie der <a href="datenschutz.html" style={{color:"var(--muted)",textDecoration:"underline"}}>Datenschutzerklärung</a> zu.</p>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { React, ReactDOM, Ic, Ph, withPh, SERVICES, Ribbon, Nav, Footer, MobileSticky, PageHero, CTAStrip, ContactCTA });