// Other sections — gallery, lake/visit, reviews, footer
const { useEffect: useEf2, useRef: useRef2, useState: useSt2 } = React;

function AboutLake({ lang }) {
  const t = lang === 'id' ? {
    eyebrow: "Tepi danau · Pecatu",
    title: "Sebuah danau, di tengah Uluwatu.",
    p1: "2Roots adalah kafe konsep alam yang bersarang di sisi danau yang tenang — selangkah dari pantai-pantai sibuk Uluwatu, namun terasa berdunia jauh.",
    p2: "Datanglah untuk kopi pagi sambil bebek air berenang melewati. Tinggal untuk brunch ala Korea di rumput. Habiskan sore bersama anjing Anda di dek kayu kami.",
    quote: "\u201CDi mana akar terhubung, cerita tumbuh.\u201D",
    stats: [["Buka", "07:00 — 19:00"], ["Setiap hari", "Tanpa henti"], ["Pengunjung", "Hewan peliharaan diterima"]],
  } : {
    eyebrow: "Lakeside · Pecatu",
    title: "A lake, hidden in Uluwatu.",
    p1: "2Roots is a nature-café concept tucked beside a quiet lake — minutes from Uluwatu's busy beaches, yet a world away.",
    p2: "Come for morning coffee as ducks paddle by. Stay for a Korean brunch tray on the grass. Spend the afternoon with your dog on our wooden deck.",
    quote: "\u201CWhere roots connect, stories grow.\u201D",
    stats: [["Open", "07:00 — 19:00"], ["Every day", "Of the year"], ["Guests", "Paw friends welcome"]],
  };
  return (
    <section id="lake" className="about-lake section-pad">
      <div className="container about-grid">
        <div className="about-copy reveal">
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title">{t.title}</h2>
          <p className="about-p">{t.p1}</p>
          <p className="about-p">{t.p2}</p>
          <blockquote className="about-quote serif">{t.quote}</blockquote>
          <div className="about-stats">
            {t.stats.map(([k,v],i)=>(<div key={i}><span className="mono">{k}</span><strong>{v}</strong></div>))}
          </div>
        </div>
        <div className="about-photos reveal">
          <div className="ap ap1"><img src={window.__resources.lakeHouseWide} alt="" /></div>
          <div className="ap ap2"><img src={window.__resources.lakeTreeFrame} alt="" /></div>
          <div className="ap ap3"><img src={window.__resources.coffeeLake} alt="" /></div>
        </div>
      </div>
    </section>
  );
}

function KidsPets({ lang }) {
  const t = lang === 'id' ? {
    eyebrow: "Ramah hewan · ramah anak",
    titleA: "Bawa", titleI: "seluruh", titleB: "kawanan.",
    p1: "Halaman terbuka, dek terbuka, langit terbuka. Sepasang bebek lokal melenggang melewati meja-meja. Anak-anak berlari ke tepi danau untuk memberi mereka makan. Anjing-anjing tertidur di tempat teduh, tali kekang longgar.",
    p2: "Kami menyiapkan tempat untuk semua — kursi tinggi di bar panjang, mangkuk air di setiap pintu, mainan lembut untuk tangan-tangan kecil, dan sudut rumput tenang saat si kecil perlu istirahat.",
    amen: "Mangkuk air · kursi tinggi · mainan lembut · halaman luas",
    cap1: "Pagi di teras", cap2: "Bebek penghuni", cap3: "Awak pagi",
  } : {
    eyebrow: "Pet-friendly · kid-friendly",
    titleA: "Bring", titleI: "the whole", titleB: "pack.",
    p1: "Open lawn, open deck, open sky. A pair of resident ducks waddle past tables. Kids run to the lake's edge to feed them. Dogs nap in the shade with their leashes loose.",
    p2: "We've made room for everyone — high chairs at the long bar, water bowls by every door, soft toys for sticky hands, a quiet corner of grass for when the smallest ones need a moment.",
    amen: "Water bowls · high chairs · soft toys · open lawn",
    cap1: "Morning on the deck", cap2: "Resident ducks", cap3: "The morning crew",
  };
  return (
    <section id="kids-pets" className="kids-pets section-pad">
      <div className="container kp-grid">
        <div className="kp-photos reveal">
          <figure className="kp kp1">
            <img src={window.__resources.dogsArrival} alt="" />
            <figcaption className="kp-cap mono">{t.cap1}</figcaption>
          </figure>
          <figure className="kp kp2">
            <img src={window.__resources.ducksLawn} alt="" />
            <figcaption className="kp-cap mono">{t.cap2}</figcaption>
          </figure>
          <figure className="kp kp3">
            <img src={window.__resources.dogsDeck} alt="" />
            <figcaption className="kp-cap mono">{t.cap3}</figcaption>
          </figure>
        </div>
        <div className="kp-copy reveal">
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title">
            {t.titleA} <em className="kp-italic">{t.titleI}</em> {t.titleB}
          </h2>
          <p className="about-p">{t.p1}</p>
          <p className="about-p">{t.p2}</p>
          <div className="kp-amenities mono">{t.amen}</div>
        </div>
      </div>
    </section>
  );
}

