// Biere — Karussell, Filter, Geschmacksprofil

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "show_grain": true
} /*EDITMODE-END*/;

const Profile = ({ profile, animated = true }) => {
  const rows = [
  { k: "malz", l: "Malz" },
  { k: "hopfen", l: "Hopfen" },
  { k: "bitter", l: "Bittere" },
  { k: "sauer", l: "Säure" },
  { k: "koerper", l: "Körper" }];

  return (
    <div className="profile">
      {rows.map((r) =>
      <div key={r.k} className="profile-row">
          <span className="pl">{r.l}</span>
          <div className="profile-bar">
            <div className="profile-fill" style={{ width: `${(profile[r.k] || 0) * 100}%` }} />
          </div>
          <span className="pv">{Math.round((profile[r.k] || 0) * 100)}</span>
        </div>
      )}
    </div>);

};

const Carousel = ({ beers }) => {
  const [idx, setIdx] = React.useState(0);
  const [dir, setDir] = React.useState(1);
  const [animKey, setAnimKey] = React.useState(0);

  React.useEffect(() => {setIdx(0);}, [beers.length]);

  const go = (d) => {
    setDir(d);
    setIdx((i) => (i + d + beers.length) % beers.length);
    setAnimKey((k) => k + 1);
  };

  if (!beers.length) {
    return <div style={{ padding: "var(--s-8)", textAlign: "center", color: "var(--ink-3)" }}>Keine Biere in dieser Kategorie.</div>;
  }
  const b = beers[idx];

  return (
    <div className="carousel">
      <div className="carousel-stage">
        <div className="carousel-glow" style={{ background: b.color }} />
        <div key={animKey} className="carousel-bottle" style={{
          animation: `bottleIn ${.7}s cubic-bezier(.2,.7,.2,1)`
        }}>
          <Bottle tone={b.tone} label={b.style} size={1.25} glow />
        </div>
        <div className="carousel-controls">
          <button className="carousel-btn" onClick={() => go(-1)} aria-label="Vorheriges">←</button>
          <button className="carousel-btn" onClick={() => go(1)} aria-label="Nächstes">→</button>
          <span className="carousel-counter">{String(idx + 1).padStart(2, "0")} / {String(beers.length).padStart(2, "0")}</span>
        </div>
      </div>
      <div className="carousel-info">
        <div className="h-eyebrow">{b.style} · Charge {b.batch}</div>
        <h3>{b.name}</h3>
        <p className="carousel-tag">{b.tagline}</p>
        <p className="carousel-desc">{b.description}</p>
        <div className="carousel-stats">
          <div><span className="num">{b.abv}%</span><span className="lbl">Vol.</span></div>
          <div><span className="num">{b.ibu}</span><span className="lbl">IBU</span></div>
          <div><span className="num">33cl</span><span className="lbl">Flasche</span></div>
        </div>
        <Profile profile={b.profile} />
        <div style={{ marginTop: 24, fontSize: 14, color: "var(--ink-2)" }}>
          <span className="h-eyebrow" style={{ marginRight: 12 }}>passt zu</span>
          {b.pairs.join(" · ")}
        </div>
      </div>
    </div>);

};

const BeerCard = ({ beer }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      id={beer.id}
      href={`#${beer.id}`}
      className="teaser-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ textDecoration: "none", scrollMarginTop: 100 }}>
      
      <div className="teaser-bottle" style={{ height: 280 }}>
        <div style={{ transform: hover ? "rotate(-6deg) translateY(-8px)" : "none", transition: "transform .5s ease" }}>
          <Bottle tone={beer.tone} label={beer.style} size={0.7} glow={hover} />
        </div>
      </div>
      <div className="teaser-meta">
        <div className="h-eyebrow">{beer.style} · {beer.abv}% Vol. · {beer.ibu} IBU</div>
        <h3 className="teaser-name">{beer.name}</h3>
        <p className="teaser-tag">{beer.tagline}</p>
      </div>
    </a>);

};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [filter, setFilter] = React.useState("alle");
  const [beers, setBeers] = React.useState(window.BEERS);
  React.useEffect(() => {
    if (window.beersReady) window.beersReady.then(setBeers);
  }, []);
  const filtered = filter === "alle" ? beers : beers.filter((b) => b.styleClass === filter);

  const styles = [
  { id: "alle", label: "Alle Sorten" },
  { id: "ipa", label: "IPA" },
  { id: "stout", label: "Stout" },
  { id: "sauer", label: "Sauerbier" }];


  return (
    <div className={tweaks.show_grain ? "grain" : ""}>
      <Nav active="biere" />
      <section className="container beers-hero">
        <div className="h-eyebrow">Sortiment · Aktuelle Chargen</div>
        <h1>diverse Biere,<br /><em>diverse Stimmungen.</em></h1>
        <p>Was gerade fertig ist, was reift, und was du jetzt bestellen kannst.
        Klein gebraut — meist sind 80 bis 120 Flaschen pro Charge.</p>
      </section>

      <section className="container">
        <div className="filter-bar">
          <span className="lbl">Filter</span>
          {styles.map((s) =>
          <button
            key={s.id}
            className={`filter-chip ${filter === s.id ? "active" : ""}`}
            onClick={() => setFilter(s.id)}>
            
              {s.label}
            </button>
          )}
          <span className="filter-count">{filtered.length} {filtered.length === 1 ? "Bier" : "Biere"}</span>
        </div>
        <Carousel beers={filtered} />
      </section>

      <section className="container" style={{ marginTop: "var(--s-9)" }}>
        <div className="section-head">
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 12 }}>Alle Biere</div>
            <h2>Übersicht</h2>
          </div>
          <span className="filter-count">{filtered.length} angezeigt</span>
        </div>
        <div className="beer-grid">
          {filtered.map((b) => <BeerCard key={b.id} beer={b} />)}
        </div>
      </section>

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Atmosphäre">
          <TweakToggle label="Filmkorn-Textur" value={tweaks.show_grain} onChange={(v) => setTweak("show_grain", v)} />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        @keyframes bottleIn {
          from { opacity: 0; transform: translateY(20px) rotate(-4deg); }
          to { opacity: 1; transform: translateY(0) rotate(0); }
        }
      `}</style>
    </div>);

};

ReactDOM.createRoot(document.getElementById("app")).render(<App />);