// Journey Mapping . Topbar + Cover
function JourneyTopbar({ onPrint, onReset, onClear }) {
  return (
    <div className="lm-topbar lm-no-print">
      <div className="lm-topbar-inner">
        <a className="lm-topbar-logo" href="Marketplace Studio.html">
          <svg viewBox="0 0 32 32" fill="none"><path d="M5 27V5H12L16 18L20 5H27V27H22V13L17.5 27H14.5L10 13V27H5Z" fill="currentColor"/></svg>
          Marketplace Studio
        </a>
        <span className="lm-topbar-meta">Journey Mapping Template · v1.0</span>
        <div className="lm-topbar-actions">
          <button className="lm-topbar-btn" onClick={onClear}>Clear example</button>
          <button className="lm-topbar-btn" onClick={onReset}>Reset to example</button>
          <button className="lm-topbar-btn lm-topbar-btn-primary" onClick={onPrint}>Save as PDF</button>
        </div>
      </div>
    </div>
  );
}

function JourneyCover({ data, onChange }) {
  return (
    <section className="lm-page">
      <div className="lm-eyebrow"><span className="lm-dot"/> A Marketplace Studio template · For founders building or auditing a marketplace</div>
      <h1 className="lm-h1">Two-sided journey <em>mapping workbook.</em></h1>
      <p className="lm-lead">Marketplaces fail at the seams between sides. The buyer journey looks fine. The supplier journey looks fine. But where the two intersect , at sign-up, at first match, at the moment of trust . Is where the friction lives. This template forces you to map both sides in parallel so the seams become visible.</p>

      <div className="lm-callout">
        <div className="lm-callout-head">The A-CAR framework</div>
        <p>We organize every marketplace journey across four stages: <strong>Attract → Convert → Adopt → Retain</strong>. Attract is how they hear about you. Convert is how they sign up and commit. Adopt is the first real action , and the moment a habit either forms or doesn't. Retain is what happens once they are using you. The reason A-CAR works for marketplaces is that each stage applies symmetrically to <em>both</em> sides , and the gap between buyer and supplier at the same stage is usually where your roadmap hides.</p>
      </div>

      <div className="lm-page-section">
        <h3 className="lm-h3">Your marketplace</h3>
        <div className="lm-input-grid cols-4">
          <div className="lm-input">
            <label className="lm-input-label">Marketplace name</label>
            <input type="text" value={data.meta.name} onChange={(e) => onChange(['meta','name'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Category</label>
            <input type="text" value={data.meta.category} onChange={(e) => onChange(['meta','category'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Buyer side label</label>
            <input type="text" value={data.meta.buyerName} onChange={(e) => onChange(['meta','buyerName'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Supplier side label</label>
            <input type="text" value={data.meta.supplierName} onChange={(e) => onChange(['meta','supplierName'], e.target.value)}/>
          </div>
        </div>
      </div>

      <div className="lm-page-section">
        <h4 className="lm-h4">A-CAR × five rows × two sides</h4>
        <p className="lm-body" style={{maxWidth:780}}>Every cell asks five things: what they <strong>do</strong>, what they <strong>think</strong>, what they <strong>feel</strong>, where the <strong>friction</strong> is, and what the <strong>opportunity</strong> is. Five rows × four A-CAR stages × two sides = forty cells. Half the value is what you write. The other half is what you cannot answer , those gaps are research questions.</p>
      </div>
    </section>
  );
}

Object.assign(window, { JourneyTopbar, JourneyCover });