// Shared components for Croteo Personal site

const { useState, useEffect, useRef } = React;

function Brand() {
  return (
    <a href="index.html" className="brand" aria-label="Croteo Personal Startseite"
       style={{ fontSize: "clamp(20px, 4.6vw, 48px)", letterSpacing: "-0.035em", fontWeight: 900, whiteSpace: "nowrap" }}>
      Croteo Personal
    </a>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  const items = [
    { id: "home", label: "Start", href: "index.html" },
    { id: "ueber", label: "Über uns", href: "ueber-uns.html" },
    { id: "leistungen", label: "Leistungen", href: "leistungen.html" },
    { id: "kontakt", label: "Kontakt", href: "kontakt.html" },
  ];
  return (
    <nav className={open ? "nav nav-open" : "nav"}>
      <div className="nav-inner">
        <Brand />
        <div className="nav-links">
          {items.map((it) => (
            <a key={it.id} href={it.href}
               className={active === it.id ? "active" : ""}
               onClick={() => setOpen(false)}>
              {it.label}
            </a>
          ))}
        </div>
        <a href="kontakt.html" className="btn btn-primary nav-cta">
          Personal anfragen <span className="arrow">→</span>
        </a>
        <button type="button" className="nav-burger"
                aria-label={open ? "Menü schließen" : "Menü öffnen"}
                aria-expanded={open}
                onClick={() => setOpen(!open)}>
          <span /><span /><span />
        </button>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="wordmark">Croteo Personal</div>
            <p style={{ marginTop: 20, maxWidth: 380, color: "var(--sand-100)", fontFamily: "var(--display)", fontWeight: 600, fontSize: 16, lineHeight: 1.5 }}>
              Personalvermittlung mit spezialisierter Expertise in Office Management, Bau und Handwerk.
              Kompetent, persönlich und digital.
            </p>
          </div>
          <div>
            <h4>Navigation</h4>
            <a href="index.html">Start</a>
            <a href="ueber-uns.html">Über uns</a>
            <a href="leistungen.html">Leistungen</a>
            <a href="kontakt.html">Kontakt</a>
          </div>
          <div>
            <h4>Bereiche</h4>
            <a href="leistungen.html#office">Office Management</a>
            <a href="leistungen.html#bau">Bau</a>
            <a href="leistungen.html#handwerk">Handwerk</a>
            <a href="leistungen.html#integration">Integration</a>
          </div>
          <div>
            <h4>Kontakt</h4>
            <a href="mailto:mail@croteo.de">mail@croteo.de</a>
            <a href="tel:+4915510716726">0155 1071 6726</a>
            <a href="kontakt.html">Termin vereinbaren</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Croteo Personal. Alle Rechte vorbehalten.</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="impressum.html" style={{ display: "inline" }}>Impressum</a>
            <a href="datenschutz.html" style={{ display: "inline" }}>Datenschutz</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Placeholder image with subtle hatched pattern + label
function Placeholder({ label, height = 420, style = {} }) {
  return (
    <div className="placeholder-img" style={{ height, width: "100%", ...style }}>
      <span style={{ position: "relative", zIndex: 1 }}>{label}</span>
    </div>
  );
}

Object.assign(window, { Brand, Nav, Footer, Placeholder });