/* global React, Splash, Logo, Btn, Food, Marquee, Reveal, SectionHead, useHolyEvents, eventLocationTitle, useInstagramFeed */
const { useState: useStateHome, useEffect: useEffectHome } = React;

function HomePage({ go }) {
  const { events: homeEvents, loading: eventsLoading } = useHolyEvents(6);
  const { posts: instagramPosts, loading: instagramLoading, configured: instagramConfigured } = useInstagramFeed(6);
  const nextEvent = homeEvents[0];
  const featured = [
  {
    title: "Cheesy Smash",
    desc: "Bun, Patty, Cheddar-Schmelzkäse, Salat, Tomate, Zwiebeln, Holy Sauce.",
    price: "8,90",
    from: "ab",
    badges: [{ text: "Bestseller", kind: "teal" }],
    palette: "orange",
    hand: "saftig",
    img: "assets-min/cheesy-smash.jpg"
  },
  {
    title: "Holy Smash",
    desc: "Bun, Patty, Cheddar-Schmelzkäse, Bacon Jam, Salat, Tomate, Zwiebeln, Holy Sauce.",
    price: "9,90",
    from: "ab",
    badges: [{ text: "Signature", kind: "teal" }],
    palette: "red",
    hand: "holy good",
    img: "assets-min/holy-smash.jpg"
  },
  {
    title: "Bacon Jam Fries",
    desc: "Fritten, Bacon Jam, Frühlingszwiebeln, Holy Sauce.",
    price: "9,50",
    badges: [{ text: "NEU", kind: "orange" }],
    palette: "teal",
    hand: "loaded",
    img: "assets-min/bacon-jam-fries.jpg"
  }];


  return (
    <>
      {/* ============== HERO ============== */}
      <section className="hero">
        <div className="container">
          <div className="hero__grid">
            <div>
              <Reveal>
                <div className="hero__eyebrow">
                  <span className="pulse" />
                  <span className="eyebrow">FOODTRUCK BAMENOHL · FRISCH GEPRESST SEIT 2025</span>
                </div>
              </Reveal>
              <Reveal>
                <h1 className="hero__title display">
                  <span className="ln-1">
                    Holy
                    <span className="hand-tag">smashed!</span>
                  </span>
                  <span className="ln-2">Smash.</span>
                </h1>
              </Reveal>
              <Reveal>
                <p className="hero__sub">Frisch gepresste Smashburger auf der heißen Grillplatte. Frisches selbst gewoftes Beef, Potato Buns, hausgemachte Saucen. Kein Bullshit — nur ehrliches Streetfood.


                </p>
              </Reveal>
              <Reveal className="hero__ctas">
                <Btn variant="primary" size="lg" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
                  Jetzt bestellen <span className="arrow">→</span>
                </Btn>
                <Btn variant="ghost" size="lg" onClick={() => go("menue")}>
                  Menü ansehen
                </Btn>
              </Reveal>
            </div>
            <div className="hero__visual">
              <div className="hero__rings">
                <div className="hero__ring" />
                <div className="hero__ring" />
              </div>
              <img src={window.ASSET("assets-min/logo.webp")} alt="Holy Smash Logo" className="hero__logo" />
            </div>
          </div>
          <Reveal className="hero__stats" staggerChildren>
            <div className="hero__stat"><span className="v">100%</span><span className="l">FRISCHES BEEF</span></div>
            <div className="hero__stat"><span className="v">0</span><span className="l">Tiefkühl-Zeug</span></div>
            <div className="hero__stat"><span className="v">3</span><span className="l">Hausgemachte Saucen</span></div>
            <div className="hero__stat"><span className="v">∞</span><span className="l">Holy Vibes</span></div>
          </Reveal>
        </div>
      </section>

      {/* ============== MARQUEE TRUST ============== */}
      <Marquee
        items={[
        "FRISCHES BEEF",
        "FRISCH GEPRESST",
        "POTATO BUNS",
        "HAUSGEMACHTE SAUCEN",
        "HOLY GOOD",
        "SMASHED FRESH"]
        } />
      

      {/* ============== FEATURED ============== */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Star-Items"
            title="Die heiligen Drei."
            sub="Was du mindestens einmal probiert haben musst. Bevor du zurückkommst und alles bestellst." />
          
          <Reveal staggerChildren className="menu-grid">
            {featured.map((it, i) =>
            <article key={i} className="card">
                <Food
                label={it.title}
                sub="placeholder · foto folgt"
                hand={it.hand}
                badges={it.badges}
                palette={it.palette}
                img={it.img} />
              
                <div className="card__body">
                  <h3 className="card__title">{it.title}</h3>
                  <p className="card__desc">{it.desc}</p>
                  <div className="card__row">
                    <span className="card__price">
                      {it.from && <small>{it.from}</small>}
                      €{it.price}
                    </span>
                    <Btn variant="ghost" onClick={() => go("menue")}>
                      Details
                    </Btn>
                  </div>
                </div>
              </article>
            )}
          </Reveal>
        </div>
      </section>

      {/* ============== STORY ============== */}
      <section className="section section--dark section--frame">
        <div className="container">
          <div className="story">
            <Reveal>
              <Food wide label="Grillplatte" sub="frisch vom grill" hand="frisch gepresst" palette="orange" video="assets/grill.mp4" img="assets-min/grill.jpg" />
            </Reveal>
            <Reveal>
              <div>
                <span className="story__quote">Wir pressen. Du genießt.</span>
                <h2 className="story__title display">
                  Jeder Patty.
                  <br />
                  Frisch auf die
                  <br />
                  <span style={{ color: "var(--teal)" }}>heiße Platte.</span>
                </h2>
                <p className="story__body">
                  Kein vorgeformter Brei. Kein Bullshit. Wir nehmen eine Beef-Kugel, knallen sie auf die heiße Grillplatte und drücken sie platt — damit jede Faser Karamellisierung bekommt. Das nennt sich Maillard-Reaktion. Wir nennen es 


                  <em> Holy Good</em>.
                </p>
                <div className="story__pills">
                  <span className="tape tape--ghost">FRISCHES SELBST GEWOLFTES BEEF</span>
                  <span className="tape tape--ghost">Potato Buns</span>
                  <span className="tape tape--ghost">Hausgemachter Bacon Jam</span>
                  <span className="tape tape--ghost">2 HOLY SAUCES</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ============== NEXT STOP ============== */}
      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="next-stop">
              <div className="next-stop__date">
                <div className="day">{nextEvent?.weekday || "FR"}</div>
                <div className="month">{eventsLoading ? "lädt Termine …" : `${nextEvent?.dayNumber || ""}. ${nextEvent?.month || ""} · ${nextEvent?.startTime || "17:00"}–${nextEvent?.endTime || "21:00"}`}</div>
              </div>
              <div className="next-stop__info">
                <div className="eyebrow" style={{ marginBottom: 6 }}>Nächster Standort</div>
                <h3 className="display">{eventLocationTitle(nextEvent)}</h3>
                <p className="meta">{nextEvent?.meta || "57413 Finnentrop · NRW · Parken vor Ort"}</p>
              </div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Btn variant="primary" onClick={() => go("standorte")}>
                  Alle Termine
                </Btn>
                <Btn variant="ghost" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
                  Vorbestellen
                </Btn>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ============== MARQUEE TEAL ============== */}
      <Marquee
        variant="teal"
        items={[
        "FRESH SMASHED",
        "POTATO BUNS",
        "FRISCHES BEEF",
        "HOLY GOOD",
        "BAMENOHL · NRW",
        "ZERO BULLSHIT"]
        } />
      

      {/* ============== INSTAGRAM ============== */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="@holy_smashburgers"
            title="Holy Feed."
            sub="Live von der Platte. Folge uns für Termine, neue Specials und die besten Burger, die du jemals essen wirst." />
          
          {instagramPosts.length > 0 ?
          <Reveal staggerChildren className="ig-grid">
            {instagramPosts.map((post) =>
              <a key={post.id} className="ig-tile ig-tile--live" href={post.permalink} target="_blank" rel="noreferrer" aria-label="Instagram Post öffnen">
                <img src={post.thumbnailUrl || post.url} alt={post.caption ? post.caption.slice(0, 120) : "Holy Smash Instagram Post"} loading="lazy" />
                {post.type === "VIDEO" && <span className="ig-tile__badge">Reel</span>}
              </a>
            )}
          </Reveal> :
          <>
            {!instagramLoading && !instagramConfigured &&
              <div className="ig-note">
                Instagram Live-Feed ist vorbereitet. Sobald der Meta Access Token verbunden ist, erscheinen hier automatisch die neuesten Posts.
              </div>
            }
            <Reveal staggerChildren className="ig-grid">
              {Array.from({ length: 6 }).map((_, i) => {
                const palettes = ["teal", "orange", "red", "teal", "orange", "teal"];
                const labels = [
                ["Smash Drop", "Mo · 18:00"],
                ["Cheese Pull", "Holy Smash"],
                ["Bacon Jam", "loaded"],
                ["Behind the Grill", "team"],
                ["Saturday Crowd", "schützen."],
                ["Holy Sauce", "5 vibes"]];

                return (
                  <a key={i} className="ig-tile" href="https://instagram.com/holy_smashburgers" target="_blank" rel="noreferrer">
                    <Food label={labels[i][0]} sub={labels[i][1]} palette={palettes[i]} />
                  </a>);

              })}
            </Reveal>
          </>}
        </div>
      </section>

      {/* ============== BIG CTA ============== */}
      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="big-cta">
              <Splash className="big-cta__splash" color="#0a2a29" />
              <span className="big-cta__arrow display">→</span>
              <h2 className="big-cta__title display">
                Hunger?
                <br />
                Bestell jetzt.
              </h2>
              <p className="big-cta__sub">
                Online vorbestellen, am Truck abholen, ohne Wartezeit reinbeißen.
                Direkt am Truck zahlen — geht auch.
              </p>
              <Btn variant="orange" size="lg" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
                Zur Bestellung <span className="arrow">→</span>
              </Btn>
            </div>
          </Reveal>
        </div>
      </section>
    </>);

}

window.HomePage = HomePage;