/* global React */
const { useState: useState2, useRef } = React;

/* ---------------- Proof ---------------- */
function SiteProof() {
  return (
    <section className="section section--ink" id="proof">
      <img src="assets/motif-plot.svg" alt="" style={{ position: 'absolute', right: 0, bottom: 0, width: 420, opacity: 0.25, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="section__head">
          <span className="eyebrow eyebrow--dark"><span className="cds-tick" /> Proof</span>
          <h2>Measured in enterprise value, not slideware.</h2>
        </div>
        <div className="proof__grid">
          <div className="proof__stats">
            <div className="cds-stat"><div className="cds-stat__value">30<em>%</em></div><div className="cds-stat__label">Higher multiples at exit</div></div>
            <div className="cds-stat"><div className="cds-stat__value">50<em>%</em></div><div className="cds-stat__label">Lower infrastructure cost</div></div>
            <div className="cds-stat"><div className="cds-stat__value">5<em>+ yr</em></div><div className="cds-stat__label">Avg. engagement</div></div>
            <div className="cds-stat"><div className="cds-stat__value">$2.4<em>B+</em></div><div className="cds-stat__label">Enterprise value created</div></div>
          </div>
          <div>
            <p className="proof__quote">
              “They walked into the room as skeptics and left with a
              value-creation plan we could celebrate.”
            </p>
            <p className="proof__cite">Operating Partner · Mid-market PE</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- About ---------------- */
function SiteAbout() {
  return (
    <section className="section section--sunk about" id="about">
      <div className="container">
        <div className="about__grid">
          <div className="portrait"><img src="assets/founder.png" alt="Founder, The Chief Data Scientist" /></div>
          <div>
            <span className="eyebrow"><span className="cds-tick" /> The Chief Data Scientist</span>
            <h2 style={{ marginTop: 'var(--space-3)' }}>A C-suite operator, available by the engagement.</h2>
            <p>
              The practice is led by Kesna Lawrence, a former portfolio company Chief Data Scientist who has built data
              platforms, shipped AI products, and stood up analytics organizations at scale.
            </p>
            <p>
              That operator experience is what you actually need in the room — someone
              who has carried the P&amp;L, not just advised on it. We bring that judgment to
              your deals as a fractional executive, consultant, or board advisor.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-6)', flexWrap: 'wrap' }}>
              <span className="cds-tag cds-tag--outline">15+ yrs in-seat</span>
              <span className="cds-tag cds-tag--outline">Platform · AI · Product</span>
              <span className="cds-tag cds-tag--outline">PE-backed operating</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contact ---------------- */
function SiteContact() {
  const [status, setStatus] = useState2('idle'); // idle | sending | sent | error
  const formRef = useRef(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    const data = Object.fromEntries(new FormData(formRef.current));
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: data.name, email: data.email, company: data.company, message: data.message }),
      });
      if (!res.ok) throw new Error();
      setStatus('sent');
    } catch {
      setStatus('error');
    }
  }

  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="contact__grid">
          <div>
            <span className="eyebrow"><span className="cds-tick" /> Start a conversation</span>
            <h2 style={{ fontSize: 'clamp(1.9rem,3.4vw,2.8rem)', letterSpacing: '-0.02em', marginTop: 'var(--space-3)' }}>
              Have a deal in diligence?
            </h2>
            <p style={{ fontSize: 'var(--text-md)', lineHeight: 1.55, color: 'var(--text-muted)', marginTop: 'var(--space-4)', maxWidth: 420 }}>
              Tell us what you're evaluating. We'll come back with a focused read on the
              data, technology, and AI risk — and where the value is.
            </p>
            <div style={{ marginTop: 'var(--space-7)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <span className="cds-mono-label">info@thechiefdatascientist.com</span>
              <span className="cds-mono-label">Virtual · On-site for diligence</span>
            </div>
          </div>
          <div className="cds-card" style={{ padding: 'var(--space-7)' }}>
            <form ref={formRef} onSubmit={handleSubmit}>
              <div className="form-row">
                <div className="cds-field"><label className="cds-label">Name</label><input name="name" className="cds-input" placeholder="Kesna Lawrence" required /></div>
                <div className="cds-field"><label className="cds-label">Work email</label><input name="email" className="cds-input" type="email" placeholder="you@firm.com" required /></div>
              </div>
              <div className="cds-field"><label className="cds-label">Company</label><input name="company" className="cds-input" placeholder="Your Company" /></div>
              <div className="cds-field"><label className="cds-label">What are you evaluating?</label><textarea name="message" className="cds-input" rows="4" placeholder="Deal context, timeline, portfolio company…" /></div>
              <button className="cds-btn cds-btn--primary cds-btn--lg" type="submit" disabled={status === 'sending' || status === 'sent'} style={{ alignSelf: 'flex-start' }}>
                {status === 'sending' ? 'Sending…' : 'Request an Intro Call'}
              </button>
              {status === 'sent' && <div className="sent"><i data-lucide="check-circle" style={{ width: 16, height: 16 }} /> Thanks — we'll be in touch within one business day.</div>}
              {status === 'error' && <div className="sent" style={{ color: 'var(--text-danger, #e53)' }}><i data-lucide="alert-circle" style={{ width: 16, height: 16 }} /> Something went wrong — please email us directly.</div>}
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__top">
          <img src="assets/lockup-horizontal-dark.svg" alt="The Chief Data Scientist" style={{ height: 44 }} />
          <div className="site-footer__cols">
            <div className="fcol">
              <h4>Services</h4>
              <a href="#services">Data Platforms</a>
              <a href="#services">Analytics &amp; AI</a>
              <a href="#services">Product</a>
              <a href="#services">Coaching</a>
            </div>
            <div className="fcol">
              <h4>Engage</h4>
              <a href="#approach">Fractional C-level</a>
              <a href="#approach">Consulting</a>
              <a href="#approach">Board advisory</a>
            </div>
            <div className="fcol">
              <h4>Firm</h4>
              <a href="#about">About</a>
              <a href="#proof">Proof</a>
              <a href="/blog.html">Blog</a>
              <a href="#contact">Contact</a>
            </div>
          </div>
        </div>
        <div className="site-footer__base">
          <span>© 2026 The Chief Data Scientist</span>
          <span>De-risk · Unlock · Maximize</span>
        </div>
      </div>
    </footer>
  );
}

window.SiteParts2 = { SiteProof, SiteAbout, SiteContact, SiteFooter };