/* =============================================================
   BOUNTY NETWORK — CAREERS
   Uses the site's own classes: .section, .h1, .h2, .it, .eyebrow,
   .lead, .kicker-row, .btn, .chip, .wrap. Only careers-specific
   pieces live in careers.css.

   All copy is in the ROLES array. Set applyUrl per role.
   Add ?embed=1 to the URL to hide nav + footer (for Whop).
   ============================================================= */

const ROLES = [
  {
    "id": "creative-strategist",
    "gsA": "You decide what",
    "gsEm": "gets made.",
    "gsB": "Then you prove it worked.",
    "gsSub": "Every format that goes to a clipper came from you. Every number that comes back is the scoreboard.",
    "hi": "viral.",
    "tag": "CREATIVE",
    "terms": "Remote · Mon–Sat, 10am–10pm CET",
    "title": "Creative Strategist",
    "card": "Engineer how every campaign travels. Design the formats, prove them with data, and hand clippers something that already works.",
    "heroA": "Make campaigns go",
    "heroEm": "viral.",
    "heroB": "On purpose, not by luck.",
    "heroLead": "You live inside the algorithm. You already know what is about to pop before anyone else does. Turn that into a role: engineer the formats that make our clients' campaigns hit millions of views.",
    "comp": "Base discussed on the call, plus 0.5% of live campaign spend, plus a bonus every time one of your formats wins.",
    "stats": [
      [
        "3×",
        "Viral formats you design before every campaign goes live."
      ],
      [
        "0.5%",
        "Of total live campaign spend, paid monthly."
      ],
      [
        "1:1",
        "Direct line to the founder. Daily, not quarterly."
      ],
      [
        "∞",
        "Every active campaign is your canvas. One central creative seat."
      ]
    ],
    "ownLead": "You are the creative engine across every active campaign. You decide what gets made, and you prove it works.",
    "own": [
      [
        "Design the viral formats",
        "Before every launch, build three content formats made for that client and aimed at their attribution metrics. Lock them into the brief."
      ],
      [
        "Monitor and adjust live",
        "Watch how every format performs against the client's real metrics, not just views. When something underperforms, flag it and ship a tested replacement fast."
      ],
      [
        "Test new formats constantly",
        "Tear down the top performers in each niche, work out what is landing right now, and test fresh formats for active clients every week."
      ],
      [
        "Write the campaign guidelines",
        "Build a living set of guidelines per campaign: approved formats, dos and don'ts, hooks, references. Update it every time you test something new."
      ],
      [
        "Brief clients and recap wins",
        "Send a strategy brief to every client before onboarding, and build a clean recap when a campaign liquidates: what launched, what won, the numbers hit."
      ],
      [
        "Work with the CPE",
        "Sit down every week to go through strategy and performance campaign by campaign, and decide the next creative move together."
      ]
    ],
    "processLead": "We read every application ourselves and move fast on the people who clearly get it.",
    "process": [
      [
        "Application",
        "Fill out the form. We read every single one. No automated filters."
      ],
      [
        "Screening call",
        "A short call to get to know you, see how online you really are, and check the commitment lines up."
      ],
      [
        "Scorecard interview",
        "We name a real client and you tell us, on the spot, the style and formats you would launch to make it go viral. This is where the right person stands out."
      ],
      [
        "Test task",
        "A short real task. Break down a brand and pitch the formats you would run. We want to see how you actually think."
      ],
      [
        "Onboarding",
        "You ramp on live campaigns, build out the format library, and take ownership of creative across every campaign."
      ]
    ],
    "yes": [
      "You are chronically online. TikTok, Reels, Shorts, Twitch, all day",
      "You can hear a brand name and instantly know what would make it go viral",
      "You understand virality better than most people running agencies",
      "You know the difference between logo, streamer, personal brand and audio clipping",
      "You can commit Mon to Sat, 10am to 10pm CET",
      "You move fast and back your taste with data, not ego"
    ],
    "no": [
      "You are a brand strategist who lives in slide decks, not feeds",
      "You have to research trends instead of already living in them",
      "You cannot explain why a video went viral, only that it did",
      "You want to try it out and see what happens",
      "You go quiet when a format flops and the pressure is on",
      "You are not willing to be on camera for calls and trainings"
    ],
    "compHead": "Paid for what",
    "compEm": "wins.",
    "compLead": "A base so you can commit, a share of everything live so you grow with the agency, and a bonus every time a format you built carries a campaign.",
    "compBig": "0.5%",
    "compBigSub": "of total live campaign spend, paid every month on top of your base",
    "compNote": "Your base is set on the call based on hours and experience. The winning format bonus is $60, paid whenever a format you designed produces the top performing clip set on a campaign. One per campaign.",
    "table": null,
    "cards": [
      [
        "Private channel with the founder",
        "Your own channel for daily communication, fast feedback and direct access to the person running the agency."
      ],
      [
        "Weekly strategy session",
        "You are plugged into the rhythm. Campaign check ins, performance reviews and what is working in culture right now."
      ]
    ],
    "applyUrl": "https://tally.so/r/2EGg2D?role=creative-strategist"
  },
  {
    "id": "campaign-performance-engineer",
    "gsA": "One campaign.",
    "gsEm": "Fully yours.",
    "gsB": "Paid on what it does.",
    "gsSub": "No hours logged, no busywork. The budget spends well or it doesn't, and your pay says which.",
    "hi": "campaign.",
    "tag": "OPERATIONS",
    "terms": "Remote · Mon–Sat, 10am–10pm CET",
    "title": "Campaign Performance Engineer",
    "card": "Own a clipping campaign end to end. Quality, optimisation and client results. Run it like it is yours, get paid like it is too.",
    "heroA": "Run a real",
    "heroEm": "campaign.",
    "heroB": "Get paid like you own it.",
    "heroLead": "Own a campaign outright. You are not an assistant. You are the person responsible for making it perform, and your pay is tied directly to how well it does.",
    "comp": "3% of your campaign budget. No ceiling. Paid monthly on what actually spends.",
    "stats": [
      [
        "3%",
        "Commission on the campaign budget you run. No ceiling."
      ],
      [
        "$3K/mo",
        "What a $100k campaign pays you at 3%."
      ],
      [
        "1:1",
        "Direct line to the founder. Daily, not quarterly."
      ],
      [
        "12hr",
        "From new client signed to live campaign running."
      ]
    ],
    "ownLead": "One campaign. Full ownership. You are not an assistant. You are the person responsible for making it perform.",
    "own": [
      [
        "Clip review and quality control",
        "Review, approve and deny submissions throughout the day. Hold the standard and give real feedback on every denial."
      ],
      [
        "Campaign optimisation",
        "Watch views, CPM, approval rates and spend velocity. Adjust so the budget spends efficiently and the client sees results."
      ],
      [
        "Client communication",
        "Send performance reports twice a week. Keep clients updated, flag issues early, request assets, build the relationship."
      ],
      [
        "Clipper coaching",
        "Run the Whop support chat. Host live review calls. Help your clippers improve so the whole campaign levels up."
      ],
      [
        "Fraud prevention",
        "Identify view botted or fraudulent submissions. Issue clawbacks and bans. Zero tolerance. Protecting integrity is not negotiable."
      ],
      [
        "Onboarding and setup",
        "When a new client comes in, set up their community and campaign within 12 hours. Fast and clean."
      ]
    ],
    "processLead": "Four steps. We read every application personally and move fast on the ones that fit.",
    "process": [
      [
        "Application",
        "Fill out the form. We read every single one personally. No automated filters."
      ],
      [
        "Screening call",
        "If your application looks right, a short call to verify you understand the commitment."
      ],
      [
        "Scorecard interview",
        "You get a real campaign scenario and walk us through what you would do. We find out whether you actually know your stuff."
      ],
      [
        "Shadow and assignment",
        "A week shadowing a live campaign. If it looks good, you get assigned your own and you begin."
      ]
    ],
    "yes": [
      "You are already clipping and want to move up, not sideways",
      "You can commit Mon to Sat, 10am to 10pm CET",
      "You want to get paid on results, not hours",
      "You take ownership. You do not wait to be told what to do",
      "You are comfortable talking to clients and leading clippers",
      "You have no other job, school or commitment that would conflict"
    ],
    "no": [
      "You are looking for a guaranteed salary or hourly pay",
      "You are in school or have another job you cannot leave",
      "You want to try it out and see what happens",
      "You need someone to manage your schedule for you",
      "You go quiet when things get difficult",
      "You are not willing to be on camera for calls and trainings"
    ],
    "compHead": "You eat what you",
    "compEm": "kill.",
    "compLead": "No cap on earnings. The better your campaign spends, the more you take home. Your rate grows as you prove yourself.",
    "compBig": "$3,000",
    "compBigSub": "per month at 3% on a $100k campaign",
    "compNote": "3% is the starting point, not the ceiling. Prove you can run a campaign and your rate grows. Paid monthly on what the budget actually spends, so the faster and better you spend it, the faster you get paid.",
    "table": [
      "Campaign budget",
      "You earn (at 3%)",
      [
        [
          "$15,000",
          "$450 / mo"
        ],
        [
          "$25,000",
          "$750 / mo"
        ],
        [
          "$50,000",
          "$1,500 / mo"
        ],
        [
          "$75,000",
          "$2,250 / mo"
        ],
        [
          "$100,000+",
          "$3,000 / mo"
        ]
      ]
    ],
    "cards": [
      [
        "Private channel with the founder",
        "Your own channel for daily communication, fast feedback and direct access to the person running the agency."
      ],
      [
        "Daily check in",
        "Every day the team gets on a call. Performance, planning, problem solving, side by side."
      ]
    ],
    "applyUrl": "https://tally.so/r/2EGg2D?role=campaign-performance-engineer"
  },
  {
    "id": "campaign-partnerships-lead",
    "gsA": "You find them.",
    "gsEm": "You close them.",
    "gsB": "You keep the upside.",
    "gsSub": "No lead list, no inbound queue. Every deal on your board is one you went out and made.",
    "hi": "Close them.",
    "tag": "SALES",
    "terms": "Remote · Commission only",
    "title": "Campaign Partnerships Lead",
    "card": "Find the brands nobody has pitched yet and bring them into clipping. You source it, you close it, you keep the upside.",
    "heroA": "Find the brands.",
    "heroEm": "Close them.",
    "heroB": "Keep the upside.",
    "heroLead": "This is not an inbound seat. We handle the leads that come to us. What we want is someone who goes out and finds brands that have never heard of clipping, and turns them into live campaigns.",
    "comp": "3% to 6% of every campaign budget you source and close, paid once per campaign. No ceiling.",
    "stats": [
      [
        "3–6%",
        "Commission on every campaign you source and close."
      ],
      [
        "$6K",
        "One payment on a $100k campaign you sourced."
      ],
      [
        "100%",
        "Self sourced. Every deal you close is one you found."
      ],
      [
        "1:1",
        "Direct line to the founder. Daily, not quarterly."
      ]
    ],
    "ownLead": "You own the whole motion. Finding them, pitching them, closing them, and handing over a campaign that can actually be delivered.",
    "own": [
      [
        "Source your own pipeline",
        "No lead list handed to you. You find the brands, agencies and creators with budget who have not discovered clipping yet."
      ],
      [
        "Run outbound daily",
        "DMs, cold email, LinkedIn, X. Consistent volume, every day, tracked."
      ],
      [
        "Pitch clipping to people who have never bought it",
        "Most of your prospects only know paid ads. You explain CPM, verified views and why this outperforms their current spend."
      ],
      [
        "Close",
        "Take deals from first reply to signed campaign brief yourself."
      ],
      [
        "Build partner referrals",
        "Recruit people who can send deals your way and track every referred deal end to end."
      ],
      [
        "Hand over clean",
        "Set the campaign up so the performance side can deliver exactly what you sold. What you promise is what we run."
      ]
    ],
    "processLead": "Four steps. We read every application personally.",
    "process": [
      [
        "Application",
        "Fill out the form, including proof of something you have closed before."
      ],
      [
        "Screening call",
        "A short call to verify you can actually sell and that you understand this is self sourced."
      ],
      [
        "Scorecard interview",
        "A real prospect scenario. You run discovery and close us."
      ],
      [
        "Ramp",
        "You build your first pipeline with support, then run your own seat."
      ]
    ],
    "yes": [
      "You have closed deals before and can prove it",
      "You build pipeline from nothing and you like it that way",
      "You write well. DMs, follow ups, partner outreach",
      "You can explain CPM and performance to a brand without a script",
      "You would rather earn a big month than a predictable one",
      "You are hungry. You do not wait for inbound to roll in"
    ],
    "no": [
      "You only work inbound leads",
      "You cannot show a previous close",
      "You need a lead list handed to you",
      "You are chasing a guaranteed salary above all else",
      "You need to be told what to do every day",
      "You go quiet on a prospect after one ignored follow up"
    ],
    "compHead": "You eat what you",
    "compEm": "kill.",
    "compLead": "Commission only, paid per campaign you close, and it rises with the size of what you bring in. The bigger the brand you land, the bigger your share of it.",
    "compBig": "$6,000",
    "compBigSub": "one payment for a $100k campaign you sourced and closed",
    "compNote": "One payment per campaign, not a monthly split. Commission is released once the client's campaign budget is received. No ceiling, and no cap on how many campaigns you close in a month.",
    "table": [
      "Campaign budget you close",
      "Your commission",
      [
        [
          "Under $15,000",
          "3%"
        ],
        [
          "$15,000 – $49,999",
          "4%"
        ],
        [
          "$50,000 – $99,999",
          "5%"
        ],
        [
          "$100,000+",
          "6%"
        ]
      ]
    ],
    "cards": [
      [
        "Private channel with the founder",
        "Deal coaching, pricing calls and real time problem solving with the person who signs off on everything."
      ],
      [
        "Daily check in",
        "Pipeline review, blockers, what is hot and what is stuck. Ten minutes, every day."
      ]
    ],
    "applyUrl": "https://tally.so/r/2EGg2D?role=campaign-partnerships-lead"
  }
];

