/* global React, Icon, Button, Eyebrow, nav */
/* Careers page — content rendered VERBATIM from operator_job_description_v2.md
   and technician_job_description.md (public ad copy only). Do not edit posting
   copy here without updating the source .md files first. */
const { useState: useStateC, useEffect: useEffectC } = React;

function Pending({ children }) {
  return <mark className="pending">{children}</mark>;
}

function CopyRoleLink({ path }) {
  const [copied, setCopied] = useStateC(false);
  const copy = () => {
    const url = location.href.split("#")[0] + "#" + path;
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1800); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(url).then(done, done);
    } else { done(); }
  };
  return (
    <button type="button" className="copy-role-link" onClick={copy}>
      <Icon name={copied ? "check" : "link"} size={14} />
      {copied ? "Link copied" : "Copy link to this role"}
    </button>
  );
}

function scrollToId(id, offset = 76, behavior = "smooth") {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - offset, behavior });
}

function usePostingOpen(roleParam, id) {
  const [open, setOpen] = useStateC(() =>
    window.matchMedia("(min-width: 921px)").matches || roleParam === id
  );
  useEffectC(() => { if (roleParam === id) setOpen(true); }, [roleParam]);
  useEffectC(() => {
    const mq = window.matchMedia("(min-width: 921px)");
    const on = () => { if (mq.matches) setOpen(true); };
    mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); };
  }, []);
  return [open, setOpen];
}

function RoleCard({ title, oneLiner, facts, targetId }) {
  return (
    <article className="role-card">
      <h3>{title}</h3>
      <p className="one-liner">{oneLiner}</p>
      <ul className="facts">
        {facts.map((f, i) => <li key={i}><Icon name="check" size={15} />{f}</li>)}
      </ul>
      <Button kind="secondary" onClick={() => { nav("/careers/" + targetId); scrollToId(targetId); }}>
        Read the full posting <Icon name="arrow-right" size={15} />
      </Button>
    </article>
  );
}

function ValuesLine({ strong }) {
  const V = ({ children }) => strong ? <strong>{children}</strong> : <>{children}</>;
  return <><V>Be Humble, Take Ownership, Always Growing, Have Fun</V></>;
}

function Posting({ id, num, title, roleParam, children, firstSection }) {
  const [open, setOpen] = usePostingOpen(roleParam, id);
  return (
    <article className="posting" id={id}>
      <header className="posting-head">
        <span className="posting-num">POSTING {num} / 02</span>
        <h2>{title}</h2>
        <CopyRoleLink path={"/careers/" + id} />
      </header>
      {firstSection}
      <details className="posting-more" open={open} onToggle={(e) => setOpen(e.target.open)}>
        <summary><span>{open ? "Collapse posting" : "Read the full posting"}</span><Icon name={open ? "minus" : "plus"} size={16} /></summary>
        <div className="posting-body">{children}</div>
      </details>
      <div className="posting-apply-hint">
        <Button kind="primary" onClick={() => scrollToId("apply")}>How to apply <Icon name="chevron-right" size={15} style={{ transform: "rotate(90deg)" }} /></Button>
      </div>
    </article>
  );
}

function ApplyBlock() {
  const [role, setRole] = useStateC("gm");
  return (
    <section className="apply-block" id="apply">
      <h2>How to apply</h2>
      <p className="apply-lede">
        Submit your resume and a note on how you align with our core values: <ValuesLine strong />.
        GM candidates: include a cover letter detailing your relevant experience.
        Technician candidates: a summary of your experience works too, and a few photos of your work if you have them.
      </p>
      <div className="apply-toggle" role="group" aria-label="Apply for">
        <span className="lbl">Apply for:</span>
        <button type="button" className={"apply-pill" + (role === "gm" ? " is-active" : "")} onClick={() => setRole("gm")}>General Manager</button>
        <button type="button" className={"apply-pill" + (role === "tech" ? " is-active" : "")} onClick={() => setRole("tech")}>Technician</button>
      </div>
      <div className="apply-cta">
        <a
          className="btn btn-action btn-lg is-pending"
          href="#/careers"
          onClick={(e) => e.preventDefault()}
          title="Application contact is pending. Replace this button's link before launch."
        >
          Apply · <Pending>[contact / link pending]</Pending>
        </a>
        <p className="apply-note">
          <Pending>[Apply to: contact / link pending. Entity the ad runs under: pending Mike Ferrin.]</Pending>
          {" "}Suggested subject line: <code>{role === "gm" ? "Application: General Manager / Brand Leader" : "Application: Drywall Patch & Paint Technician"}</code>
        </p>
      </div>
    </section>
  );
}

