// willie.jsx — Willie page (May 2026)
// Frame: Willie is the PM who does the work. You chat with her like an actual PM
// when you need to make decisions. She gathers, drafts, recommends — you decide.

/* ====== HERO ====== */
function WpHero() {
  return (
    <header className="wp-hero" data-screen-label="Willie · Hero" id="top">
      <div className="mk-container">
        <div className="wp-hero-grid">
          <div className="wp-hero-l">
            <div className="wp-hero-eyebrow">
              <span className="dot"></span>
              <span>Meet Willie</span>
              <span className="sep">·</span>
              <span>Your project manager</span>
            </div>
            <h1>
              A project manager <span className="alt">you actually want to chat with.</span>
            </h1>
            <p className="sub">
              Willie reads everything, builds the plan, monitors the engagement, drafts the updates — and surfaces the calls that need your judgment. Talk to her the way you'd talk to a senior PM you trusted. She gathers the context. <strong>You make the call.</strong>
            </p>
            <div className="wp-hero-bullets">
              <div className="wp-hero-b">
                <div className="wp-hero-b-num">01</div>
                <div className="wp-hero-b-t">She gathers, you direct.</div>
              </div>
              <div className="wp-hero-b">
                <div className="wp-hero-b-num">02</div>
                <div className="wp-hero-b-t">She drafts, you decide.</div>
              </div>
              <div className="wp-hero-b">
                <div className="wp-hero-b-num">03</div>
                <div className="wp-hero-b-t">She watches, you act.</div>
              </div>
            </div>
            <div className="wp-hero-cta">
              <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="willie_hero_hire_willie">Hire Willie</a>
              <a className="mk-btn mk-btn-secondary mk-btn-lg" href="#chat" data-cta="willie_hero_see_at_work">See her at work</a>
            </div>
          </div>

          <div className="wp-hero-r">
            <div className="wp-card">
              <div className="wp-card-stamp">
                <WilliePortrait size={140} ring={false} />
              </div>
              <div className="wp-card-name">
                <WillieSignature width={150} color="var(--moss)" />
              </div>
              <div className="wp-card-role">Project Manager · Groundskeeper</div>
              <ul className="wp-card-meta">
                <li><span className="k">Reports to</span><span className="v">You</span></li>
                <li><span className="k">Hours</span><span className="v">Always reading</span></li>
                <li><span className="k">Style</span><span className="v">Quiet, considered</span></li>
                <li><span className="k">Decisions</span><span className="v">Surfaces — yours to make</span></li>
                <li><span className="k">Out of office</span><span className="v">Never</span></li>
              </ul>
              <div className="wp-card-foot">
                <em>"You make the calls. Willie does the work."</em>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ====== RELATIONSHIP — She / You ====== */
const RELATIONSHIP = [
  {
    she: 'Reads every document, transcript, and note',
    you: 'Decide what to do about what she found',
    note: 'A 47-minute kickoff becomes a structured plan in about three minutes. You review and adjust — you don\'t type.',
  },
  {
    she: 'Drafts the weekly status, the decision rationale, the client update',
    you: 'Edit one line and send — or rewrite if she missed the point',
    note: 'Drafts come with citations to the sources behind every claim. You see the receipts before the message goes out.',
  },
  {
    she: 'Tracks the parking lot, the open decisions, the unanswered questions',
    you: 'Get a briefing when you ask — never a notification stream',
    note: 'No real-time pings. Willie holds the open items and surfaces them at your next session, in priority order.',
  },
  {
    she: 'Notices what is repeated, what diverged, what didn\'t get resolved',
    you: 'Hear the patterns before they become problems',
    note: 'The way a thoughtful colleague would catch on a careful reread. Surfaced as observations, not alarms.',
  },
];

function WpRelationship() {
  return (
    <section className="wp-rel-section" data-screen-label="Willie · Relationship">
      <div className="mk-container">
        <div className="wp-rel-head">
          <MkEyebrow num="01">The working relationship</MkEyebrow>
          <h2 className="mk-h2">
            She does the work. <span className="alt">You do the judging.</span>
          </h2>
          <p className="mk-prose wp-rel-lede">
            Most PM tools ask you to be the data-entry clerk and call themselves your assistant. Willie inverts that. She does the parts of project management that are mostly admin and mostly invisible — and hands you the parts that need your judgment.
          </p>
        </div>

        <div className="wp-rel-table">
          <div className="wp-rel-thead">
            <div className="wp-rel-col-she">What Willie does</div>
            <div className="wp-rel-col-mid" aria-hidden="true"></div>
            <div className="wp-rel-col-you">What you do</div>
          </div>
          {RELATIONSHIP.map((r, i) => (
            <div className="wp-rel-trow" key={i}>
              <div className="wp-rel-col-she">
                <div className="wp-rel-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="wp-rel-text">{r.she}</div>
              </div>
              <div className="wp-rel-col-mid" aria-hidden="true">
                <svg width="36" height="14" viewBox="0 0 36 14" fill="none">
                  <path d="M0 7 H 26 M 22 2 L 28 7 L 22 12" stroke="var(--moss)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div className="wp-rel-col-you">
                <div className="wp-rel-text">{r.you}</div>
              </div>
              <div className="wp-rel-trow-note">{r.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WpHero, WpRelationship });

/* ====== CHAT VIGNETTE — the centerpiece ====== */
// Realistic consultant ↔ Willie conversation showing:
// 1) ask what needs attention, 2) Willie surfaces structured items with recommendation,
// 3) consultant drills in, 4) Willie shows rationale, 5) consultant approves.

const CHAT = [
  {
    from: 'user', kind: 'msg',
    text: 'Catch me up on APEX. What needs my attention today?',
  },
  {
    from: 'willie', kind: 'rich',
    intro: 'Three items waiting on you, in priority order:',
    items: [
      {
        eyebrow: 'DECISION · 4 days waiting',
        title: 'AI tooling philosophy — point solution vs. platform',
        note: 'Marta wants a recommendation before the Tuesday exec sync. I have a draft rationale ready.',
        tone: 'clay',
      },
      {
        eyebrow: 'PARKING LOT · 2 days waiting',
        title: 'Who owns the analytics hand-off — IT or the data team?',
        note: 'I asked David. He said "your call." I think it should be IT — analytics has no headcount for it.',
        tone: 'amber',
      },
      {
        eyebrow: 'OBSERVATION',
        title: 'Marta has said "cracks" three times this month',
        note: 'The agenda isn\'t catching it. Worth a 1:1 before Friday.',
        tone: 'slate',
      },
    ],
    foot: 'Want me to brief you on the AI tooling decision?',
  },
  {
    from: 'user', kind: 'msg',
    text: 'Yes. What would you recommend?',
  },
  {
    from: 'willie', kind: 'recommendation',
    summary: 'I\'d recommend the platform approach. Three reasons:',
    bullets: [
      { t: 'Lower integration risk over the 18-month roadmap.',  c: 'From the Apr 09 transcript — David named the roadmap dependency unprompted.' },
      { t: 'Marta\'s reconciliation pain points all stem from cross-tool seams.', c: 'Cited from 3 separate sessions (Mar 14, Apr 02, Apr 09).' },
      { t: 'Phoenix-firm precedent suggests point-solution lock-in.',             c: 'From your interview notes with the former Phoenix team.' },
    ],
    counter: 'The honest case against: platform vendors move slower on cutting-edge AI features. If APEX wants to be on the frontier, point-solution wins on velocity.',
    decision: {
      title: 'Move recommendation into client review?',
      sub: 'I\'ll draft the rationale memo and route to James for approval. You can edit before it sends.',
      actions: ['Send for review', 'Edit first'],
    },
  },
  {
    from: 'user', kind: 'action',
    text: 'Send for review',
  },
  {
    from: 'willie', kind: 'confirm',
    text: 'Done. Routed to James — currently in client stage on the decision page. I\'ll let you know when he responds.',
    chip: 'DEC-AE9B0 · Pending client',
  },
];

function ChatMessage({ m }) {
  if (m.from === 'user' && m.kind === 'msg') {
    return (
      <div className="wp-chat-msg wp-chat-user">
        <div className="wp-chat-bubble wp-chat-bubble-user">{m.text}</div>
      </div>
    );
  }
  if (m.from === 'user' && m.kind === 'action') {
    return (
      <div className="wp-chat-msg wp-chat-user">
        <div className="wp-chat-action">
          <svg viewBox="0 0 12 12" width="12" height="12"><path d="M2 6 L5 9 L10 3" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/></svg>
          <span>You clicked</span>
          <strong>{m.text}</strong>
        </div>
      </div>
    );
  }
  // Willie messages
  return (
    <div className="wp-chat-msg wp-chat-willie">
      <div className="wp-chat-avatar">
        <WilliePortrait size={32} ring={false} />
      </div>
      <div className="wp-chat-bubble wp-chat-bubble-willie">
        {m.kind === 'rich' && (
          <>
            <p className="wp-chat-intro">{m.intro}</p>
            <div className="wp-chat-items">
              {m.items.map((it, i) => (
                <div className={`wp-chat-item wp-tone-${it.tone}`} key={i}>
                  <div className="wp-chat-item-eyebrow">{it.eyebrow}</div>
                  <div className="wp-chat-item-title">{it.title}</div>
                  <div className="wp-chat-item-note">{it.note}</div>
                </div>
              ))}
            </div>
            <p className="wp-chat-foot">{m.foot}</p>
          </>
        )}
        {m.kind === 'recommendation' && (
          <>
            <p className="wp-chat-intro">{m.summary}</p>
            <ul className="wp-chat-bullets">
              {m.bullets.map((b, i) => (
                <li key={i}>
                  <div className="wp-chat-bullet-t">{b.t}</div>
                  <div className="wp-chat-bullet-c">
                    <span className="wp-chat-bullet-cite">Cited</span> {b.c}
                  </div>
                </li>
              ))}
            </ul>
            <div className="wp-chat-counter">
              <div className="wp-chat-counter-eyebrow">The honest counter</div>
              <p>{m.counter}</p>
            </div>
            <div className="wp-chat-decision">
              <div className="wp-chat-decision-t">{m.decision.title}</div>
              <div className="wp-chat-decision-s">{m.decision.sub}</div>
              <div className="wp-chat-decision-acts">
                <button type="button" className="wp-chat-btn wp-chat-btn-primary">{m.decision.actions[0]}</button>
                <button type="button" className="wp-chat-btn">{m.decision.actions[1]}</button>
              </div>
            </div>
          </>
        )}
        {m.kind === 'confirm' && (
          <>
            <p className="wp-chat-confirm-text">{m.text}</p>
            <div className="wp-chat-confirm-chip">{m.chip}</div>
          </>
        )}
      </div>
    </div>
  );
}

function WpChat() {
  return (
    <section className="wp-chat-section" id="chat" data-screen-label="Willie · Chat">
      <div className="mk-container">
        <div className="wp-chat-head">
          <MkEyebrow num="02">A working conversation</MkEyebrow>
          <h2 className="mk-h2">
            You ask. She gathers. <span className="alt">You decide.</span>
          </h2>
          <p className="mk-prose wp-chat-lede">
            What it actually looks like to chat with Willie. A real exchange — drawn from one of our pilot engagements — where the consultant asks what needs attention, Willie surfaces three items, and a decision moves forward.
          </p>
        </div>

        <div className="wp-chat-frame">
          <div className="wp-chat-topbar">
            <div className="wp-chat-topbar-l">
              <WilliePortrait size={28} ring={false} />
              <div className="wp-chat-topbar-text">
                <span className="n">Willie</span>
                <span className="r">Project · APEX Wealth Digital Transformation</span>
              </div>
            </div>
            <div className="wp-chat-topbar-r">
              <span className="wp-chat-status"><span className="dot"></span>Online</span>
            </div>
          </div>

          <div className="wp-chat-thread">
            {CHAT.map((m, i) => <ChatMessage key={i} m={m} />)}
          </div>

          <div className="wp-chat-input">
            <input type="text" placeholder="Ask Willie anything about the project…" disabled />
            <button type="button" className="wp-chat-send">Send</button>
          </div>
        </div>

        <div className="wp-chat-foot-note">
          Notice the pattern. Willie does the reading, the synthesis, the recommendation, and the routing — <em>every step</em>. The single click that says <strong>"send for review"</strong> is the only place your judgment was needed.
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WpChat });

/* ====== RESPONSIBILITIES — what Willie owns ====== */
const RESPONSIBILITIES = [
  { when: 'On day one',  icon: 'feed',    list: [
    'Reads your SOW, kickoff transcript, and any prior documents',
    'Builds the initial plan — milestones, tasks, owners, dates',
    'Drafts a kickoff brief for your client and routes it to you',
  ]},
  { when: 'Every day',   icon: 'eye',     list: [
    'Watches the parking lot, open decisions, and overdue items',
    'Reads any new transcript, document, or note you drop in',
    'Updates the plan with what changed — flagging what needs your eyes',
  ]},
  { when: 'Every week',  icon: 'sparkle', list: [
    'Drafts the status update to your client, with citations',
    'Surfaces themes and patterns across the week\'s sessions',
    'Holds a planning session with you on demand — at your pace',
  ]},
  { when: 'When you ask', icon: 'book',   list: [
    'Briefs you on any project, in two minutes or two paragraphs',
    'Answers specific questions with the source line attached',
    'Drafts decisions, memos, or messages — for you to edit and send',
  ]},
];

function WpResponsibilities() {
  return (
    <section className="wp-resp-section" data-screen-label="Willie · Responsibilities">
      <div className="mk-container">
        <div className="wp-resp-head">
          <MkEyebrow num="03">Responsibilities</MkEyebrow>
          <h2 className="mk-h2">
            What Willie <span className="alt">actually owns.</span>
          </h2>
          <p className="mk-prose wp-resp-lede">
            A job description, not a feature list. These are the things Willie is responsible for. If they aren't done well, that's on her — and on us.
          </p>
        </div>

        <div className="wp-resp-grid">
          {RESPONSIBILITIES.map((r, i) => (
            <div className="wp-resp-card" key={i}>
              <div className="wp-resp-when">
                <div className="wp-resp-icon"><MkIcon name={r.icon} size={18} color="var(--moss)" /></div>
                <div className="wp-resp-when-text">{r.when}</div>
              </div>
              <ul className="wp-resp-list">
                {r.list.map((l, j) => (
                  <li key={j}>
                    <span className="wp-resp-bullet"></span>
                    <span>{l}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== BOUNDARIES — what Willie won't do ====== */
const BOUNDARIES = [
  {
    title: 'She doesn\'t decide.',
    body: 'Willie can recommend the platform approach. She can show you the rationale, the citations, the counter-argument. She will not click "Approve" for you. Every decision in Groundskeeper has a single human approver, and it\'s never her.',
  },
  {
    title: 'She doesn\'t speak for you to your client.',
    body: 'Willie drafts your client updates. She routes decision rationales. She prepares the materials. But messages to your client come from you — with your name on them, after you\'ve seen what they say.',
  },
  {
    title: 'She doesn\'t act without showing her work.',
    body: 'Every task Willie creates, every decision she drafts, every status note she writes carries a citation back to the source it came from. If you can\'t trace it, she didn\'t do it.',
  },
  {
    title: 'She doesn\'t notify her way into your day.',
    body: 'No real-time pings. No notification stream. Willie holds open items and surfaces them when you start a session — at your pace, in priority order. She\'s a colleague, not an inbox.',
  },
];

function WpBoundaries() {
  return (
    <section className="wp-bound-section" data-screen-label="Willie · Boundaries">
      <div className="mk-container">
        <div className="wp-bound-head">
          <MkEyebrow num="04">Where she stops</MkEyebrow>
          <h2 className="mk-h2">
            The lines Willie <span className="alt">won't cross.</span>
          </h2>
          <p className="mk-prose wp-bound-lede">
            Naming what she won't do is how the supervision model stays trustworthy. She empowers you to move faster — she doesn't replace the calls only you can make.
          </p>
        </div>

        <div className="wp-bound-grid">
          {BOUNDARIES.map((b, i) => (
            <div className="wp-bound-card" key={i}>
              <div className="wp-bound-num">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="wp-bound-title">{b.title}</h3>
              <p className="wp-bound-body">{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== FOR YOUR CLIENTS — portal chat ====== */
function WpClients() {
  return (
    <section className="wp-clients-section" data-screen-label="Willie · For your clients">
      <div className="mk-container">
        <div className="wp-clients-grid">
          <div className="wp-clients-l">
            <MkEyebrow num="05">For your clients, too</MkEyebrow>
            <h2 className="mk-h2 wp-clients-h">
              They get the same Willie. <span className="alt">A little more careful.</span>
            </h2>
            <p className="mk-prose wp-clients-p">
              When your client opens the portal, they can ask Willie the same kind of questions you do: "What's the latest status?" "What's waiting on me?" "Where did this decision come from?" Willie answers what she can, with the same citation discipline, and escalates what she can't.
            </p>
            <p className="mk-prose wp-clients-p">
              The result: fewer status calls. Fewer "just checking in" emails. A client experience that looks like your firm hired a dedicated PM for their account — because, in a sense, you did.
            </p>
            <ul className="wp-clients-list">
              <li><span className="wp-clients-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>Same chat surface as yours, scoped to what they're allowed to see</li>
              <li><span className="wp-clients-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>Citations on every answer — your client can verify before they ask you</li>
              <li><span className="wp-clients-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>Anything sensitive routes to you for review before she answers</li>
            </ul>
          </div>

          <div className="wp-clients-r">
            <div className="wp-portal">
              <div className="wp-portal-bar">
                <div className="wp-portal-mark"><MossMark size={14} /></div>
                <div className="wp-portal-name">Groundskeeper</div>
                <div className="wp-portal-sep"></div>
                <div className="wp-portal-proj">APEX Wealth Digital Transformation</div>
              </div>
              <div className="wp-portal-body">
                <div className="wp-portal-h">Inbox</div>
                <div className="wp-portal-sub">1 item waiting on you</div>
                <div className="wp-portal-card">
                  <div className="wp-portal-card-h">
                    <span className="wp-portal-card-type">DECISION</span>
                    <span className="wp-portal-card-when">Today</span>
                  </div>
                  <p className="wp-portal-card-t">AI tooling philosophy</p>
                  <p className="wp-portal-card-d">Pending. APEX must choose between a point-solution approach and a platform approach…</p>
                </div>

                <div className="wp-portal-ask">
                  <div className="wp-portal-ask-h">Ask a question</div>
                  <div className="wp-portal-ask-sub">Free-form chat with Willie</div>
                </div>
                <div className="wp-portal-greet">
                  <WilliePortrait size={48} ring={false} />
                  <div className="wp-portal-greet-text">Hey, I'm Willie. What needs your attention today?</div>
                  <div className="wp-portal-quick">
                    <button type="button" className="wp-portal-quick-btn">What needs my attention?</button>
                    <button type="button" className="wp-portal-quick-btn">What's our latest status?</button>
                  </div>
                </div>
                <div className="wp-portal-input">
                  <input type="text" placeholder="Type a message…" disabled />
                  <button type="button" className="wp-portal-send">Send</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== CTA ====== */
function WpCta() {
  return (
    <section className="wp-cta-section" data-screen-label="Willie · CTA">
      <div className="mk-container">
        <div className="wp-cta-inner">
          <h2 className="wp-cta-h">
            Willie starts <span className="alt">on day one.</span>
          </h2>
          <p className="wp-cta-sub">
            Drop in your SOW, your kickoff transcript, your prior project notes. By the time your next session starts, the plan is built, the decisions are surfaced, and Willie has a draft brief ready for your client.
          </p>
          <div className="wp-cta-row">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="willie_page_request_access">Request early access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="pricing.html" data-cta="willie_page_see_pricing">See pricing</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WpResponsibilities, WpBoundaries, WpClients, WpCta });