/* Founder card shown in the support section.
   Upload a square photo to the repo root as founder.jpg (600x600 is plenty). */
const FOUNDER = {
  name: "Nick",
  role: "Founder, Bounty Network",
  photo: "founder.jpg",
};
const PHONE = "+35796441020";

const Arrow = () => <span className="arrow">&rarr;</span>;

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href="/" className="brand"><span>Bounty Network</span></a>
        <div className="nav-links">
          <a href="/#how">How it works</a>
          <a href="/#trusted">Why BNTW</a>
          <a href="/#dashboard">For Brands</a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap foot-inner">
        <div className="left">
          <div className="brand"><span>Bounty Network</span></div>
          <span className="copy">© {new Date().getFullYear()} BNTW</span>
        </div>
        <div className="foot-links">
          <a href="/#how">How it works</a>
          <a href="/#trusted">Why BNTW</a>
          <a href="/#dashboard">For Brands</a>
          <span className="foot-divider">·</span>
          <a href={"tel:" + PHONE} className="foot-contact-link">Text us</a>
        </div>
      </div>
    </footer>
  );
}

function Apply({ href, label, big }) {
  return (
    <a className={"btn btn-accent" + (big ? " btn-lg" : "")} href={href || "#"}>
      <span className="dot" />{label || "Apply now"}<Arrow />
    </a>
  );
}

