/* ========================================================================
   Mobile companion — dedicated page (mobile.html renders these components).
   Copy follows the marketing brief guardrails: Willie only (never the
   underlying model/vendor), "installable" not "app-store", every Willie
   action paired with the human review/approve step, and only what ships
   today. Screenshots use fictional sample data (APEX Wealth, etc.).
   ======================================================================== */

// Reusable phone frame — WebP with PNG fallback. `shot` is the basename
// in assets/mobile/. Screenshots already include the iOS status bar, so
// the frame is a clean bezel with no notch.
function MobPhone({ shot, alt, eager }) {
  return (
    <div className="gk-phone">
      <div className="gk-phone-screen">
        <picture>
          <source srcSet={`assets/mobile/${shot}.webp`} type="image/webp" />
          <img
            src={`assets/mobile/${shot}.png`}
            alt={alt}
            width="720"
            height="1561"
            loading={eager ? 'eager' : 'lazy'}
            fetchpriority={eager ? 'high' : undefined}
            decoding="async"
          />
        </picture>
      </div>
    </div>
  );
}

/* ====== HERO ====== */
function MobHero() {
  return (
    <header className="mk-section mob-hero" data-screen-label="Mobile · Hero" id="top">
      <div className="mk-container">
        <div className="mob-hero-grid">
          <div className="mob-hero-l">
            <span className="mmb-new"><span className="dot"></span>New · Mobile companion</span>
            <h1 className="mob-hero-h">
              Your projects. <span className="alt">In your pocket.</span>
            </h1>
            <p className="mob-hero-sub">
              Run your engagements from your phone — see what needs you, approve decisions, capture work, and ask Willie for help, all from a project workspace that lives in your pocket. The same Groundskeeper your team already uses, rebuilt for the moments between meetings.
            </p>
            <div className="mob-hero-cta">
              <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="mobile_hero_request_access">Request early access</a>
              <a className="mk-btn mk-btn-secondary mk-btn-lg" href="#features" data-cta="mobile_hero_see_features">See what it does</a>
            </div>
            <p className="mob-hero-note">
              <MkIcon name="check" size={15} color="var(--moss)" />
              Installs from your browser to your home screen — no app store, no download.
            </p>
          </div>
          <div className="mob-hero-r">
            <MobPhone shot="inbox" alt="Groundskeeper mobile inbox showing a task and a decision waiting on you" eager />
          </div>
        </div>
      </div>
    </header>
  );
}

/* ====== FEATURE ROWS ====== */
// Big, screenshot-led blocks for the three things people do most. Each pairs
// a real screen with a benefit-first headline and the capability beneath it.
const MOB_ROWS = [
  {
    shot: 'inbox',
    alt: 'Project inbox: a prioritized list of items waiting on you',
    eyebrow: 'The inbox',
    h: 'Open a project, see exactly what needs you.',
    p: 'Land on a clean, prioritized list of the items waiting on you right now — decisions to approve, tasks to act on, updates to acknowledge. No hunting, no noise.',
    note: 'Turn five spare minutes between meetings into real progress.',
  },
  {
    shot: 'decision-approve',
    alt: 'Decision detail with Approve and Reject, status, and rationale',
    eyebrow: 'Approve on the go',
    h: 'Approve and update from anywhere.',
    p: 'Tap any record to view it and act — approve or reject a decision, mark a task complete, or edit a due date or owner inline. Every status change captures a short note, so the reasoning travels with the work.',
    note: 'Decisions don’t wait for you to get back to your desk — and the record stays clean and defensible.',
    flip: true,
  },
  {
    shot: 'willie-proposal',
    alt: 'Willie chat with a "Review 1 proposed change" bar before anything is saved',
    eyebrow: 'Willie, on call',
    h: 'Ask Willie. You approve what it proposes.',
    p: 'Chat with Willie, your project’s AI project manager, about anything in the engagement — a status recap, a draft follow-up, a second read on a decision. When Willie suggests concrete changes, they appear as proposed changes you review and approve before anything is saved.',
    note: 'A project manager that does the busywork — while you keep final say on everything that touches the record.',
  },
];

