/* global React, Wordmark, Eyebrow, LockPill, Icon, Footer, MobileNavDrawer, MobileHamburger */
const { useState } = React;

// ═══════════════════════════════════════════════════════════
// SHARED — top nav + sub-nav for About cluster
// ═══════════════════════════════════════════════════════════
const AboutHeader = ({ navigate, isMobile, padX, current }) => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  return (
  <>
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: isMobile ? '20px 24px' : `24px ${padX}px`,
      borderBottom: '1px solid var(--rule-2)',
    }}>
      <Wordmark size={isMobile ? 20 : 22} />
      <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 10 : 16 }}>
        {!isMobile && (
          <button className="btn btn-ghost" onClick={() => navigate('seller-landing')} style={{ fontSize: 13 }}>
            <Icon.ArrowLeft /> Home
          </button>
        )}
        {!isMobile && (
          <button className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }} onClick={() => navigate('seller-wizard')}>
            See your matches
          </button>
        )}
        {isMobile && (
          <>
            <button className="btn btn-primary" style={{ padding: '8px 14px', fontSize: 12 }} onClick={() => navigate('seller-wizard')}>
              See matches
            </button>
            <MobileHamburger onClick={() => setDrawerOpen(true)} />
          </>
        )}
      </div>
    </div>
    {isMobile && <MobileNavDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} navigate={navigate} currentScreen={current} />}
    <div style={{
      display: 'flex', gap: isMobile ? 16 : 32, padding: isMobile ? '14px 24px' : `16px ${padX}px`,
      borderBottom: '1px solid var(--rule)', background: '#faf8f3',
      overflowX: 'auto', whiteSpace: 'nowrap',
    }}>
      <span className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-5)', textTransform: 'uppercase', alignSelf: 'center' }}>About /</span>
      {[
        { id: 'about-story', label: 'Our Story' },
        { id: 'about-team', label: 'Team' },
        { id: 'about-contact', label: 'Contact' },
      ].map((s) => (
        <button key={s.id} onClick={() => navigate(s.id)} style={{
          fontSize: 13, color: current === s.id ? 'var(--ink)' : 'var(--ink-3)',
          fontWeight: current === s.id ? 500 : 400,
          borderBottom: current === s.id ? '2px solid var(--ink)' : '2px solid transparent',
          paddingBottom: 4, background: 'none', border: 'none', cursor: 'pointer',
        }}>{s.label}</button>
      ))}
    </div>
  </>
  );
};

