// site/page-integrations.jsx, Product + data integrations (partner directory)

// Partner directory. Adding a partner = adding an object here; the grid scales.
//
// Hive's logo (assets/integrations/hive.webp) is the real brand asset. The blurb
// and data-flow bullets are still a best-guess of the integration — worth a final
// confirmation with the team. Partners without a `logo` fall back to a monogram tile.
const INTEGRATIONS = [
  {
    slug: 'hive',
    name: 'Hive',
    category: 'Marketing & Audience',
    monogram: 'H',
    logo: 'assets/integrations/hive.webp',
    blurb: 'Keep your Fairs.com audiences and ticket-buyer data in sync with Hive, so every campaign reaches the right fairgoers.',
    flows: [
      'Ticket buyers flow into Hive audiences automatically',
      'Purchase and attendance history stays current',
      'Segments built in either tool line up on both sides',
    ],
    featured: true,
  },
  {
    slug: 'alvarado',
    name: 'Alvarado',
    category: 'Access Control',
    monogram: 'A',
    logo: 'assets/integrations/alvarado.png',
    logoOnDark: true,
    blurb: 'The turnstiles and entry pedestals behind Fairs.com access control, integrated natively over DirectConnect.',
    flows: [
      'Tickets validate at the gate in real time',
      'Live headcount flows straight to your dashboard',
      'Bring-your-own hardware works with any provider',
    ],
    featured: true,
  },
];

// Honest description of the integration surface (not fake partners). Mirrors the
// "Custom integrations (POS, ERP, ID systems)" line already used in pricing.
const CATEGORIES = [
  ['Marketing & CRM',    'megaphone', 'Push audiences and ticket data to the tools you email and text from.'],
  ['Payments',           'ticket',    'Settle to the processor you already use, with sales tied back automatically.'],
  ['Point of sale',      'store',     'Keep gate, midway, and online sales in one ledger.'],
  ['ID & credentialing', 'shield',    'Connect wristband, season-pass, and access systems.'],
  ['Data & analytics',   'chart',     'Export clean attendance and revenue data to your warehouse or BI tool.'],
  ['Custom & API',       'zap',       'Build your own with our team, POS, ERP, and ID systems included.'],
];

function PageIntegrations({ onNav }) {
  return (
    <div>
      <PageHero
        eyebrow="Integrations"
        title="Your fair's tools,"
        titleAccent="finally in sync."
        lead="Fairs.com connects to the products and data sources you already run, so ticketing, attendee, and marketing data flows where it needs to, without the copy-paste."
      />

      {/* ── Featured partner + directory grid ─────────────── */}
      <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={{ marginBottom: 40 }}>
            <SectionEyebrow>Integration partners</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, marginTop: 12, letterSpacing: '-0.025em', color: S.ink }}>
              The tools that <em style={{ fontStyle: 'italic', color: S.red }}>plug right in.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {INTEGRATIONS.map((p) => <PartnerCard key={p.slug} p={p} />)}
            {/* Request-an-integration card keeps the grid full and gives a CTA */}
            <button onClick={() => onNav('contact')} style={{
              background: 'transparent', border: `1.5px dashed ${S.ink}`, borderRadius: 16, padding: 28,
              cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
              display: 'flex', flexDirection: 'column', gap: 10, minHeight: 240,
            }}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: S.cream, border: `1.5px solid ${S.ink}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: S.ink }}>
                <Ico name="plus" size={26} strokeWidth={2} />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, marginTop: 'auto', letterSpacing: '-0.015em' }}>Don't see your tool?</div>
              <div style={{ fontSize: 12, color: S.ink, opacity: 0.72, lineHeight: 1.5 }}>Tell us what you run. New connections ship all the time, and we build custom ones too.</div>
              <div style={{ fontSize: 12, fontWeight: 700, color: S.red }}>Request an integration →</div>
            </button>
          </div>
        </div>
      </section>

      {/* ── What we connect (honest categories) ───────────── */}
      <section style={{ background: S.cream, padding: '88px 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: 44 }}>
            <SectionEyebrow>Built to connect</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, marginTop: 12, letterSpacing: '-0.025em', color: S.ink }}>
              Two-way data, <em style={{ fontStyle: 'italic', color: S.red }}>not another silo.</em>
            </h2>
            <p style={{ fontSize: 16, color: S.ink, opacity: 0.72, maxWidth: 620, margin: '12px auto 0' }}>
              However you connect, your data moves both directions and stays current, so you're never exporting spreadsheets to keep two systems honest.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {CATEGORIES.map(([t, ic, b], i) => (
              <div key={i} style={{ background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 14, padding: 24, boxShadow: `4px 4px 0 0 ${i % 2 ? S.red : S.ink}` }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: S.red100, color: S.red, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Ico name={ic} size={22} strokeWidth={1.6} />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, margin: '14px 0 6px', letterSpacing: '-0.015em' }}>{t}</div>
                <div style={{ fontSize: 12, color: S.ink, opacity: 0.72, lineHeight: 1.55 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

function PartnerCard({ p }) {
  return (
    <div style={{
      background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 16, padding: 28,
      boxShadow: `5px 5px 0 0 ${p.featured ? S.red : S.ink}`,
      display: 'flex', flexDirection: 'column', minHeight: 240,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        {p.logo ? (
          <div style={{ height: 56, padding: '0 18px', background: p.logoOnDark ? S.ink : '#fff', border: `1.5px solid ${p.logoOnDark ? S.ink : S.border}`, borderRadius: 14, display: 'inline-flex', alignItems: 'center' }}>
            <img src={p.logo} alt={p.name} style={{ height: 24, width: 'auto', display: 'block' }} />
          </div>
        ) : (
          // Monogram stands in for partners that don't have a logo asset yet.
          <div style={{ width: 56, height: 56, borderRadius: 14, background: S.ink, color: S.cream, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26 }}>
            {p.monogram}
          </div>
        )}
        {p.featured && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.14em', textTransform: 'uppercase' }}>★ Partner</span>}
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 18 }}>{p.category}</div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, color: S.ink, margin: '4px 0 10px', letterSpacing: '-0.025em' }}>{p.name}</h3>
      <p style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.75, margin: '0 0 18px' }}>{p.blurb}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 'auto' }}>
        {p.flows.map((f, j) => (
          <div key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 12, color: S.ink, opacity: 0.85 }}>
            <Ico name="check" size={14} color={S.red} strokeWidth={2.6} style={{ marginTop: 2, flex: '0 0 auto' }} />
            <span>{f}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { PageIntegrations });