// Shared chrome — Nav + Footer + Logo + Bottle SVG
// Exposed on window so other pages can use them.

const Logo = ({ size = 28, color = "currentColor" }) =>
<span style={{ display: "inline-flex", alignItems: "baseline", gap: 10 }}>
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      <circle cx="20" cy="20" r="19" stroke={color} strokeWidth="1" />
      <path d="M20 8 L20 32 M12 14 L28 14 M12 26 L28 26" stroke={color} strokeWidth="1" />
      <circle cx="20" cy="20" r="3" fill={color} />
    </svg>
    <span style={{ fontFamily: "var(--display)", fontSize: size * 0.85, color, letterSpacing: "0.01em" }}>Aedu Beer Lab</span>
  </span>;


const Nav = ({ active }) => {
  const links = [
  { id: "home", label: "Start", href: "index.html" },
  { id: "biere", label: "Biere", href: "biere.html" },
  { id: "ueber", label: "Über uns", href: "ueber.html" },
  { id: "kontakt", label: "Kontakt", href: "kontakt.html" },
  { id: "import", label: "Import", href: "import.html" }];

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="nav-brand">
          <Logo size={26} />
          <span className="since">RÜFENACHT · SEIT 2017</span>
        </a>
        <div className="nav-links">
          {links.map((l) =>
          <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>
              {l.label}
            </a>
          )}
          <a href="biere.html" className="nav-cta desktop-only">Sortiment ansehen</a>
        </div>
      </div>
    </nav>);

};

const Footer = () =>
<footer className="footer">
    <div className="footer-inner">
      <div>
        <Logo size={28} />
        <p style={{ marginTop: 16, maxWidth: 320, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.6 }}>
          Handgebraut in einer kleinen Küche in Rüfenacht. Bier mit Charakter, ohne Eile.
        </p>
      </div>
      <div>
        <h4>Sortiment</h4>
        <ul>
          <li><a href="biere.html">India Pale Ale</a></li>
          <li><a href="biere.html">Stout</a></li>
          <li><a href="biere.html">Sauerbier</a></li>
        </ul>
      </div>
      <div>
        <h4>Brauerei</h4>
        <ul>
          <li><a href="ueber.html">Geschichte</a></li>
          <li><a href="ueber.html">Brauprozess</a></li>
          <li><a href="kontakt.html">Besuch</a></li>
        </ul>
      </div>
      <div>
        <h4>Kontakt</h4>
        <ul>
          <li>Rüfenacht, Bern</li>
          <li>servus@aedubeerlab.ch</li>
          <li>+41 31 000 00 00</li>
        </ul>
      </div>
    </div>
    <div className="credit">
      <span>© 2026 Aedu Beer Lab</span>
      <span></span>
    </div>
  </footer>;


