// Frangos — Home page
function Embers({ count = 18 }) {
  const { motionOk } = useApp();
  const embers = React.useMemo(
    () => Array.from({ length: count }, (_, i) => ({
      left: 4 + Math.random() * 92,
      delay: Math.random() * 9,
      dur: 7 + Math.random() * 7,
      size: 2 + Math.random() * 3.5,
      drift: (Math.random() - 0.5) * 120,
    })), [count]);
  if (!motionOk) return null;
  return (
    <div className="embers" aria-hidden="true">
      {embers.map((e, i) => (
        <span key={i} className="ember" style={{
          left: e.left + "%",
          width: e.size, height: e.size,
          animationDelay: `${e.delay}s`,
          animationDuration: `${e.dur}s`,
          "--drift": e.drift + "px",
        }}></span>
      ))}
    </div>
  );
}

function Hero() {
  const { t, motionOk } = useApp();
  const bgRef = React.useRef(null);
  React.useEffect(() => {
    if (!motionOk) return;
    let raf = 0;
    const fn = () => {
      raf = 0;
      if (bgRef.current) {
        const y = Math.min(window.scrollY, window.innerHeight);
        bgRef.current.style.transform = `translateY(${y * 0.35}px) scale(1.08)`;
      }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(fn); };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [motionOk]);

  return (
    <section className="hero" data-screen-label="Home / Hero">
      <div className="hero-bg" ref={bgRef} style={{ backgroundImage: "url('images/platter-sauces.jpg')" }}></div>
      <div className="hero-shade"></div>
      <Embers></Embers>
      <div className="hero-content">
        <div className="hero-kicker rise" style={{ animationDelay: ".1s" }}>
          <Flame size={14} color="var(--accent)"></Flame>
          <span>{t.hero.kicker}</span>
        </div>
        <h1 className="hero-title display">
          <span className="hero-line"><span className="rise" style={{ animationDelay: ".22s" }}>{t.hero.l1}</span></span>
          <span className="hero-line accent-line"><span className="rise" style={{ animationDelay: ".34s" }}>{t.hero.l2}</span></span>
          <span className="hero-line"><span className="rise" style={{ animationDelay: ".46s" }}>{t.hero.l3}</span></span>
        </h1>
        <p className="hero-sub rise" style={{ animationDelay: ".6s" }}>{t.hero.sub}</p>
        <div className="hero-ctas rise" style={{ animationDelay: ".72s" }}>
          <a href="#/order" className="btn btn-accent btn-lg">{t.orderNow}</a>
          <a href="#/menu" className="btn btn-ghost btn-lg">{t.viewMenu}</a>
        </div>
        <div className="hero-chips rise" style={{ animationDelay: ".84s" }}>
          <HalalBadge></HalalBadge>
          <span className="chip-dot"></span>
          <span className="hero-open">{t.hero.open}</span>
        </div>
      </div>
      <div className="hero-scroll" aria-hidden="true">
        <span>{t.hero.scroll}</span>
        <span className="hero-scroll-line"></span>
      </div>
    </section>
  );
}

function Marquee() {
  const { t } = useApp();
  const words = [...t.marquee, ...t.marquee, ...t.marquee];
  return (
    <div className="marquee" aria-hidden="true" dir="ltr">
      <div className="marquee-track">
        {words.map((w, i) => (
          <span key={i} className="marquee-word display">
            {w}
            <Flame size={20} color="var(--accent)"></Flame>
          </span>
        ))}
      </div>
    </div>
  );
}

function Signatures() {
  const { t, lang, addToCart } = useApp();
  const picks = [
    { id: "whole", img: "images/platter-sauces.jpg" },
    { id: "stackburger", img: "images/burger-stacked.jpg" },
    { id: "periwrap", img: "images/wrap.webp" },
  ];
  return (
    <section className="section" data-screen-label="Home / Signatures">
      <SectionHead kicker={t.signatures.kicker} title={t.signatures.title} sub={t.signatures.sub}></SectionHead>
      <div className="sig-grid">
        {picks.map((p, i) => {
          const item = MENU.find((m) => m.id === p.id);
          return (
            <Reveal key={p.id} delay={i * 110} className="sig-card">
              <div className="sig-img">
                <img src={p.img} alt={item.name[lang]} loading="lazy"></img>
              </div>
              <div className="sig-body">
                <div className="sig-row">
                  <h3 className="sig-name">{item.name[lang]}</h3>
                  <span className="price">{dh(item.price)}</span>
                </div>
                <p className="sig-desc">{item.desc[lang]}</p>
                <button className="btn btn-outline btn-sm" onClick={() => addToCart(item.id, item.heat ? 2 : null)}>{t.menu.add}</button>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
}

function HeatScale() {
  const { t } = useApp();
  const [lv, setLv] = React.useState(2);
  return (
    <section className="section heat-section" data-screen-label="Home / Heat scale" style={{ "--heat-color": HEAT_COLORS[lv] }}>
      <div className="heat-glow" aria-hidden="true"></div>
      <SectionHead center kicker={t.heat.kicker} title={t.heat.title} sub={t.heat.sub}></SectionHead>
      <Reveal className="heat-stage" delay={120}>
        <div className="heat-flames-big" aria-hidden="true">
          {[0, 1, 2, 3].map((i) => (
            <button key={i} className={"heat-flame-btn" + (i <= lv ? " lit" : "")} onClick={() => setLv(i)} aria-label={t.heat.levels[i].name}>
              <Flame size={i === lv ? 64 : 48} color={i <= lv ? HEAT_COLORS[lv] : "#3A322B"}></Flame>
            </button>
          ))}
        </div>
        <div className="heat-readout">
          <h3 className="heat-name display">{t.heat.levels[lv].name}</h3>
          <p className="heat-desc">{t.heat.levels[lv].desc}</p>
        </div>
        <input
          className="heat-slider" type="range" min="0" max="3" step="1" value={lv}
          onChange={(e) => setLv(+e.target.value)} aria-label={t.heat.kicker}
        ></input>
        <div className="heat-ticks" aria-hidden="true">
          {t.heat.levels.map((l, i) => (
            <button key={i} className={"heat-tick" + (i === lv ? " on" : "")} onClick={() => setLv(i)}>{l.name}</button>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function StoryTeaser() {
  const { t } = useApp();
  return (
    <section className="section story-teaser" data-screen-label="Home / Story teaser">
      <Reveal className="story-img">
        <img src="images/chef-grill.jpg" alt="Frangos chef at the flame grill" loading="lazy"></img>
        <div className="story-img-badge"><Flame size={15} color="#fff"></Flame></div>
      </Reveal>
      <Reveal delay={130} className="story-copy">
        <div className="kicker"><Flame size={13} color="var(--accent)"></Flame><span>{t.storyTeaser.kicker}</span></div>
        <h2 className="display">{t.storyTeaser.title}</h2>
        <p className="section-sub">{t.storyTeaser.body}</p>
        <a href="#/story" className="btn btn-outline">{t.storyTeaser.cta}</a>
      </Reveal>
    </section>
  );
}

function PromoBanner() {
  const { t, tweaks } = useApp();
  if (!tweaks.showPromo) return null;
  return (
    <section className="section" data-screen-label="Home / Loyalty promo">
      <Reveal className="promo">
        <div className="promo-stamps" aria-hidden="true">
          {Array.from({ length: 10 }, (_, i) => (
            <span key={i} className={"stamp" + (i < 9 ? " filled" : "")}>
              {i < 9 ? <Flame size={15} color="rgba(255,255,255,.9)"></Flame> : <span className="stamp-num">10</span>}
            </span>
          ))}
        </div>
        <div className="promo-copy">
          <span className="promo-badge">{t.promo.badge}</span>
          <h2 className="display">{t.promo.title}</h2>
          <p>{t.promo.body}</p>
        </div>
        <a href="#/order" className="btn btn-light">{t.promo.cta}</a>
      </Reveal>
    </section>
  );
}

function Locations() {
  const { t } = useApp();
  return (
    <section className="section" data-screen-label="Home / Location">
      <SectionHead kicker={t.locations.kicker} title={t.locations.title}></SectionHead>
      <Reveal className="loc-card" delay={100}>
        <div className="loc-map" aria-hidden="true">
          <div className="loc-map-grid"></div>
          <div className="loc-pin">
            <Flame size={20} color="#fff"></Flame>
          </div>
        </div>
        <div className="loc-info">
          <p className="loc-address">{t.locations.address}</p>
          <p className="loc-meta">{t.locations.hours}</p>
          <p className="loc-meta" dir="ltr">{t.locations.phone}</p>
          <div className="loc-actions">
            <a className="btn btn-accent btn-sm" href="https://maps.google.com/?q=27+Bd+Abdelkrim+Al+Khattabi+Marrakesh" target="_blank" rel="noopener">{t.locations.directions}</a>
            <a className="btn btn-outline btn-sm" href="tel:+212524000000">{t.locations.call}</a>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function HomePage() {
  return (
    <main>
      <Hero></Hero>
      <Marquee></Marquee>
      <Signatures></Signatures>
      <HeatScale></HeatScale>
      <StoryTeaser></StoryTeaser>
      <PromoBanner></PromoBanner>
      <Locations></Locations>
    </main>
  );
}

Object.assign(window, { HomePage });