// features.jsx — Features page (May 2026)
// A traditional PM-tool features rundown: the primitives (plan, decisions,
// scope, meetings, risks/tests) every consultant expects, presented as a
// category grid. The Willie/AI framing stays in the background — surfaced
// once explicitly ("Willie sets it up. You hold the pen.") and lightly
// inside the portal callout. The page reads as a feature reference, not
// a manifesto.

/* ====== ICONS — small set specific to PM primitives ====== */
const FpIcon = ({ name, size = 18, color = "currentColor" }) => {
  const paths = {
    milestone: <><path d="M5 21V4"/><path d="M5 4h13l-3 4 3 4H5"/></>,
    task:      <><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M9 12l2 2 4-5"/></>,
    deps:      <><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 8l8 8"/><path d="M14 8h4v4"/></>,
    decision:  <><path d="M12 3v6"/><circle cx="12" cy="11" r="2.5"/><path d="M10 13l-4 7h12l-4-7"/></>,
    scope:     <><path d="M4 5h4M16 5h4M4 19h4M16 19h4"/><path d="M4 5v4M4 15v4M20 5v4M20 15v4"/><path d="M9 12h6"/></>,
    meeting:   <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M8 3v4M16 3v4"/></>,
    risk:      <><path d="M12 3l10 18H2z"/><path d="M12 10v5"/><circle cx="12" cy="18" r="0.6" fill="currentColor"/></>,
    test:      <><rect x="6" y="3" width="12" height="18" rx="2"/><path d="M9 3v2h6V3"/><path d="M9 13l2 2 4-5"/></>,
    parking:   <><circle cx="12" cy="12" r="9"/><path d="M10 17V8h3a2.5 2.5 0 0 1 0 5h-3"/></>,
    file:      <><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></>,
    timeline:  <><path d="M3 12h18"/><circle cx="6" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></>,
    people:    <><circle cx="9" cy="8" r="3"/><circle cx="17" cy="10" r="2.5"/><path d="M3 20c1-4 4-6 6-6s5 2 6 6"/><path d="M14 20c.5-2.5 2-4 3-4"/></>,
    portal:    <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M7 6.5h.01M10 6.5h.01"/></>,
    pen:       <><path d="M14 4l6 6-12 12H2v-6z"/><path d="M12 6l6 6"/></>,
    flag:      <><path d="M5 22V4"/><path d="M5 4h14l-3 5 3 5H5"/></>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke={color}
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
         aria-hidden="true" style={{flexShrink: 0}}>
      {paths[name]}
    </svg>
  );
};