// SVG bottle — 0.33l longneck, used in carousels, hero, etc.
const Bottle = ({ tone = "amber", label = "IPA", size = 1, glow = false }) => {
  const tones = {
    amber: { glass: "#5c3611", liquid: "#8f5316", ink: "#7a4a1c", accent: "#f6f2e8", cap: "#23201a" },
    dark: { glass: "#1e1610", liquid: "#301d10", ink: "#2a1d12", accent: "#e8d9bd", cap: "#1c1a15" },
    pale: { glass: "#75521a", liquid: "#ab8028", ink: "#8a6320", accent: "#f6f2e8", cap: "#23201a" },
    sour: { glass: "#7a571a", liquid: "#b28629", ink: "#8a6520", accent: "#f6f2e8", cap: "#23201a" },
    green: { glass: "#26311f", liquid: "#3a4a30", ink: "#2b3724", accent: "#f6f2e8", cap: "#1c1a15" }
  };
  const t = tones[tone] || tones.amber;
  const w = 110 * size;
  const h = 300 * size;
  const uid = `b-${tone}`;
  const shape = "M37 22 L37 86 C37 106 22 112 20 140 L20 272 Q20 285 33 285 L77 285 Q90 285 90 272 L90 140 C88 112 73 106 73 86 L73 22 Z";
  const lab = label.toUpperCase();
  const labSize = lab.length <= 9 ? 7.5 : lab.length <= 13 ? 5.6 : lab.length <= 18 ? 4.4 : 3.8;
  const crimps = Array.from({ length: 17 }, (_, i) => 37.2 + i * 2.22);
  return (
    <svg width={w} height={h} viewBox="0 0 110 300" style={{
      filter: glow ? "drop-shadow(0 24px 30px rgba(0,0,0,.20))" : "drop-shadow(0 12px 18px rgba(0,0,0,.13))",
      transition: "filter .4s ease", overflow: "visible"
    }}>
      <defs>
        <linearGradient id={`glass-${uid}`} x1="0" x2="1">
          <stop offset="0" stopColor="#000" stopOpacity=".42" />
          <stop offset=".12" stopColor="#000" stopOpacity=".12" />
          <stop offset=".3" stopColor="#fff" stopOpacity=".20" />
          <stop offset=".5" stopColor="#fff" stopOpacity=".02" />
          <stop offset=".74" stopColor="#000" stopOpacity=".24" />
          <stop offset=".9" stopColor="#000" stopOpacity=".44" />
          <stop offset="1" stopColor="#000" stopOpacity=".52" />
        </linearGradient>
        <linearGradient id={`depth-${uid}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#000" stopOpacity=".30" />
          <stop offset=".2" stopColor="#fff" stopOpacity=".10" />
          <stop offset=".62" stopColor="#fff" stopOpacity="0" />
          <stop offset="1" stopColor="#000" stopOpacity=".38" />
        </linearGradient>
        <linearGradient id={`cap-${uid}`} x1="0" x2="1">
          <stop offset="0" stopColor="#000" stopOpacity=".5" />
          <stop offset=".32" stopColor="#fff" stopOpacity=".16" />
          <stop offset=".68" stopColor="#000" stopOpacity=".22" />
          <stop offset="1" stopColor="#000" stopOpacity=".55" />
        </linearGradient>
        <linearGradient id={`wrap-${uid}`} x1="0" x2="1">
          <stop offset="0" stopColor="#000" stopOpacity=".34" />
          <stop offset=".14" stopColor="#000" stopOpacity=".08" />
          <stop offset=".4" stopColor="#fff" stopOpacity=".10" />
          <stop offset=".78" stopColor="#000" stopOpacity=".12" />
          <stop offset="1" stopColor="#000" stopOpacity=".36" />
        </linearGradient>
        <radialGradient id={`ground-${uid}`} cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="#000" stopOpacity=".26" />
          <stop offset="1" stopColor="#000" stopOpacity="0" />
        </radialGradient>
        <clipPath id={`clip-${uid}`}><path d={shape} /></clipPath>
      </defs>

      {/* cast shadow */}
      <ellipse cx="55" cy="288" rx="40" ry="8" fill={`url(#ground-${uid})`} />

      {/* crown cap over the finish */}
      <path d="M36 8 L74 8 L74 22 Q55 28 36 22 Z" fill={t.cap} />
      <path d="M36 8 L74 8 L74 22 Q55 28 36 22 Z" fill={`url(#cap-${uid})`} />
      {crimps.map((x) => <line key={x} x1={x} y1="14" x2={x} y2="25" stroke="#000" strokeOpacity=".38" strokeWidth=".6" />)}
      <rect x="36" y="7" width="38" height="2.5" rx="1.2" fill="#fff" opacity=".10" />

      {/* glass: silhouette, liquid, cylindrical shading */}
      <path d={shape} fill={t.glass} />
      <g clipPath={`url(#clip-${uid})`}>
        <rect x="18" y="46" width="74" height="240" fill={t.liquid} opacity=".9" />
        <rect x="18" y="22" width="74" height="264" fill={`url(#depth-${uid})`} />
        <rect x="18" y="22" width="74" height="264" fill={`url(#glass-${uid})`} />
        {/* finish ring + collar below the crown */}
        <rect x="34.6" y="22" width="40.8" height="8" rx="1.5" fill="#fff" opacity=".07" />
        <rect x="34" y="30.5" width="42" height="4" fill="#000" opacity=".26" />
        {/* specular streaks */}
        <rect x="44" y="36" width="2.4" height="50" rx="1.2" fill="#fff" opacity=".24" />
        <rect x="30" y="152" width="4" height="118" rx="2" fill="#fff" opacity=".20" />
        <rect x="36" y="156" width="1.4" height="110" rx=".7" fill="#fff" opacity=".09" />
        <rect x="79" y="164" width="1.6" height="98" rx=".8" fill="#fff" opacity=".07" />
        {/* heel + base thickness */}
        <rect x="18" y="274" width="74" height="12" fill="#000" opacity=".24" />
        <rect x="18" y="272" width="74" height="1.2" fill="#fff" opacity=".13" />
      </g>

      {/* paper label */}
      <g clipPath={`url(#clip-${uid})`}>
        <rect x="24" y="177" width="62" height="1.5" fill="#000" opacity=".18" />
        <rect x="24" y="178" width="62" height="86" fill={t.accent} />
        <rect x="24" y="178" width="62" height="86" fill={`url(#wrap-${uid})`} />
        <rect x="24" y="263" width="62" height="1.5" fill="#000" opacity=".12" />
        <line x1="31" y1="185" x2="79" y2="185" stroke={t.ink} strokeWidth=".4" opacity=".5" />
        <line x1="31" y1="257" x2="79" y2="257" stroke={t.ink} strokeWidth=".4" opacity=".5" />
        <text x="55" y="202" textAnchor="middle" fontFamily="EB Garamond, serif" fontSize="13" fill={t.ink} fontStyle="italic">Aedu</text>
        <text x="55" y="212" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="4.6" letterSpacing=".3em" fill={t.ink} opacity=".8">BEER LAB</text>
        <text x="55" y="229" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={labSize} letterSpacing=".2em" fill={t.ink}>{lab}</text>
        <line x1="45" y1="236" x2="65" y2="236" stroke={t.ink} strokeWidth=".4" opacity=".55" />
        <text x="55" y="249" textAnchor="middle" fontFamily="EB Garamond, serif" fontSize="8" fill={t.ink} opacity=".85">Rüfenacht</text>
      </g>

      <path d={shape} fill="none" stroke="#000" strokeOpacity=".20" strokeWidth=".8" />
    </svg>);

};

// Reveal-on-scroll helper
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

Object.assign(window, { Logo, Nav, Footer, Bottle, useReveal });