/* Andy Hopkins — Frame & Field hero, two directions.
   Composes the Frame & Field design-system primitives + a bespoke
   FF-styled reel player. Mounts one root per canvas artboard. */
const FF = window.FrameFieldDesignSystem_07f0ae;
const { Brand, Button, Pill, PlayBadge, Icon, ProjectTile, Stat, ServiceRow } = FF;
const { useState, useEffect, useRef } = React;

const IMG = "assets/ff/";const SOUNDCLOUD = "https://soundcloud.com/andyhopkins/windsors-ve-day?in=andyhopkins/sets/the-windsors";
const REELCRAFTER = "https://play.reelcrafter.com/iv58OP6LQ1OiPnbfw2hA-w";
/* Live KIR reel (../kir-reel.js): ?api=<origin>/reels override; https -> the KIR service domain (hosted, cross-origin — the production shape); else <hostname>:5139
   — the local KIR backend; hostname-derived so LAN devices hit the serving machine. */
const KIR_BASE = new URLSearchParams(location.search).get("api")
  || (location.protocol === "https:" ? "https://kir.nextwaveweb.co.uk/reels"
      : "http://" + location.hostname + ":5139/reels");

/* audio-wave brand mark (no wave glyph exists in the DS icon set) */
function WaveMark({ size = 20 }) {
  const bars = [0.4, 0.75, 1, 0.55, 0.85, 0.3];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ display: "block", flex: "0 0 auto" }}>
      {bars.map((h, i) => (
        <rect key={i} x={2 + i * 3.5} y={12 - (h * 9)} width={2} height={h * 18} rx={1} />
      ))}
    </svg>
  );
}

/* ---------- shared content ---------- */
const BIO =
  "Andy Hopkins scores film and television. Over a decade of work for CNN, BBC, ITV, Syfy, Nat Geo and Discovery, built on craft, restraint, and a voice of his own.";

const QUOTE =
  "The best TV tells great tales that engage people in a visceral way. Andy instinctively understands this as well as the nuances of storytelling. His music transforms films and lifts them to another emotional level.";
const QUOTE_BY = "Louise Norman";
const QUOTE_ROLE = "Head of US Documentaries, RAW TV — The Windsors, The Hunt For The Boston Bombers";

const PRODUCTIONS = [
  { src: IMG + "einstein-hawking.webp", cap: "Einstein & Hawking — Unlocking the Universe", meta: "BBC / Science Channel", tag: "Emmy nominated" },
  { src: IMG + "the-windsors.jpg", cap: "The Windsors — Inside the Royal Dynasty", meta: "CNN · Narr. Rosamund Pike", tag: "CNN" },
  { src: IMG + "kennedys.jfif", cap: "American Dynasties — The Kennedys", meta: "CNN · Narr. Martin Sheen", tag: "CNN" },
  { src: IMG + "911-escape.jfif", cap: "9/11 — Escape From The Towers", meta: "Documentary special", tag: "#1 iTunes" },
];

const SERVICES = [
  { index: "01", name: "Einstein & Hawking.", meta: "BBC — Emmy-nominated score", src: IMG + "einstein-hawking.webp", href: REELCRAFTER },
  { index: "02", name: "The Windsors.", meta: "CNN — Narr. Rosamund Pike", src: IMG + "the-windsors.jpg", href: SOUNDCLOUD },
  { index: "03", name: "The Kennedys.", meta: "CNN — American Dynasties", src: IMG + "kennedys.jfif", href: REELCRAFTER },
  { index: "04", name: "9/11: Escape.", meta: "#1 on the iTunes charts", src: IMG + "911-escape.jfif", href: REELCRAFTER },
];

const ABOUT = [
  "Andy Hopkins is an award-winning composer, producer and musician based in Los Angeles and London.",
  "Andy has worked live and in the studio with acts including Groove Armada, Nick McCarthy, Crazy Girl, Dido, Oojami, Zero 7 and the Idjut Boys.",
  "He embraces the eclectic. From playing guitar in the first UK performance of Duke Ellington's symphony Black, Brown and Beige at the Barbican, to creating an improvised zombie film score with Nick McCarthy of Franz Ferdinand, he thrives on taking music to different places — a willingness to push the boundaries that keeps him in demand as a composer and a musician.",
];