function CareersPage({ role: roleParam }) {
  useEffectC(() => {
    if (!roleParam) return;
    const t = setTimeout(() => scrollToId(roleParam, 76, "auto"), 60);
    return () => clearTimeout(t);
  }, [roleParam]);

  return (
    <div data-screen-label="Careers">
      {/* ── Page header ── */}
      <div className="page-header">
        <div className="container">
          <div className="crumbs"><a onClick={(e) => { e.preventDefault(); nav("/"); }} href="#/">Home</a> / Careers</div>
          <h1>We're hiring the founding team.</h1>
          <p className="lede">
            Patch Perfect, an Uncommon Trades Group company, is a new drywall patch, paint, and repair company
            on a mission to disrupt the home services industry by delivering professional, clean, and
            affordable solutions. Two roles are open.
          </p>
        </div>
      </div>

      {/* ── Values strip ── */}
      <div className="values-strip" aria-label="Core values">
        <div className="container">
          <span>Be Humble</span><span className="dot">·</span>
          <span>Take Ownership</span><span className="dot">·</span>
          <span>Always Growing</span><span className="dot">·</span>
          <span>Have Fun</span>
        </div>
      </div>

      {/* ── Role chooser ── */}
      <section className="section" id="roles">
        <div className="container">
          <div className="role-chooser">
            <RoleCard
              title="General Manager / Brand Leader"
              oneLiner="Run the business. Lead sales and production. Get paid on the value you create."
              facts={[
                "Own sales and production: close inbound leads, get quality work out the door",
                "Competitive base salary plus performance pay / profit sharing",
                "Executive team handles marketing, finance, vision, and we'll teach you the P&L",
                "Founding brand leader of a new company",
              ]}
              targetId="general-manager"
            />
            <RoleCard
              title="Patch & Paint Technician"
              oneLiner="Do the craft. We bring the customers. Your name on work you're proud of."
              facts={[
                "A full schedule of work: no chasing leads, no bidding wars, no paperwork burden",
                "Performance pay tied to quality and customer satisfaction",
                "Founding technician: you set the quality standard",
                "Real growth: lead technician, trainer, or field supervisor as the team builds out",
              ]}
              targetId="technician"
            />
          </div>
        </div>
      </section>

      {/* ── Sticky in-page nav (sticks once scrolled past the chooser) ── */}
      <nav className="careers-subnav" aria-label="On this page">
        <button type="button" onClick={() => scrollToId("general-manager")}>General Manager</button>
        <button type="button" onClick={() => scrollToId("technician")}>Technician</button>
        <button type="button" className="is-apply" onClick={() => scrollToId("apply")}>Apply</button>
      </nav>

      {/* ── Full posting: GM ── */}
      <section className="section section--plaster">
        <div className="container-narrow">
          <Posting
            id="general-manager" num="01" roleParam={roleParam}
            title="General Manager / Brand Leader (drywall, paint & repair)"
            firstSection={
              <div className="posting-body">
                <h3>Background on Uncommon Trades Group</h3>
                <p>At Uncommon Trades Group, we believe in more than just providing exceptional home services; we are driven by a set of core values that define who we are and how we operate. Our values of <strong>Be Humble, Take Ownership, Always Growing, and Have Fun</strong> are the foundation of our company culture. We are on a mission to disrupt the home services industry by delivering professional, clean, and affordable solutions to our customers. If you're passionate about making a positive impact and are ready to join a dynamic team, then we want to hear from you.</p>
                <p>Uncommon is launching a <strong>NEW drywall, paint, and repair company</strong> and looking for a <strong>General Manager</strong> to run it. Looking for an opportunity to be a brand leader and disrupt an industry that nobody has bothered to do right? Sick of the status quo and poor leadership where you're at currently? Ready to be paid well based on the value you create? If so, then apply here.</p>
              </div>
            }
          >
            <h3>Position Overview</h3>
            <p>As the General Manager of our new drywall and paint repair brand, you will play a crucial role in leading our team toward excellence. You will <strong>own sales and production</strong>, closing the inbound leads that come to us and making sure the work gets produced clean and on time. You'll address customer-service issues, manage the training and onboarding of your production staff, participate in weekly leadership meetings, and lead the daily and weekly sales and production meetings. Your primary goal is to optimize profitability while upholding our commitment to delivering top-notch repair services.</p>
            <p>You will be supported by an executive leadership team that handles marketing, finance, vision, and company-wide KPIs, so you can focus on what you do best: running a great sales and production operation. <strong>We will teach you how to read the P&amp;L and drive the numbers that matter.</strong> You don't need a finance or marketing background. You need to know how to lead people and get quality work out the door.</p>
            <h3>Key Responsibilities</h3>
            <h4>Sales &amp; Production Oversight</h4>
            <ul>
              <li>Manage and optimize the sales and production processes to ensure efficiency and quality.</li>
              <li>Close the inbound leads and hit, then exceed, sales targets with your team.</li>
              <li>Monitor production schedules and ensure jobs are completed on time and to standard.</li>
            </ul>
            <h4>Customer Service Excellence</h4>
            <ul>
              <li>Address customer concerns and resolve issues promptly to maintain high satisfaction.</li>
              <li>Foster a customer-centric culture across the team.</li>
            </ul>
            <h4>Staff Training &amp; Onboarding</h4>
            <ul>
              <li>Develop and run training so your production staff have the skills and standards they need.</li>
              <li>Own the onboarding of new team members.</li>
            </ul>
            <h4>Leadership &amp; Collaboration</h4>
            <ul>
              <li>Attend weekly leadership meetings; bring insight from the front line into decisions.</li>
              <li>Lead daily and weekly sales and production meetings to align the team's goals and priorities.</li>
            </ul>
            <h4>Profitability</h4>
            <ul>
              <li>Work the numbers with the leadership team's support to maximize profitability (we'll teach you the P&amp;L).</li>
              <li>Identify cost-saving opportunities and efficiencies in the business.</li>
            </ul>
            <h3>Qualifications</h3>
            <ul>
              <li><strong>Proven experience leading a sales and production team</strong> in the home-services or trades industry. This is the core of the role.</li>
              <li>Hands-on understanding of a service trade (drywall, paint, and finish work a strong plus; other trades welcome; we can teach the craft specifics, we can't teach how to run people).</li>
              <li>Strong organizational and communication skills.</li>
              <li>Ability to lead and manage a team to hit goals.</li>
              <li>Excellent problem-solving and a real commitment to results.</li>
              <li>Customer-focused mindset.</li>
              <li>The drive to build something and run it like it's your own.</li>
            </ul>
            <h3>What We Offer</h3>
            <ul>
              <li><strong>Competitive base salary plus performance pay / profit sharing</strong>, because you'll be managing all aspects of this business, you'll share in the profit you help create.</li>
              <li>Opportunity for equity participation over time, through a vesting agreement, for the right individual who proves it out.</li>
              <li>Opportunities for career advancement within a growing company.</li>
              <li>A supportive, collaborative leadership team behind you.</li>
              <li>Ongoing training and professional development.</li>
              <li>The chance to be a founding brand leader in a company out to do home-services right.</li>
            </ul>
            <p>If you're ready to embrace our core values, lead with passion, and help us deliver exceptional service, we encourage you to apply. To apply, please submit your resume and a cover letter detailing your relevant experience and how you align with our core values: <ValuesLine strong />. We look forward to welcoming a new leader to our team.</p>
            <p className="apply-line"><em><Pending>[Apply to: contact / link pending. Entity the ad runs under: pending Mike Ferrin.]</Pending></em></p>
          </Posting>
        </div>
      </section>

      {/* ── Full posting: Technician ── */}
      <section className="section">
        <div className="container-narrow">
          <Posting
            id="technician" num="02" roleParam={roleParam}
            title="Drywall Patch & Paint Technician (founding technician)"
            firstSection={
              <div className="posting-body">
                <h3>Background on Uncommon Trades Group</h3>
                <p>At Uncommon Trades Group, we believe in more than just providing exceptional home services; we are driven by a set of core values that define who we are and how we operate. Our values of <strong>Be Humble, Take Ownership, Always Growing, and Have Fun</strong> are the foundation of our company culture. We are on a mission to disrupt the home services industry by delivering professional, clean, and affordable solutions to our customers. If you're passionate about making a positive impact and are ready to join a dynamic team, then we want to hear from you.</p>
                <p>Uncommon is launching a <strong>NEW drywall patch, paint, and repair company</strong> and looking for a <strong>skilled Patch &amp; Paint Technician</strong> to be our founding technician. Tired of being treated like interchangeable labor by contractors who don't care about the work? Sick of chasing your own leads and paperwork just to stay busy? Want your name on work you're proud of, with a steady schedule of jobs handed to you? If so, then apply here.</p>
              </div>
            }
          >
            <h3>Position Overview</h3>
            <p>As our Patch &amp; Paint Technician, you are the craft of this company. You will complete drywall patch, texture-match, paint, and light-trim repair jobs in customers' homes: clean, on time, and done right the first time. We handle the marketing, the scheduling, and the customer pipeline; <strong>you show up to a full calendar of work and make customers glad they called us.</strong> You'll be the face of the brand in the home, so professionalism and respect for the customer's space matter as much as the finish work.</p>
            <p>You will be supported by a leadership team that handles marketing, sales, scheduling, and the business side, so you can focus on what you do best: producing excellent repair work. As the founding technician of a growing brand, you'll help set the quality standard everyone hired after you will be trained to.</p>
            <h3>Key Responsibilities</h3>
            <h4>Craftsmanship</h4>
            <ul>
              <li>Complete drywall patch and repair jobs: cut-outs, holes, cracks, water-damage repairs, texture matching, and finish work.</li>
              <li>Paint and blend repairs to match existing walls and ceilings; light trim repair and touch-up as needed.</li>
              <li>Deliver work that's done right the first time. Callbacks are the enemy.</li>
            </ul>
            <h4>Customer Experience</h4>
            <ul>
              <li>Show up on time, in uniform, and communicate clearly with the homeowner.</li>
              <li>Protect and respect the customer's home: clean prep, clean work, spotless walk-away.</li>
              <li>Walk the customer through the completed work and make sure they're thrilled before you leave.</li>
            </ul>
            <h4>Job Execution &amp; Reporting</h4>
            <ul>
              <li>Manage your daily route and job schedule; complete jobs within estimated times.</li>
              <li>Document jobs with photos and notes; flag scope changes before doing extra work.</li>
              <li>Maintain your vehicle, tools, and materials inventory.</li>
            </ul>
            <h4>Building the Standard</h4>
            <ul>
              <li>As the founding technician, help refine how we estimate, scope, and produce this kind of work.</li>
              <li>Help train and mentor technicians we hire after you as the team grows.</li>
            </ul>
            <h3>Qualifications</h3>
            <ul>
              <li><strong>Proven hands-on experience in drywall repair and finish work</strong>: patching, taping, mudding, sanding, and texture matching are the core of this role.</li>
              <li>Interior painting experience with color/sheen matching and clean cut-in work.</li>
              <li>Light carpentry/trim repair skills a plus.</li>
              <li>Able to work independently in customers' homes with professionalism and integrity.</li>
              <li>Strong communication skills. You'll talk to homeowners every day.</li>
              <li>Valid driver's license and a clean driving record.</li>
              <li>Able to meet the physical requirements of the trade: lifting and carrying materials <Pending>[e.g., up to 50 lbs]</Pending>, working on ladders, and standing/kneeling for extended periods.</li>
              <li>Pride in your work and a real commitment to quality.</li>
            </ul>
            <h3>What We Offer</h3>
            <ul>
              <li><strong><Pending>[Competitive hourly wage / compensation structure pending]</Pending></strong> with performance pay tied to quality and customer satisfaction, because when your work makes customers rave, you should share in that.</li>
              <li>A full schedule of work: we bring the customers, you do the craft. No chasing leads, no bidding wars, no paperwork burden.</li>
              <li>Company <Pending>[van/vehicle arrangement pending]</Pending>, tools/materials program <Pending>[pending]</Pending>, and a leadership team that has your back.</li>
              <li>Real growth as the company grows: founding technician today; lead technician, trainer, or field supervisor as the team builds out.</li>
              <li>Ongoing training and professional development.</li>
              <li>The chance to set the quality bar for a company out to do home-services right.</li>
            </ul>
            <p>If you're ready to embrace our core values, take pride in your craft, and help us deliver exceptional service, we encourage you to apply. To apply, please submit your resume (or a summary of your experience) and a few photos of your work if you have them, along with a note on how you align with our core values: <ValuesLine strong />. We look forward to welcoming you to our team.</p>
            <p className="apply-line"><em><Pending>[Apply to: contact / link pending. Entity the ad runs under: pending Mike Ferrin.]</Pending></em></p>
          </Posting>
        </div>
      </section>

      {/* ── Shared apply block ── */}
      <section className="section section--plaster">
        <div className="container-narrow">
          <ApplyBlock />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CareersPage });