function Gallery({ lang }) {
  const photos = [
    { src: window.__resources.dragonfruitBowl, cap: "Pink Bloom smoothie bowl" },
    { src: window.__resources.exteriorNight, cap: "Lit up after dark" },
    { src: window.__resources.koreanTrayCoconut, cap: "Korean tray on the grass" },
    { src: window.__resources.sharePlates, cap: "Plates to share" },
    { src: window.__resources.omeletteDrinks, cap: "Eggs your way" },
    { src: window.__resources.interiorBar, cap: "Soft-curved bar" },
    { src: window.__resources.interiorBanquette, cap: "Where roots connect" },
    { src: window.__resources.pastaChickenLake, cap: "Pasta + lake view" },
  ];
  const t = lang === 'id' ? { eyebrow: "Galeri", title: "Suasana." } : { eyebrow: "Gallery", title: "A look around." };
  return (
    <section id="gallery" className="gallery section-pad">
      <div className="container">
        <div className="gallery-head reveal">
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title">{t.title}</h2>
        </div>
      </div>
      <div className="gallery-strip reveal">
        {photos.map((p,i)=>(
          <figure className="gphoto" key={i}>
            <img src={p.src} alt={p.cap} loading="lazy" />
            <figcaption className="mono">{String(i+1).padStart(2,'0')} · {p.cap}</figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

function Visit({ lang }) {
  const t = lang === 'id' ? {
    eyebrow: "Berkunjung",
    title: "Datanglah, tinggalah.",
    addrL: "Alamat", addrV: "Pecatu, South Kuta, Badung Regency, Bali 80361, Indonesia",
    hoursL: "Jam buka", hoursV: "07:00 — 19:00 setiap hari",
    phoneL: "Telepon", phoneV: "+62 877-2601-4100",
    instaL: "Instagram", instaV: "@2rootsbali",
    services: "Tempat duduk luar · Wi-Fi · Kursi tinggi · Hewan peliharaan diterima",
    cta1: "Petunjuk arah", cta2: "Ikuti di Instagram",
  } : {
    eyebrow: "Visit",
    title: "Come, and stay a while.",
    addrL: "Address", addrV: "Pecatu, South Kuta, Badung Regency, Bali 80361, Indonesia",
    hoursL: "Hours", hoursV: "07:00 — 19:00 daily",
    phoneL: "Phone", phoneV: "+62 877-2601-4100",
    instaL: "Instagram", instaV: "@2rootsbali",
    services: "Outdoor seating · Wi-Fi · High chairs · Pet-friendly",
    cta1: "Get directions", cta2: "Follow on Instagram",
  };
  return (
    <section id="visit" className="visit section-pad">
      <div className="container visit-grid">
        <div className="visit-info reveal">
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title">{t.title}</h2>
          <dl className="visit-dl">
            <div><dt className="mono">{t.addrL}</dt><dd>{t.addrV}</dd></div>
            <div><dt className="mono">{t.hoursL}</dt><dd>{t.hoursV}</dd></div>
            <div><dt className="mono">{t.phoneL}</dt><dd><a href="tel:+6287726014100">{t.phoneV}</a></dd></div>
            <div><dt className="mono">{t.instaL}</dt><dd><a href="https://instagram.com/2rootsbali" target="_blank" rel="noopener">{t.instaV}</a></dd></div>
          </dl>
          <p className="visit-services mono">{t.services}</p>
          <div className="visit-cta">
            <a className="btn btn-sage" href="https://maps.app.goo.gl/rai7TMdv7F4P1qtJA" target="_blank" rel="noopener">{t.cta1} →</a>
            <a className="btn btn-outline btn-outline-dark" href="https://instagram.com/2rootsbali" target="_blank" rel="noopener">{t.cta2}</a>
          </div>
        </div>
        <div className="visit-map reveal">
          <iframe
            src="https://maps.google.com/maps?q=2Roots+Bali,+Pecatu,+Badung+Regency,+Bali&t=&z=15&ie=UTF8&iwloc=&output=embed"
            width="100%" height="100%" style={{border:0}}
            loading="lazy" referrerPolicy="no-referrer-when-downgrade"
            title="2Roots Bali map"
          />
          <div className="map-pin mono">PECATU · BALI</div>
        </div>
      </div>
    </section>
  );
}

function Reviews({ lang }) {
  const t = lang === 'id' ? { eyebrow: "Cerita tamu", title: "4.7 dari 220 ulasan Google." } : { eyebrow: "Guest stories", title: "4.7 from 220 Google reviews." };
  const reviews = [
    { stars: 5, text: lang === 'id' ? "Tempat tersembunyi yang sempurna jauh dari keramaian. Pemandangan danau dari dek tidak nyata." : "The perfect hidden spot away from the crowd. The lake view from the deck is unreal.", who: "Sasha M." },
    { stars: 5, text: lang === 'id' ? "Brunch tray ala Korea di rumput dengan kelapa muda — surga yang sederhana." : "Korean brunch tray on the grass with a young coconut — simple heaven.", who: "Daniel R." },
    { stars: 5, text: lang === 'id' ? "Stafnya hangat, kopinya luar biasa, anjing saya disayangi setiap orang." : "Staff are warm, coffee is exceptional, my dog got fussed over by everyone.", who: "Inge K." },
    { stars: 4, text: lang === 'id' ? "Mangkuk smoothie Pink Bloom-nya sangat indah, dan rasanya seperti yang dijanjikan." : "Pink Bloom smoothie bowl is gorgeous and tastes as good as it looks.", who: "Marco V." },
  ];
  return (
    <section id="reviews" className="reviews section-pad">
      <div className="container">
        <div className="reviews-head reveal">
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title">{t.title}</h2>
        </div>
        <div className="review-grid">
          {reviews.map((r,i)=>(
            <article className="review reveal" key={i} style={{transitionDelay:`${i*80}ms`}}>
              <div className="stars">{"★".repeat(r.stars)}{"☆".repeat(5-r.stars)}</div>
              <p className="review-text serif">"{r.text}"</p>
              <div className="review-who mono">— {r.who}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SiteFooter({ lang }) {
  const t = lang === 'id' ? {
    tagline: "Di mana akar terhubung, cerita tumbuh.",
    visit: "Berkunjung", menu: "Menu", follow: "Ikuti", hours: "Jam buka",
    daily: "Setiap hari · 07:00 — 19:00",
    rights: "© 2026 2Roots Bali. Dibuat di Pecatu, dengan jiwa.",
  } : {
    tagline: "Where roots connect, stories grow.",
    visit: "Visit", menu: "Menu", follow: "Follow", hours: "Hours",
    daily: "Daily · 07:00 — 19:00",
    rights: "© 2026 2Roots Bali. Made in Pecatu, with soul.",
  };
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="grid">
          <div>
            <div className="footer-logo serif">2Roots</div>
            <p style={{maxWidth:300, opacity: 0.85, marginTop: 8}}>{t.tagline}</p>
          </div>
          <div>
            <h4>{t.visit}</h4>
            <p>Pecatu, South Kuta<br/>Badung Regency<br/>Bali 80361, Indonesia</p>
          </div>
          <div>
            <h4>{t.hours}</h4>
            <p>{t.daily}</p>
            <p style={{marginTop:10}}><a href="tel:+6287726014100">+62 877-2601-4100</a></p>
          </div>
          <div>
            <h4>{t.follow}</h4>
            <p><a href="https://instagram.com/2rootsbali" target="_blank" rel="noopener">@2rootsbali</a><br/>
            <a href="https://maps.app.goo.gl/rai7TMdv7F4P1qtJA" target="_blank" rel="noopener">Google Maps</a></p>
          </div>
        </div>
        <div className="bottom">
          <span>{t.rights}</span>
          <span className="mono">8°50'S · 115°08'E</span>
        </div>
        <div className="foot-credit">
          <a href="https://baliole.com" target="_blank" rel="noopener">
            Made with{' '}
            <svg className="foot-heart" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true">
              <path d="M12 21s-7-4.35-7-10a4 4 0 017-2.65A4 4 0 0119 11c0 5.65-7 10-7 10z" fill="currentColor"/>
            </svg>{' '}
            by Baliole.com
          </a>
        </div>
      </div>
    </footer>
  );
}

window.AboutLake = AboutLake;
window.KidsPets = KidsPets;
window.Gallery = Gallery;
window.Visit = Visit;
window.Reviews = Reviews;
window.SiteFooter = SiteFooter;