/* global React */
const { useState, useEffect } = React;

// ===========================================================
// COMPANY DATA — single source of truth
// ===========================================================
window.PC = window.PC || {};
window.PC.COMPANY = {
  name: 'PolClean Dienstleistungen',
  short: 'PolClean',
  tagline: 'Industrieservice für die Mittelstands-Produktion',
  address: {
    street: 'Scharnhorststr. 178',
    zip: '52351',
    city: 'Düren',
    country: 'Deutschland',
  },
  phone: '+49 15155 66 77 86',
  phoneLink: 'tel:+4915155667786',
  emergency: '+49 15155 66 77 86',
  emergencyLink: 'tel:+4915155667786',
  email: 'info@polclean.de',
  emailLink: 'mailto:info@polclean.de',
  hours: 'Mo – Fr · 7:00 – 18:00',
  founded: null, // Gruendungsjahr unbestaetigt — eintragen, sobald belegt
  url: 'https://polclean.de',
};

window.PC.SERVICES = [
  {n:'01', slug:'industriereinigung', t:'Industriereinigung',
    short:'Hallen, Maschinen, Produktionslinien — auch im laufenden Betrieb.',
    d:'Reduktion von Staub, Öl und Prozessrückständen. Ideal für Werks- und Produktionshallen.',
    tags:['Hochdruck','Saugen','Trockeneis']},
  {n:'02', slug:'tankreinigung', t:'Tank- & Behälterreinigung',
    short:'Lagertanks, Reaktoren, Silos und Druckbehälter von DN 800 bis 6000.',
    d:'Inkl. Inertisierung und Befahranzeige. Nachvollziehbare Dokumentation für Lebensmittel- und Pharmaindustrie.',
    tags:['DN 800–6000','PSA Klasse III','Inertisierung']},
  {n:'03', slug:'trockeneisstrahlen', t:'Trockeneisstrahlen',
    short:'Schonende Reinigung empfindlicher Oberflächen — ohne Sekundärabfälle.',
    d:'Ideal für Elektronik, Formen, Anlagenkomponenten. Rückstandsfrei bei -78,5 °C.',
    tags:['Rückstandsfrei','-78,5 °C','Kein Strahlmittel']},
  {n:'04', slug:'rohrreinigung', t:'Rohr- & Kanalreinigung',
    short:'Verstopfte Produktionsrohre, Abwasserkanäle und Wärmetauscher.',
    d:'Hochdruck im Höchstdruckbereich, Kamerainspektion inklusive. TV-Berichte für Versicherung und Audit.',
    tags:['2500 bar','Kamerainspektion','TV-Bericht']},
  {n:'05', slug:'havarie', t:'Sonderreinigung & Havarie',
    short:'Brand-, Wasser- und Chemiehavarie. 24/7-Notdienst.',
    d:'Erstsicherung, Schadstoffaufnahme, Dokumentation für Versicherungen. Notdienst rund um die Uhr.',
    tags:['Erstsicherung','Dokumentation','24/7']},
  {n:'06', slug:'wartungsvertraege', t:'Wartungsverträge',
    short:'Geplante Reinigungszyklen mit fester Crew, festen Slots und transparenter Abrechnung.',
    d:'Weniger Ausfall, planbare Kosten. Inklusive monatlichem Reporting und festen Ansprechpartnern.',
    tags:['SLA','Feste Crew','Reporting']},
];

window.PC.INDUSTRIES = [
  {slug:'automotive', t:'Automotive & Zulieferer', d:'Lackieranlagen, Pressen, Roboterzellen.', icon:'automotive'},
  {slug:'chemie', t:'Chemie & Pharma', d:'Reaktoren, Rohrleitungen, GMP-Bereiche.', icon:'chemie'},
  {slug:'lebensmittel', t:'Lebensmittel & Getränke', d:'Lagertanks, Förderbänder, CIP-Restarbeiten.', icon:'lebensmittel'},
  {slug:'metall', t:'Metallverarbeitung', d:'Pressen, Härteanlagen, Walzwerke.', icon:'metall'},
  {slug:'energie', t:'Energie & Versorger', d:'Wärmetauscher, Turbinenhallen, Kühltürme.', icon:'energie'},
  {slug:'logistik', t:'Logistik & Lager', d:'Hallenböden, Hochregallager, Verladezonen.', icon:'logistik'},
];

// ===========================================================
// SVG / SMALL UI
// ===========================================================
const Arrow = ({size=14}) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
  </svg>
);
const Plus = ({size=14}) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5"/>
  </svg>
);
const Check = ({size=16}) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"/>
  </svg>
);
const Dot = ({c="var(--accent)"}) => (
  <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:c}} />
);

