// site/page-about.jsx, Our company

function TeamCard({ p, tilt = 0 }) {
  const initials = p.name.split(' ').map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{
      background: S.cream2, padding: 22, borderRadius: 14, border: `1.5px solid ${S.ink}`,
      boxShadow: `4px 4px 0 0 ${S.ink}`, transform: `rotate(${tilt}deg)`,
      display: 'flex', flexDirection: 'column', height: '100%',
    }}>
      {/* Photo */}
      <div style={{
        width: '100%', aspectRatio: '1/1', borderRadius: 10, background: S.kraft,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 36, color: S.ink,
        marginBottom: 16, position: 'relative', overflow: 'hidden',
      }}>
        {p.photo ? (
          <img src={p.photo} alt={p.name}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : initials}
      </div>

      {/* Name */}
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, letterSpacing: '-0.015em', lineHeight: 1.15 }}>{p.name}</div>

      {/* Title / Role */}
      <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16,
        color: S.red, marginTop: 6, lineHeight: 1.3, letterSpacing: '-0.005em',
      }}>{p.role}</div>

      {/* Fun fact / experience — flex spacer so food + linkedin align across cards */}
      <div style={{ flex: 1, marginTop: 12, minHeight: 18 }}>
        {p.callout && (
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 12,
            color: S.ink, opacity: 0.78, lineHeight: 1.4, letterSpacing: '-0.003em',
          }}>{p.callout}</div>
        )}
      </div>

      {/* Favorite Fair Food — clean stacked callout */}
      {p.food && (
        <div style={{
          marginTop: 14,
          padding: '10px 14px',
          background: 'rgba(255,54,54,0.08)',
          border: `1.5px dashed ${S.red}`,
          borderRadius: 10,
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
            color: S.red, opacity: 0.8, letterSpacing: '0.16em',
            textTransform: 'uppercase', marginBottom: 3,
          }}>
            ★ Favorite Fair Food
          </div>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic', fontWeight: 700,
            fontSize: 16, color: S.red, lineHeight: 1.2,
            letterSpacing: '-0.005em',
          }}>
            {p.food}
          </div>
        </div>
      )}

      {/* Line + LinkedIn */}
      {p.linkedin && (
        <a href={p.linkedin} target="_blank" rel="noopener"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            marginTop: 14, paddingTop: 12,
            borderTop: `1px dashed ${S.border}`,
            fontSize: 12, fontWeight: 700, color: S.ink, textDecoration: 'none',
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = S.red}
          onMouseLeave={(e) => e.currentTarget.style.color = S.ink}>
          <Ico name="linkedin" size={14} /> LinkedIn →
        </a>
      )}
    </div>
  );
}

