// Shared marketing components: Nav, Footer, Willie mark, icons, Problem/Beats/Portal/Quotes/Compare/Audience/EarlyAccess sections.
// Loaded by both Direction A and Direction B.

const MossMark = ({ size = 18, color = "#FFF" }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4 20c2-8 8-13 16-15c-1 9-6 15-13 16"/>
    <path d="M4 20l8-8"/>
  </svg>
);

/* ====== WILLIE — character system ======
   - WilliePortrait: paper-stamp avatar. Round moss disc, cream silhouette of a man in a wide-brim hat with shoulders and a small leaf sprig.
   - WillieSignature: italic serif "Willie" with a hand-drawn flourish underneath.
   - WillieByline: small inline tag — portrait + name + role, for "this is from Willie" annotations.
*/
const WilliePortrait = ({ size = 200, ring = true }) => (
  <span className="willie-portrait" style={{width: size, height: size, display: 'inline-block', position: 'relative'}} aria-label="Willie" role="img">
    {ring && (
      <svg viewBox="0 0 120 120" width={size} height={size} style={{position: 'absolute', inset: 0, overflow: 'visible'}} aria-hidden="true">
        <circle cx="60" cy="60" r="58" fill="none" stroke="var(--moss-soft)" strokeWidth="1" strokeDasharray="2 3" opacity="0.75" />
      </svg>
    )}
    <img
      src="assets/willie.png"
      alt="Willie"
      width={size}
      height={size}
      style={{
        width: size, height: size,
        borderRadius: '50%',
        objectFit: 'cover',
        objectPosition: '50% 28%',
        display: 'block',
        boxShadow: '0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 2px var(--moss)',
        background: 'var(--moss-soft)',
      }}
    />
  </span>
);

const WillieSignature = ({ width = 130, color = "var(--moss)" }) => (
  <svg viewBox="0 0 200 60" width={width} height={width * 60 / 200} aria-label="Willie's signature" role="img">
    <g fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      {/* W */}
      <path d="M8 14 L18 44 L28 22 L38 44 L48 14" />
      {/* i */}
      <path d="M56 26 L56 44" />
      <circle cx="56" cy="18" r="1.4" fill={color} stroke="none" />
      {/* l */}
      <path d="M68 10 L68 44" />
      {/* l */}
      <path d="M80 10 L80 44" />
      {/* i */}
      <path d="M92 26 L92 44" />
      <circle cx="92" cy="18" r="1.4" fill={color} stroke="none" />
      {/* e */}
      <path d="M102 36 Q 118 36 118 30 Q 118 24 108 24 Q 100 26 100 34 Q 100 44 112 44 Q 118 44 122 40" />
      {/* flourish */}
      <path d="M16 52 Q 60 56 110 52 Q 140 50 168 54" opacity="0.55" />
    </g>
  </svg>
);

const WillieByline = ({ size = 28, label = "Willie", role = null }) => (
  <span className="willie-byline">
    <span className="willie-byline-mark" style={{width: size, height: size}}>
      <WilliePortrait size={size} ring={false} />
    </span>
    <span className="willie-byline-text">
      <span className="name">{label}</span>
      {role && <span className="role">{role}</span>}
    </span>
  </span>
);

const MkIcon = ({ name, size = 16, color = "currentColor" }) => {
  const paths = {
    check:    <path d="M20 6L9 17l-5-5"/>,
    arrow:    <path d="M5 12h14M13 6l6 6-6 6"/>,
    plus:     <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    inbox:    <><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></>,
    leaf:     <><path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 12-9c0 8-4 12-9 12z"/><path d="M5 19c1-5 4-9 9-13"/></>,
    feed:     <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h10"/></>,
    sparkle:  <><path d="M12 3v5M12 16v5M3 12h5M16 12h5M5.6 5.6l3.5 3.5M14.9 14.9l3.5 3.5M5.6 18.4l3.5-3.5M14.9 9.1l3.5-3.5"/></>,
    eye:      <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    bell:     <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    book:     <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></>,
    spark2:   <><path d="M12 2l2.6 6.4L21 10l-5 4 1.5 7L12 17.5 6.5 21 8 14l-5-4 6.4-1.6z"/></>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{flexShrink:0}}>
      {paths[name]}
    </svg>
  );
};

