/* ============ ABOUT — your home away from home ============ */
function About() {
  const S = window.SITE;
  const cards = [
    { icon: "fa-solid fa-people-group", title: "A real community", body: "Solo travellers, couples, digital nomads and seekers from every corner of the world — strangers at check-in, lifelong friends by sunset." },
    { icon: "fa-solid fa-mountain",      title: "Auroville on the doorstep", body: "Cycle to the Matrimandir, stroll forest trails, find a quiet art collective, or simply sit in the meditation garden and exhale." },
    { icon: "fa-solid fa-mug-hot",       title: "Skydeck cafe lifestyle", body: "Artisanal coffee in the morning, focused deep work through the afternoon, live acoustic sets and starlit conversations every evening." }
  ];
  return (
    <section id="about" className="section">
      <div className="container about-grid">
        <div className="about-copy">
          <Eyebrow>Your home away from home</Eyebrow>
          <Reveal as="h2" className="display about-title">
            Not just a bed for the night — a <em className="muted-em">basecamp for belonging.</em>
          </Reveal>
          <Reveal as="p" className="about-lead" delay={120}>
            The Last Stop is a boutique backpackers retreat in the heart of Auroville — built around one idea: the best part
            of travelling is the people you meet doing it. Comfortable rooms, blazing fibre Wi-Fi and a thoughtfully
            curated garden keep you going — Skydeck evenings and shared sunrises are what keep you here.
          </Reveal>
          <div className="about-stats">
            {[["4.9", "guest rating"], ["9.7", "location rating"], ["200m", "from Auroville center"]].map(([n, l], i) => (
              <Reveal key={l} className="stat" delay={i * 90}>
                <span className="stat-n serif">{n}</span>
                <span className="stat-l">{l}</span>
              </Reveal>
            ))}
          </div>
        </div>

        <Reveal className="about-media" delay={120}>
          <Photo src={S.aboutImgs[0]} alt="Hostel common area" label="HOSTEL COMMON AREA" className="am-1" />
          <Photo src={S.aboutImgs[1]} alt="Skydeck mountain view" label="SKYDECK VIEW" className="am-2" />
          <Photo src={S.aboutImgs[2]} alt="Bonfire night" label="BONFIRE NIGHT" className="am-3" />
        </Reveal>
      </div>

      <div className="container about-cards">
        {cards.map((c, i) => (
          <Reveal key={c.title} className="acard" delay={i * 110}>
            <span className="acard-ic"><Icon name={c.icon} /></span>
            <h3 className="serif">{c.title}</h3>
            <p>{c.body}</p>
          </Reveal>
        ))}
      </div>

      <style>{`
        .about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
        .about-title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 18px; max-width: 16ch; }
        .about-lead { color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.15rem); margin-top: 22px; max-width: 52ch; }
        .about-stats { display: flex; gap: 38px; margin-top: 36px; flex-wrap: wrap; }
        .stat { display: flex; flex-direction: column; }
        .stat-n { font-size: 2.6rem; color: var(--primary); line-height: 1; }
        html[data-theme="dark"] .stat-n { text-shadow: 0 0 22px var(--glow); }
        .stat-l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }

        .about-media { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 150px; gap: 16px; }
        .about-media .ph { width: 100%; height: 100%; }
        .am-1 { grid-row: 1 / 3; }
        .am-2 { grid-column: 2; }
        .am-3 { grid-column: 2; }

        .about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(48px, 7vw, 90px); }
        .acard {
          background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
          padding: 34px 30px; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
        }
        .acard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--primary); }
        .acard-ic {
          width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
          background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-size: 20px; margin-bottom: 20px;
        }
        html[data-theme="dark"] .acard-ic { box-shadow: 0 0 22px -6px var(--glow); }
        .acard h3 { font-size: 1.5rem; margin-bottom: 10px; }
        .acard p { color: var(--text-2); font-size: 15px; }

        @media (max-width: 880px) {
          .about-grid { grid-template-columns: 1fr; }
          .about-media { grid-template-rows: 180px 130px; }
          .about-cards { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { About });