// ===========================================================
// PcIcon — Strich-Icons fuer Branchen und Maschinen
// -----------------------------------------------------------
// BEWUSST KEINE Foto-Platzhalter. Ein Icon ist ein Symbol und
// steht fuer sich; ein grosser Bildkasten mit einer Zeichnung
// darin ist nur ein Loch, in dem ein Foto fehlt — und sieht
// auf einer Firmenseite unfertig aus.
// Die Abschnitte sind deshalb so gebaut, dass sie ohne Fotos
// vollstaendig sind. Kommen Fotos dazu, ergaenzen sie die Seite,
// statt eine Luecke zu fuellen (siehe IMAGES.md).
// ===========================================================
const PC_ICON_PFADE = {
  // Branchen
  automotive:  'M3 13l2-5a2 2 0 012-1h10a2 2 0 012 1l2 5M3 13h18M3 13v4h3v-4M21 13v4h-3v-4M7 17h10M6.5 10.5h11',
  chemie:      'M9 3v6L4 18a2 2 0 002 3h12a2 2 0 002-3l-5-9V3M8 3h8M7.5 14h9',
  lebensmittel:'M5 8a7 3.2 0 0114 0v9a7 3.2 0 01-14 0zM5 8a7 3.2 0 0014 0M5 14a7 3.2 0 0014 0',
  metall:      'M3 20h18M5 20v-7l7-4 7 4v7M9 20v-5h6v5M12 9V4M9 4h6',
  energie:     'M6 21V10M18 21V10M4 10h16M9 10V6a3 3 0 016 0v4M12 14v4M3 21h18',
  logistik:    'M3 21V7l9-4 9 4v14M3 21h18M8 21v-6h8v6M8 11h8M3 7h18',
  // Maschinen
  hochdruck:   'M3 11h6l3-2v6l-3-2H3zM12 12h3M16 9l4-2M16 15l4 2M16 12h5',
  saugspuel:   'M2 16V9h11l4 4h5v3M2 16h20M6 16a2 2 0 104 0M16 16a2 2 0 104 0M5 9V6h6v3',
  trockeneis:  'M12 3v18M4.5 7.5l15 9M19.5 7.5l-15 9M12 7l-2.5-2M12 7l2.5-2M12 17l-2.5 2M12 17l2.5-2',
  kamera:      'M4 7h3l2-2h6l2 2h3v12H4zM12 16a4 4 0 100-8 4 4 0 000 8M12 14a2 2 0 100-4 2 2 0 000 4',
  // Allgemein
  schutz:      'M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6zM9 12l2 2 4-4',
};

const PcIcon = ({name, size=28, className=''}) => {
  const d = PC_ICON_PFADE[name] || PC_ICON_PFADE.schutz;
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24"
         fill="none" stroke="currentColor" strokeWidth="1.5"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
      <path d={d}/>
    </svg>
  );
};

// ===========================================================
// HEADER — shared
// `home` is true on the index, otherwise paths are prefixed with ../
// ===========================================================
const PageHeader = ({active, home=false}) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const p = (s) => home ? s : `../${s}`;
  const C = window.PC.COMPANY;
  return (
    <header className={`pc-header ${scrolled || !home ? 'is-scrolled':''} ${home ? '' : 'is-inner'}`}>
      <div className="pc-container pc-header-inner">
        <a className="pc-logo" href={home ? '#top' : '../index.html'} aria-label="PolClean Startseite">
          <span className="pc-logo-mark" aria-hidden="true">
            <span/><span/><span/>
          </span>
          <span className="pc-logo-text">POLCLEAN</span>
          <span className="pc-logo-sub">Industrieservice</span>
        </a>
        <nav className={`pc-nav ${open ? 'is-open':''}`} aria-label="Hauptnavigation">
          <a href={p('leistungen/index.html')} className={active==='leistungen'?'is-active':''}>Leistungen</a>
          <a href={p('branchen/index.html')} className={active==='branchen'?'is-active':''}>Branchen</a>
          <a href={p('referenzen.html')} className={active==='referenzen'?'is-active':''}>Referenzen</a>
          <a href={p('ueber-uns.html')} className={active==='ueber'?'is-active':''}>Über uns</a>
          <a href={p('karriere.html')} className={active==='karriere'?'is-active':''}>Karriere</a>
          <a href={p('kontakt.html')} className={active==='kontakt'?'is-active':''}>Kontakt</a>
        </nav>
        <div className="pc-header-cta">
          <a className="pc-emergency" href={C.emergencyLink} aria-label="24/7 Notdienst anrufen">
            <span className="pc-pulse" aria-hidden="true"></span>
            <span className="pc-emergency-label">
              <span className="pc-emergency-tag">24/7 Notdienst</span>
              <span className="pc-emergency-num">{C.emergency}</span>
            </span>
          </a>
          <a className="pc-btn pc-btn-primary pc-btn-cta-header" href={p('kontakt.html')}>Angebot <Arrow/></a>
          <button className="pc-burger" aria-label="Menü" onClick={()=>setOpen(o=>!o)}>
            <span/><span/><span/>
          </button>
        </div>
      </div>
    </header>
  );
};

