/* Bubble House website — multi-page views */

function PageHero({ eyebrow, title, intro, tone = "pink", children }) {
  return (
    <header className={"page-hero page-hero--" + tone}>
      <Bubbles count={5} />
      <div className="page-hero-inner">
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="page-title">{title}</h1>
        <p className="page-intro">{intro}</p>
        {children && <div className="page-actions">{children}</div>}
      </div>
    </header>
  );
}

const HOME_PAGES = [
  {
    href: "/bubble-house",
    kicker: "01—06",
    title: "The Bubble House story",
    text: "The concept, the problem, the B2B bridge, community, core values and the future.",
    color: "pink",
  },
  {
    href: "/events",
    kicker: "Event Pics",
    title: "Events & pictures",
    text: "Photo stories and direct references to different Bubble House editions.",
    color: "pink",
  },
  {
    href: "/archive",
    kicker: "Archive",
    title: "The archive",
    text: "Verified event listings, dates, locations and artists from Resident Advisor.",
    color: "yellow",
  },
  {
    href: "/blog",
    kicker: "Blog",
    title: "Notes from the floor",
    text: "Event reflections, artist stories and practical notes from Follow the Dopamine Insights.",
    color: "pink",
  },
  {
    href: "/play",
    kicker: "Want to Play",
    title: "Play at Bubble House",
    text: "An artist application that opens as a reviewable email draft before anything is sent.",
    color: "white",
  },
];

