// HERO, editorial cover, asymmetric, infinite ticker

function Hero() {
  // Marquee items rendered twice for seamless loop
  const items = [
  { v: "5×", l: "Grammy nominated" },
  { v: "3,000,000,000+", l: "Streams" },
  { v: "400+", l: "Major records negotiated" },
  { v: "$1,000,000+", l: "In producer fees collected" },
  { v: "10+ yrs", l: "In music industry" },
  { v: "$0 → $20K", l: "Per placement, mapped" },
  { v: "BNYX · Cxdy · Pilgrim", l: "Worked alongside" },
  { v: "100% free tools", l: "Calculators, frameworks" }];


  return (
    <section style={{ position: "relative", paddingTop: 36, paddingBottom: 0 }}>
      <div className="page">
        {/* COVER GRID */}
        <div className="grid-12" style={{ alignItems: "stretch", minHeight: "78vh", position: "relative" }}>

          {/* Left rail, vertical caption */}
          <div className="hide-mobile" style={{ gridColumn: "span 1", display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 12, paddingBottom: 24 }}>
            <span className="vert">Producer Union · Field Guide</span>
            <span className="caption" style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}>
              No. 001
            </span>
          </div>

          {/* Main column */}
          <div style={{ gridColumn: "span 8" }}>
            <div className="flex gap-16" style={{ marginTop: 24, marginBottom: 32, alignItems: "center" }}>
              <span className="chip gold">Field Guide</span>
              <span className="caption">For producers who've made the decision</span>
            </div>

            <h1 className="h-display display" style={{ margin: 0 }}>
              Most producers<br />
              have <em>talent.</em><br />
              <span className="gold">Almost none</span><br />
              have the <em>roadmap.</em>
            </h1>

            <div className="grid-12" style={{ marginTop: 48, alignItems: "start" }}>
              <p className="lede" style={{ gridColumn: "span 6", margin: 0 }}>
                Producer Union is where career-track producers stop guessing and start building. Know what you're worth, how to negotiate it, how to protect it, how to compound it.
              </p>
              <div style={{ gridColumn: "8 / span 5" }}>
                <div className="caption" style={{ marginBottom: 8 }}>Filed by</div>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22 }}>
                  Aidan "Halfway" Crotinger
                </div>
                <div className="caption" style={{ marginTop: 4 }}>FOUNDER · SPLITMIND · DRUMIFY</div>
              </div>
            </div>

            <div className="flex gap-12" style={{ marginTop: 40, flexWrap: "wrap" }}>
              <JoinCta href={PU_LINKS.free}>Join free on Skool</JoinCta>
              <JoinCta href={PU_LINKS.plus} variant="ghost">Start the Roadmap</JoinCta>
            </div>
          </div>

          {/* Right column, receipt block */}
          <div className="hide-mobile" style={{ gridColumn: "span 3", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 12, gap: 24 }}>
            <ReceiptCard />
          </div>
        </div>
      </div>

      {/* INFINITE TICKER */}
      <div style={{ marginTop: 56 }}>
        <Marquee items={items} />
      </div>

      {/* Secondary ticker, slower, reverse */}
      <Marquee
        slow
        reverse
        accent
        items={[
        { v: "“This page is the map I never had.”", l: "member" },
        { v: "$14,200 in royalties recovered", l: "in 90 days" },
        { v: "Beat lease → Major label rate", l: "in one negotiation" },
        { v: "“I left $30K on the table.”", l: "before" },
        { v: "Indie · Indie + Distro · Signed · Major", l: "Five artist tiers" },
        { v: "Performance · Mechanical · Master · Sync", l: "Four royalty streams" }]
        } />
      
    </section>);

}

function ReceiptCard() {
  // Tiny "deal receipt", looks like a paper slip
  return (
    <Reveal>
      <div style={{
        background: "var(--bg-paper)",
        color: "var(--bg-paper-ink)",
        padding: "20px 18px 24px",
        position: "relative",
        boxShadow: "0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04)",
        transform: "rotate(2.2deg)",
        fontFamily: "var(--mono)"
      }}>
        <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(24,19,12,0.55)", marginBottom: 12, display: "flex", justifyContent: "space-between" }}>
          <span>RECEIPT №</span><span>0001</span>
        </div>
        <div style={{ fontFamily: "var(--sans)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.05 }}>
          One Beat,<br />Fully Collected
        </div>
        <div style={{ borderTop: "1px dashed rgba(24,19,12,0.4)", margin: "16px 0" }}></div>
        <Row label="Producer fee" v="$5,000" />
        <Row label="Publishing %" v="50%" />
        <Row label="Master royalty %" v="4%" />
        <Row label="Streaming (24mo est.)" v="$8,400" />
        <Row label="Sync potential" v="$12K+" />
        <div style={{ borderTop: "1px dashed rgba(24,19,12,0.4)", margin: "12px 0" }}></div>
        <Row label="TOTAL VALUE" v="$25,400+" bold />
        <div style={{ borderTop: "1px solid rgba(24,19,12,0.8)", margin: "12px 0 0", paddingTop: 10, fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(24,19,12,0.55)", textAlign: "center" }}>
          ★ ★ ★ THANK YOU ★ ★ ★
        </div>
      </div>
    </Reveal>);

}

function Row({ label, v, bold }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, padding: "3px 0", fontWeight: bold ? 700 : 400 }}>
      <span>{label}</span>
      <span style={{ fontVariantNumeric: "tabular-nums" }}>{v}</span>
    </div>);

}

function Marquee({ items, slow, reverse, accent }) {
  const track =
  <div className="marquee__track">
      {items.concat(items).map((it, i) =>
    <span key={i} className="marquee__item" style={accent ? { color: "var(--ink-2)" } : {}}>
          <span className={accent ? "pull-serif" : ""} style={accent ? { fontSize: "0.82em", color: "var(--ink)" } : { color: "var(--gold)" }}>
            {it.v}
          </span>
          <span className="lbl">{it.l}</span>
          <span className="star">✦</span>
        </span>
    )}
    </div>;

  return (
    <div className={`marquee ${slow ? "slow" : ""} ${reverse ? "reverse" : ""}`}>
      {track}
    </div>);

}

window.Hero = Hero;