// Composer page — editorial portfolio
function ComposerPage({ go }) {
  const works = [
  { idx: "01", title: "Nocturne for Two Cellos", inst: "2 vc", year: "2025", dur: "8′30″" },
  { idx: "02", title: "Études in Silver", inst: "Solo piano", year: "2024", dur: "14′12″" },
  { idx: "03", title: "Kite, Distantly", inst: "String quartet", year: "2023", dur: "11′40″" },
  { idx: "04", title: "Fieldwork (i–iv)", inst: "Chamber ensemble (8)", year: "2023", dur: "22′00″" },
  { idx: "05", title: "Small Architectures", inst: "Clarinet & piano", year: "2022", dur: "9′50″" },
  { idx: "06", title: "Hymn, Reassembled", inst: "SATB chorus", year: "2021", dur: "6′20″" },
  { idx: "07", title: "The Hour Before", inst: "Film score — feature", year: "2021", dur: "72′00″" },
  { idx: "08", title: "Glass Canon", inst: "Electronics & string trio", year: "2020", dur: "13′15″" }];

  // ── Quick Listen: six 25-second previews, each with a genre + a line ──────
  // These are the fallback demos. Once you add recordings in Admin (with the
  // Player field set to "Quick listen" / "Listen more") the reels use those
  // instead — no code change or redeploy needed.
  const demoQuick = [
    { id: "q1", title: "Ashfall", subtitle: "Main theme · 0:25", tags: ["Action"],        description: "Driving ostinato and brass swells — the cold open of a heist gone loud.",            src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" },
    { id: "q2", title: "Cold Open", subtitle: "Cue · 0:25", tags: ["Thriller"],            description: "Low pulses and a circling string motif that never quite resolves.",                   src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" },
    { id: "q3", title: "Held Breath", subtitle: "Cue · 0:25", tags: ["Suspense"],          description: "Sparse, ticking textures building toward a single hit.",                            src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" },
    { id: "q4", title: "Back Alleys", subtitle: "Cue · 0:25", tags: ["Crime Fiction"],     description: "Smoky upright bass and brushed kit — noir with a modern edge.",                    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" },
    { id: "q5", title: "Dead Drop", subtitle: "Cue · 0:25", tags: ["Spy"],                 description: "Tense, propulsive and precise — coded handoff under city lights.",                 src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3" },
    { id: "q6", title: "Far Country", subtitle: "Cue · 0:25", tags: ["Adventure"],         description: "Wide, hopeful horns over a rolling rhythm — the journey out.",                    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3" },
  ];

  // ── Listen more: the larger catalogue of complete pieces ──────────────────
  const demoFull = [
    { id: "f1", title: "The Hollow Crown — Suite", subtitle: "Film · 2025 · 6:42", tags: ["Drama"],          description: "Concert suite drawn from the feature score.",            src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3" },
    { id: "f2", title: "Starbound (Main + Combat)", subtitle: "Game · 2024 · 5:18", tags: ["Adventure"],     description: "Adaptive theme and its combat variation, stitched.",     src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3" },
    { id: "f3", title: "Deadzone — Signal Lost", subtitle: "Game · 2023 · 4:55", tags: ["Mystery"],          description: "Long-form ambient build for exploration.",               src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-9.mp3" },
    { id: "f4", title: "Northwind", subtitle: "Film · 2023 · 7:10", tags: ["Drama"],                          description: "Full end-title cue.",                                    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-10.mp3" },
    { id: "f5", title: "Embergrove — Lanternlight", subtitle: "Game · 2024 · 5:40", tags: ["Adventure"],     description: "Town theme, full arrangement.",                          src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-11.mp3" },
  ];

  // Pull live recordings from Supabase; fall back to the demos above.
  const [recordings, setRecordings] = React.useState(null);
  React.useEffect(() => {
    if (!window.fetchRecordings) return;
    let cancelled = false;
    window.fetchRecordings().then(rows => {
      if (cancelled || !rows) return;
      setRecordings(rows);
    }).catch(() => {});
    return () => { cancelled = true; };
  }, []);

  const mapRow = (r) => ({
    id: r.id,
    title: r.title,
    subtitle: r.subtitle || r.duration || "",
    description: r.description || "",
    tags: (r.tags || "").split(",").map(s => s.trim()).filter(Boolean),
    src: r.audio_url,
  });
  const liveQuick = recordings
    ? recordings.filter(r => (r.player || "quick") === "quick" && r.audio_url).map(mapRow)
    : null;
  const liveFull = recordings
    ? recordings.filter(r => r.player === "full" && r.audio_url).map(mapRow)
    : null;

  const quickTracks = liveQuick && liveQuick.length ? liveQuick : demoQuick;
  const fullTracks  = liveFull  && liveFull.length  ? liveFull  : demoFull;

  return (
    <div className="page composer-page">
      <div className="wrap">
        <div className="hero">
          <div className="hero-meta">
            <div className="mono">I ⁄ Composer Portfolio</div>
            <div className="mono">2026</div>
          </div>
          <h1 className="hero-title">Maciej<br /><em style={{ fontStyle: "italic" }}>Romanowski</em>.</h1>
          <p className="hero-sub hero-sub--serif">
            Film and games composer based in London.
          </p>
          <div className="hero-cta">
            <button className="btn-primary" onClick={() => { const el = document.getElementById("listen"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" }); }}>
              <span>Listen</span>
              <span className="arrow"></span>
            </button>
          </div>
        </div>

        {/* BIO */}
        <section className="section" id="biography">
          <div className="section-head">
            <div className="mono">Biography</div>
            <h2 className="serif">About.</h2>
          </div>
          <div className="bio-grid">
            <div className="bio-body">
              <p>
                Maciej writes for film, games and chamber ensembles, working out of a studio in London. The work is rooted in curiosity: when he isn't at the desk, he's out on the bike with a recorder running, picking up the ambient sounds and textures of the city that find their way back into his pieces.
              </p>
              <p>
                His influences run from the cinematic — Bear McCreary and John Powell — to Stravinsky and Rachmaninoff, alongside the choral repertoire he grew up singing as a chorister. The result is music with a recognisably human touch: cinematic when the moment calls for it, but never overstated, and built to carry the listener somewhere a little fantastical.
              </p>
              <p>
                Off the page he's most often on long road trips — recent expeditions through the Dolomites and the Italian lakes have a habit of returning as musical ideas as quickly as the holiday photos. Closer to home, evenings tend to involve a board game (Catan, Scrabble, or a long round of Great Western Trail) and the family. A personal milestone last year: a 200-kilometre round trip to Brighton on the bike.
              </p>
            </div>
            <img
              src="images/composer-portrait.webp"
              alt="Maciej Romanowski"
              className="bio-portrait"
              loading="lazy"
            />
          </div>
          <img
            src="images/composer-landscape.webp"
            alt="Romanowski Studio — the writing room"
            className="bio-landscape"
            loading="lazy"
          />
        </section>

        {/* QUICK LISTEN */}
        <section className="section" id="listen">
          <div className="section-head">
            <div className="mono">Listen</div>
            <h2 className="serif">Quick listen.</h2>
          </div>
          <ReelPlayer
            tracks={quickTracks}
            playerId="quick"
            footer={
              <a
                className="reel-suggest"
                href="#full-tracks"
                onClick={(e) => {
                  e.preventDefault();
                  window.ListenTracker?.event("cta", { player: "quick", trackTitle: "suggest-more" });
                  document.getElementById("full-tracks")?.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                <span>Like what you hear? Listen to more</span>
                <span className="reel-suggest-arrow" aria-hidden="true">↓</span>
              </a>
            }
          />
        </section>

        {/* FULL TRACKS */}
        <section className="section" id="full-tracks">
          <div className="section-head">
            <div className="mono">Listen more</div>
            <h2 className="serif">In full.</h2>
            <p className="section-lead">Full-length pieces from recent film, game and concert work.</p>
          </div>
          <ReelPlayer
            tracks={fullTracks}
            playerId="full"
            footer={
              <a
                className="reel-suggest"
                href="#contact"
                onClick={(e) => {
                  e.preventDefault();
                  window.ListenTracker?.event("cta", { player: "full", trackTitle: "get-in-touch" });
                  document.getElementById("contact")?.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                <span>Like what you hear? Get in touch</span>
                <span className="reel-suggest-arrow" aria-hidden="true">↓</span>
              </a>
            }
          />
        </section>

        {/* CONTACT */}
        <section className="section" id="contact" style={{ borderBottom: "none" }}>
          <div className="section-head">
            <div className="mono">Contact</div>
            <h2 className="serif">Enquiries & commissions.</h2>
          </div>
          <div className="contact-row">
            <div className="contact-block">
              <a href="mailto:maciej@mrmusicstudio.com" className="contact-email">maciej@mrmusicstudio.com</a>
              <div className="mono" style={{ marginTop: 16, fontSize: 14, color: "var(--fg-muted)", letterSpacing: "0.04em" }}>For commissions, enquiries or to have a chat</div>
            </div>
            <button className="btn-primary" onClick={() => go("studio")}>
              <span>Visit the Studio</span>
              <span className="arrow"></span>
            </button>
          </div>
        </section>

        <SiteFooter go={go} />
      </div>
    </div>);

}

window.ComposerPage = ComposerPage;

// ── Recording card — real audio player when audioUrl is present ─────────────
function RecordingCard({ rec }) {
  if (rec.audioUrl) {
    return (
      <div className="composer-rec composer-rec--real">
        <div>
          <div className="composer-rec-title">{rec.title}</div>
          <div className="mono-sm">{rec.subtitle}</div>
        </div>
        <window.AudioPlayer src={rec.audioUrl} />
      </div>
    );
  }
  // Placeholder card — no audio file yet
  return (
    <div className="composer-rec composer-rec--placeholder">
      <div className="mono-sm">Audio placeholder</div>
      <div>
        <div className="composer-rec-title">{rec.title}</div>
        <div className="mono-sm">{rec.subtitle}</div>
      </div>
      <div className="composer-rec-fake">
        <div className="composer-rec-fake-btn">
          <div className="composer-rec-fake-tri" />
        </div>
        <div className="composer-rec-fake-line" />
        <div className="mono-sm">— : —</div>
      </div>
    </div>
  );
}
window.RecordingCard = RecordingCard;