function PageAbout({ onNav }) {
  return (
    <div>
      <PageHero
        eyebrow="Our company"
        title="Built by people who have"
        titleAccent="actually worked a fair gate."
        lead="Fairs.com was founded in 2023 in Columbus, OH by a team that grew up at county fairs, and got tired of watching them get squeezed by generic ticketing platforms."
        cowSize={200}
      />

      {/* Mission with cow */}
      <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.2fr 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 16px' }}>
                Fairs are more than events.<br />
                <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>They are where community happens.</em>
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, margin: '0 0 16px', maxWidth: 600 }}>
                Every August in towns across America, the fairgrounds open and something remarkable happens, the whole community shows up. The 4-H kid showing her steer for the seventh year. The retired auto mechanic running the front gate. The lemonade stand that's been in the same booth since 1974.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, margin: 0, maxWidth: 600 }}>
                We started Fairs.com because the software those fairs rely on wasn't built for them. <em style={{ fontStyle: 'italic', color: S.red }}>It is now.</em>
              </p>
            </div>
            <div style={{ position: 'relative', justifySelf: 'center' }}>
              <FramedPhoto src={PHOTOS.community} treatment="sepia" caption="Opening day, somewhere in the Midwest · 2024" tilt={-2} style={{ width: 360 }} />
              <div style={{ position: 'absolute', bottom: -32, right: -32 }}>
                <Cow size={140} rotate={4} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Three pillars */}
      <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: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <SectionEyebrow>What we stand for</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '16px auto 16px', maxWidth: 720 }}>
              Three things we'll <em style={{ fontStyle: 'italic', color: S.red }}>never compromise.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {REAL_PILLARS.map((p, i) => {
              const tilts = [-0.6, 0.4, -0.4];
              return (
                <div key={p.id} style={{
                  background: S.cream2, padding: 32, borderRadius: 16, border: `1.5px solid ${S.ink}`,
                  position: 'relative', overflow: 'hidden',
                  boxShadow: `5px 5px 0 0 ${i === 1 ? S.red : S.ink}`,
                  transform: `rotate(${tilts[i]}deg)`,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase' }}>★ {p.label}</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.02em', color: S.ink, margin: '14px 0 12px' }}>{p.title}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.72, margin: 0 }}>{p.blurb}</p>
                  <div style={{ position: 'absolute', right: -8, bottom: -8, opacity: 0.06, color: S.ink }}>
                    <Ico name={p.icon} size={140} strokeWidth={1} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Stats, by the numbers */}
      <section style={{ background: S.cream3, 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={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionEyebrow>By the numbers · 2023 – 2026</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 }}>
              Three years in. <em style={{ fontStyle: 'italic', color: S.red }}>Just getting started.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1.5px solid ${S.ink}`, borderBottom: `1.5px solid ${S.ink}` }}>
            {[
              ['180+', 'fairs nationwide', '2023 → 2026'],
              ['27',   'states served',    'and growing'],
              ['10M+', 'attendee interactions', 'across the platform since inception'],
              ['Always', 'human support',  'never an offshore chatbot'],
            ].map(([n, l, s], i) => (
              <div key={i} style={{ padding: '36px 28px', borderRight: i < 3 ? `1px dashed rgba(16,15,16,0.2)` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1, letterSpacing: '-0.03em', color: S.ink }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 16, color: S.red, letterSpacing: '-0.01em' }}>{l}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.08em' }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team strip — some of the Fairs.com team (deliberately not everyone) */}
      <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: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionEyebrow>The Fairs.com team</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '16px auto 0', maxWidth: 720 }}>
              Meet some of <em style={{ fontStyle: 'italic', color: S.red }}>our team.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, maxWidth: 640, margin: '14px auto 0' }}>
              Dozens of years of fair experience behind us.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {[
              { name: 'Scott Hillyer',      role: 'Founder · CEO · Fairs Enthusiast', linkedin: 'https://www.linkedin.com/in/hillyerscott/',               photo: 'assets/team/scott-hillyer.jpg',      food: 'Funnel cake' },
              { name: 'Shane McLaughlin',   role: 'VP of Operations',                 linkedin: 'https://www.linkedin.com/in/shane-mclaughlin-637534121/', photo: 'assets/team/shane-mclaughlin.jpg',   food: 'Steak Tips' },
              { name: 'Danielle Bongiorno', role: 'Director of Partnerships',         linkedin: 'https://www.linkedin.com/in/daniellebongiorno/',          photo: 'assets/team/danielle-bongiorno.jpg', food: 'Cotton candy' },
              { name: 'Dakota Romine',      role: 'Director of Sales and Strategy',   linkedin: 'https://www.linkedin.com/in/dakotaromine/',               photo: 'assets/team/dakota-romine.jpg',      food: 'Elephant ear' },
              { name: 'Kirby Becker',       role: 'Account Manager',                  linkedin: 'https://www.linkedin.com/in/kirby-becker/',               photo: 'assets/team/kirby-becker.jpg',       food: 'Corn Dogs' },
              { name: 'Harlee Hamilton',    role: 'Account Manager',                  linkedin: 'https://www.linkedin.com/in/harlee-hamilton-724241301/',  photo: 'assets/team/harlee-hamilton.jpg',    food: 'Deep Fried Oreos' },
              { name: 'Jenni Burks',        role: 'Account Manager',                  linkedin: 'https://www.linkedin.com/in/jenni-burks-8319873a5/',      photo: 'assets/team/jenni-burks.jpg',        food: 'Caramel apple' },
              { name: 'Grace Metry',        role: 'Account Manager',                  linkedin: 'https://www.linkedin.com/in/grace-metry-444b94a6/',       photo: 'assets/team/grace-metry.jpg',        food: 'Cheese curds' },
            ].map((p, i) => <TeamCard key={i} p={p} tilt={[-0.6, 0.5, -0.4, 0.5, -0.5, 0.4, -0.3, 0.5][i]} />)}
          </div>

          {/* Board */}
          <div style={{ textAlign: 'center', margin: '72px 0 32px' }}>
            <SectionEyebrow>Board of directors</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '14px auto 0', maxWidth: 720 }}>
              The folks <em style={{ fontStyle: 'italic', color: S.red }}>steering the wheel.</em>
            </h2>
          </div>
          {/* Board grid: constrained to 3/4 of the leadership container width
              so each card lands at the same ~306px width as a leadership card. */}
          <div style={{ maxWidth: 956, margin: '0 auto' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
              {[
                { name: 'Ryan Hart',     role: 'Chairman of the Board', linkedin: 'https://www.linkedin.com/in/ryan-e-hart-738b1265/', photo: 'assets/team/ryan-hart.jpg',      food: 'Roasted sweet corn', callout: 'Former CEO of Hometown' },
                { name: 'Scott Hillyer', role: 'Founder · CEO · Board', linkedin: 'https://www.linkedin.com/in/hillyerscott/',          photo: 'assets/team/scott-hillyer.jpg',  food: 'Funnel cake' },
                { name: 'Paul Yanover',  role: 'Board Member',          linkedin: 'https://www.linkedin.com/in/paulyanover/',          photo: 'assets/team/paul-yanover.jpg',   food: 'Caramel apple',     callout: 'Former CEO of Fandango. Current CEO of Lonely Planet.' },
              ].map((p, i) => <TeamCard key={i} p={p} tilt={[-0.4, 0.4, -0.3][i]} />)}
            </div>
          </div>
        </div>
      </section>

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

Object.assign(window, { PageAbout });