// Heroes — three approaches.
const { useEffect, useRef, useState } = React;

// ===== Hero shared bits =====
function TimeGreeting({ lang }) {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  const h = now.getHours();
  const en = h < 11 ? "Good morning" : h < 16 ? "Good afternoon" : h < 19 ? "Golden hour" : "Good evening";
  const id = h < 11 ? "Selamat pagi" : h < 16 ? "Selamat siang" : h < 19 ? "Jam emas" : "Selamat malam";
  const time = now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
  return (
    <div className="time-greeting mono">
      <span className="dot" /> {lang === 'id' ? id : en} · Pecatu, Bali · {time}
    </div>
  );
}

// ===== Variant 1: Full-bleed photo =====
function HeroFullBleed({ lang }) {
  const t = lang === 'id' ? {
    eyebrow: "Brunch tepi danau · Pecatu",
    line1: "Tempat akar",
    line2: "bertemu cerita.",
    sub: "Sebuah kafe konsep alam di tepi danau di Uluwatu. Disajikan perlahan, sejak fajar hingga senja.",
    cta1: "Lihat menu", cta2: "Petunjuk arah",
  } : {
    eyebrow: "Lake-side brunch · Pecatu",
    line1: "Where roots",
    line2: "connect, stories grow.",
    sub: "A nature-café concept tucked beside a quiet lake in Uluwatu. Slow-served from sunrise to sunset.",
    cta1: "View menu", cta2: "Get directions",
  };
  return (
    <div className="hero hero-fullbleed">
      <div className="hero-bg">
        <img src={window.__resources.exteriorNight} alt="" />
        <div className="hero-veil" />
      </div>
      <div className="hero-fb-content">
        <TimeGreeting lang={lang} />
        <div className="eyebrow eyebrow-light">{t.eyebrow}</div>
        <h1 className="hero-fb-title serif">
          <span className="line">{t.line1}</span>
          <span className="line italic">{t.line2}</span>
        </h1>
        <p className="hero-fb-sub">{t.sub}</p>
        <div className="hero-fb-cta">
          <a className="btn btn-cream" href="#menu">{t.cta1} →</a>
          <a className="btn btn-outline" href="#visit">{t.cta2}</a>
        </div>
      </div>
      <div className="hero-fb-meta mono">
        <div><span>07:00 — 19:00</span><em>Daily</em></div>
        <div><span>4.7 ★</span><em>220 reviews</em></div>
        <div><span>Pecatu</span><em>South Kuta, Bali</em></div>
      </div>
      <div className="scroll-cue mono">scroll<span /></div>
    </div>
  );
}

// ===== Variant 2: Kinetic marquee =====
function HeroMarquee({ lang }) {
  const t = lang === 'id' ? {
    word1: "Tepi Danau", word2: "Brunch", word3: "Akar", word4: "Cerita", word5: "Uluwatu", word6: "Lambat",
    sub: "Sebuah kafe konsep alam — kopi diseduh perlahan, mangkuk smoothie, dan brunch ala Korea, semuanya di tepi danau yang tenang.",
    cta: "Lihat menu",
  } : {
    word1: "Lakeside", word2: "Brunch", word3: "Roots", word4: "Stories", word5: "Uluwatu", word6: "Slow",
    sub: "A nature-café concept — soulful coffee, smoothie bowls and Korean brunch trays, all by a quiet lake.",
    cta: "View the menu",
  };
  const photos = [
    window.__resources.coffeeLake, window.__resources.dragonfruitBowl,
    window.__resources.koreanTrayCoconut, window.__resources.exteriorDay,
    window.__resources.smoothieBowlLake, window.__resources.pastaChickenLake,
  ];
  return (
    <div className="hero hero-marquee">
      <div className="marquee-row marquee-row-1">
        <div className="marquee-track">
          {[0,1].map(i => (
            <div className="marquee-group" key={i}>
              <span className="serif">{t.word1}</span>
              <span className="dot-sep">●</span>
              <span className="serif italic">{t.word2}</span>
              <span className="dot-sep">●</span>
              <span className="serif">{t.word3}</span>
              <span className="dot-sep">●</span>
              <span className="serif italic">{t.word4}</span>
              <span className="dot-sep">●</span>
            </div>
          ))}
        </div>
      </div>

      <div className="marquee-photos">
        <div className="mq-photo-track">
          {[...photos, ...photos].map((p, i) => (
            <div className="mq-photo" key={i}><img src={p} alt="" /></div>
          ))}
        </div>
      </div>

      <div className="marquee-row marquee-row-2">
        <div className="marquee-track reverse">
          {[0,1].map(i => (
            <div className="marquee-group" key={i}>
              <span className="serif italic">{t.word5}</span>
              <span className="dot-sep">●</span>
              <span className="serif">{t.word6}</span>
              <span className="dot-sep">●</span>
              <span className="serif italic">{t.word1}</span>
              <span className="dot-sep">●</span>
              <span className="serif">{t.word2}</span>
              <span className="dot-sep">●</span>
            </div>
          ))}
        </div>
      </div>

      <div className="marquee-center">
        <TimeGreeting lang={lang} />
        <p className="hero-marquee-sub">{t.sub}</p>
        <a className="btn btn-sage" href="#menu">{t.cta} →</a>
      </div>
    </div>
  );
}

// ===== Variant 3: Lake-immersive parallax =====
function HeroLake({ lang }) {
  const ref = useRef(null);
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const onScroll = () => setScroll(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const t = lang === 'id' ? {
    line1: "Tepi danau yang tenang.", line2: "Diseduh dengan jiwa.",
    sub: "Brunch · Makan malam · Pecatu, Uluwatu",
    cta: "Lihat menu",
  } : {
    line1: "A quiet lake.", line2: "Brewed with soul.",
    sub: "Brunch · Dinner · Pecatu, Uluwatu",
    cta: "View menu",
  };

  return (
    <div className="hero hero-lake" ref={ref}>
      <div className="lake-sky" style={{ transform: `translate3d(0, ${scroll * 0.15}px, 0)` }} />
      <div className="lake-trees-back" style={{ transform: `translate3d(0, ${scroll * 0.25}px, 0)` }}>
        <img src={window.__resources.lakeHouseWide} alt="" />
      </div>
      <div className="lake-title-wrap" style={{ transform: `translate3d(0, ${scroll * 0.4}px, 0)`, opacity: 1 - scroll * 0.0015 }}>
        <TimeGreeting lang={lang} />
        <h1 className="serif lake-title">
          <span>{t.line1}</span>
          <span className="italic">{t.line2}</span>
        </h1>
        <p className="lake-sub mono">{t.sub}</p>
        <a className="btn btn-cream" href="#menu">{t.cta} →</a>
      </div>
      <div className="lake-water" style={{ transform: `translate3d(0, ${scroll * -0.05}px, 0)` }}>
        <div className="ripple r1" />
        <div className="ripple r2" />
        <div className="ripple r3" />
        <div className="lake-reflection" />
      </div>
      <div className="lake-foreground-leaves" style={{ transform: `translate3d(0, ${scroll * -0.1}px, 0)` }} />
    </div>
  );
}

window.HeroFullBleed = HeroFullBleed;
window.HeroMarquee = HeroMarquee;
window.HeroLake = HeroLake;