/* global React, Sprout, Wordmark, ChatDemo, AutoInsights, CalendarSync */
const { useState: uS, useEffect: uE, useRef: uR } = React;

const check = (c = 'var(--green-600)') => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="11" fill={c} opacity=".12"/><path d="M7 12.5l3.2 3.2L17 8.5" stroke={c} strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"/></svg>
);

/* ---- sticky top bar ---- */
function TopBar({ onCTA }) {
  const [scrolled, setScrolled] = uS(false);
  uE(() => {
    const h = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <header className={'topbar' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap">
        <Wordmark />
        <nav className="me-nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#who">Who it's for</a>
        </nav>
        <button className="me-btn me-btn-primary" style={{ padding: '11px 17px', fontSize: 14 }} onClick={onCTA}>Join the waitlist</button>
      </div>
    </header>
  );
}

/* ---- hero ---- */
function Hero({ onCTA }) {
  return (
    <section className="hero reveal">
      <div className="hero-glow" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="rise d1"><span className="me-pill">✦ &nbsp;Built for mentorship programme managers</span></div>
        <h1 className="rise d2">Mentorship, <em>reimagined.</em></h1>
        <p className="hero-lead rise d3">Insights from every session, progress you can actually see, and follow-ups that book themselves. The AI co-pilot for mentorship programmes.</p>
        <div className="rise d4" style={{ display: 'flex', justifyContent: 'center' }}>
          <button className="me-btn me-btn-primary" style={{ padding: '15px 26px', fontSize: 16 }} onClick={onCTA}>Join the waitlist →</button>
        </div>
        <div className="hero-note rise d4">No credit card · Private beta opening summer 2026</div>
      </div>
      <div className="wrap rise d5" style={{ position: 'relative', zIndex: 1, marginTop: 56, display: 'flex', justifyContent: 'center', paddingBottom: 90 }}>
        <ChatDemo />
      </div>
    </section>
  );
}

/* ---- scroll-reveal wrapper ---- */
function IO({ children, className = '', style }) {
  const ref = uR(null); const [inv, setInv] = uS(false);
  uE(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInv(true); io.disconnect(); } }, { threshold: 0.18 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <div ref={ref} className={'io ' + (inv ? 'in ' : '') + className} style={style}>{children}</div>;
}

/* ---- how it works ---- */
function HowItWorks() {
  const steps = [
    ['Capture the session', 'Record in-app or drop in a transcript from Zoom, Meet or Teams. Mentors do nothing extra.',
      <path key="a" d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3ZM6 11a6 6 0 0 0 12 0M12 17v4" stroke="var(--green-700)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>],
    ['Menteasy digests it', 'Every conversation becomes structured insights, themes and tracked progress against each goal - automatically.',
      <path key="b" d="M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0Zm7-4v4l2.5 2.5" stroke="var(--green-700)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>],
    ['Follow-ups book themselves', 'The next session lands in both calendars, and you can interrogate the whole programme any time.',
      <path key="c" d="M4 9h16M7 3v3m10-3v3M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm5 9 2 2 3.5-3.5" stroke="var(--green-700)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>],
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <IO><span className="section-eyebrow">How it works</span>
          <h2 className="section-title">Set it up once. It runs <em>itself.</em></h2></IO>
        <div className="steps">
          {steps.map(([t, d, ico], i) => (
            <IO key={t} style={{ transitionDelay: i * 0.1 + 's' }}>
              <div className="step">
                <span className="step-n">0{i + 1}</span>
                <div className="step-ico"><svg width="24" height="24" viewBox="0 0 24 24">{ico}</svg></div>
                <h4>{t}</h4><p>{d}</p>
              </div>
            </IO>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- features ---- */
function Features() {
  return (
    <section className="section" id="features" style={{ background: 'var(--sage-50)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
      <div className="wrap" style={{ display: 'grid', gap: 110 }}>
        {/* F1 */}
        <IO><div className="feature">
          <div className="feature-copy">
            <span className="feature-num">✦ Feature 01</span>
            <h3>Insights, generated while you sleep</h3>
            <p>Stop writing up notes. Menteasy transcribes each session and digests it into the things that actually matter - milestones, watch-outs and the next best action.</p>
            <ul className="feature-list">
              <li>{check()}<span>Auto-transcribed and summarised in minutes</span></li>
              <li>{check()}<span>Mentors do nothing extra — no new tools to learn</span></li>
              <li>{check()}<span>Themes and sentiment tracked across the whole programme</span></li>
              <li>{check()}<span>Private by default - mentors and mentees control what's shared</span></li>
            </ul>
          </div>
          <div className="feature-stage"><AutoInsights /></div>
        </div></IO>
        {/* F2 */}
        <IO><div className="feature flip">
          <div className="feature-copy">
            <span className="feature-num">✦ Feature 02</span>
            <h3>Ask anything about your programme — and get a real answer</h3>
            <p>Set goals in session one; Menteasy extracts the numbers and the nuance. Ask anything - about one mentee or all 142 - and get answers backed by real progress charts.</p>
            <ul className="feature-list">
              <li>{check()}<span>Qualitative <i>and</i> quantitative - themes plus measurable goal progress</span></li>
              <li>{check()}<span>Charts built automatically from what was actually said</span></li>
              <li>{check()}<span>Spot at-risk pairings before momentum is lost</span></li>
            </ul>
            <p style={{ fontSize: 14, color: 'var(--green-700)', fontWeight: 600 }}>↑ Try the live demo at the top of the page.</p>
          </div>
          <div className="feature-stage">
            <div className="mck" style={{ width: '100%', maxWidth: 420, padding: 20 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 12 }}>Goal · Stakeholder confidence</div>
              <GoalCard />
              <div style={{ marginTop: 14, fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>
                <b style={{ color: 'var(--ink)' }}>Pulled from session 1:</b> "I want to feel confident leading client meetings." Menteasy tracked it to a 7/10 by session 6.
              </div>
            </div>
          </div>
        </div></IO>
        {/* F3 */}
        <IO><div className="feature">
          <div className="feature-copy">
            <span className="feature-num">✦ Feature 03</span>
            <h3>The next session books itself</h3>
            <p>Menteasy syncs with both calendars, finds the slot that works, and sends the invite - so good intentions actually turn into booked time. No reminder emails, no back-and-forth.</p>
            <ul className="feature-list">
              <li>{check()}<span>Two-way sync with Google, Outlook & Microsoft 365</span></li>
              <li>{check()}<span>Cadence rules per programme - e.g. every 3 weeks</span></li>
              <li>{check()}<span>Gentle nudges only when a pairing actually stalls</span></li>
            </ul>
          </div>
          <div className="feature-stage"><CalendarSync /></div>
        </div></IO>
      </div>
    </section>
  );
}

/* ---- who it's for ---- */
function WhoItsFor() {
  const cards = [
    ['Companies & teams', 'Run onboarding buddies, leadership tracks and skip-level mentoring at scale - with the reporting People teams need.',
      <path key="a" d="M3 20v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M9 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 10v-2a4 4 0 0 0-3-3.9M16 4.1A3 3 0 0 1 16 10" stroke="var(--green-700)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none"/>],
    ['Nonprofits', 'Show funders the impact of your mentoring with evidence, not anecdotes - without adding admin to volunteers.',
      <path key="b" d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10Z" stroke="var(--green-700)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none"/>],
    ['Community programmes', 'Match mentors and mentees, keep them meeting, and understand what\u2019s working across the whole cohort.',
      <path key="c" d="M12 3 4 7v6c0 4.5 3.5 7 8 8 4.5-1 8-3.5 8-8V7l-8-4Z" stroke="var(--green-700)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none"/>],
  ];
  return (
    <section className="section" id="who">
      <div className="wrap">
        <IO><span className="section-eyebrow">Who it's for</span>
          <h2 className="section-title">Built for anyone who runs <em>mentorship.</em></h2></IO>
        <div className="audience">
          {cards.map(([t, d, ico], i) => (
            <IO key={t} style={{ transitionDelay: i * 0.1 + 's' }}>
              <div className="aud-card">
                <div className="aud-ico"><svg width="24" height="24" viewBox="0 0 24 24">{ico}</svg></div>
                <h4>{t}</h4><p>{d}</p>
              </div>
            </IO>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- pricing ---- */
function Pricing({ onCTA }) {
  const tiers = [
    { tier: 'Tier 1', name: 'Starter', price: '£199', sessions: '150 sessions included',
      tagline: 'Perfect for your first mentoring cohort', popular: false,
      features: ['AI session transcription', 'Automated goal tracking', 'Session scheduling', 'Progress dashboard', 'Email support'] },
    { tier: 'Tier 2', name: 'Growth', price: '£599', sessions: '500 sessions included',
      tagline: 'For scaling mentoring programmes', popular: true, inherit: 'Everything in Starter',
      features: ['Advanced analytics & reporting', 'Manager visibility dashboard', 'Priority support'] },
  ];
  return (
    <section className="section" id="pricing" style={{ background: 'var(--sage-50)', borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)' }}>
      <div className="wrap">
        <IO><span className="section-eyebrow">Pricing</span>
          <h2 className="section-title">Simple pricing that scales <em>with you.</em></h2></IO>
        <div className="pricing">
          {tiers.map((t, i) => (
            <IO key={t.name} style={{ transitionDelay: i * 0.1 + 's' }}>
              <div className={'price-card' + (t.popular ? ' popular' : '')}>
                <div className="price-name">{t.name}</div>
                <p className="price-tagline">{t.tagline}</p>
                <div className="price-amount"><span className="num">{t.price}</span><span className="per">/ month</span></div>
                <span className="price-sessions">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4 4 10-10" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  {t.sessions}
                </span>
                <div className="price-divider" />
                <ul className="price-features">
                  {t.inherit && <li className="inherit">{check(t.popular ? 'var(--green-400)' : 'var(--green-600)')}<span>{t.inherit}</span></li>}
                  {t.features.map((f) => (
                    <li key={f}>{check(t.popular ? 'var(--green-400)' : 'var(--green-600)')}<span>{f}</span></li>
                  ))}
                </ul>
                <div className="price-cta">
                  <button className={'me-btn ' + (t.popular ? 'me-btn-primary' : 'me-btn-ghost')}
                    onClick={onCTA}
                    style={t.popular ? { background: '#fff', color: 'var(--green-900)' } : null}>
                    Join the waitlist
                  </button>
                </div>
              </div>
            </IO>
          ))}
        </div>
        <p className="price-foot">Beta pricing, locked in for early teams. No card required to join the waitlist.</p>
      </div>
    </section>
  );
}

/* ---- beta signup CTA ---- */
function BetaCTA({ formRef }) {
  const [email, setEmail] = uS('');
  const [err, setErr] = uS('');
  const [done, setDone] = uS(false);
  uE(() => {
    try { if (localStorage.getItem('menteasy_beta_email')) setDone(true); } catch (e) {}
  }, []);
  async function submit(e) {
    e.preventDefault();
    const v = email.trim();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)) { setErr('Please enter a valid email address.'); return; }
    setErr('');
    try {
      const res = await fetch('https://formspree.io/f/xjgdvyyg', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: v }),
      });
      if (!res.ok) { setErr('Something went wrong — please try again.'); return; }
    } catch (_) { setErr('Something went wrong — please try again.'); return; }
    try { localStorage.setItem('menteasy_beta_email', v); } catch (e) {}
    setDone(true);
  }
  return (
    <section className="section" id="beta" ref={formRef} style={{ paddingTop: 40 }}>
      <IO><div className="cta">
        <div className="cta-glow" />
        {!done ? (
          <>
            <h2>Be first to <em>reimagine</em><br />how you mentor.</h2>
            <p>Join the private beta. We're onboarding a small group of mentorship programmes this summer - tell us where to send your invite.</p>
            <form className="capture-lg" onSubmit={submit} noValidate>
              <input type="email" value={email} onChange={(e) => { setEmail(e.target.value); if (err) setErr(''); }} placeholder="you@company.com" aria-label="Email address" />
              <button type="submit">Join the waitlist</button>
            </form>
            <div className="capture-err">{err}</div>
          </>
        ) : (
          <div className="cta-success">
            <div className="check"><svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.2 4.2L19 7" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
            <h2 style={{ fontSize: 'clamp(30px,4vw,44px)' }}>You're on the list.</h2>
            <p style={{ margin: '16px auto 0' }}>Thanks for joining the Menteasy beta. We'll email you the moment your invite is ready - keep an eye on your inbox this summer.</p>
            <button className="me-btn" onClick={() => { try { localStorage.removeItem('menteasy_beta_email'); } catch (e) {} setEmail(''); setDone(false); }}
              style={{ marginTop: 26, background: 'rgba(255,255,255,.12)', color: '#fff', border: '1px solid rgba(255,255,255,.25)' }}>
              Use a different email
            </button>
          </div>
        )}
      </div></IO>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <Wordmark size={18} />
        <div className="footer-links">
          <a href="#how">How it works</a><a href="#features">Features</a><a href="#pricing">Pricing</a><a href="#who">Who it's for</a><a href="#beta">Beta</a>
        </div>
        <span style={{ fontSize: 13, color: 'var(--faint)' }}>© 2026 Menteasy · Mentorship, reimagined.</span>
      </div>
    </footer>
  );
}

function App() {
  const formRef = uR(null);
  const goCTA = () => {
    const el = document.getElementById('beta');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: 'smooth' });
  };
  return (
    <div className="page">
      <TopBar onCTA={goCTA} />
      <Hero onCTA={goCTA} />
      <HowItWorks />
      <Features />
      <WhoItsFor />
      <Pricing onCTA={goCTA} />
      <BetaCTA formRef={formRef} />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);