/* ============ SKYDECK CAFE — feature highlight ============ */
function Cafe() {
  const S = window.SITE;
  const items = [
    { icon: "fa-solid fa-mug-saucer", t: "Single-origin coffee", d: "Pour-over, cold brew and mountain chai." },
    { icon: "fa-solid fa-guitar", t: "Live music nights", d: "Open mics, slow guitar, the odd jam session." },
    { icon: "fa-solid fa-laptop-code", t: "Work-friendly by day", d: "Fast Wi-Fi, plug points and a view that beats any office." },
    { icon: "fa-solid fa-champagne-glasses", t: "Community gatherings", d: "Family dinners, sunset toasts, new friends nightly." }
  ];
  return (
    <section id="cafe" className="section cafe">
      <div className="container cafe-grid">
        <Reveal className="cafe-media">
          <div className="lights">
            {Array.from({ length: 11 }).map((_, i) => (
              <span key={i} className="bulb" style={{ animationDelay: `${(i % 5) * .3}s` }} />
            ))}
          </div>
          <Photo src={S.cafe?.img} alt="Rooftop Skydeck Cafe" label="ROOFTOP SKYDECK CAFE" className="cafe-img" />
          <div className="steam"><span /><span /><span /></div>
          <div className="cafe-tag glass">
            <Icon name="mug-hot" />
            <div>
              <strong>Open 8am – 11pm</strong>
              <span>Evening events from 7pm</span>
            </div>
          </div>
        </Reveal>

        <div className="cafe-copy">
          <Eyebrow>The Skydeck Cafe</Eyebrow>
          <Reveal as="h2" className="display cafe-title">
            Where the day melts into <em className="muted-em">gold.</em>
          </Reveal>
          <Reveal as="p" className="cafe-lead" delay={100}>
            Our rooftop is the soul of the property — artisanal coffee in the morning mist, focused work through
            the afternoon, and Auroville’s sky turning gold at dusk. Stay for the acoustic set; you’ll remember
            it long after the trip.
          </Reveal>
          <div className="cafe-feats">
            {items.map((it, i) => (
              <Reveal key={it.t} className="cfeat" delay={i * 90}>
                <span className="cfeat-ic"><Icon name={it.icon} /></span>
                <div><strong>{it.t}</strong><span>{it.d}</span></div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .cafe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 76px); align-items: center; }
        .cafe-media { position: relative; }
        .cafe-img { height: 460px; width: 100%; border-radius: var(--r-lg); }
        .cafe-tag {
          position: absolute; bottom: 18px; left: 18px; border-radius: var(--r-md); padding: 14px 18px;
          display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm);
        }
        .cafe-tag .ic { font-size: 22px; color: var(--accent); }
        .cafe-tag strong { display: block; font-size: 14px; color: var(--text); }
        .cafe-tag span { font-size: 12px; color: var(--text-2); }

        .lights { position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 3; display: flex; justify-content: space-around; align-items: flex-start; padding: 0 16px; }
        .lights::before { content:""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
        .bulb { width: 9px; height: 9px; border-radius: 50%; margin-top: 12px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: glow-b 2.4s ease-in-out infinite; }
        @keyframes glow-b { 0%,100%{ opacity: .5; transform: scale(.85) } 50%{ opacity: 1; transform: scale(1.1) } }

        .steam { position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; z-index: 2; opacity: .7; }
        .steam span { width: 6px; height: 40px; background: linear-gradient(to top, transparent, rgba(255,255,255,.6)); border-radius: 99px; filter: blur(3px); animation: rise 3s ease-in-out infinite; }
        .steam span:nth-child(2){ animation-delay: .6s; } .steam span:nth-child(3){ animation-delay: 1.2s; }
        @keyframes rise { 0%{ transform: translateY(10px) scaleY(.6); opacity: 0 } 40%{ opacity: .8 } 100%{ transform: translateY(-26px) scaleY(1.2); opacity: 0 } }

        .cafe-title { font-size: clamp(2rem, 4.6vw, 3.6rem); margin-top: 18px; }
        .cafe-lead { color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.15rem); margin-top: 22px; max-width: 50ch; }
        .cafe-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
        .cfeat { display: flex; gap: 14px; align-items: flex-start; }
        .cfeat-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 16px; }
        .cfeat strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 3px; }
        .cfeat span { font-size: 13px; color: var(--text-2); }
        @media (max-width: 880px) { .cafe-grid { grid-template-columns: 1fr; } .cafe-img { height: 340px; } .cafe-feats { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Cafe });