// ===========================================================
// FOOTER — shared
// ===========================================================
const PageFooter = ({home=false}) => {
  const C = window.PC.COMPANY;
  const p = (s) => home ? s : `../${s}`;
  return (
    <footer className="pc-footer">
      <div className="pc-container pc-footer-inner">
        <div className="pc-footer-brand">
          <div className="pc-logo">
            <span className="pc-logo-mark"><span/><span/><span/></span>
            <span className="pc-logo-text">POLCLEAN</span>
          </div>
          <p>{C.tagline}.<br/>Inhabergeführt aus Düren.</p>
          <address className="pc-footer-addr">
            {C.address.street}<br/>
            {C.address.zip} {C.address.city}<br/>
            <a href={C.phoneLink}>{C.phone}</a><br/>
            <a href={C.emailLink}>{C.email}</a>
          </address>
        </div>
        <div className="pc-footer-cols">
          <div>
            <h5>Leistungen</h5>
            <ul>
              {window.PC.SERVICES.map(s=>
                <li key={s.slug}><a href={p(`leistungen/${s.slug}.html`)}>{s.t}</a></li>
              )}
            </ul>
          </div>
          <div>
            <h5>Branchen</h5>
            <ul>
              {window.PC.INDUSTRIES.map(i=>
                <li key={i.slug}><a href={p(`branchen/${i.slug}.html`)}>{i.t}</a></li>
              )}
            </ul>
          </div>
          <div>
            <h5>Unternehmen</h5>
            <ul>
              <li><a href={p('ueber-uns.html')}>Über uns</a></li>
              <li><a href={p('referenzen.html')}>Referenzen</a></li>
              <li><a href={p('karriere.html')}>Karriere</a></li>
              <li><a href={p('kontakt.html')}>Kontakt</a></li>
              <li><a href={p('impressum.html')}>Impressum</a></li>
              <li><a href={p('datenschutz.html')}>Datenschutz</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="pc-footer-bar">
        <div className="pc-container pc-footer-bar-inner">
          <span>© 2026 {C.name}</span>
          <span>
            <a href={p('impressum.html')}>Impressum</a> · <a href={p('datenschutz.html')}>Datenschutz</a> · <a href={p('agb.html')}>AGB</a>
          </span>
        </div>
      </div>
    </footer>
  );
};

// ===========================================================
// SECTION HEAD
// ===========================================================
const SectionHead = ({kicker, title, sub, light=false}) => (
  <div className={`pc-sec-head ${light ? 'is-light':''}`}>
    <div className="pc-sec-kicker">{kicker}</div>
    <h2 className="pc-h2">{title}</h2>
    {sub && <p className="pc-sec-sub">{sub}</p>}
  </div>
);

// ===========================================================
// PAGE HERO (subpages)
// ===========================================================
const PageHero = ({kicker, title, sub, breadcrumb}) => (
  <section className="pc-page-hero">
    <div className="pc-container">
      {breadcrumb && (
        <nav className="pc-breadcrumb" aria-label="Brotkrumen">
          {breadcrumb.map((b,i) => (
            <span key={i}>
              {b.href ? <a href={b.href}>{b.label}</a> : <span>{b.label}</span>}
              {i < breadcrumb.length-1 && <span className="pc-breadcrumb-sep">/</span>}
            </span>
          ))}
        </nav>
      )}
      <div className="pc-page-hero-grid">
        <div>
          <div className="pc-eyebrow"><Dot/> <span>{kicker}</span></div>
          <h1 className="pc-h1 pc-h1-page">{title}</h1>
        </div>
        {sub && <p className="pc-page-hero-sub">{sub}</p>}
      </div>
    </div>
  </section>
);

