// site/page-who-we-are.jsx, Who We Are (why fairs)
// Structure mirrors the why-fairs page on fairs.com: hero, mission,
// fragmented vs unified, offering/comparison, progress stats, logo wall.

// ─── Flow diagrams (using fairs.com CDN images) ───────────────
const FLOW_IMG = 'https://cdn.prod.website-files.com/693311519694297faf620ece';
function WithoutFairsFlow() {
  return (
    <img src={`${FLOW_IMG}/69336888ff5aa65425dcc31e_event-automation-without-fairs.webp`}
      alt="Without Fairs.com: six separate logins required to push one event update across systems"
      style={{ width: '100%', height: 'auto', display: 'block' }} />
  );
}
function WithFairsFlow() {
  return (
    <img src={`${FLOW_IMG}/69336888ee20e1f2c834881f_event-automation-with-fairs.webp`}
      alt="With Fairs.com: one login pushes the event update everywhere automatically"
      style={{ width: '100%', height: 'auto', display: 'block' }} />
  );
}

function PageWhoWeAre({ onNav }) {
  return (
    <div>
      {/* Hero, "The only fair-first platform" */}
      <section style={{ background: S.cream, padding: '120px 64px 80px', position: 'relative', overflow: 'hidden' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <SectionEyebrow>Who we are</SectionEyebrow>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 0.98,
              letterSpacing: '-0.035em', color: S.ink, margin: '20px 0 20px',
            }}>
              The only <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>fair-first</em><br />
              platform.
            </h1>
            <p style={{ fontSize: 22, lineHeight: 1.5, color: S.ink, opacity: 0.78, maxWidth: 580, margin: '0 0 28px' }}>
              Most event software treats fairs like an afterthought. We built ours for fairs first, shaped by how fairs actually run and what the people running them actually need.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <StubBtn size="lg" onClick={() => onNav?.('contact')}>Book a demo</StubBtn>
              <button onClick={() => onNav?.('platform')} style={{
                position: 'relative', height: 56, padding: '0 24px',
                background: 'transparent', color: S.ink,
                border: `1.5px solid ${S.ink}`, borderRadius: 8,
                fontFamily: 'inherit', fontSize: 16, fontWeight: 700, cursor: 'pointer',
              }}>Learn more →</button>
            </div>
          </div>
          <div style={{ position: 'relative', justifySelf: 'center' }}>
            <FramedPhoto src={PHOTOS.ferriswheelCloseup || PHOTOS.midway} treatment="grained" caption="★ The midway, after sunset" tilt={2} style={{ width: 380 }} />
            <div style={{ position: 'absolute', top: -28, left: -28, transform: 'rotate(-8deg)' }}>
              <Stamp180 />
            </div>
          </div>
        </div>
      </section>

      {/* Mission, "integrate your website, ticketing, marketing, operations" */}
      <section style={{ background: S.cream2, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <SectionEyebrow>Our mission</SectionEyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.03em', color: S.ink, margin: '16px 0 20px' }}>
                One login. One platform.<br />
                <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>Your whole fair.</em>
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, margin: '0 0 16px', maxWidth: 580 }}>
                Stop bouncing between five vendors and a spreadsheet. With Fairs.com, your website, ticketing, marketing, and gate operations all run through the same system, built specifically for the way fairs actually work.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, margin: 0, maxWidth: 580 }}>
                That means your team spends less time exporting CSVs and more time running the best week of the year.
              </p>
            </div>
            <div style={{ position: 'relative', justifySelf: 'center' }}>
              <FramedPhoto src={PHOTOS.missionFlags || PHOTOS.community} treatment="sepia" caption="★ Opening morning · grandstand entrance" tilt={-2} style={{ width: 380 }} />
              <div style={{ position: 'absolute', bottom: -36, right: -36 }}>
                <Cow size={140} rotate={6} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Fragmented vs Unified, side-by-side flowchart concept */}
      <section style={{ background: S.cream, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <SectionEyebrow>Fragmented vs. unified</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '16px auto 0', maxWidth: 760 }}>
              The scattered approach <em style={{ fontStyle: 'italic', color: S.red }}>costs you time and money.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'stretch' }}>
            {/* Fragmented diagram card */}
            <div style={{
              background: S.cream2, padding: '32px 28px 24px', borderRadius: 20,
              border: `1.5px solid ${S.ink}`, position: 'relative',
              boxShadow: `6px 6px 0 0 ${S.ink}`,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.ink, opacity: 0.55, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 6 }}>Before · fragmented</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, lineHeight: 1.15, letterSpacing: '-0.02em', color: S.ink, margin: '0 0 18px' }}>
                One change. <em style={{ fontStyle: 'italic', color: S.red }}>Six places</em> to update.
              </h3>
              <WithoutFairsFlow />
            </div>

            {/* Unified diagram card */}
            <div style={{
              background: S.cream, padding: '32px 28px 24px', borderRadius: 20,
              border: `1.5px solid ${S.ink}`, position: 'relative', overflow: 'hidden',
              boxShadow: `6px 6px 0 0 ${S.red}`,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 6 }}>★ After · unified</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, lineHeight: 1.15, letterSpacing: '-0.02em', color: S.ink, margin: '0 0 18px' }}>
                One change. <em style={{ fontStyle: 'italic', color: S.red }}>Everywhere</em> at once.
              </h3>
              <WithFairsFlow />
            </div>
          </div>

          {/* Footer note */}
          <div style={{ textAlign: 'center', marginTop: 40, fontSize: 16, color: S.ink, opacity: 0.7, maxWidth: 700, marginLeft: 'auto', marginRight: 'auto' }}>
            A single login connects your website, ticketing, marketing, and operations. No more piecing together incompatible tools or losing sleep over data that won't sync.
          </div>
        </div>
      </section>

      {/* Our Offering, How we stack up (reuse REAL_COMPARE) */}
      <section style={{ background: S.cream2, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionEyebrow>Our offering</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '16px auto 12px', maxWidth: 720 }}>
              How we <em style={{ fontStyle: 'italic', color: S.red }}>stack up.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.7, maxWidth: 620, margin: '0 auto' }}>
              See what sets the fair-first platform apart from generic event ticketing software.
            </p>
          </div>

          {/* Comparison table */}
          <MobileCompareTable />
          <div className="cmp-table" style={{
            background: S.cream, borderRadius: 16, border: `1.5px solid ${S.ink}`,
            overflow: 'hidden', boxShadow: `6px 6px 0 0 ${S.red}`,
          }}>
            {/* Header row */}
            <div className="cmp-row" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', borderBottom: `1.5px solid ${S.ink}` }}>
              <div style={{ padding: '18px 24px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.ink, opacity: 0.55, letterSpacing: '0.18em', textTransform: 'uppercase', background: S.cream2 }}>
                Company information
              </div>
              {REAL_COMPARE.cols.map((col, i) => (
                <div key={i} style={{
                  padding: '18px 24px', textAlign: 'center',
                  background: col.accent ? S.red : 'transparent',
                  color: col.accent ? S.cream : S.ink,
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16,
                  borderLeft: `1px solid ${S.border}`,
                }}>
                  {col.name}
                </div>
              ))}
            </div>

            {/* Meta rows */}
            {REAL_COMPARE.meta.map((row, i) => (
              <div key={i} className="cmp-row" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', borderBottom: `1px solid ${S.border}` }}>
                <div style={{ padding: '14px 24px', fontSize: 16, fontWeight: 600, color: S.ink, background: S.cream2 }}>{row[0]}</div>
                {row.slice(1).map((v, j) => (
                  <div key={j} style={{ padding: '14px 24px', textAlign: 'center', fontSize: 16, color: S.ink, opacity: 0.78, borderLeft: `1px solid ${S.border}` }}>{v}</div>
                ))}
              </div>
            ))}

            {/* Features divider */}
            <div style={{ padding: '12px 24px', background: S.cream2, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.18em', textTransform: 'uppercase', borderBottom: `1px solid ${S.border}` }}>
              ★ Features
            </div>

            {/* Feature rows */}
            {REAL_COMPARE.features.map((row, i) => (
              <div key={i} className="cmp-row" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', borderBottom: i < REAL_COMPARE.features.length - 1 ? `1px solid ${S.border}` : 'none' }}>
                <div style={{ padding: '14px 24px', fontSize: 16, fontWeight: 600, color: S.ink, background: S.cream2 }}>{row[0]}</div>
                {row.slice(1).map((v, j) => (
                  <div key={j} style={{ padding: '14px 24px', textAlign: 'center', borderLeft: `1px solid ${S.border}` }}>
                    {typeof v === 'string' ? (
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: S.ink }}>{v}</span>
                    ) : (
                      <span style={{
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        width: 26, height: 26, borderRadius: 6,
                        background: v ? (j === 0 ? S.red : S.ink) : 'rgba(16,15,16,0.08)',
                      }}>
                        <Ico name={v ? 'check' : 'x'} size={14} color={v ? S.cream : S.ink} strokeWidth={2.5} />
                      </span>
                    )}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Progress, 180+/48hrs/28% stats on dark */}
      <section style={{ background: S.ink, padding: '96px 64px', color: S.cream, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -80, left: -80, width: 320, height: 320, borderRadius: '50%', background: S.red, opacity: 0.16, filter: 'blur(60px)' }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
                ★ Our progress ★
              </div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.03em', color: S.cream, margin: '16px 0 16px' }}>
                Trusted by <em style={{ fontStyle: 'italic', color: S.red }}>180+ fairs</em><br />
                across North America.
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(253,249,240,0.72)', margin: 0, maxWidth: 480 }}>
                Over 180 county and state fairs have joined the platform since we launched in 2023, and our customer success team works alongside every one of them.
              </p>
            </div>
            <div style={{ display: 'grid', gap: 16 }}>
              {REAL_STATS.map((s, i) => (
                <div key={i} style={{
                  background: 'rgba(255,255,255,0.04)', border: `1px solid ${S.borderD}`,
                  borderRadius: 14, padding: '24px 28px', display: 'grid', gridTemplateColumns: '160px 1fr', alignItems: 'center', gap: 24,
                }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 56, lineHeight: 1, color: S.red, letterSpacing: '-0.02em' }}>{s.num}</div>
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 700, color: S.cream }}>{s.label}</div>
                    {s.sub && <div style={{ fontSize: 16, color: 'rgba(253,249,240,0.65)', marginTop: 4 }}>{s.sub}</div>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Trusted by fair organizations nationwide, postage-stamp logo wall */}
      <section style={{ background: S.cream, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <SectionEyebrow>Across the country</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '16px auto 12px', maxWidth: 720 }}>
              Trusted by fair organizations <em style={{ fontStyle: 'italic', color: S.red }}>nationwide.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.7, maxWidth: 580, margin: '0 auto' }}>
              From single-county fairs to multi-state associations, here are a few of the teams running on Fairs.com today.
            </p>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 20 }}>
            {Array.from({ length: 18 }, (_, i) => 'assets/customer-logos/fair-logo-' + String(i + 1).padStart(2, '0') + '.png').map((src, i) => (
              <div key={i} style={{
                width: 200, height: 110, background: S.cream2, border: `1.5px solid ${S.border}`,
                borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 18,
              }}>
                <img src={src} alt="Customer fair logo" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip onNav={onNav} />
    </div>
  );
}

Object.assign(window, { PageWhoWeAre });