function MobRows() {
  return (
    <section className="mk-section" id="features" data-screen-label="Mobile · Features">
      <div className="mk-container">
        <div className="fp-cats-head" style={{marginBottom: '8px'}}>
          <MkEyebrow num="01">What it does</MkEyebrow>
          <h2 className="mk-h2">
            Not a view-only mobile site. <span className="alt">A working tool.</span>
          </h2>
          <p className="mk-prose fp-cats-lede">
            Move real work forward from your phone — approve a decision, mark a task complete, hand a question to Willie. Built project-first and action-first, for quick moments between meetings.
          </p>
        </div>

        <div className="mob-rows" style={{marginTop: '64px'}}>
          {MOB_ROWS.map((r, i) => (
            <div className={`mob-row${r.flip ? ' flip' : ''}`} key={i}>
              <div className="mob-row-media">
                <MobPhone shot={r.shot} alt={r.alt} />
              </div>
              <div className="mob-row-body">
                <span className="mob-row-eyebrow"><span className="rule"></span>{r.eyebrow}</span>
                <h3 className="mob-row-h">{r.h}</h3>
                <p className="mob-row-p">{r.p}</p>
                <p className="mob-row-note">{r.note}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== MORE CAPABILITIES (text grid — no screenshots) ====== */
// Things that ship today but aren't broken out into a full screenshot row.
// Kept factual and within the guardrails (no push, no offline, no scanner).
const MOB_MORE = [
  { icon: 'feed',  h: 'Files, wherever you are', p: 'Browse, open, download, and upload files straight from your phone — a photo of a whiteboard, a signed doc, a screenshot. It lands in the project where your whole team can find it.' },
  { icon: 'plus',  h: 'Quick-add in one tap', p: 'A single tap on the center ＋ drops a new task or comment into the project. Catch the hallway follow-up before it slips.' },
  { icon: 'arrow', h: 'Installs in seconds', p: 'Add Groundskeeper to your home screen and it launches full-screen with its own icon — the convenience of an app, delivered through your browser. Send a link, tap “Add to Home Screen,” done.' },
];

function MobMore() {
  return (
    <section className="mk-section" data-screen-label="Mobile · More" style={{paddingTop: '0'}}>
      <div className="mk-container">
        <div className="fp-feat-grid">
          {MOB_MORE.map((f, i) => (
            <div className="fp-feat" key={i}>
              <div className="fp-feat-icon"><MkIcon name={f.icon} size={16} color="var(--moss)" /></div>
              <div className="fp-feat-text">
                <div className="fp-feat-name">{f.h}</div>
                <div className="fp-feat-desc">{f.p}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== VALUE PILLARS ====== */
const MOB_PILLARS = [
  { ix: '01', h: 'Momentum', p: 'Projects stall in the gaps between meetings. The companion turns those gaps into progress — approvals, updates, and capture happen in the moment, not the backlog.' },
  { ix: '02', h: 'Control with less effort', p: 'Willie and quick-add remove the busywork, but every change that touches the record is reviewed and noted by a human. You move faster and keep a clean, auditable trail.' },
  { ix: '03', h: 'Everyone on the same page', p: 'One secure workspace for your team and your clients, scoped automatically so each person sees just their part of the engagement.' },
];

function MobPillars() {
  return (
    <section className="mk-section" data-screen-label="Mobile · Why it matters">
      <div className="mk-container">
        <div className="fp-cats-head">
          <MkEyebrow num="02">Why it matters</MkEyebrow>
          <h2 className="mk-h2">Three reasons it earns a place on every phone.</h2>
        </div>
        <div className="mob-pillars">
          {MOB_PILLARS.map((p, i) => (
            <div className="mob-pillar" key={i}>
              <div className="mob-pillar-ix">{p.ix}</div>
              <div className="mob-pillar-h">{p.h}</div>
              <div className="mob-pillar-p">{p.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== GALLERY ====== */
const MOB_GALLERY = [
  { shot: 'inbox',           alt: 'Project inbox with a task and a decision' },
  { shot: 'decision-approve', alt: 'Decision detail with approve and reject actions' },
  { shot: 'willie-proposal', alt: 'Willie chat with a proposed change to review' },
  { shot: 'task-detail',     alt: 'Task detail with mark complete, due date, and assignee' },
  { shot: 'tasks',           alt: 'Task list for a project' },
  { shot: 'willie-sessions', alt: 'Willie session history for a project' },
];

function MobGallery() {
  return (
    <section className="mk-section" data-screen-label="Mobile · Gallery">
      <div className="mk-container">
        <div className="fp-cats-head">
          <MkEyebrow num="03">See it</MkEyebrow>
          <h2 className="mk-h2">The whole engagement, one tap away.</h2>
          <p className="mk-prose fp-cats-lede">Sample project shown with fictional data.</p>
        </div>
        <div className="mob-gallery">
          {MOB_GALLERY.map((g, i) => (
            <div className="mob-gallery-item" key={i}>
              <MobPhone shot={g.shot} alt={g.alt} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== CTA ====== */
function MobCta() {
  return (
    <section className="fp-cta-section" data-screen-label="Mobile · CTA">
      <div className="mk-container">
        <div className="fp-cta-inner">
          <h2 className="fp-cta-h">
            Run your projects <span className="alt">from your pocket.</span>
          </h2>
          <p className="fp-cta-sub">
            The mobile companion is included with every Groundskeeper plan — no extra charge, no separate download. Add it to your home screen and pick up the engagement wherever you are.
          </p>
          <div className="fp-cta-row">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="mobile_page_request_access">Request early access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="pricing.html" data-cta="mobile_page_see_pricing">See pricing</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MobHero, MobRows, MobMore, MobPillars, MobGallery, MobCta });