/* 6ix Mela — origin story / about, heritage moment with mandala */
function Story() {
  return (
    <section className="section story grain" id="about">
      <img className="ornament o1" src="assets/logo-v2.png" alt="" />
      <div className="maxw story-grid">
        <div className="story-copy">
          <div className="eyebrow eyebrow-gold">Where this came from</div>
          <h2>The 6ix Throws<br />The Party It Was<br />Always <em>Meant To</em>.</h2>
          <p>A <strong>mela</strong> is a celebration — a packed, joyful fair where the whole city shows up. For years our music lived in basements, banquet halls and one-off club nights. The crowd was there. The sound was there. The stage wasn't.</p>
          <p>So we built one. We merged genres and added in the ultimate nightlife experience, and dropped it all at The Bowl. <strong>Urban Punjabi meets mainstream hip-hop</strong> — on the same bill, in the same city that raised both.</p>
          <p>This is the 6ix outside. Everyone's invited.</p>
          <div className="story-pulls">
            <div className="pull"><div className="n">2026</div><div className="l">First Edition</div></div>
            <div className="pull"><div className="n">8,000</div><div className="l">People With You</div></div>
            <div className="pull"><div className="n">∞</div><div className="l">Six Energy</div></div>
          </div>
        </div>
        <div className="story-art">
          <img className="story-poster" src="assets/story-poster.jpg" alt="6ix Mela 2026 lineup poster" />
        </div>
      </div>
    </section>
  );
}
window.Story = Story;