const CREDITS = [
  {
    label: "Awards & nominations",
    items: [
      { title: "Einstein & Hawking: Unlocking the Universe", note: "Emmy-nominated score" },
      { title: "9/11: Escape From The Towers", note: "Realscreen award nominee · #1 on the iTunes charts" },
      { title: "Patient 39", note: "Best Original Score nominee, Fastnet Film Festival · Durham Film Festival main award winner" },
    ],
  },
  {
    label: "CNN Originals — Dynasties",
    items: [
      { title: "The Kennedys", note: "Narrated by Martin Sheen · #1 in its US timeslot" },
      { title: "The Bushes", note: "#1 in its US timeslot" },
      { title: "The Windsors", note: "With Rosamund Pike · #1 in its US timeslot" },
    ],
  },
  {
    label: "Landmark series & collaborations",
    items: [
      { title: "Celts: Blood, Iron and Sacrifice", note: "BBC epic series" },
      { title: "Stephen Fry's Planet Word", note: "Co-composed with Debbie Wiseman" },
    ],
  },
];

/* ---------- waveform data ---------- */
const BARS = Array.from({ length: 56 }, (_, i) => {
  const swell = Math.sin((i / 56) * Math.PI * 2.3) * 0.35 + 0.55;
  const detail = (Math.sin(i * 1.7) * 0.5 + 0.5) * 0.4;
  return Math.max(0.16, Math.min(1, swell * 0.7 + detail));
});
const TOTAL = 218;
function fmt(s) {
  const m = Math.floor(s / 60);
  const r = Math.floor(s % 60);
  return `${m}:${String(r).padStart(2, "0")}`;
}

/* ---------- FF reel player ----------
   tone: "paper" (white surface) | "plate" (on ink)
   accent: true = signal-yellow play (the single page accent) */
