// Shared layout components

const { useState, useEffect, useRef } = React;

// Image sources — fall back to live Unsplash URL in dev; use bundled
// blob URL via window.__resources when running as a standalone file.
const _IMG_SRC = {
  // Real assets from biotope-studio.org
  logo: "uploads/logo-cdn.webp",
  leistungenHero: "uploads/MH113901-web.jpg",
  kartierungen: "uploads/kartierungen-opt.jpg",
  weiteres: "uploads/weiteres-opt.jpg",
  baubegleitung: "uploads/baubegleitung-web.jpg",
  gebaeude: "uploads/gebaeude-web.jpg",
  kontaktHero: "uploads/kontakt-web.jpg",
  hero: "uploads/hero-cdn.webp",
  felix: "uploads/felix-cdn.webp",
  marsh: "uploads/marsh-cdn.webp",
  rails: "uploads/rails-cdn.webp",
  building: "uploads/building-cdn.webp",
  hedge: "uploads/hedge-cdn.webp",
  facade: "uploads/facade-cdn.webp",
  biotop: "uploads/biotop-cdn.webp",
  woodland: "uploads/woodland-cdn.jpg",
};
const IMG = Object.fromEntries(
  Object.entries(_IMG_SRC).map(([k, v]) => [
    k,
    (window.__resources && window.__resources["img_" + k]) || v,
  ])
);

// Wavy divider between sections
function WaveDivider({ from = "var(--cream)", to = "#fff", flip = false }) {
  return (
    <div style={{ background: from, lineHeight: 0 }}>
      <svg
        className="wave-divider"
        viewBox="0 0 1440 60"
        preserveAspectRatio="none"
        style={{ transform: flip ? "scaleY(-1)" : "none" }}
      >
        <path
          d="M0,30 C240,60 480,0 720,20 C960,40 1200,55 1440,25 L1440,60 L0,60 Z"
          fill={to}
        />
      </svg>
    </div>
  );
}

function Nav({ page, navigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "start", label: "Start" },
    { id: "leistungen", label: "Leistungen" },
    { id: "referenzen", label: "Referenzen" },
    { id: "ueber", label: "Über mich" },
    { id: "kontakt", label: "Kontakt" },
  ];

  const go = (id) => {
    setOpen(false);
    navigate(id);
  };

  return (
    <nav className={"topnav " + (scrolled || open ? "scrolled" : "")}>
      <div className="container nav-inner">
        <a className="brand" onClick={() => go("start")} style={{ cursor: "pointer", display: "inline-flex", alignItems: "center" }}>
          <img
            src={IMG.logo}
            alt="Biotope-Studio"
            style={{
              height: scrolled ? 42 : 48,
              width: "auto",
              transition: "height 0.3s ease, filter 0.3s ease",
              filter: scrolled ? "none" : "drop-shadow(0 2px 8px rgba(0,0,0,0.25))",
            }}
          />
        </a>

        <div className="links" role="navigation">
          {links.map((l) => (
            <a
              key={l.id}
              className={page === l.id ? "active" : ""}
              onClick={() => go(l.id)}
            >
              {l.label}
            </a>
          ))}
        </div>

        <div className="right">
          <a
            className="ig"
            href="https://www.instagram.com/biotope_studio"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Instagram"
          >
            <Icon.Instagram size={20} />
          </a>
          <a className="btn btn-primary" onClick={() => go("kontakt")}>
            Kontakt aufnehmen
          </a>
          <button
            className="menu-toggle"
            onClick={() => setOpen((o) => !o)}
            aria-label="Menu"
            style={{ color: scrolled || open ? "var(--ink)" : "#fff" }}
          >
            {open ? <Icon.Close /> : <Icon.Menu />}
          </button>
        </div>
      </div>

      {open && (
        <div
          style={{
            background: "#fff",
            borderTop: "1px solid var(--line)",
            padding: "18px 0 24px",
          }}
        >
          <div
            className="container"
            style={{ display: "flex", flexDirection: "column", gap: 14 }}
          >
            {links.map((l) => (
              <a
                key={l.id}
                onClick={() => go(l.id)}
                style={{
                  fontSize: "1.05rem",
                  padding: "10px 0",
                  borderBottom: "1px solid var(--line)",
                  color: page === l.id ? "var(--orange)" : "var(--ink)",
                  fontWeight: page === l.id ? 500 : 400,
                  cursor: "pointer",
                }}
              >
                {l.label}
              </a>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
}

function Footer({ navigate }) {
  const year = new Date().getFullYear();
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="grid">
          <div>
            <div className="brand" style={{ display: "inline-flex", alignItems: "center" }}>
              <img
                src={IMG.logo}
                alt="Biotope-Studio"
                style={{ height: 56, width: "auto" }}
              />
            </div>
            <p className="tagline">
              Fachbüro für Artenschutz, ökologische Gutachten und
              Umweltplanung in Norddeutschland.
            </p>
          </div>
          <div>
            <h4>Navigation</h4>
            <ul>
              <li><a onClick={() => navigate("start")}>Start</a></li>
              <li><a onClick={() => navigate("leistungen")}>Leistungen</a></li>
              <li><a onClick={() => navigate("referenzen")}>Referenzen</a></li>
              <li><a onClick={() => navigate("ueber")}>Über mich</a></li>
              <li><a onClick={() => navigate("kontakt")}>Kontakt</a></li>
            </ul>
          </div>
          <div>
            <h4>Kontakt</h4>
            <ul>
              <li><a href="mailto:info@biotope-studio.org">info@biotope-studio.org</a></li>
              <li><a href="tel:+491749653346">+49 174 9653346</a></li>
              <li>Hamburg, Deutschland</li>
            </ul>
          </div>
          <div>
            <h4>Folgen</h4>
            <ul>
              <li>
                <a
                  href="https://www.instagram.com/biotope_studio"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ display: "inline-flex", alignItems: "center", gap: 10 }}
                >
                  <Icon.Instagram size={18} /> Instagram
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="legal">
          <span>© {year} Biotope-Studio · Felix Kwasny</span>
          <span style={{ display: "flex", gap: 24 }}>
            <a onClick={() => navigate("impressum")} style={{ cursor: "pointer" }}>Impressum</a>
            <a onClick={() => navigate("impressum")} style={{ cursor: "pointer" }}>Datenschutz</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function CTABanner({ navigate }) {
  return (
    <section className="cta-banner">
      <div className="container">
        <span className="eyebrow on-dark">Sprechen wir über Ihr Projekt</span>
        <h2>
          Sie haben Fragen zum Artenschutz<br />
          oder Ihrer Planung?
        </h2>
        <a className="btn btn-primary" onClick={() => navigate("kontakt")}>
          Jetzt Kontakt aufnehmen <Icon.ArrowRight />
        </a>
      </div>
    </section>
  );
}

function Toast({ message, show }) {
  return (
    <div className={"toast " + (show ? "show" : "")}>
      <span className="ic"><Icon.Check /></span>
      <span>{message}</span>
    </div>
  );
}

window.Nav = Nav;
window.Footer = Footer;
window.WaveDivider = WaveDivider;
window.CTABanner = CTABanner;
window.Toast = Toast;
window.IMG = IMG;