/* global React */
// Menteasy - wordmark, shared mockups, and two hero directions

const Sprout = ({ size = 24 }) => (
  <svg className="sprout" viewBox="0 0 24 24" width={size} height={size} fill="none"
       aria-hidden="true" style={{ width: size, height: size }}>
    <path d="M12 19V9.5" stroke="var(--green-700)" strokeWidth="2" strokeLinecap="round"/>
    <path d="M12 10.4c0-3 2.3-5.3 6.1-5.6.3 3.6-2 6-6.1 6.1Z" fill="var(--green-500)"/>
    <path d="M12 11.2c-.2-2.6-2-4.6-5.2-4.9-.3 3.1 1.7 5.2 5.2 5.3Z" fill="var(--green-700)"/>
  </svg>
);

const Wordmark = ({ size = 21 }) => (
  <a href="#" className="me-wordmark" style={{ fontSize: size }} onClick={(e) => e.preventDefault()}>
    <Sprout size={size * 1.14} />
    <span>Ment<span style={{ color: 'var(--green-600)' }}>easy</span></span>
  </a>
);

const Nav = () => (
  <nav className="me-nav">
    <Wordmark />
    <div className="me-nav-links">
      <a href="#">How it works</a>
      <a href="#">Features</a>
      <a href="#">Who it's for</a>
    </div>
    <button className="me-btn me-btn-primary" style={{ padding: '11px 17px', fontSize: 14 }}>
      Join the waitlist
    </button>
  </nav>
);

const Capture = ({ wide }) => (
  <div className="me-capture" style={wide ? { margin: '0 auto' } : null}>
    <input placeholder="you@company.com" aria-label="Email address" />
    <button className="me-btn me-btn-primary" style={{ padding: '11px 16px', fontSize: 14, borderRadius: 9 }}>
      Join the waitlist →
    </button>
  </div>
);

/* ---------- shared living-UI mockups ---------------------- */
const InsightsCard = () => (
  <div className="mck" style={{ padding: 18, width: 320 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <div style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--sage-100)',
          display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, color: 'var(--green-700)' }}>M</div>
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: '-.01em' }}>Maya × Devon</div>
          <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Session 4 · 38 min</div>
        </div>
      </div>
      <span className="mck-chip">✦ Auto insight</span>
    </div>
    {[
      ['var(--green-500)', 'Devon led the client retro solo - a confidence milestone.'],
      ['var(--clay)', 'Still hesitant giving upward feedback to senior peers.'],
      ['var(--green-700)', 'Action: shadow Maya in Thu stakeholder review.'],
    ].map(([c, t], i) => (
      <div key={i} style={{ display: 'flex', gap: 10, padding: '9px 0',
        borderTop: i ? '1px solid var(--line-soft)' : 'none' }}>
        <span style={{ width: 7, height: 7, borderRadius: 3, background: c, marginTop: 5, flex: 'none' }} />
        <span style={{ fontSize: 13, lineHeight: 1.45, color: 'var(--ink-soft)' }}>{t}</span>
      </div>
    ))}
    <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
      {['Confidence', 'Stakeholders', 'Feedback'].map((t) => (
        <span key={t} style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted)',
          background: 'var(--paper-2)', padding: '4px 9px', borderRadius: 7 }}>{t}</span>
      ))}
    </div>
  </div>
);

const GoalCard = () => {
  const pts = [3, 3.5, 4.5, 5, 6, 7];
  const W = 220, H = 64, max = 8;
  const path = pts.map((p, i) =>
    `${i ? 'L' : 'M'} ${(i / (pts.length - 1)) * W} ${H - (p / max) * H}`).join(' ');
  return (
    <div className="mck" style={{ padding: 16, width: 256 }}>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Goal · Stakeholder confidence</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, margin: '6px 0 12px' }}>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 500, lineHeight: 1 }}>7.0</span>
        <span style={{ fontSize: 12.5, color: 'var(--muted)' }}>/ 10 self-rated</span>
        <span style={{ marginLeft: 'auto', fontSize: 12, fontWeight: 700, color: 'var(--green-600)' }}>▲ +4.0</span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none">
        <path d={`${path} L ${W} ${H} L 0 ${H} Z`} fill="url(#g)" opacity=".5" />
        <path d={path} fill="none" stroke="var(--green-500)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        <defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--green-400)" stopOpacity=".55" />
          <stop offset="1" stopColor="var(--green-400)" stopOpacity="0" />
        </linearGradient></defs>
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--faint)', marginTop: 4 }}>
        <span>Session 1</span><span>Session 6</span>
      </div>
    </div>
  );
};

const ChatMock = () => (
  <div className="mck" style={{ padding: 20, width: '100%', maxWidth: 720 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 14, borderBottom: '1px solid var(--line-soft)', marginBottom: 16 }}>
      <Sprout size={18} />
      <span style={{ fontSize: 13.5, fontWeight: 600 }}>Ask your programme</span>
      <span className="mck-chip" style={{ marginLeft: 'auto' }}>Acme · 142 sessions</span>
    </div>
    <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 14 }}>
      <span style={{ background: 'var(--green-600)', color: '#fff', padding: '10px 14px', borderRadius: '14px 14px 4px 14px', fontSize: 13.5, maxWidth: 420 }}>
        How is Devon progressing on his leadership goals?
      </span>
    </div>
    <div style={{ display: 'flex', gap: 11 }}>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--sage-100)', display: 'grid', placeItems: 'center', flex: 'none' }}><Sprout size={15} /></div>
      <div style={{ background: 'var(--paper)', border: '1px solid var(--line-soft)', borderRadius: '14px 14px 14px 4px', padding: '13px 15px', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
        Across 4 sessions, Devon's <b style={{ color: 'var(--ink)' }}>stakeholder confidence rose 3 → 7</b>. He's now leading client retros solo. Remaining focus: upward feedback.
        <div style={{ marginTop: 12 }}><GoalCard /></div>
      </div>
    </div>
  </div>
);

Object.assign(window, { Sprout, Wordmark, Nav, Capture, InsightsCard, GoalCard, ChatMock });