// ═══════════════════════════════════════════════════════════
// OUR STORY
// ═══════════════════════════════════════════════════════════
const OurStoryPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;

  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <AboutHeader navigate={navigate} isMobile={isMobile} padX={padX} current="about-story" />

      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 80 : 100}px ${padX}px 48px`, maxWidth: 980 }}>
        <Eyebrow>Our Story</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 40 : isTablet ? 56 : 72, fontWeight: 350, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '20px 0 0' }}>
          Most owners aren't ready to list. <em style={{ fontWeight: 300 }}>They're ready to be told a number.</em>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink-3)', maxWidth: 740, margin: '28px 0 0' }}>
          Buyside was founded in 2025 to fix a specific problem: the gap between "curious about selling" and "publicly listed." For most lower-middle-market owners, the only way to learn what their business is worth was to commit to a process they weren't sure they wanted.
        </p>
      </section>

      {/* The origin */}
      <section style={{ padding: isMobile ? '32px 24px' : `48px ${padX}px`, borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 12 : 48 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>Chapter 01</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 6 }}>The origin</div>
          </div>
          <div style={{ maxWidth: 740 }}>
            <h2 className="serif" style={{ fontSize: isMobile ? 26 : 32, fontWeight: 400, letterSpacing: '-0.022em', margin: '0 0 16px', lineHeight: 1.2 }}>
              From the sell-side desk
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 16px' }}>
              Our founder spent nine years on the sell-side at a regional advisory practice in Austin. The pattern was always the same: a great owner with a real business would walk in, ready to "explore options," and within sixty days find themselves in a CIM, on a teaser, with twenty buyers reading their financials.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0 }}>
              Most of those owners were not ready for that. They wanted one thing: <em>is anyone interested at the price I'd accept?</em> If yes, they'd think about it. If no, they'd keep running the business. The advisory engagement was answering a question they hadn't asked yet.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: isMobile ? '32px 24px' : `48px ${padX}px`, borderTop: '1px solid var(--rule)', background: '#faf8f3' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 12 : 48 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>Chapter 02</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 6 }}>The thesis</div>
          </div>
          <div style={{ maxWidth: 740 }}>
            <h2 className="serif" style={{ fontSize: isMobile ? 26 : 32, fontWeight: 400, letterSpacing: '-0.022em', margin: '0 0 16px', lineHeight: 1.2 }}>
              Inverting the listing model
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 16px' }}>
              Buyers in the LMM already publish their mandates — to brokers, to intermediaries, to other PE firms in their networks. The supply of <em>institutional buyer demand</em> is structured, documented, and (importantly) re-verifiable. The supply of <em>willing-but-private sellers</em> is the bottleneck.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0 }}>
              So we flipped it. Instead of asking sellers to expose themselves to find buyers, we ask buyers to commit their criteria first, and let sellers query that pool privately. Match counts and valuation ranges, computed in 90 seconds, with no listing required.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: isMobile ? '32px 24px' : `48px ${padX}px`, borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 12 : 48 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>Chapter 03</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 6 }}>Today</div>
          </div>
          <div style={{ maxWidth: 740 }}>
            <h2 className="serif" style={{ fontSize: isMobile ? 26 : 32, fontWeight: 400, letterSpacing: '-0.022em', margin: '0 0 16px', lineHeight: 1.2 }}>
              Where we are now
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 16px' }}>
              1,000+ verified institutional buyers. $8.2B in active mandate volume. Sellers in 47 states. 62 deals routed to advisory partners over the trailing twelve months. Headquartered in Austin with senior advisors across industrials, tech-enabled services, and healthcare.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0 }}>
              When a seller is ready to move forward, we route the deal to a vetted sell-side advisory partner. We are not a broker. We are a way to find out — quietly, accurately, with no commitment — whether the next conversation is worth having.
            </p>
          </div>
        </div>
      </section>

      {/* Stats strip */}
      <section style={{ padding: isMobile ? '40px 24px' : `64px ${padX}px`, background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 24 : 40 }}>
          {[
            { v: '2025', l: 'Founded' },
            { v: '47', l: 'States with sellers' },
            { v: '1,000+', l: 'Verified buyers' },
            { v: 'SOC 2', l: 'Type II certified' },
          ].map((s, i) => (
            <div key={i}>
              <div className="serif" style={{ fontSize: isMobile ? 32 : 44, fontWeight: 350, letterSpacing: '-0.025em', lineHeight: 1 }}>{s.v}</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(245,243,238,0.55)', marginTop: 12 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      <Footer variant="seller" navigate={navigate} />
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// TEAM
// ═══════════════════════════════════════════════════════════
const TeamPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;

  const TEAM = [
    { name: 'Kevin Mitchell', role: 'Founder', bio: "Former lower-middle-market investment banker. Spent 9 years on the sell-side at a regional advisory practice. Built Buyside after watching dozens of owners get cornered by public listings they didn't need.", initials: 'KM', highlight: true, location: 'Austin, TX', photo: 'team/Kevin Mitchell.jpg' },
    { name: 'Rachel Alvarado', role: 'Partner · Industrials', bio: '14 years sell-side M&A. Closed 60+ transactions in HVAC, manufacturing, and industrial services. Licensed broker in TX, FL, GA.', initials: 'RA', location: 'Houston, TX', photo: 'team/Rachel Alvarado.png' },
    { name: 'Daniel Mensah', role: 'Partner · Tech-enabled services', bio: 'Former search funder turned advisor. Specialty: IT services, MSPs, and SaaS-light platforms in the $2M–$10M EBITDA range.', initials: 'DM', location: 'Atlanta, GA', photo: 'team/Daniel Mensah.jpg' },
    { name: 'Margaret Thorne', role: 'Senior Advisor · Healthcare', bio: 'Former CFO of a regional dental DSO. 20+ years operating before moving to advisory. Specialty in services and roll-ups.', initials: 'MT', location: 'Nashville, TN', photo: 'team/Margaret Thorne.jpg' },
  ];

  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <AboutHeader navigate={navigate} isMobile={isMobile} padX={padX} current="about-team" />

      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 80 : 100}px ${padX}px 48px`, maxWidth: 980 }}>
        <Eyebrow>Team</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 40 : isTablet ? 56 : 72, fontWeight: 350, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '20px 0 0' }}>
          Former bankers and operators. <em style={{ fontWeight: 300 }}>No marketers, no PMs.</em>
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-3)', maxWidth: 720, margin: '24px 0 0' }}>
          Every advisor on Buyside has personally closed transactions in the industry they cover. When you book a call, you'll speak to one of the four people below — not a coordinator, not an SDR.
        </p>
      </section>

      <section style={{ padding: isMobile ? '32px 24px 64px' : `48px ${padX}px 80px`, borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 32 : 48, marginTop: 24 }}>
          {TEAM.map((p, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 20, alignItems: 'flex-start', paddingBottom: 28, borderBottom: '1px solid var(--rule)' }}>
              <div style={{ width: 120, height: 140, borderRadius: 2, overflow: 'hidden', background: 'var(--paper-2)' }}>
                <img src={p.photo} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, letterSpacing: '-0.02em', margin: 0 }}>{p.name}</h3>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: p.highlight ? accent : 'var(--ink-4)', marginTop: 6 }}>{p.role}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-5)', marginTop: 4 }}>{p.location}</div>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', margin: '12px 0 0' }}>{p.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: isMobile ? '32px 24px' : `48px ${padX}px`, background: '#efece4', borderTop: '1px solid var(--ink)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>Talk to one of them</Eyebrow>
            <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, letterSpacing: '-0.018em', margin: '12px 0 0' }}>
              Your industry advisor is assigned automatically.
            </h3>
          </div>
          <button className="btn btn-primary btn-arrow" style={{ padding: '14px 22px', fontSize: 14 }} onClick={() => navigate('seller-wizard')}>
            See your matches
          </button>
        </div>
      </section>

      <Footer variant="seller" navigate={navigate} />
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// CONTACT
// ═══════════════════════════════════════════════════════════
const ContactPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [topic, setTopic] = useState('seller');
  const [msg, setMsg] = useState('');
  const [sent, setSent] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name && email && msg) setSent(true);
  };

  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <AboutHeader navigate={navigate} isMobile={isMobile} padX={padX} current="about-contact" />

      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 80 : 100}px ${padX}px 48px`, maxWidth: 980 }}>
        <Eyebrow>Contact</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 40 : isTablet ? 56 : 72, fontWeight: 350, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '20px 0 0' }}>
          We answer emails. <em style={{ fontWeight: 300 }}>Slowly, but personally.</em>
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-3)', maxWidth: 660, margin: '24px 0 0' }}>
          For seller inquiries, the fastest path is the match wizard. For everything else — partnerships, press, advisor recruiting, or general questions — use the form below.
        </p>
      </section>

      {/* Contact info + form */}
      <section style={{ padding: isMobile ? '32px 24px 64px' : `48px ${padX}px 100px`, borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 40 : 64 }}>
          {/* Left: contact channels */}
          <div>
            <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20, marginBottom: 32 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>Headquarters</div>
              <div className="serif" style={{ fontSize: 18, fontWeight: 400, letterSpacing: '-0.012em', margin: '10px 0 4px' }}>Austin, Texas</div>
              <div style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>
                500 W 2nd Street, Suite 1900<br />
                Austin, TX 78701
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 20, marginBottom: 32 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>By email</div>
              <div style={{ display: 'grid', gap: 10, marginTop: 12 }}>
                {[
                  { l: 'General', e: 'hello@buyside.market' },
                  { l: 'Press', e: 'press@buyside.market' },
                  { l: 'Buyer onboarding', e: 'buyers@buyside.market' },
                  { l: 'Data deletion', e: 'delete@buyside.market' },
                ].map((row) => (
                  <div key={row.l} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--ink-5)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{row.l}</span>
                    <span className="mono" style={{ fontSize: 13, color: 'var(--ink)' }}>{row.e}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 20 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>Hours</div>
              <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.55, margin: '10px 0 0' }}>
                Monday – Friday, 8am – 6pm CT.<br />
                We aim to respond to every email within 48 hours.
              </p>
            </div>
          </div>

          {/* Right: form */}
          <div>
            {sent ? (
              <div style={{ background: '#efece4', padding: 40, border: '1px solid var(--ink)', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16 }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: accent, color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon.Check size={20} />
                </div>
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', margin: 0 }}>Message received.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-3)', margin: 0, maxWidth: 480 }}>
                  Thanks, {name.split(' ')[0]}. We'll respond from a real person, at the email above, within 48 hours. No marketing, no follow-ups beyond what's needed to answer your question.
                </p>
                <button className="btn btn-ghost" style={{ fontSize: 13, padding: 0, marginTop: 8 }} onClick={() => { setSent(false); setName(''); setEmail(''); setMsg(''); }}>
                  Send another <Icon.Arrow size={12} />
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 24, maxWidth: 560 }}>
                <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20 }}>
                  <div>
                    <label className="field-label">Your name</label>
                    <input type="text" value={name} onChange={(e) => setName(e.target.value)} required style={{ width: '100%' }} />
                  </div>
                  <div>
                    <label className="field-label">Email</label>
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required style={{ width: '100%' }} />
                  </div>
                </div>

                <div>
                  <label className="field-label">Reason for reaching out</label>
                  <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 8, marginTop: 8 }}>
                    {[
                      { v: 'seller', l: 'Selling' },
                      { v: 'buyer', l: 'Buyer mandate' },
                      { v: 'press', l: 'Press' },
                      { v: 'other', l: 'Other' },
                    ].map((opt) => (
                      <button
                        key={opt.v}
                        type="button"
                        onClick={() => setTopic(opt.v)}
                        style={{
                          padding: '10px 14px', fontSize: 13, fontFamily: 'inherit',
                          border: `1px solid ${topic === opt.v ? 'var(--ink)' : 'var(--rule)'}`,
                          background: topic === opt.v ? 'var(--ink)' : 'var(--paper)',
                          color: topic === opt.v ? 'var(--paper)' : 'var(--ink-2)',
                          cursor: 'pointer', textAlign: 'center',
                        }}
                      >
                        {opt.l}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="field-label">Message</label>
                  <textarea value={msg} onChange={(e) => setMsg(e.target.value)} rows={6} required style={{ width: '100%', resize: 'vertical', fontFamily: 'inherit' }} />
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-5)', textTransform: 'uppercase', marginTop: 8 }}>
                    {msg.length} chars · No attachments at this stage
                  </div>
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', paddingTop: 8, borderTop: '1px solid var(--rule)' }}>
                  <div style={{ fontSize: 12, color: 'var(--ink-4)', maxWidth: 360 }}>
                    Your message goes to a real person at Buyside. We won't add you to any list.
                  </div>
                  <button type="submit" className="btn btn-primary btn-arrow" style={{ padding: '14px 22px', fontSize: 14 }}>
                    Send message
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>

      <Footer variant="seller" navigate={navigate} />
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// (Unchanged) DATA HANDLING + VERIFICATION pages preserved
// ═══════════════════════════════════════════════════════════
const DataHandlingPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;
  const [drawerOpen, setDrawerOpen] = useState(false);
  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isMobile ? '20px 24px' : `24px ${padX}px`, borderBottom: '1px solid var(--rule-2)' }}>
        <Wordmark size={isMobile ? 20 : 22} />
        {isMobile ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => navigate('seller-landing')} style={{ fontSize: 12 }}>
              <Icon.ArrowLeft /> Back
            </button>
            <MobileHamburger onClick={() => setDrawerOpen(true)} />
          </div>
        ) : (
          <button className="btn btn-ghost" onClick={() => navigate('seller-landing')} style={{ fontSize: 13 }}>
            <Icon.ArrowLeft /> Back
          </button>
        )}
      </div>
      {isMobile && <MobileNavDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} navigate={navigate} currentScreen="data-handling" />}
      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 64 : 96}px ${padX}px 48px`, maxWidth: 880 }}>
        <Eyebrow>What happens after you submit</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 36 : isTablet ? 48 : 60, fontWeight: 350, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 0' }}>
          Plain English. <em style={{ fontWeight: 300 }}>No legalese.</em>
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-3)', margin: '24px 0 0', maxWidth: 680 }}>
          We wrote this page because we'd want it before typing our own EBITDA into a website. Here's exactly what we do — and don't do — with what you tell us.
        </p>
      </section>
      <section style={{ padding: isMobile ? '32px 24px' : `40px ${padX}px`, borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 1, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          <div style={{ background: '#faf8f3', padding: 28 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent }}>What we do</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 16 }}>
              {['Store your answers encrypted at rest (AES-256) and in transit (TLS 1.3).','Run them through buyer mandates and return your match count and valuation range.','Email your results to the address you provided.','Assign one Buyside advisor (a real human) who may follow up by email or phone — once.','Allow you to delete everything, anytime, with one click.'].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.55 }}>
                  <span style={{ color: accent, marginTop: 5 }}><Icon.Check size={14} /></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: '#faf8f3', padding: 28 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--intent-red)' }}>What we never do</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 16 }}>
              {['Sell, share, or transfer your contact information to any third party.','Reveal your name, business name, or any identifying detail to a buyer without your written consent.','Publish anything about you, anywhere, ever.','Use third-party trackers, retargeting pixels, or behavioral ad networks.','Auto-enroll you in marketing — every email is opt-in, including Market Watch.'].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.55 }}>
                  <span style={{ color: 'var(--intent-red)', marginTop: 5 }}><Icon.Close size={14} /></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
      <Footer variant="seller" navigate={navigate} />
    </div>
  );
};

const VerificationPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;
  const [drawerOpen, setDrawerOpen] = useState(false);
  const STANDARDS = [
    { type: 'PE Firms', items: ['Form ADV or fund formation documents','Most recent capital account statement','Proof of one closed transaction in last 36 months','Background check on signing partner'] },
    { type: 'Search Funders', items: ['Search-fund letter or sponsor accelerator confirmation','Committed-capital evidence ($2M+ minimum)','MBA verification or equivalent operating background','Two professional references'] },
    { type: 'Family Offices', items: ['Accredited investor verification (Reg D)','Letter on family-office letterhead from principal','Proof of $25M+ in deployable capital','Declared deal-decision authority'] },
    { type: 'Strategic Acquirers', items: ['Most recent audited financials or 10-K','M&A team contact verification','One closed acquisition in last 24 months','Board-approved buy-box documentation'] },
    { type: 'HNW Individuals', items: ['Proof of $5M+ liquid net worth','Bank or wirehouse letter of capability','Verified LinkedIn + two references','Personal background check'] },
  ];
  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isMobile ? '20px 24px' : `24px ${padX}px`, borderBottom: '1px solid var(--rule-2)' }}>
        <Wordmark size={isMobile ? 20 : 22} />
        {isMobile ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => navigate('buyer-landing')} style={{ fontSize: 12 }}>
              <Icon.ArrowLeft /> Back
            </button>
            <MobileHamburger onClick={() => setDrawerOpen(true)} />
          </div>
        ) : (
          <button className="btn btn-ghost" onClick={() => navigate('buyer-landing')} style={{ fontSize: 13 }}>
            <Icon.ArrowLeft /> Back
          </button>
        )}
      </div>
      {isMobile && <MobileNavDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} navigate={navigate} currentScreen="verification" />}
      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 64 : 96}px ${padX}px 32px`, maxWidth: 1000 }}>
        <Eyebrow>Buyer Verification Standards</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 38 : isTablet ? 52 : 64, fontWeight: 350, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '20px 0 0' }}>
          One fake buyer ends the platform. <em style={{ fontWeight: 300 }}>So we don't allow them.</em>
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-3)', maxWidth: 720, margin: '24px 0 0' }}>
          Every buyer on Buyside passes one of five documented verification paths below. Every active mandate is re-verified quarterly. Every code-of-conduct violation is a permanent ban with no appeal.
        </p>
      </section>
      <section style={{ padding: isMobile ? '32px 24px' : `48px ${padX}px`, borderTop: '1px solid var(--rule)' }}>
        <div style={{ display: 'grid', gap: 1, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          {STANDARDS.map((s, i) => (
            <div key={i} style={{ background: '#faf8f3', padding: isMobile ? 20 : 28, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '220px 1fr', gap: isMobile ? 12 : 32 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)' }}>Path 0{i+1}</div>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, letterSpacing: '-0.015em', margin: '8px 0 0' }}>{s.type}</h3>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                {s.items.map((it, j) => (
                  <li key={j} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>
                    <span style={{ color: accent, marginTop: 5 }}><Icon.Check size={12} /></span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>
      <Footer variant="buyer" navigate={navigate} />
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// PRIVACY POLICY
// ═══════════════════════════════════════════════════════════
const PrivacyPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;

  const sections = [
    { title: 'Information we collect', body: "When you use the Buyside match flow, we collect the answers you provide: industry, revenue range, EBITDA range, years owned, state, transition preference, intent level, email address, and optionally your phone number. We also collect basic technical data (IP address, browser type, device type) for security and fraud prevention. We do not use cookies for advertising or behavioral tracking." },
    { title: 'How we use your information', body: "Your match flow answers are used exclusively to calculate your buyer match count and estimated valuation range. Your email is used to deliver your results and, if you opt in, periodic Market Watch updates. Your phone number, if provided, is used only for direct outreach by your assigned Buyside advisor. We never sell, rent, or share your personal information with third parties for marketing purposes." },
    { title: 'Data storage and security', body: "All data is encrypted at rest using AES-256 and in transit using TLS 1.3. Our infrastructure is hosted on SOC 2 Type II compliant providers. Access to seller data is restricted to your assigned Buyside advisor and platform administrators, with all access logged and auditable." },
    { title: 'Buyer data separation', body: "Seller and buyer data are architecturally segregated. Buyers can only ever see anonymized, aggregated seller data (industry, size band, geography, intent level). No buyer can access your name, email, phone number, or business name without your explicit written consent, facilitated through a Buyside advisor." },
    { title: 'Third-party services', body: "We use a limited set of third-party services to operate the platform: email delivery (Resend), scheduling (Calendly/Cal.com), and privacy-respecting analytics (PostHog). We do not use Google Analytics, Facebook Pixel, retargeting networks, or any third-party advertising trackers on seller-facing pages." },
    { title: 'Data retention and deletion', body: "Your match data is retained for 30 months to support annual valuation refreshes and Market Watch delivery. You may request complete deletion of all your data at any time by emailing privacy@buyside.market or clicking the deletion link in any Buyside email. Deletion requests are processed within 5 business days." },
    { title: 'Your rights', body: "Under CCPA, VCDPA, CPA, and GDPR (where applicable), you have the right to: access all data we hold about you, request correction of inaccurate data, request deletion of your data, opt out of any marketing communications, and request a portable copy of your data. To exercise any of these rights, contact privacy@buyside.market." },
    { title: 'Changes to this policy', body: "We may update this policy from time to time. Material changes will be communicated via email to all users with active accounts. The date of the most recent revision is noted at the top of this page." },
  ];

  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '20px 24px' : `24px ${padX}px`,
        borderBottom: '1px solid var(--rule-2)',
      }}>
        <Wordmark size={isMobile ? 20 : 22} />
        <button className="btn btn-ghost" onClick={() => navigate('seller-landing')} style={{ fontSize: 13 }}>
          <Icon.ArrowLeft size={12} /> Back
        </button>
      </div>
      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 64 : 96}px ${padX}px 48px`, maxWidth: 880 }}>
        <Eyebrow>Legal</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 36 : isTablet ? 48 : 60, fontWeight: 350, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 0' }}>
          Privacy Policy
        </h1>
        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 16, letterSpacing: '0.06em' }}>
          Last updated: January 15, 2026
        </p>
      </section>
      <section style={{ padding: isMobile ? '0 24px 64px' : `0 ${padX}px 100px`, maxWidth: 880 }}>
        {sections.map((s, i) => (
          <div key={i} style={{ paddingTop: 28, paddingBottom: 28, borderTop: '1px solid var(--rule)' }}>
            <h2 className="serif" style={{ fontSize: isMobile ? 20 : 24, fontWeight: 450, letterSpacing: '-0.015em', margin: '0 0 12px' }}>{s.title}</h2>
            <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-3)', margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </section>
      <Footer variant="seller" navigate={navigate} />
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// TERMS OF SERVICE
// ═══════════════════════════════════════════════════════════
const TermsPage = ({ bp, navigate, accent }) => {
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const padX = isMobile ? 24 : isTablet ? 56 : 80;

  const sections = [
    { title: '1. Service description', body: "Buyside is a confidential matching service operated by Buyside, Inc. The platform connects mid-market business owners with vetted acquirers through an anonymous, double-blind matching process. Buyside is not a broker, marketplace, or exchange. All advisory services and deal facilitation are provided by Capex Advisory, a licensed sell-side M&A advisory firm." },
    { title: '2. Eligibility', body: "The seller match flow is available to any US-based business owner or authorized representative. The buyer dashboard and mandate submission are restricted to verified institutional buyers (PE firms, search funds, family offices, strategic acquirers, and qualified high-net-worth individuals). Buyside reserves the right to reject or revoke buyer access at any time." },
    { title: '3. No public listings', body: "Buyside does not publish, list, or publicly expose any seller information. Seller data is used exclusively for internal matching calculations and is only shared with a buyer upon the seller's explicit written consent, facilitated by a Buyside advisor." },
    { title: '4. Accuracy of information', body: "Sellers represent that the information provided in the match flow is materially accurate to the best of their knowledge. Buyside does not independently verify seller-provided data in the match flow. Formal verification occurs during the advisory engagement with Capex Advisory." },
    { title: '5. Match results disclaimer', body: "Match counts, valuation ranges, and buyer breakdowns provided by Buyside are estimates based on current buyer mandate data and comparable deal databases. They do not constitute a formal valuation, appraisal, or offer to purchase. Actual transaction terms may differ materially from estimates shown." },
    { title: '6. Buyer verification', body: "All buyers must complete a verification process before accessing live matches. Verification includes proof of capital, track record documentation, and background checks on signing principals. Verified status is valid for 12 months and must be renewed annually." },
    { title: '7. Confidentiality', body: "Both sellers and buyers agree to treat all information received through the Buyside platform as confidential. Unauthorized disclosure of match data, seller profiles, buyer mandates, or any other platform information is grounds for immediate termination of access and may result in legal action." },
    { title: '8. Limitation of liability', body: "Buyside provides the matching service on an as-is basis. Buyside is not liable for the outcome of any introduction, negotiation, or transaction facilitated through the platform or through Capex Advisory. Maximum liability is limited to fees paid to Buyside in the 12 months preceding any claim." },
    { title: '9. Governing law', body: "These terms are governed by the laws of the State of Texas, without regard to conflict of law principles. Any disputes shall be resolved through binding arbitration in Austin, Texas, under the rules of the American Arbitration Association." },
    { title: '10. Modifications', body: "Buyside reserves the right to modify these terms at any time. Material changes will be communicated via email to all registered users at least 30 days before taking effect. Continued use of the platform after changes take effect constitutes acceptance of the modified terms." },
  ];

  return (
    <div className="viewport-scroll" style={{ background: 'var(--paper)' }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '20px 24px' : `24px ${padX}px`,
        borderBottom: '1px solid var(--rule-2)',
      }}>
        <Wordmark size={isMobile ? 20 : 22} />
        <button className="btn btn-ghost" onClick={() => navigate('seller-landing')} style={{ fontSize: 13 }}>
          <Icon.ArrowLeft size={12} /> Back
        </button>
      </div>
      <section style={{ padding: isMobile ? '48px 24px 32px' : `${isTablet ? 64 : 96}px ${padX}px 48px`, maxWidth: 880 }}>
        <Eyebrow>Legal</Eyebrow>
        <h1 className="serif" style={{ fontSize: isMobile ? 36 : isTablet ? 48 : 60, fontWeight: 350, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 0' }}>
          Terms of Service
        </h1>
        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 16, letterSpacing: '0.06em' }}>
          Last updated: January 15, 2026
        </p>
      </section>
      <section style={{ padding: isMobile ? '0 24px 64px' : `0 ${padX}px 100px`, maxWidth: 880 }}>
        {sections.map((s, i) => (
          <div key={i} style={{ paddingTop: 28, paddingBottom: 28, borderTop: '1px solid var(--rule)' }}>
            <h2 className="serif" style={{ fontSize: isMobile ? 20 : 24, fontWeight: 450, letterSpacing: '-0.015em', margin: '0 0 12px' }}>{s.title}</h2>
            <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-3)', margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </section>
      <Footer variant="seller" navigate={navigate} />
    </div>
  );
};

Object.assign(window, { OurStoryPage, TeamPage, ContactPage, DataHandlingPage, VerificationPage, PrivacyPage, TermsPage });
