/* global React, Footer, Wordmark, Eyebrow, LockPill, Icon, IntentBadge, TrustStrip */
const { useState: mUseState, useEffect: mUseEffect } = React;

// ═══════════════════════════════════════════════════════════
// WHO BUYS — supply-side credibility
// ═══════════════════════════════════════════════════════════
const WHO_BUYS_TYPES = [
  {
    label: 'Private Equity',
    n: '04',
    count: '420+ firms',
    aum: '$5.1B in active mandates',
    desc: 'Lower-middle-market funds running platform plays and add-on roll-ups across industrials, services, and healthcare. Typical hold: 4–7 years.',
    profile: 'Hold periods · Equity checks $5–80M · Industries: 180+ NAICS codes',
  },
  {
    label: 'Search Funds',
    n: '03',
    count: '210+ searchers',
    aum: '$1.2B in committed equity',
    desc: "Solo and partnered MBA-track operators with funded search vehicles. Looking to buy and run a single business they'll lead for 5–10 years.",
    profile: 'Owner-operator transition · Checks $2–15M · Strong on culture fit',
  },
  {
    label: 'Family Offices',
    n: '02',
    count: '180+ offices',
    aum: '$1.6B in active mandates',
    desc: 'Multi-generational capital with patient horizons. Often willing to pay for stability over growth, retain management, structure earn-outs over 5+ years.',
    profile: 'Long hold · Checks $3–60M · Multi-asset diversification',
  },
  {
    label: 'Strategic Acquirers',
    n: '01',
    count: '190+ corporates',
    aum: 'Tuck-in mandates',
    desc: 'Operating companies acquiring within or adjacent to their core business. Synergy-driven, often willing to overpay for fit. Faster diligence; tighter integration timelines.',
    profile: 'Synergy-driven · Variable check sizes · Industry-specific',
  },
];

const SAMPLE_MANDATES = [
  { kind: 'PE', region: 'Southeast', industry: 'HVAC platform', size: '$2–8M EBITDA', pe: '450M AUM · Active 8 mo', status: 'Open · 12 matches reviewed' },
  { kind: 'Search', region: 'Texas / Sun Belt', industry: 'Specialty distribution', size: '$1–4M EBITDA', pe: 'Self-funded · Active 3 mo', status: 'Open · 4 matches reviewed' },
  { kind: 'Family', region: 'National', industry: 'B2B services', size: '$3–12M EBITDA', pe: '3rd-gen · Active 14 mo', status: 'Open · 21 matches reviewed' },
  { kind: 'Strategic', region: 'Mid-Atlantic', industry: 'Commercial roofing', size: 'Tuck-in', pe: 'Public co. · Active 5 mo', status: 'Open · 6 matches reviewed' },
  { kind: 'PE', region: 'California', industry: 'MSP / IT services', size: '$2–6M EBITDA', pe: '$1.2B AUM · Active 11 mo', status: 'Open · 9 matches reviewed' },
  { kind: 'Search', region: 'Pacific NW', industry: 'Niche manufacturing', size: '$1.5–5M EBITDA', pe: "Stanford GSB '24 · Active 6 mo", status: 'Open · 7 matches reviewed' },
];

const HEADLINE_STATS = [
  { v: '1,000+', l: 'Verified buyers' },
  { v: '$8.2B', l: 'Active buyer demand' },
  { v: '62', l: 'Deals facilitated, trailing 12 mo' },
  { v: '47', l: 'States with active mandates' },
];