function HomeDirectory() {
  return (
    <section className="section home-directory" aria-labelledby="explore-title">
      <div className="directory-head">
        <div>
          <span className="eyebrow"><span className="dot" />More Bubble House</span>
          <h2 className="bh-display" id="explore-title">Where do you want to go?</h2>
        </div>
        <p className="bh-body">Choose what you are looking for: the story, the archive, pictures, artist applications or the blog.</p>
      </div>
      <div className="directory-grid">
        {HOME_PAGES.map((item) => (
          <a className={"directory-card directory-card--" + item.color} href={item.href} key={item.href}>
            <span className="directory-kicker">{item.kicker}</span>
            <h3>{item.title}</h3>
            <p>{item.text}</p>
            <span className="directory-arrow">Open page →</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function HomeArchiveSpotlight() {
  const editions = [EVENTS[0], EVENTS.find((event) => event.id === "ra-2424222")].filter(Boolean);
  return (
    <section className="section home-editions" aria-labelledby="home-editions-title">
      <div className="directory-head">
        <div>
          <span className="eyebrow"><span className="dot" />Verified on Resident Advisor</span>
          <h2 className="bh-display" id="home-editions-title">From the archive</h2>
        </div>
        <p className="bh-body">Two published editions from different Bubble House rooms. Future dates appear only after their public listing is available.</p>
      </div>
      <div className="home-edition-grid">
        {editions.map((event, index) => (
          <article className={"home-edition-card home-edition-card--" + (index === 0 ? "pink" : "yellow")} key={event.id}>
            <span className="directory-kicker">{event.date}</span>
            <h3>{event.title}</h3>
            <p>{event.venue} · {event.city}<br />{event.time}</p>
            <div className="home-edition-lineup">{event.lineup.map((slot) => slot.name).join(" · ")}</div>
            <a href={event.raUrl} target="_blank" rel="noopener noreferrer">Open Resident Advisor →</a>
          </article>
        ))}
      </div>
      <div className="home-ticket-strip">
        <div>
          <span className="eyebrow"><span className="dot" />All dates & tickets</span>
          <p>Use the full archive for past editions and Resident Advisor for the latest public listings.</p>
        </div>
        <div className="home-spotlight-actions">
          <a className="btn btn--yellow" href={RA_PROMOTER_URL} target="_blank" rel="noopener noreferrer">Open RA →</a>
          <a className="btn btn--ghost" href="/archive">Full archive →</a>
        </div>
      </div>
    </section>
  );
}

function ConceptJumpNav() {
  const chapters = [
    ["01", "The concept"],
    ["02", "The problem"],
    ["03", "How we connect"],
    ["04", "The community"],
    ["05", "Core values"],
    ["06", "The future"],
  ];
  return (
    <nav className="chapter-nav" aria-label="Bubble House chapters">
      {chapters.map(([num, label]) => (
        <a href={"#chapter-" + num} key={num}><span>{num}</span>{label}</a>
      ))}
    </nav>
  );
}

const EVENT_REFERENCES = [
  {
    title: "Bubble House ADE · Veronicaschip",
    date: "26 October 2025",
    text: "A shared floor built around back-to-back sets during ADE.",
    image: "/bh/assets/albums/veronicaschip-b2b.jpg",
    imageAlt: "Two artists playing back-to-back at Bubble House on the Veronicaschip",
    url: "https://ra.co/events/2262672",
  },
  {
    title: "Bubble House · Yellow House",
    date: "22 May 2026",
    text: "A community edition at Yellow House with Lam B, MOR.LOV, Munay and TRICK.",
    image: "/bh/assets/albums/yellow-house-dancefloor.jpg",
    imageAlt: "Visitor dancing at Bubble House in Yellow House",
    url: "https://ra.co/events/2424222",
  },
  {
    title: "Bubble House at Brinker Bar",
    date: "May—July 2026",
    text: "A recurring series at Onder Hans, documented through individual Resident Advisor listings.",
    image: asset("/flyer-brinker-bar.jpg"),
    imageAlt: "Bubble House at Brinker Bar event artwork",
    url: RA_PROMOTER_URL,
  },
];

function EventReferencesSection() {
  return (
    <section className="section event-references" aria-labelledby="event-references-title">
      <div className="directory-head">
        <div>
          <span className="eyebrow"><span className="dot" />Different editions</span>
          <h2 className="bh-display" id="event-references-title">Events that shaped the floor</h2>
        </div>
        <p className="bh-body">Each reference connects a room, a moment and its public Resident Advisor listing.</p>
      </div>
      <div className="reference-grid">
        {EVENT_REFERENCES.map((item) => (
          <article className="reference-card" key={item.title}>
            <img src={item.image} alt={item.imageAlt} />
            <div className="reference-card-body">
              <span className="directory-kicker">{item.date}</span>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
              <a href={item.url} target="_blank" rel="noopener noreferrer">Open Resident Advisor →</a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

const BLOG_POSTS = [
  {
    featured: true,
    category: "Bubble House · Event recap",
    date: "14 May 2026",
    readTime: "6 min read",
    title: "Bubble House Vol. 05: six hours in the dark",
    excerpt: "Six hours, one room, Funktion-One. The full account of our biggest, sweatiest night to date.",
    image: "/assets/blog/bubble-house-vol-05.jpg",
    imageAlt: "Bubble House dancefloor during an event",
    url: "https://followthedopamineagency.com/insights/bubble-house-vol-05-six-hours-in-the-dark/",
  },
  {
    category: "Scene",
    date: "21 April 2026",
    title: "Why second rooms matter",
    excerpt: "Second rooms are often where the real discoveries happen. Smaller stages create space for risk, intimacy, community and artists who are still building their name.",
    image: "/assets/blog/why-second-rooms-matter.jpg",
    imageAlt: "Crowd gathered on a club dancefloor",
    url: "https://followthedopamineagency.com/insights/why-second-rooms-matter/",
  },
  {
    category: "Artist development",
    date: "9 April 2026",
    title: "Building artists beyond the algorithm",
    excerpt: "Artist development should not be shaped only by content pressure and numbers. We look at sound, story, performance, visibility and long-term growth.",
    image: "/assets/blog/building-artists.jpg",
    imageAlt: "Artist performing during a Bubble House event",
    url: "https://followthedopamineagency.com/insights/building-artists-beyond-the-algorithm/",
  },
];

function BlogLanding() {
  const featured = BLOG_POSTS.find((post) => post.featured);
  const morePosts = BLOG_POSTS.filter((post) => !post.featured);
  return (
    <section className="section blog-landing" aria-labelledby="blog-latest-title">
      <div className="blog-section-head">
        <div>
          <span className="eyebrow"><span className="dot" />Latest from the floor</span>
          <h2 className="bh-display" id="blog-latest-title">Stories, reflections and practical notes</h2>
        </div>
        <p className="bh-body">A Bubble House selection from Follow the Dopamine Insights. Articles open on the agency website, where the original publications remain available.</p>
      </div>

      <article className="blog-featured">
        <a className="blog-featured-media" href={featured.url} target="_blank" rel="noopener noreferrer">
          <img src={featured.image} alt={featured.imageAlt} />
        </a>
        <div className="blog-featured-body">
          <div className="blog-meta"><span>{featured.category}</span><span>{featured.date}</span><span>{featured.readTime}</span></div>
          <h3><a href={featured.url} target="_blank" rel="noopener noreferrer">{featured.title}</a></h3>
          <p>{featured.excerpt}</p>
          <a className="btn btn--yellow" href={featured.url} target="_blank" rel="noopener noreferrer">Read the story →</a>
        </div>
      </article>

      <div className="blog-post-grid">
        {morePosts.map((post) => (
          <article className="blog-card" key={post.title}>
            <a className="blog-card-media" href={post.url} target="_blank" rel="noopener noreferrer">
              <img src={post.image} alt={post.imageAlt} />
            </a>
            <div className="blog-card-body">
              <div className="blog-meta"><span>{post.category}</span><span>{post.date}</span></div>
              <h3><a href={post.url} target="_blank" rel="noopener noreferrer">{post.title}</a></h3>
              <p>{post.excerpt}</p>
              <a className="blog-read" href={post.url} target="_blank" rel="noopener noreferrer">Read on Follow the Dopamine →</a>
            </div>
          </article>
        ))}
      </div>

      <div className="blog-contact">
        <p>More notes from the floor, artist stories and nightlife observations.</p>
        <a className="btn btn--yellow" href="https://followthedopamineagency.com/insights/" target="_blank" rel="noopener noreferrer">Open all Insights →</a>
      </div>
    </section>
  );
}

function HomePage() {
  return <><Hero /><Marquee /><HomeArchiveSpotlight /><HomeDirectory /></>;
}

function AboutPage() {
  return (
    <>
      <PageHero eyebrow="Bubble House information" title="From 01 The Concept to 06 The Future" intro="The complete Bubble House story in six connected chapters: why it exists, how it works, who it is for and where it can go." tone="pink">
        <a className="btn" href="#chapter-01">Start with 01 →</a>
      </PageHero>
      <div className="section chapter-nav-wrap"><ConceptJumpNav /></div>
      <ConceptSection />
    </>
  );
}

function ArchivePage() {
  const [featured, setFeatured] = useState(EVENTS[0].id);
  function openEvent(event) {
    setFeatured(event.id);
    window.setTimeout(() => document.getElementById("lineup")?.scrollIntoView({ behavior: "smooth" }), 0);
  }
  return (
    <>
      <PageHero eyebrow="Verified event history" title="The Bubble House archive" intro="Past editions, dates, locations and line-ups, connected to their public Resident Advisor listings." tone="yellow">
        <a className="btn" href={RA_PROMOTER_URL} target="_blank" rel="noopener noreferrer">Latest listings on RA →</a>
      </PageHero>
      <EventsSection onOpen={openEvent} />
      <LineupSection featuredId={featured} onSelect={setFeatured} />
    </>
  );
}

function EventsPage() {
  return (
    <>
      <PageHero eyebrow="Events & Pics" title="Different rooms. One shared floor." intro="References to Bubble House editions and pictures of the artists, communities and moments that made them." tone="lime">
        <a className="btn" href="/archive">See dates & line-ups →</a>
      </PageHero>
      <EventReferencesSection />
      <GallerySection />
    </>
  );
}

function PlayPage() {
  return (
    <>
      <PageHero eyebrow="Artist applications" title="Want to play at Bubble House?" intro="We book on feeling, musical fit and the exchange an artist can bring to the floor, not on follower count." tone="blue" />
      <ApplySection />
    </>
  );
}

function BlogHero() {
  return (
    <header className="blog-hero">
      <Bubbles count={7} />
      <Doodle src={asset("/doodle-star.png")} h={88} style={{ top: "14%", right: "10%" }} />
      <Doodle src={asset("/doodle-eyes.png")} h={58} style={{ top: "18%", left: "4%" }} />
      <Doodle src={asset("/doodle-pair-dance.png")} h={150} style={{ bottom: "-8px", right: "4%" }} />
      <div className="blog-hero-inner">
        <div className="blog-hero-tapes">
          <span className="tape">Bubble House blog</span>
          <span className="tape tape--pink">From the floor</span>
        </div>
        <h1>Notes from <span className="blog-hero-mark">the floor.</span></h1>
        <p>The thinking behind the events and the scenes we move through: Bubble House reflections, artist stories, nightlife observations and practical notes on building culture from the ground up.</p>
        <div className="blog-hero-actions">
          <a className="btn" href="#blog-latest-title">Read the latest →</a>
          <a className="btn btn--ghost" href="https://followthedopamineagency.com/insights/" target="_blank" rel="noopener noreferrer">All Insights →</a>
        </div>
      </div>
    </header>
  );
}

function BlogPage() {
  return (
    <>
      <BlogHero />
      <BlogLanding />
    </>
  );
}

Object.assign(window, {
  PageHero,
  HomePage,
  AboutPage,
  ArchivePage,
  EventsPage,
  PlayPage,
  BlogHero,
  BlogPage,
});