function MkNav({ direction }) {
  return (
    <nav className="mk-nav" data-screen-label={direction === 'A' ? 'Direction A · Nav' : 'Direction B · Nav'}>
      <div className="mk-nav-inner">
        <a className="mk-brand" href="#top">
          <div className="mark"><MossMark /></div>
          <div className="name">Groundskeeper</div>
        </a>
        <div className="mk-nav-links">
          <a href="willie.html">Meet Willie</a>
          <a href="features.html">Features</a>
          <a href="#portal">The portal</a>
          <a href="compare.html">Compare</a>
          <a href="pricing.html">Pricing</a>
          <a href="#who">Who it's for</a>
        </div>
        <div className="mk-nav-right">
          <a className="mk-btn mk-btn-ghost" href="https://app.groundskeeperpm.com/login" data-cta="nav_sign_in">Sign in</a>
          <a className="mk-btn mk-btn-primary" href="#early-access" data-cta="nav_request_access">Request access</a>
        </div>
      </div>
    </nav>
  );
}

function MkEyebrow({ children, num }) {
  return (
    <span className="mk-eyebrow">
      {num && <span style={{fontFamily:'var(--font-mono)', color:'var(--moss)'}}>{num}</span>}
      <span className="rule"></span>
      <span>{children}</span>
    </span>
  );
}

/* ====== PROBLEM ====== */
function MkProblem() {
  return (
    <section className="mk-problem" data-screen-label="Problem">
      <div className="mk-container-tight">
        <MkEyebrow num="01">The problem</MkEyebrow>
        <p className="lede">
          Project work doesn't fall apart all at once. It <em>drifts</em> — slowly, quietly — because no one has time to do the maintenance.
        </p>
        <p className="body">
          Logging the decision from Tuesday's call. Updating the milestone that shifted. Catching the scope change buried in a client email. Briefing yourself before a call you almost forgot you had. That work exists whether you do it or not. The difference is who does it.
        </p>
      </div>
    </section>
  );
}