/* ====== HERO ====== */
function FpHero() {
  return (
    <header className="fp-hero" data-screen-label="Features · Hero" id="top">
      <div className="mk-container">
        <div className="fp-hero-grid">
          <div className="fp-hero-l">
            <MkEyebrow num="Features">The full toolkit</MkEyebrow>
            <h1 className="fp-hero-h">
              Every project management primitive you'd expect. <span className="alt">None of the data entry.</span>
            </h1>
            <p className="fp-hero-sub">
              Decisions, scope changes, dependencies, successors, meeting tracking, risks, tests, sign-offs — the structures a real consulting engagement runs on. Built the way a senior PM would build them, and ready the moment you drop in your SOW.
            </p>
            <p className="fp-hero-bridge">
              Willie keeps it current. You hold the pen on every record.
            </p>
            <div className="fp-hero-cta">
              <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="features_hero_request_access">Request early access</a>
              <a className="mk-btn mk-btn-secondary mk-btn-lg" href="#categories" data-cta="features_hero_see_features">See the features</a>
            </div>
          </div>

          <div className="fp-hero-r">
            <div className="fp-hero-chip-grid" aria-hidden="true">
              <div className="fp-chip"><FpIcon name="milestone" size={14} color="var(--moss)" /><span>Milestones</span></div>
              <div className="fp-chip"><FpIcon name="task" size={14} color="var(--moss)" /><span>Tasks</span></div>
              <div className="fp-chip"><FpIcon name="deps" size={14} color="var(--moss)" /><span>Dependencies</span></div>
              <div className="fp-chip"><FpIcon name="decision" size={14} color="var(--clay)" /><span>Decisions</span></div>
              <div className="fp-chip"><FpIcon name="scope" size={14} color="var(--clay)" /><span>Scope changes</span></div>
              <div className="fp-chip"><FpIcon name="meeting" size={14} color="var(--slate)" /><span>Meetings</span></div>
              <div className="fp-chip"><FpIcon name="risk" size={14} color="var(--amber)" /><span>Risks</span></div>
              <div className="fp-chip"><FpIcon name="test" size={14} color="var(--amber)" /><span>Tests &amp; UAT</span></div>
              <div className="fp-chip"><FpIcon name="parking" size={14} color="var(--slate)" /><span>Parking lot</span></div>
              <div className="fp-chip"><FpIcon name="file" size={14} color="var(--moss)" /><span>Files</span></div>
              <div className="fp-chip"><FpIcon name="people" size={14} color="var(--slate)" /><span>Stakeholders</span></div>
              <div className="fp-chip"><FpIcon name="portal" size={14} color="var(--moss)" /><span>Client portal</span></div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ====== CATEGORIES ====== */
// Each category groups 4–6 related primitives. Copy stays factual and short,
// the way a feature reference reads — not the editorial tone of the willie page.
const CATEGORIES = [
  {
    id: 'plan',
    eyebrow: '01',
    name: 'Plan & timeline',
    icon: 'milestone',
    body: 'The structural backbone — milestones, tasks, owners, dates — built from your SOW, not entered by hand. Edit any cell; the rest of the plan adjusts.',
    features: [
      { icon: 'milestone', name: 'Milestones',                desc: 'Phase markers with start, end, and the deliverables that earn them.' },
      { icon: 'task',      name: 'Tasks',                     desc: 'Owners, due dates, status. The unit everything else stitches together.' },
      { icon: 'deps',      name: 'Dependencies & successors', desc: 'Explicit "blocks" and "is blocked by" links. Surfaces what moves when something slips.' },
      { icon: 'people',    name: 'Owners & assignees',        desc: 'Every item has a human. Internal teammates or client-side stakeholders.' },
      { icon: 'timeline',  name: 'Critical path',             desc: 'The chain that determines your finish date. Highlighted on the plan view.' },
      { icon: 'flag',      name: 'Baseline & drift',          desc: 'Compare the current plan against the one you signed. See drift before it becomes a problem.' },
    ],
  },
  {
    id: 'decisions',
    eyebrow: '02',
    name: 'Decisions & approvals',
    icon: 'decision',
    body: "A decision log that's actually a workflow. Every call has a draft, a rationale, an approver, and a result — captured in one place instead of buried in email.",
    features: [
      { icon: 'decision',  name: 'Decision log',         desc: "Every call you've made, with rationale, date, and the person who approved it." },
      { icon: 'task',      name: 'Decision requests',    desc: 'Draft a decision, route it to the right person, capture their response.' },
      { icon: 'people',    name: 'Approver assignment',  desc: 'One human approver per decision. No ambiguity about whose call it is.' },
      { icon: 'file',      name: 'Rationale & citations', desc: 'Every recommendation links back to the source — transcript, email, document.' },
      { icon: 'flag',      name: 'Sign-offs',            desc: 'Phase gates, deliverable acceptance, milestone closure — captured with timestamp.' },
      { icon: 'pen',       name: 'Edit before you send', desc: 'Drafts are drafts. Rewrite, retitle, reroute. You decide what goes out.' },
    ],
  },
  {
    id: 'scope',
    eyebrow: '03',
    name: 'Scope & change control',
    icon: 'scope',
    body: 'The discipline that keeps fixed-scope engagements profitable. Capture what changed, who asked, and the impact — without making it a project of its own.',
    features: [
      { icon: 'scope',     name: 'Scope baseline',       desc: 'The scope you signed, locked in version one. Everything else is measured against it.' },
      { icon: 'pen',       name: 'Change requests',      desc: 'When the work expands, capture what changed, who asked, and where it landed.' },
      { icon: 'risk',      name: 'Impact analysis',      desc: 'What does this change cost — in days, deliverables, or budget?' },
      { icon: 'timeline',  name: 'Versioned scope',      desc: 'Walk back through every version. See when each change landed and why.' },
      { icon: 'parking',   name: 'Out-of-scope log',     desc: "Items the client asked for that don't fit the current SOW. Tracked, not lost." },
    ],
  },
  {
    id: 'meetings',
    eyebrow: '04',
    name: 'Meetings & cadence',
    icon: 'meeting',
    body: 'Recurring meetings, transcripts, action items, and the status report you send afterward — all on one rhythm. Drop in a transcript; the open items land in the plan.',
    features: [
      { icon: 'meeting',   name: 'Meeting tracker',       desc: 'Every recurring meeting, with agenda, attendees, and outcomes in one place.' },
      { icon: 'file',      name: 'Transcript ingestion',  desc: 'Drop in a transcript — decisions, action items, and parking-lot updates come out.' },
      { icon: 'task',      name: 'Action items',          desc: 'Extracted, assigned, dated. Surfaced in your next session, not lost in notes.' },
      { icon: 'people',    name: 'Attendance & roles',    desc: 'Who was there, who owned what part of the agenda, who needs the follow-up.' },
      { icon: 'pen',       name: 'Weekly status reports', desc: 'Drafted from what changed this week. Edit, sign, and send from the same screen.' },
      { icon: 'timeline',  name: 'Recurring rituals',     desc: 'Weekly status, monthly steering, ad-hoc working sessions — all on one cadence.' },
    ],
  },
  {
    id: 'risks',
    eyebrow: '05',
    name: 'Risks, tests & open items',
    icon: 'risk',
    body: 'The RAID-style register — risks, assumptions, issues, dependencies — plus the acceptance discipline that lets you close a milestone with the client on record.',
    features: [
      { icon: 'risk',      name: 'Risk register',     desc: 'Probability, impact, owner, mitigation. The discipline, without the spreadsheet.' },
      { icon: 'test',      name: 'Tests & UAT',       desc: 'Acceptance criteria, test runs, sign-offs — captured from the client, not assumed.' },
      { icon: 'parking',   name: 'Parking lot',       desc: "Items raised but not ready to act on. They don't fall through the cracks." },
      { icon: 'decision',  name: 'Open questions',    desc: 'Anything blocked on someone else — with who, how long, and the last nudge.' },
      { icon: 'flag',      name: 'Issues log',        desc: 'Active problems and their resolution path. Closed issues stay searchable.' },
    ],
  },
];

function FpCategory({ cat }) {
  return (
    <div className="fp-cat" id={cat.id}>
      <div className="fp-cat-head">
        <div className="fp-cat-eyebrow">
          <span className="fp-cat-num">{cat.eyebrow}</span>
          <span className="fp-cat-rule"></span>
          <span className="fp-cat-eb">Category</span>
        </div>
        <div className="fp-cat-title-row">
          <div className="fp-cat-icon"><FpIcon name={cat.icon} size={22} color="var(--moss)" /></div>
          <h3 className="fp-cat-title">{cat.name}</h3>
        </div>
        <p className="fp-cat-body">{cat.body}</p>
      </div>

      <div className="fp-feat-grid">
        {cat.features.map((f, i) => (
          <div className="fp-feat" key={i}>
            <div className="fp-feat-icon"><FpIcon name={f.icon} size={16} color="var(--moss)" /></div>
            <div className="fp-feat-text">
              <div className="fp-feat-name">{f.name}</div>
              <div className="fp-feat-desc">{f.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FpCategories() {
  return (
    <section className="fp-cats-section" id="categories" data-screen-label="Features · Categories">
      <div className="mk-container">
        <div className="fp-cats-head">
          <MkEyebrow num="01">Five categories</MkEyebrow>
          <h2 className="mk-h2">
            Built like a project tool. <span className="alt">Run like Willie was sitting next to you.</span>
          </h2>
          <p className="mk-prose fp-cats-lede">
            Each of these is a first-class record in Groundskeeper — editable, linkable, searchable, exportable. The same primitives any project tool offers, with one difference: you don't have to fill them in yourself.
          </p>
        </div>

        <div className="fp-cats-stack">
          {CATEGORIES.map((c) => <FpCategory key={c.id} cat={c} />)}
        </div>
      </div>
    </section>
  );
}

/* ====== CONTROL — Willie sets up, you control ====== */
// Single, explicit reminder. Three short pairs so it reads like a statement
// of how the system divides labor, not a sales pitch about AI.
const CONTROL_PAIRS = [
  {
    she: 'Drafts the records',
    he: 'You edit them',
    note: "When Willie creates a decision, scope change, or status report, it lands as a draft with citations. Nothing leaves the surface without you reading it.",
  },
  {
    she: 'Updates as the project changes',
    he: 'You override what doesn’t fit',
    note: 'New transcript, new doc, new email — Willie keeps the plan in sync. Any field you edit by hand stays that way until you say otherwise.',
  },
  {
    she: 'Suggests, surfaces, recommends',
    he: 'You make the calls',
    note: 'Every approval, every external message, every irreversible action requires a human on record. Willie never clicks send on your behalf.',
  },
];

function FpControl() {
  return (
    <section className="fp-control-section" data-screen-label="Features · Control">
      <div className="mk-container">
        <div className="fp-control-head">
          <MkEyebrow num="02">How the work gets divided</MkEyebrow>
          <h2 className="mk-h2">
            Willie does the setup. <span className="alt">You hold the pen.</span>
          </h2>
          <p className="mk-prose fp-control-lede">
            Every primitive on the page above can be created and updated by Willie from the materials you hand her. None of them are read-only. The system is built so a human always owns the final state.
          </p>
        </div>

        <div className="fp-control-grid">
          {CONTROL_PAIRS.map((p, i) => (
            <div className="fp-control-card" key={i}>
              <div className="fp-control-pair">
                <div className="fp-control-she">
                  <span className="fp-control-tag fp-control-tag-w">Willie</span>
                  <div className="fp-control-line">{p.she}</div>
                </div>
                <div className="fp-control-divider" aria-hidden="true"></div>
                <div className="fp-control-he">
                  <span className="fp-control-tag fp-control-tag-y">You</span>
                  <div className="fp-control-line">{p.he}</div>
                </div>
              </div>
              <p className="fp-control-note">{p.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== CLIENT PORTAL ====== */
// Compact callout — the full portal treatment lives on the willie page and
// the home page. Here we just remind that the same primitives are surfaced
// to the client, scoped to what they should see.
function FpPortal() {
  return (
    <section className="fp-portal-section" data-screen-label="Features · Portal">
      <div className="mk-container">
        <div className="fp-portal-grid">
          <div className="fp-portal-l">
            <MkEyebrow num="03">Built in: the client portal</MkEyebrow>
            <h2 className="mk-h2 fp-portal-h">
              The same primitives, <span className="alt">surfaced to your client.</span>
            </h2>
            <p className="mk-prose fp-portal-p">
              Decisions you've requested. Status reports you've sent. Open items waiting on their side. Files they uploaded. The client sees a live view of the project, scoped to what they should see — and answers their own questions through the portal instead of emailing you for status.
            </p>
            <ul className="fp-portal-list">
              <li><span className="fp-portal-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>One portal per engagement, scoped to the client's view</li>
              <li><span className="fp-portal-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>Decisions, approvals, status reports, files, open items</li>
              <li><span className="fp-portal-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>Unlimited external users — no per-seat charge for clients</li>
              <li><span className="fp-portal-check"><MkIcon name="check" size={14} color="var(--moss)" /></span>Anything sensitive routes to you for review before it surfaces</li>
            </ul>
            <div className="fp-portal-link-row">
              <a className="fp-portal-link" href="willie.html#chat">See Willie in the portal →</a>
              <a className="fp-portal-link" href="index.html#portal">Tour the portal →</a>
            </div>
          </div>

          <div className="fp-portal-r">
            <div className="fp-portal-mock">
              <div className="fp-portal-mock-bar">
                <div className="fp-portal-mock-brand">
                  <div className="fp-portal-mock-mark"><MossMark size={12} /></div>
                  <span>Groundskeeper</span>
                </div>
                <div className="fp-portal-mock-sep"></div>
                <div className="fp-portal-mock-proj">APEX Wealth · Digital Transformation</div>
              </div>
              <div className="fp-portal-mock-body">
                <div className="fp-portal-mock-eyebrow">Waiting on you · 2 items</div>
                <div className="fp-portal-mock-card">
                  <div className="fp-portal-mock-row">
                    <span className="fp-portal-mock-type fp-portal-type-dec">DECISION</span>
                    <span className="fp-portal-mock-wait">4d</span>
                  </div>
                  <div className="fp-portal-mock-t">Approve Q3 scope expansion (3 line items)</div>
                  <div className="fp-portal-mock-actions">
                    <button type="button" className="fp-portal-mock-btn fp-portal-mock-btn-primary">Approve</button>
                    <button type="button" className="fp-portal-mock-btn">Discuss</button>
                  </div>
                </div>
                <div className="fp-portal-mock-card">
                  <div className="fp-portal-mock-row">
                    <span className="fp-portal-mock-type fp-portal-type-q">QUESTION</span>
                    <span className="fp-portal-mock-wait">1d</span>
                  </div>
                  <div className="fp-portal-mock-t">Who owns the analytics hand-off — IT or data?</div>
                  <div className="fp-portal-mock-actions">
                    <button type="button" className="fp-portal-mock-btn fp-portal-mock-btn-primary">Answer</button>
                  </div>
                </div>

                <div className="fp-portal-mock-eyebrow">Recent</div>
                <div className="fp-portal-mock-card fp-portal-mock-card-soft">
                  <div className="fp-portal-mock-row">
                    <span className="fp-portal-mock-type fp-portal-type-st">STATUS</span>
                    <span className="fp-portal-mock-wait">today</span>
                  </div>
                  <div className="fp-portal-mock-t">Week of May 12 — M2 Build on track</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== CTA ====== */
function FpCta() {
  return (
    <section className="fp-cta-section" data-screen-label="Features · CTA">
      <div className="mk-container">
        <div className="fp-cta-inner">
          <h2 className="fp-cta-h">
            All of it, current, <span className="alt">on day one.</span>
          </h2>
          <p className="fp-cta-sub">
            Drop in your SOW, your kickoff transcript, your prior notes. Plan, decisions, scope baseline, risk register, status report draft — built and waiting for your review the next time you open Groundskeeper.
          </p>
          <div className="fp-cta-row">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="features_page_request_access">Request early access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="pricing.html" data-cta="features_page_see_pricing">See pricing</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FpHero, FpCategories, FpControl, FpPortal, FpCta });