// ===========================================================
// CONTACT FORM (reusable)
// ===========================================================
const ContactForm = ({preset='Industriereinigung'}) => {
  const C = window.PC.COMPANY;
  const [form, setForm] = useState({name:'', firma:'', email:'', tel:'', service:preset, dringend:false, msg:'', website:''});
  // 'idle' | 'sending' | 'sent' | 'error'
  const [status, setStatus] = useState('idle');
  const sent = status === 'sent';
  const upd = (k,v) => setForm(s=>({...s, [k]:v}));

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    try {
      const res = await fetch('/api/kontakt', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify(form),
      });
      // Nur bei echtem OK Erfolg melden — sonst sieht der Kunde eine
      // Bestaetigung fuer eine Anfrage, die nie angekommen ist.
      setStatus(res.ok ? 'sent' : 'error');
    } catch {
      setStatus('error');
    }
  };

  return (
    <form className="pc-form" onSubmit={submit}>
      <div className="pc-form-head">
        <span className="pc-form-step">SCHRITT 01 / 01</span>
        <h3 className="pc-form-title">Angebot anfordern</h3>
      </div>
      {sent ? (
        <div className="pc-form-sent">
          <div className="pc-form-check" aria-hidden="true">✓</div>
          <h4>Anfrage erhalten.</h4>
          <p>Wir melden uns schnellstmöglich bei Ihnen — bei „dringend" sofort.</p>
        </div>
      ) : (
        <>
          <div className="pc-field-row">
            <label className="pc-field">
              <span>Name *</span>
              <input required value={form.name} onChange={e=>upd('name',e.target.value)} placeholder="Max Mustermann"/>
            </label>
            <label className="pc-field">
              <span>Firma *</span>
              <input required value={form.firma} onChange={e=>upd('firma',e.target.value)} placeholder="Muster Industrie GmbH"/>
            </label>
          </div>
          <div className="pc-field-row">
            <label className="pc-field">
              <span>E-Mail *</span>
              <input type="email" required value={form.email} onChange={e=>upd('email',e.target.value)} placeholder="m.mustermann@firma.de"/>
            </label>
            <label className="pc-field">
              <span>Telefon</span>
              <input value={form.tel} onChange={e=>upd('tel',e.target.value)} placeholder="+49 …"/>
            </label>
          </div>
          <label className="pc-field">
            <span>Leistung</span>
            <select value={form.service} onChange={e=>upd('service',e.target.value)}>
              {window.PC.SERVICES.map(s=> <option key={s.t}>{s.t}</option>)}
              <option>Andere Anfrage</option>
            </select>
          </label>
          <label className="pc-field">
            <span>Beschreibung</span>
            <textarea rows="4" value={form.msg} onChange={e=>upd('msg',e.target.value)} placeholder="Was muss gereinigt werden? Welche Anlage, welche Verschmutzung, gewünschter Zeitraum?"/>
          </label>
          <label className="pc-check">
            <input type="checkbox" checked={form.dringend} onChange={e=>upd('dringend',e.target.checked)}/>
            <span>Dringend — Notdienst-Bearbeitung</span>
          </label>

          {/* Honeypot gegen Spam-Bots: fuer Menschen unsichtbar und
              aus dem Tab-Fokus sowie aus Screenreadern genommen. */}
          <div className="pc-hp" aria-hidden="true">
            <label htmlFor="pc-website">Website (bitte frei lassen)</label>
            <input id="pc-website" name="website" type="text" tabIndex="-1" autoComplete="off"
                   value={form.website} onChange={e=>upd('website',e.target.value)}/>
          </div>

          {status === 'error' && (
            <div className="pc-form-error" role="alert">
              <strong>Die Anfrage konnte nicht gesendet werden.</strong>
              <p>
                Bitte rufen Sie uns an unter <a href={C.phoneLink}>{C.phone}</a> oder
                schreiben Sie an <a href={C.emailLink}>{C.email}</a> — wir kümmern uns sofort darum.
              </p>
            </div>
          )}

          <button type="submit" className="pc-btn pc-btn-primary pc-btn-lg pc-btn-full"
                  disabled={status === 'sending'}>
            {status === 'sending' ? 'Wird gesendet …' : <>Anfrage senden <Arrow/></>}
          </button>
          <div className="pc-form-foot">
            Ihre Angaben werden
            ausschliesslich per E-Mail an uns weitergeleitet und nicht gespeichert —
            Details in der <a href="/datenschutz.html">Datenschutzerklärung</a>.
          </div>
        </>
      )}
    </form>
  );
};

// ===========================================================
// CTA BAND (footer-area on subpages)
// ===========================================================
const CtaBand = ({title="Kostenfreies Angebot. Schriftlich und verbindlich.", home=false}) => {
  const C = window.PC.COMPANY;
  const p = (s) => home ? s : `../${s}`;
  return (
    <section className="pc-cta-band">
      <div className="pc-container pc-cta-band-inner">
        <div>
          <h2 className="pc-h2 pc-h2-light">{title}</h2>
          <p>Schreiben Sie uns Ihren Reinigungsbedarf oder rufen Sie direkt an — auch außerhalb der Geschäftszeiten.</p>
        </div>
        <div className="pc-cta-band-actions">
          <a className="pc-btn pc-btn-primary pc-btn-lg" href={p('kontakt.html')}>Angebot anfordern <Arrow/></a>
          <a className="pc-btn pc-btn-ghost-light pc-btn-lg" href={C.phoneLink}>Anrufen: {C.phone}</a>
        </div>
      </div>
    </section>
  );
};

// Expose globally — sub-page scripts read these via window
Object.assign(window, {
  Arrow, Plus, Check, Dot, PcIcon,
  PageHeader, PageFooter, SectionHead, PageHero,
  ContactForm, CtaBand,
});