/* ====== MEET WILLIE ====== */
function MkMeetWillie() {
  return (
    <section className="mk-meet" data-screen-label="Meet Willie">
      <div className="mk-container-tight mk-meet-inner">
        <div className="mk-meet-mark" aria-hidden="true">
          <div className="ring r1"></div>
          <div className="ring r2"></div>
          <WilliePortrait size={172} ring={false} />
          <div className="mk-meet-sig">
            <WillieSignature width={108} color="var(--moss)" />
            <div className="role">Project Manager · Groundskeeper</div>
          </div>
        </div>
        <div className="mk-meet-copy">
          <span className="mk-meet-eyebrow">
            <span className="dot"></span> Meet Willie
          </span>
          <h2 className="mk-meet-h">
            The PM <span className="alt">inside the tool.</span>
          </h2>
          <p className="mk-meet-lede">
            Willie is the project manager that lives in Groundskeeper. Not a chatbot, not a copilot — a working PM who reads what you hand her, builds the plan, runs the engagement, and keeps your client informed.
          </p>
          <div className="mk-meet-bullets">
            <div className="mk-meet-b">
              <span className="b-num">01</span>
              <div>
                <div className="b-t">Hired on day one.</div>
                <div className="b-d">Drop in a proposal or SOW. Willie has the plan before you finish your coffee.</div>
              </div>
            </div>
            <div className="mk-meet-b">
              <span className="b-num">02</span>
              <div>
                <div className="b-t">Reports to you.</div>
                <div className="b-d">You set direction. Willie does the maintenance, monitoring, and admin.</div>
              </div>
            </div>
            <div className="mk-meet-b">
              <span className="b-num">03</span>
              <div>
                <div className="b-t">Never out of office.</div>
                <div className="b-d">Always reading, always current. The plan is right when you open it.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== BEATS ====== */
const BEATS = [
  { num: '01', icon: 'feed',    title: 'Reads everything you hand her.',     body: "Drop in a proposal, SOW, meeting transcript, client email, voice memo, or PDF. Willie reads it, understands it, and maps it to your project. You don't need to extract, reformat, or translate anything." },
  { num: '02', icon: 'sparkle', title: 'Builds and maintains the plan.',    body: "Tasks, owners, milestones, timeline — structured from your actual documents, not entered by hand. When something changes, Willie updates the plan. You review and approve; Willie handles the maintenance." },
  { num: '03', icon: 'eye',     title: 'Monitors the engagement.',          body: "Scope creep, open decisions, overdue items, client-side delays — Willie surfaces what needs your attention before it becomes a problem. You stay informed without having to go looking." },
  { num: '04', icon: 'book',    title: "Briefs you. Doesn't pester you.",      body: "Willie doesn't ping you all day. You run a planning session — daily, weekly, whenever the project needs it — and Willie brings everything since last time. You make the calls. Willie executes." },
];

function MkBeats() {
  return (
    <section className="mk-section" id="how" data-screen-label="What Willie does">
      <div className="mk-container">
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:48, flexWrap:'wrap'}}>
          <div style={{maxWidth: '60%'}}>
            <MkEyebrow num="02">What Willie does</MkEyebrow>
            <h2 className="mk-h2" style={{marginTop: 20}}>The PM you never hired. <span style={{color:'var(--moss)', fontStyle:'italic'}}>Doing the work.</span></h2>
          </div>
          <p className="mk-prose" style={{maxWidth: '36ch'}}>
            Four things, in order. Willie doesn't <em>help you</em> manage the project — Willie does the parts of project management that are mostly admin, and hands you the parts that need judgment.
          </p>
        </div>
        <div className="mk-beats">
          {BEATS.map(b => (
            <div className="mk-beat" key={b.num}>
              <div className="num">{b.num}</div>
              <div className="icon-wrap"><MkIcon name={b.icon} size={18} /></div>
              <h3>{b.title}</h3>
              <p>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== PORTAL ====== */
function MkPortal({ children }) {
  return (
    <section className="mk-section" id="portal" data-screen-label="The portal">
      <div className="mk-container">
        <div className="mk-portal-split">
          <div className="left">
            <MkEyebrow num="03">The client portal</MkEyebrow>
            <h2 className="mk-h2" style={{marginTop: 20}}>
              Your clients deserve more than a <span style={{fontStyle:'italic', color:'var(--moss)'}}>status email.</span>
            </h2>
            <p className="mk-prose" style={{marginTop: 24, fontSize: 18}}>
              With Groundskeeper, your clients get a portal that actually works. They see the live plan. They get automatic updates when milestones move. They can upload documents — a compliance form, a revised brief, a signed agreement — and Willie reads it and reflects it in the plan.
            </p>
            <p className="mk-prose" style={{marginTop: 16, fontSize: 18}}>
              And when they have questions, they ask Willie. <strong style={{color:'var(--text-primary)'}}>Not you.</strong>
            </p>
            <p className="mk-prose" style={{marginTop: 16, fontSize: 18}}>
              That means fewer status calls. Fewer "just checking in" emails. A client experience that makes your firm look like one twice your size.
            </p>
            <p style={{
              marginTop: 32, fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontSize: 24, color: 'var(--text-primary)', borderLeft: '2px solid var(--moss)', paddingLeft: 18,
              lineHeight: 1.3,
            }}>
              You run the relationship. Willie runs the project.
            </p>
          </div>
          <div className="right">
            {children}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== QUOTES ====== */
const QUOTES = [
  { text: "I find myself constantly reopening old threads, trying to remember what was confirmed or what needs a follow-up. Last time I missed a context cue, I went into a client call underprepared and it showed.", attrib: "Project manager · r/projectmanagement" },
  { text: "The painful part is that context only feels 'missing' right before a call or follow-up, not when the information is first created.", attrib: "r/projectmanagement" },
  { text: "Our project management consists of a chaotic mix of Slack messages and Google Sheets.", attrib: "r/SaaS" },
];

function MkQuotes() {
  return (
    <section className="mk-section" data-screen-label="Sound familiar?">
      <div className="mk-container">
        <MkEyebrow num="04">Sound familiar?</MkEyebrow>
        <h2 className="mk-h2" style={{marginTop: 20, maxWidth: '20ch'}}>
          The same pattern, in every consultancy and small firm.
        </h2>
        <div className="mk-quotes">
          {QUOTES.map((q, i) => (
            <div className="mk-quote" key={i}>
              <p>{`\u201C${q.text}\u201D`}</p>
              <div className="attrib">— {q.attrib}</div>
            </div>
          ))}
        </div>
        <p className="mk-quotes-tagline">
          This is what <strong>Willie</strong> does.
        </p>
      </div>
    </section>
  );
}

/* ====== COMPARE ====== */
// Refocused (May 2026) — only against per-seat incumbents (Asana / Monday / ClickUp).
// Added a pricing row at the bottom so the comparative math has a home in the body.
const COMPARE_ROWS = [
  ["Gives you a place to enter tasks",          "Reads your documents and creates the plan"],
  ["Summarizes meeting transcripts",            "Extracts decisions and tracks who said what, when, and why"],
  ["Shows you a dashboard",                     "Tells you what changed and what needs your attention"],
  ["Pings you in real time",                    "Briefs you in a session when you're ready"],
  ["Requires someone to maintain it",           "Maintains itself\u2014you supervise and approve"],
  ["$25/seat — including every client face",   "Per firm, not per seat \u00b7 unlimited internal and external users"],
];

function MkCompare() {
  return (
    <section className="mk-section" id="compare" data-screen-label="Vs. per-seat PM tools">
      <div className="mk-container">
        <MkEyebrow num="05">Vs. Asana, Monday, ClickUp</MkEyebrow>
        <h2 className="mk-h2" style={{marginTop: 20, maxWidth: '22ch'}}>
          Every per-seat tool gives you better-formatted data. <span style={{color:'var(--moss)', fontStyle:'italic'}}>Willie gives you the answer.</span>
        </h2>
        <p className="mk-prose" style={{marginTop: 24, maxWidth: '64ch', fontSize: 18}}>
          Asana, Monday, ClickUp — these are organizers. They give you a place to put your work, surface it in dashboards, and charge by the head for the privilege. They still need a human to interpret what's there, decide what it means, and figure out what to do next.
        </p>
        <p className="mk-prose" style={{marginTop: 12, maxWidth: '64ch', fontSize: 18, color: 'var(--text-primary)'}}>
          Willie doesn't organize your work. <strong style={{color:'var(--moss)', fontWeight:500}}>Willie does it.</strong>
        </p>

        <div className="mk-compare">
          <div className="mk-compare-head"><span className="dot"></span><span className="eyebrow">Per-seat PM tools</span></div>
          <div className="mk-compare-head willie"><span className="dot"></span><span className="eyebrow">Groundskeeper</span></div>
          {COMPARE_ROWS.flatMap((row, i) => {
            const ix = String(i + 1).padStart(2, '0');
            return [
              <div className="mk-compare-card" key={`l-${i}`}>
                <div className="tag"><span className="ix">{ix}</span><span>Status quo</span></div>
                <p className="body">{row[0]}</p>
              </div>,
              <div className="mk-compare-card willie" key={`r-${i}`}>
                <div className="tag"><span className="ix">{ix}</span><span>Groundskeeper</span></div>
                <p className="body">{row[1]}</p>
              </div>,
            ];
          })}
        </div>
      </div>
    </section>
  );
}

/* ====== AUDIENCE ====== */
function MkAudience() {
  return (
    <section className="mk-section" id="who" data-screen-label="Who it's for">
      <div className="mk-container">
        <MkEyebrow num="06">Who it's for</MkEyebrow>
        <h2 className="mk-h2" style={{marginTop: 20, maxWidth: '22ch'}}>
          Built for the people who shouldn't be doing project admin.
        </h2>
        <div className="mk-audience">
          <div className="mk-audience-col">
            <div className="tag">Consultants & advisors</div>
            <h3>The PM you never hired.</h3>
            <p>You run client engagements without a dedicated PM. You have a methodology, a body of work, and clients who trust you — but the project overhead still lands on you: updating the tracker, finding the decision from three weeks ago, explaining where things stand.</p>
            <p>Feed Willie your brief, your SOW, your meeting transcripts. She builds the plan, monitors the engagement, and keeps your client informed through a portal that actually works.</p>
          </div>
          <div className="mk-audience-col">
            <div className="tag">Project managers</div>
            <h3>Stay at the level where you add value.</h3>
            <p>You're good at running projects. You shouldn't spend your day on ingestion, data entry, and status updates. You didn't get into this to maintain a task list.</p>
            <p>Willie handles intake, admin, monitoring, and client updates — so you can stay at the level where you actually add value. You make the calls. Willie executes.</p>
          </div>
        </div>
        <div className="mk-scope-note">
          Groundskeeper is built for fixed-scope, client-facing work at small professional services firms. If you need resource utilization dashboards, budget forecasting, or a tool for a 50-person PMO — it's probably not your tool yet.
        </div>
      </div>
    </section>
  );
}

/* ====== EARLY ACCESS ====== */
function MkEarlyAccess() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="mk-ea" id="early-access" data-screen-label="Early access">
      <div className="mk-container-tight">
        <MkEyebrow num="07">Join early access</MkEyebrow>
        <h2 className="mk-h2" style={{marginTop: 20, maxWidth: '20ch', marginLeft: 'auto', marginRight: 'auto'}}>
          We're not in a hurry to scale. <span style={{fontStyle:'italic', color:'var(--moss)'}}>We're in a hurry to get it right.</span>
        </h2>
        <p className="mk-lede">
          Groundskeeper is in early access. A small group of consultants and project managers are using it in production now. A paid plan is coming — the people who get in early will help shape it.
        </p>

        {submitted ? (
          <div style={{
            marginTop: 48, padding: 32, background: 'var(--bg-surface)',
            border: '1px solid var(--moss)', borderRadius: 12, textAlign: 'left',
            maxWidth: 560, marginLeft: 'auto', marginRight: 'auto',
            display: 'flex', gap: 16, alignItems: 'flex-start',
          }}>
            <div style={{width: 32, height: 32, borderRadius: '50%', background: 'var(--moss)', color: '#FFF', display: 'grid', placeItems: 'center', flexShrink:0}}>
              <MkIcon name="check" size={16} color="#FFF" />
            </div>
            <div>
              <div style={{fontFamily:'var(--font-serif)', fontSize: 20, fontWeight: 500, marginBottom: 4}}>Request received.</div>
              <div style={{color: 'var(--text-secondary)', fontSize: 14}}>We'll be in touch within a week. In the meantime, Willie is reading your note.</div>
            </div>
          </div>
        ) : (
          <form className="mk-ea-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
            <input type="text" placeholder="Your name" required />
            <input type="email" placeholder="Work email" required />
            <input className="field-full" type="text" placeholder="Your firm (optional)" />
            <textarea className="field-full" placeholder="A line about your practice — what you do, who you serve. Optional." />
            <div className="submit-row">
              <span className="small">No countdown timers. No "limited spots." We'll get back to you within a week.</span>
              <button type="submit" className="mk-btn mk-btn-primary mk-btn-lg">Request access</button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

/* ====== FOOTER ====== */
// Mirrors the static footer on index.html — same columns, copy, attribution,
// and legal links. Cross-page anchors absolute-link to index.html so they
// work from any page that mounts this component.
function MkFooter() {
  return (
    <footer className="mk-footer" data-screen-label="Footer">
      <div className="mk-footer-inner">
        <div>
          <div className="mk-brand">
            <div className="mark"><MossMark /></div>
            <div className="name">Groundskeeper</div>
          </div>
          <div className="tag">Project management for consultants and small consulting teams.</div>
          <div className="mk-attribution">
            Built by <a href="https://www.linkedin.com/in/jamescantwell/" target="_blank" rel="noopener">James Cantwell<svg viewBox="0 0 24 24" fill="currentColor" aria-label="LinkedIn"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.37V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 11.01-4.13 2.06 2.06 0 01-.01 4.13zM7.12 20.45H3.56V9h3.56v11.45z"/></svg></a>
          </div>
        </div>
        <div>
          <h4>Product</h4>
          <ul>
            <li><a href="willie.html">Meet Willie</a></li>
            <li><a href="features.html">Features</a></li>
            <li><a href="index.html#how">How it works</a></li>
            <li><a href="index.html#portal">The portal</a></li>
            <li><a href="pricing.html">Pricing</a></li>
            <li><a href="index.html#faq">FAQ</a></li>
            <li><a href="index.html#early-access" data-cta="footer_request_access">Request access</a></li>
          </ul>
        </div>
        <div>
          <h4>Compare</h4>
          <ul>
            <li><a href="compare.html">All comparisons</a></li>
            <li><a href="compare-clickup.html">vs ClickUp</a></li>
            <li><a href="compare-asana.html">vs Asana</a></li>
            <li><a href="compare-trello.html">vs Trello</a></li>
            <li><a href="compare-monday.html">vs Monday</a></li>
            <li><a href="compare-ms-project.html">vs MS Project</a></li>
          </ul>
        </div>
        <div>
          <h4>For</h4>
          <ul>
            <li><a href="index.html#who-consultants">Consultants &amp; advisors<span className="sub">The PM you never hired.</span></a></li>
            <li><a href="index.html#who-pms">Project managers<span className="sub">Stay at the level where you add value.</span></a></li>
          </ul>
        </div>
      </div>
      <div className="mk-footer-base">
        <span>© 2026 GROUNDSKEEPER · A TC ADVISORY PRODUCT</span>
        <span style={{display:'inline-flex', gap:18, alignItems:'center'}}>
          <a href="/privacy.html" style={{color:'inherit', textDecoration:'none'}}>Privacy</a>
          <a href="/terms.html" style={{color:'inherit', textDecoration:'none'}}>Terms</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  MossMark, WilliePortrait, WillieSignature, WillieByline, MkIcon, MkNav, MkEyebrow,
  MkProblem, MkMeetWillie, MkBeats, MkPortal, MkQuotes, MkCompare, MkAudience, MkEarlyAccess, MkFooter,
});