const WhoBuysPage = ({ 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)' }}>
      {/* Top nav */}
      <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: 16 }}>
          <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>
          )}
        </div>
      </div>

      {/* Hero */}
      <section style={{
        padding: isMobile ? '48px 24px 32px' : `${isTablet ? 80 : 100}px ${padX}px 48px`,
        position: 'relative', overflow: 'hidden',
      }}>
        <Eyebrow>The buyer side</Eyebrow>
        <h1 className="serif" style={{
          fontSize: isMobile ? 'clamp(36px, 9vw, 48px)' : isTablet ? 56 : 72,
          lineHeight: 1.04, letterSpacing: '-0.035em', fontWeight: 350,
          margin: '24px 0 0', maxWidth: 920,
        }}>
          Real institutional buyers, <em style={{ fontWeight: 300, color: accent }}>vetted before they see you</em>.
        </h1>
        <p style={{
          fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: 'var(--ink-3)',
          maxWidth: 640, margin: '24px 0 0',
        }}>
          The strength of a confidential matching service is the strength of its buyer pool. Here&rsquo;s who is on the other side &mdash; categorized, sized, and (where possible) shown in anonymized form.
        </p>
      </section>

      {/* Headline stats */}
      <section style={{ padding: isMobile ? '0 24px 48px' : `0 ${padX}px 64px` }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: isMobile ? 1 : 1, background: 'var(--rule)', border: '1px solid var(--rule)',
        }}>
          {HEADLINE_STATS.map((s, i) => (
            <div key={i} style={{ background: '#efece4', padding: isMobile ? '24px 18px' : '32px 28px' }}>
              <div className="serif" style={{ fontSize: isMobile ? 36 : 56, fontWeight: 350, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--ink)' }}>{s.v}</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase', marginTop: 14 }}>{s.l}</div>
            </div>
          ))}
        </div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-5)', marginTop: 16 }}>
          As of Q1 2026 · Active mandates only · Updated weekly
        </div>
      </section>

      {/* Buyer types */}
      <section style={{ padding: isMobile ? '48px 24px' : `80px ${padX}px`, background: '#efece4', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
        <Eyebrow>Buyer types in our network</Eyebrow>
        <h2 className="serif" style={{ fontSize: isMobile ? 32 : 44, fontWeight: 350, letterSpacing: '-0.025em', margin: '12px 0 48px', maxWidth: 720 }}>
          Four kinds of capital. Each looking for something different.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 24 : 32 }}>
          {WHO_BUYS_TYPES.map((t) => (
            <div key={t.label} style={{
              background: 'var(--paper)', padding: isMobile ? 24 : 32, border: '1px solid var(--rule)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, marginBottom: 16 }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: accent }}>{t.n}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--ink-4)', textTransform: 'uppercase' }}>{t.count}</div>
              </div>
              <h3 className="serif" style={{ fontSize: isMobile ? 24 : 28, fontWeight: 400, letterSpacing: '-0.02em', margin: '0 0 10px' }}>{t.label}</h3>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--ink-3)', marginBottom: 16 }}>{t.aum}</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', margin: 0 }}>{t.desc}</p>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--rule)' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 6 }}>Typical profile</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{t.profile}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Sample mandates */}
      <section style={{ padding: isMobile ? '48px 24px' : `80px ${padX}px`, background: 'var(--paper)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>Sample mandates</Eyebrow>
            <h2 className="serif" style={{ fontSize: isMobile ? 28 : 36, fontWeight: 350, letterSpacing: '-0.025em', margin: '12px 0 0', maxWidth: 720 }}>
              A view of what buyers are asking for, this quarter.
            </h2>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-4)', maxWidth: 280 }}>
            Anonymized to protect both sides. Real mandates from active buyers in our network.
          </div>
        </div>
        <div style={{ border: '1px solid var(--rule)' }}>
          {SAMPLE_MANDATES.map((m, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '120px 1fr 1fr 160px 200px',
              gap: isMobile ? 8 : 24,
              padding: isMobile ? 20 : '20px 24px',
              borderBottom: i < SAMPLE_MANDATES.length - 1 ? '1px solid var(--rule)' : 'none',
              alignItems: 'baseline', background: i % 2 ? '#faf8f3' : 'var(--paper)',
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: accent }}>{m.kind}</div>
              <div>
                <div className="serif" style={{ fontSize: 17, fontWeight: 450, letterSpacing: '-0.012em' }}>{m.industry}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>{m.region}</div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{m.size}</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-4)', textTransform: 'uppercase' }}>{m.pe}</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--emerald)', textTransform: 'uppercase' }}>{m.status}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, padding: 20, background: '#efece4', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>
            247 more open mandates not shown here. Match against all of them in 90 seconds.
          </div>
          <button className="btn btn-primary btn-arrow" style={{ padding: '12px 20px', fontSize: 13 }} onClick={() => navigate('seller-wizard')}>
            See your matches
          </button>
        </div>
      </section>

      {/* How buyers join */}
      <section style={{ padding: isMobile ? '48px 24px' : `80px ${padX}px`, background: 'var(--ink)', color: 'var(--paper)' }}>
        <Eyebrow>How buyers get in</Eyebrow>
        <h2 className="serif" style={{ fontSize: isMobile ? 28 : 36, fontWeight: 350, letterSpacing: '-0.025em', margin: '12px 0 32px', maxWidth: 720 }}>
          Verification before access. Always.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 24 : 40 }}>
          {[
            { n: '01', t: 'Proof of capital', b: 'Fund LPA, recent capital call notice, or a signed letter from the institutional source. Search funds: capital commitment letters or self-funded equity proof.' },
            { n: '02', t: 'Track record check', b: 'For PE: prior fund deal history. For search funds: GSB / HBS / Wharton credentials or a referrer in our network. For family offices: principal verification.' },
            { n: '03', t: 'Annual recertification', b: "Buyers re-verify yearly. Mandates expire on a rolling 6-month cycle unless explicitly renewed. We don't carry stale demand." },
          ].map((s) => (
            <div key={s.n}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: accent, opacity: 0.85 }}>{s.n}</div>
              <h4 className="serif" style={{ fontSize: 22, fontWeight: 450, letterSpacing: '-0.018em', margin: '12px 0 10px' }}>{s.t}</h4>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(245,243,238,0.7)', margin: 0 }}>{s.b}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid rgba(245,243,238,0.12)' }}>
          <button className="btn btn-ghost" onClick={() => navigate('verification')} style={{ color: 'var(--paper)', fontSize: 13 }}>
            Read full Buyer Verification Standards <Icon.Arrow size={12} />
          </button>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '64px 24px' : `100px ${padX}px`, textAlign: isMobile ? 'left' : 'center' }}>
        <h2 className="serif" style={{ fontSize: isMobile ? 32 : 48, fontWeight: 350, letterSpacing: '-0.03em', margin: 0, lineHeight: 1.1 }}>
          The supply side is real. <em style={{ fontWeight: 300 }}>Now check demand for your business.</em>
        </h2>
        <div style={{ marginTop: 32, display: 'flex', gap: 16, justifyContent: isMobile ? 'flex-start' : 'center', flexWrap: 'wrap', alignItems: 'center' }}>
          <button className="btn btn-primary btn-arrow" style={{ padding: '16px 24px', fontSize: 15 }} onClick={() => navigate('seller-wizard')}>
            See your matches
          </button>
          <span style={{ fontSize: 13, color: 'var(--ink-4)' }}>Free · Confidential · 90 seconds</span>
        </div>
      </section>

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

Object.assign(window, { WhoBuysPage });