function FFPlayer({ eyebrow, title, meta, tone = "paper", accent = false, href = REELCRAFTER }) {
  const [playing, setPlaying] = useState(false);
  const [t, setT] = useState(0);
  const raf = useRef(null);
  useEffect(() => {
    if (!playing) return;
    let last = performance.now();
    const tick = (now) => {
      const dt = (now - last) / 1000;
      last = now;
      setT((p) => (p + dt >= TOTAL ? 0 : p + dt));
      raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [playing]);
  const played = Math.round((t / TOTAL) * BARS.length);
  return (
    <div className={"ffp ffp--" + tone + (playing ? " is-playing" : "")}>
      <button
        type="button"
        className={"ffp__play" + (accent ? " ffp__play--signal" : "")}
        aria-label={playing ? "Pause" : "Play"}
        onClick={() => setPlaying((p) => !p)}
      >
        <Icon name="play" size={20} style={{ display: playing ? "none" : "block" }} />
        <span className="ffp__pause" style={{ display: playing ? "flex" : "none" }} aria-hidden="true">
          <i></i><i></i>
        </span>
      </button>
      <div className="ffp__body">
        <div className="ffp__meta">
          <span className="ffp__eyebrow">{playing ? "Now playing" : eyebrow}</span>
          <span className="ffp__title">{title}</span>
        </div>
        <div className="ffp__wave" aria-hidden="true">
          {BARS.map((h, i) => (
            <span
              key={i}
              className={"ffp__bar" + (i < played ? " is-played" : "")}
              style={{ height: h * 100 + "%", animationDelay: -(i % 12) * 70 + "ms", animationDuration: 720 + (i % 7) * 60 + "ms" }}
            />
          ))}
        </div>
      </div>
      <div className="ffp__side">
        <span className="ffp__time">{fmt(t)} / {fmt(TOTAL)}</span>
        <a className="ffp__open" href={href} target="_blank" rel="noopener">
          Full reel <Icon name="arrow-up-right" size={14} />
        </a>
      </div>
    </div>
  );
}

/* ---------- shared nav ---------- */
function Nav({ active }) {
  const links = ["Work", "Listen", "About"];
  return (
    <nav className="nav" aria-label="Primary">
      <a className="ah-brand" href="#"><WaveMark size={20} /><span>Andy Hopkins</span></a>
      <ul className="nav__links">
        {links.map((l) => (
          <li key={l}><a className={"nav__link" + (l === active ? " is-active" : "")} href="#">{l}</a></li>
        ))}
      </ul>
      <Button variant="primary" icon="arrow-up-right" href={REELCRAFTER}>Get in touch</Button>
    </nav>
  );
}

/* film-reel placeholder card — drop content in later via the image-slot */
function ReelCard({ id, title, meta, src, sub }) {
  const perf = Array.from({ length: 9 });
  return (
    <div className="reel-card">
      <div className="reel-card__frame">
        <div className="reel-card__perf">{perf.map((_, i) => <i key={i} />)}</div>
        <div className="reel-card__window">
          <image-slot id={id} shape="rect" fit="cover" src={src} placeholder="Drop a clip still"></image-slot>
          <span className="reel-card__play"><Icon name="play" size={16} /></span>
        </div>
        <div className="reel-card__perf">{perf.map((_, i) => <i key={i} />)}</div>
      </div>
      <div className="reel-card__cap"><span className="reel-card__title">{title}</span><span className="reel-card__meta">{meta}</span></div>
      {sub && <p className="reel-card__sub">{sub}</p>}
    </div>
  );
}

/* ---------- shared About + Credits ---------- */
function About() {
  return (
    <section className="ff-block" style={{ paddingBlock: "0 96px" }} id="about">
      <div className="container ah-about">
        <div className="ah-about__media">
          <div className="card-frame" style={{ aspectRatio: "4 / 5" }}>
            <img src={IMG + "studio-console.jpeg"} alt="Andy Hopkins at the mixing desk" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <p className="ah-about__caption">Andy Hopkins — scoring session, London</p>
        </div>
        <div className="ah-about__text">
          <h2 className="ah-title">About</h2>
          {ABOUT.map((p, i) => (<p key={i} className="ah-about__para">{p}</p>))}
          <figure className="ah-about__quote">
            <blockquote>&ldquo;He'll listen to the brief, of course — then offers compositions I didn't know my films needed until I heard them.&rdquo;</blockquote>
            <figcaption><span className="ah-quote__name">Melanie Archer</span><span className="ah-quote__role">Exec Producer &amp; Showrunner — The Kennedys, The Bushes, Race for the White House</span></figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

function Credits() {
  return (
    <section className="ff-block" style={{ paddingBlock: "0 96px" }} id="credits">
      <div className="container">
        <div className="ah-head">
          <h2 className="ah-title">Credits</h2>
          <p className="ah-head__meta">Selected · film &amp; television<br />CNN · BBC · ITV · Syfy · Nat Geo</p>
        </div>
        <div className="ah-credits">
          {CREDITS.map((strand) => (
            <div className="ah-strand" key={strand.label}>
              <p className="ah-strand__label">{strand.label}</p>
              <ul className="ah-strand__list">
                {strand.items.map((it) => (
                  <li key={it.title}>
                    <span className="ah-strand__title">{it.title}</span>
                    <span className="ah-strand__note">{it.note}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ff-foot">
      <div className="container ff-foot__row">
        <a className="ah-brand" href="#"><WaveMark size={18} /><span>Andy Hopkins</span></a>
        <ul className="ff-foot__links">
          {["Reel", "SoundCloud", "IMDb", "Contact"].map((l) => (
            <li key={l}><a href={l === "SoundCloud" ? SOUNDCLOUD : REELCRAFTER} target="_blank" rel="noopener">{l}</a></li>
          ))}
        </ul>
        <span className="ff-foot__copy">© 2026 — Andy Hopkins</span>
      </div>
    </footer>
  );
}

/* ================= OPTION A — cinematic plate ================= */
function OptionA() {
  return (
    <div className="ff-page">
      <div className="container"><Nav active="Work" /></div>
      <div className="container"><hr className="ff-divider" /></div>

      <section className="ff-block" style={{ paddingBlock: "48px 48px" }}>
        <div className="container">
          <article className="plate plate--tall ah-plate">
            <div className="plate__media" style={{ backgroundImage: `url("${IMG}studio-blue-tint.jpg")` }} aria-hidden="true"></div>
            <div className="ah-slate" aria-hidden="true">
              <span className="ah-slate__dot"></span>
              <span>SCORING STUDIO</span>
              <span className="ah-slate__sep">/</span>
              <span>LONDON</span>
            </div>
            <div className="plate__inner" style={{ minHeight: 560 }}>
              <header className="ah-plate__head">
              </header>
              <div className="ah-plate__body">
                <h1 className="plate__headline ah-plate__headline">Scores for<br />screen</h1>
                <p className="plate__paragraph ah-plate__para">{BIO}</p>
                <p className="plate__paragraph ah-plate__para">His in-depth understanding of the industry, combined with virtuosity and a unique creative voice, has helped directors find new ways of bringing their storytelling to screen.</p>
              </div>
              <footer className="ah-plate__foot">
                <div className="ah-plate__channels">
                  {[["film", "Film"], ["play", "Television"], ["search", "Orchestral"]].map(([ic, l]) => (
                    <span className="ah-channel" key={l}><Icon name={ic} size={16} />{l}</span>
                  ))}
                </div>
                <a className="ah-discover" href="#work">Selected work <Icon name="arrow-right" size={14} /></a>
              </footer>
            </div>
          </article>
        </div>
      </section>

      <div className="container"><hr className="ff-rule" /></div>

      <section className="ff-block" style={{ paddingBlock: "0 96px" }}>
        <div className="container">
          <figure className="ah-quote">
            <p className="ah-quote__mark">&ldquo;</p>
            <blockquote>{QUOTE}</blockquote>
            <figcaption><span className="ah-quote__name">{QUOTE_BY}</span><span className="ah-quote__role">{QUOTE_ROLE}</span></figcaption>
          </figure>
        </div>
      </section>

      <div className="container"><hr className="ff-rule" /></div>

      <section className="ff-block" style={{ paddingBlock: "0 40px" }}>
        <div className="container"><h2 className="ah-title">Listen</h2></div>
      </section>

      <section className="ff-block" style={{ paddingBlock: "0 96px" }}>
        <div className="container ah-listen">
          <FFPlayer
            eyebrow="Emmy-nominated score"
            title="Einstein & Hawking — Unlocking the Universe"
            tone="plate"
            accent={true}
          />
        </div>
      </section>

      {/* Live KIR reel (audio half) — the real, composer-updated playlist under the featured cue */}
      <section className="ff-block" style={{ paddingBlock: "0 96px" }}>
        <div className="container">
          <kir-reel reel="andy-hopkins" kind="audio" theme="light" accent="#f5b843" base={KIR_BASE}></kir-reel>
        </div>
      </section>

      <section className="ff-block" style={{ paddingBlock: "0 96px" }} id="work">
        <div className="container">
          <div className="ah-head">
            <h2 className="ah-title">Watch</h2>
            <p className="ah-head__meta">Clips &amp; cues<br />to be added</p>
          </div>
          <div className="reel-row">
            <ReelCard id="reel-1" title="Einstein & Hawking" meta="Reel 01" src={IMG + "einstein-hawking.webp"} sub="BBC / Science Channel · Emmy-nominated score" />
            <ReelCard id="reel-2" title="The Windsors" meta="Reel 02" src={IMG + "the-windsors.jpg"} sub="CNN · Narrated by Rosamund Pike" />
            <ReelCard id="reel-3" title="The Kennedys" meta="Reel 03" src={IMG + "kennedys.jfif"} sub="CNN · Narrated by Martin Sheen" />
          </div>
        </div>
      </section>

      {/* Live KIR reel (video half) — same reel, video section only */}
      <section className="ff-block" style={{ paddingBlock: "0 96px" }}>
        <div className="container">
          <kir-reel reel="andy-hopkins" kind="video" theme="light" accent="#f5b843" base={KIR_BASE}></kir-reel>
        </div>
      </section>

      <div className="container"><hr className="ff-rule" /></div>

      <About />

      <Credits />

      <section className="ff-block" style={{ paddingBlock: "0 96px" }}>
        <div className="container">
          <div className="ah-cta ah-cta--split">
            <div className="ah-cta__text">
              <h2 className="ah-cta__title">Let's score your project</h2>
              <p className="ah-cta__lead">Taking a small number of long-form projects each year.</p>
              <div style={{ marginTop: 28 }}><Button variant="on-plate" icon="arrow-right" href={REELCRAFTER}>Get in touch</Button></div>
              <div className="ah-contact">
                <div className="ah-contact__row"><span className="ah-contact__label">Andy Hopkins</span><span className="ah-contact__val">email@example.com · +44 (0)00 0000 0000</span></div>
                <div className="ah-contact__row"><span className="ah-contact__label">Agent</span><span className="ah-contact__val">Agency name · agent@example.com</span></div>
              </div>
            </div>
            <div className="ah-cta__media"><img src={IMG + "piano.jpeg"} alt="Shaw & Co. upright piano" /></div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

/* ================= OPTION B — editorial masthead ================= */
function OptionB() {
  return (
    <div className="ff-page">
      <div className="container"><Nav active="Listen" /></div>

      <section className="ff-block" style={{ paddingBlock: "48px 72px" }}>
        <div className="container">
          <p className="bh-slate">Composer — Film &amp; Television · Scoring since 2011</p>
          <h1 className="bh-masthead">Andy<br />Hopkins.</h1>
          <div className="bh-lead">
            <p className="bh-bio">{BIO}</p>
            <div className="bh-tags">
              <Pill variant="dark">Emmy nominated</Pill>
              <Pill>CNN · BBC · ITV</Pill>
              <Pill>Orchestral</Pill>
            </div>
          </div>
        </div>
      </section>

      <section className="ff-block" style={{ paddingBlock: "0 84px" }}>
        <div className="container">
          <FFPlayer
            eyebrow="Selected reel"
            title="Einstein & Hawking — main title"
            tone="plate"
            accent={true}
          />
        </div>
      </section>

      <section className="ff-block" style={{ paddingBlock: "0 88px" }}>
        <div className="container bh-stats">
          {[["10+", "Years scoring for broadcast"], ["6", "International broadcasters"], ["2", "Award-class nominations"], ["#1", "iTunes soundtrack chart"]].map(([v, l]) => (
            <Stat key={l} value={v} label={l} />
          ))}
        </div>
      </section>

      <section className="ff-block" style={{ paddingBlock: "0 88px" }} id="work">
        <div className="container">
          <div className="ah-head">
            <h2 className="ah-title">Selected work</h2>
            <p className="ah-lead">Long-form documentary and drama, scored across a decade of broadcast.</p>
          </div>
          <div className="bh-worklist">
            {SERVICES.map((s) => (
              <a className="bh-workrow" key={s.index} href={s.href} target="_blank" rel="noopener">
                <div className="bh-workrow__thumb card-frame"><img src={s.src} alt={s.name} /></div>
                <span className="bh-workrow__index">{s.index}</span>
                <span className="bh-workrow__name">{s.name}</span>
                <span className="bh-workrow__meta">{s.meta}</span>
                <Icon name="chevron-right" size={20} className="bh-workrow__chev" />
              </a>
            ))}
          </div>
        </div>
      </section>

      <About />
      <Credits />

      <section className="ff-block" style={{ paddingBlock: "0 96px" }}>
        <div className="container">
          <div className="ah-cta">
            <div className="ah-cta__text">
              <h2 className="ah-cta__title">Let's score your project</h2>
              <div style={{ marginTop: 28 }}><Button variant="on-plate" icon="arrow-right" href={REELCRAFTER}>Get in touch</Button></div>
              <div className="ah-contact">
                <div className="ah-contact__row"><span className="ah-contact__label">Andy Hopkins</span><span className="ah-contact__val">email@example.com · +44 (0)00 0000 0000</span></div>
                <div className="ah-contact__row"><span className="ah-contact__label">Agent</span><span className="ah-contact__val">Agency name · agent@example.com</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("rootA")).render(<OptionA />);