/* global React */

/* ============================================================
   Product UI mocks — placeholders in the brand language.
   Used in the hero (Resume Review), How-it-works steps,
   and Tools-in-depth cards.
   ============================================================ */

function BrowserChrome({ url, children, compact }) {
  return (
    <div className={`mock-frame${compact ? " mock-frame--compact" : ""}`}>
      <div className="mock-titlebar">
        <span className="mock-dot mock-dot--r"></span>
        <span className="mock-dot mock-dot--y"></span>
        <span className="mock-dot mock-dot--g"></span>
        <span className="mock-url">{url}</span>
      </div>
      <div className="mock-body">{children}</div>
    </div>
  );
}

/* --- Resume Review ---------------------------------------- */
function MockResumeReview() {
  return (
    <BrowserChrome url="coachmantis.com / kits / stripe · resume review">
      <div className="rr">
        <div className="rr-head">
          <div className="rr-crumb">
            <span>Stripe</span><span className="rr-sep">·</span><span>Sr. Product Designer</span>
          </div>
          <div className="rr-tabs">
            <span className="rr-tab is-active">Fit Score</span>
            <span className="rr-tab">Strengths</span>
            <span className="rr-tab">Gaps</span>
            <span className="rr-tab">Rewrites</span>
          </div>
        </div>

        <div className="rr-score-row">
          <div className="rr-score-card">
            <span className="rr-score-eyebrow">Rubric fit score</span>
            <div className="rr-score-num"><span>87</span><small>/100</small></div>
            <div className="rr-score-bar"><span style={{width: "87%"}}></span></div>
            <p className="rr-score-note">Strong match on craft and outcomes. Sharpen evidence of ambiguity and stakeholder breadth.</p>
          </div>
          <div className="rr-pill-stack">
            <div className="rr-pill rr-pill--ok"><span className="rr-pill-dot"></span>Outcomes-led writing</div>
            <div className="rr-pill rr-pill--ok"><span className="rr-pill-dot"></span>Craft signals strong</div>
            <div className="rr-pill rr-pill--warn"><span className="rr-pill-dot"></span>Add scale (org, users)</div>
            <div className="rr-pill rr-pill--warn"><span className="rr-pill-dot"></span>Frame the ambiguity</div>
          </div>
        </div>

        <div className="rr-rewrite">
          <div className="rr-rewrite-label">Suggested rewrite · bullet 3</div>
          <div className="rr-rewrite-grid">
            <div className="rr-before">
              <span className="rr-mini">Yours</span>
              <p>Led design on a new onboarding flow that helped many new users get set up.</p>
            </div>
            <div className="rr-after">
              <span className="rr-mini">Tailored</span>
              <p>Designed the onboarding flow that <em>cut activation time from 9 to 4 days</em> for 40k seats, partnering with PM &amp; ML across <em>three orgs</em>.</p>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

/* --- Company Intel ---------------------------------------- */
function MockCompanyIntel() {
  return (
    <BrowserChrome url="coachmantis.com / kits / stripe · company intel">
      <div className="ci">
        <div className="ci-head">
          <span className="ci-org">Stripe</span>
          <span className="ci-tag">Briefed · fresh</span>
        </div>
        <div className="ci-cards">
          <div className="ci-card"><span className="ci-mini">Overview</span><h5>Internet payments infrastructure — APIs, billing, terminal, and a growing platform stack.</h5></div>
          <div className="ci-card"><span className="ci-mini">Culture</span><h5>Writing-heavy, craft-led; product design partners closely with engineering and PMM.</h5></div>
          <div className="ci-card"><span className="ci-mini">Recent moves</span><h5>Embedded finance push. New billing primitives. Pricing simplification across SMB.</h5></div>
          <div className="ci-card"><span className="ci-mini">Smart questions</span><h5>How is design organized around platform vs. vertical surfaces?</h5></div>
          <div className="ci-card"><span className="ci-mini">Competitive</span><h5>Adyen · Block · Checkout.com · PayPal Braintree.</h5></div>
        </div>
        <div className="ci-followups">
          <span className="ci-mini">Tap to ask</span>
          <div className="ci-chips">
            <span className="ci-chip">Who's leading product design?</span>
            <span className="ci-chip">How is the design org structured?</span>
            <span className="ci-chip">What ships in Q3?</span>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

/* --- Interview Prep --------------------------------------- */
function MockInterviewPrep() {
  return (
    <BrowserChrome url="coachmantis.com / kits / stripe · interview prep">
      <div className="ip">
        <div className="ip-head">
          <div className="ip-persona">
            <span className="ip-avatar">JA</span>
            <span>
              <strong>Jordan A.</strong>
              <small>Hiring Manager · calibrated from LinkedIn</small>
            </span>
          </div>
          <div className="ip-phase">Round 2 · Hiring Manager</div>
        </div>
        <div className="ip-chat">
          <div className="ip-bubble ip-bubble--them">
            Tell me about a moment you owned a decision that didn't have a clear right answer.
          </div>
          <div className="ip-bubble ip-bubble--me">
            We had to ship a partial onboarding to hit a launch date — I argued for the safer, smaller scope and laid out the tradeoffs to engineering and PM…
          </div>
          <div className="ip-grade">
            <span className="ip-grade-eyebrow">Per-answer grading · 6-category rubric</span>
            <div className="ip-grade-rows">
              <div className="ip-grade-row"><span>Structure</span><span className="ip-bar"><i style={{width: "82%"}}></i></span><span className="ip-grade-val">4.1</span></div>
              <div className="ip-grade-row"><span>Specificity</span><span className="ip-bar"><i style={{width: "62%"}}></i></span><span className="ip-grade-val">3.1</span></div>
              <div className="ip-grade-row"><span>Outcomes</span><span className="ip-bar"><i style={{width: "70%"}}></i></span><span className="ip-grade-val">3.5</span></div>
              <div className="ip-grade-row"><span>Ownership</span><span className="ip-bar"><i style={{width: "88%"}}></i></span><span className="ip-grade-val">4.4</span></div>
            </div>
            <div className="ip-grade-actions">
              <span className="ip-action ip-action--primary">Re-answer</span>
              <span className="ip-action">Next question →</span>
            </div>
          </div>
        </div>
      </div>
    </BrowserChrome>
  );
}

/* --- Kit picker (Create a Kit) ---------------------------- */
function MockKitPicker() {
  return (
    <BrowserChrome url="coachmantis.com / kits / new">
      <div className="kp">
        <span className="kp-step">Step 1 of 3 · Create a kit</span>
        <h5 className="kp-title">Pick a company &amp; role.</h5>
        <div className="kp-field">
          <span className="kp-label">Company</span>
          <div className="kp-input">
            <span className="kp-input-mono">Stripe</span>
            <span className="kp-input-caret"></span>
          </div>
        </div>
        <div className="kp-field">
          <span className="kp-label">Target role</span>
          <div className="kp-input">
            <span className="kp-input-mono">Sr. Product Designer</span>
          </div>
        </div>
        <div className="kp-field">
          <span className="kp-label">Resume snapshot</span>
          <div className="kp-drop">
            <span className="kp-drop-icon">↑</span>
            <span><strong>Drop your resume</strong> · we'll snapshot it so future edits don't corrupt past prep.</span>
          </div>
        </div>
        <div className="kp-actions">
          <span className="kp-btn kp-btn--primary">Create kit</span>
          <span className="kp-btn">Skip for now</span>
        </div>
      </div>
    </BrowserChrome>
  );
}

/* expose for HTML mounting */
window.MockResumeReview = MockResumeReview;
window.MockCompanyIntel = MockCompanyIntel;
window.MockInterviewPrep = MockInterviewPrep;
window.MockKitPicker = MockKitPicker;
window.BrowserChrome = BrowserChrome;