function useHash() {
  const [hash, setHash] = React.useState(window.location.hash.replace("#", ""));
  React.useEffect(() => {
    const on = () => { setHash(window.location.hash.replace("#", "")); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return hash;
}

/* ---------------- index ---------------- */
function Index() {
  return (
    <React.Fragment>
      <header className="careers-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Careers</div>
          <h1 className="h1">Build the future of <span className="accent-bg">advertising.</span></h1>
          <p className="lead">
            We turn short form content into a performance channel for ambitious brands.
            We're growing fast, and we're looking for people who want to own something outright.
          </p>
        </div>
      </header>

      <section className="section tight">
        <div className="wrap">
          <div className="roles-count">{ROLES.length} open positions</div>
          <div className="role-grid">
            {ROLES.map(r => (
              <a className="role-card" key={r.id} href={"#" + r.id}>
                <div className="role-card-top">
                  <span className="chip green">{r.tag}</span>
                  <span className="role-terms">{r.terms}</span>
                </div>
                <h3>{r.title}</h3>
                <p>{r.card}</p>
                <span className="role-view">View role <Arrow /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

    </React.Fragment>
  );
}

/* ---------------- role page ---------------- */
function RolePage({ role: r }) {
  return (
    <React.Fragment>

      <header className="rp-hero">
        <div className="wrap">
          <a className="rp-back" href="#">&larr; All roles</a>
          <div className="eyebrow"><span className="dotbox" />{r.tag}</div>
          <h1 className="h1">{r.heroA} <span className="accent-bg">{r.heroEm}</span> {r.heroB}</h1>
          <div className="rp-hero-foot">
            <div>
              <p className="lead">{r.heroLead}</p>
              <p className="rp-comp-line">{r.comp}</p>
            </div>
            <Apply href={r.applyUrl} big />
          </div>
        </div>
      </header>

      <div className="wrap">
        <div className="rp-stats">
          {r.stats.map(([n, label]) => (
            <div className="rp-stat" key={label}>
              <div className="rp-stat-n">{n}</div>
              <p>{label}</p>
            </div>
          ))}
        </div>
      </div>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />The role</div>
          <div className="kicker-row">
            <h2 className="h2">What you'll <span className="it">own.</span></h2>
            <p className="lead">{r.ownLead}</p>
          </div>
          <div style={{ height: 46 }} />
          {r.own.map(([title, body], i) => (
            <div className="rp-row" key={title}>
              <div className="rp-row-n">{String(i + 1).padStart(2, "0")}</div>
              <h3>{title}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Compensation</div>
          <div className="kicker-row">
            <h2 className="h2">{r.compHead} <span className="it">{r.compEm}</span></h2>
            <p className="lead">{r.compLead}</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="rp-comp-grid">
            <div>
              <div className="rp-big">{r.compBig}</div>
              <p className="rp-big-sub">{r.compBigSub}</p>
            </div>
            <p className="rp-comp-note">{r.compNote}</p>
          </div>
          {r.table && (
            <table className="rp-table">
              <thead><tr><th>{r.table[0]}</th><th>{r.table[1]}</th></tr></thead>
              <tbody>{r.table[2].map(([a, b]) => (<tr key={a}><td>{a}</td><td>{b}</td></tr>))}</tbody>
            </table>
          )}
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />The process</div>
          <div className="kicker-row">
            <h2 className="h2">From application to your first <span className="it">campaign.</span></h2>
            <p className="lead">{r.processLead}</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="rp-steps">
            {r.process.map(([title, body], i) => (
              <div className="rp-step" key={title}>
                <div className="rp-step-n">{String(i + 1).padStart(2, "0")}</div>
                <h3>{title}</h3>
                <p>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Your support system</div>
          <div className="kicker-row">
            <h2 className="h2">Direct line to <span className="it">the top.</span></h2>
            <p className="lead">You're not figuring things out alone. Daily contact with the person running the agency: feedback, coaching and real time problem solving.</p>
          </div>
          <div style={{ height: 46 }} />
          <div className="rp-cards">
            <div className="rp-card rp-card-founder">
              <div className="rp-founder-head">
                <img className="rp-founder-photo" src={FOUNDER.photo} alt={FOUNDER.name} />
                <div>
                  <h3>{FOUNDER.name}</h3>
                  <div className="rp-founder-role">{FOUNDER.role}</div>
                </div>
              </div>
              <p>{r.cards[0][1]}</p>
            </div>
            {r.cards.slice(1).map(([title, body]) => (
              <div className="rp-card" key={title}>
                <h3>{title}</h3>
                <p>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>


      <section className="rp-green">
        <div className="gs-bg">BNTW</div>
        <div className="wrap">
          <p className="headline">{r.gsA}<br /><em>{r.gsEm}</em><br />{r.gsB}</p>
          <p className="gs-sub">{r.gsSub}</p>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Before you apply</div>
          <div className="kicker-row">
            <h2 className="h2">Be honest with <span className="it">yourself.</span></h2>
            <p className="lead">This role isn't for everyone, and that's the point. Read both columns. If you can't say yes to all six on the left, it isn't the right fit.</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="rp-fit">
            <div className="rp-yes">
              <h3><span className="it">Yes</span> — this is for you</h3>
              <ul>{r.yes.map(t => (<li key={t}><span className="rp-mark">&#10003;</span><span>{t}</span></li>))}</ul>
            </div>
            <div className="rp-no">
              <h3><span className="it">No</span> — not for you if</h3>
              <ul>{r.no.map(t => (<li key={t}><span className="rp-mark">&times;</span><span>{t}</span></li>))}</ul>
            </div>
          </div>
        </div>
      </section>

      <section className="rp-cta">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Apply below</div>
          <h2 className="h2">Ready to take the <span className="it">seat?</span></h2>
          <p className="lead">We read every application ourselves. Tell us what you'd do and how you'd measure it.</p>
          <Apply href={r.applyUrl} label={"Apply for " + r.title} big />
        </div>
      </section>

    </React.Fragment>
  );
}

function Careers() {
  const hash = useHash();
  const role = ROLES.find(r => r.id === hash);

  React.useEffect(() => {
    const embed = new URLSearchParams(window.location.search).get("embed");
    if (embed) document.body.classList.add("is-embed");
  }, []);

  return (
    <React.Fragment>
      <Nav />
      {role ? <RolePage role={role} /> : <Index />}
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Careers />);
