// site/page-solutions.jsx, Solutions hub + 3 audience pages

const SOLUTIONS = [
  { id: 'managers',  label: 'Fair Managers',     icon: 'shield',
    eyebrow: 'For Fair Managers',
    title: 'Run your whole fair',
    titleAccent: 'from one screen.',
    blurb: "If you're the one fielding the calls at 2pm on Saturday, this was built for you.",
    pain: [
      'Five vendors, three logins, two spreadsheets',
      'Volunteer no-shows you only learn about at the gate',
      'Insurance certificates buried in your inbox',
      'No clear picture of what worked last year',
    ],
    gain: [
      'Every operational tool in one platform, websites, tickets, marketing, gates',
      'Live ops dashboard during the fair, real reporting after',
      'Vendor + COI + stall + camping in one queue',
      'YoY reports your board actually understands',
    ],
    modules: ['websites', 'tickets'],
  },
  { id: 'boards', label: 'Fair Boards', icon: 'star',
    eyebrow: 'For Fair Boards',
    title: 'See the fair',
    titleAccent: 'before the year-end meeting.',
    blurb: 'Dashboards, not surprises. Know whether the fair grew before the audit lands.',
    pain: [
      'Numbers that only come together six weeks after the fair',
      'Different stories from different department heads',
      'No way to compare to the last five years',
      'Sponsor reports that are PDFs of PDFs',
    ],
    gain: [
      'One unified dashboard for revenue, attendance, vendors',
      'Year-over-year comparison built in',
      'Per-sponsor performance reports auto-generated',
      'Board-ready exports in three clicks',
    ],
    modules: ['websites', 'tickets', 'grow'],
  },
  { id: 'marketers', label: 'Marketing Managers', icon: 'megaphone',
    eyebrow: 'For Marketing Managers',
    title: 'Know which social post',
    titleAccent: 'actually sold tickets.',
    blurb: "Stop guessing. Track every dollar spent across Facebook, Instagram, TikTok and YouTube back to the tickets it moved.",
    pain: [
      'No clear attribution across Facebook, Instagram, and TikTok',
      'Email tools that don\'t know who\'s a ticket buyer',
      'Social tools that don\'t know about your fair',
      'Reports that take two weeks to assemble',
    ],
    gain: [
      'UTM auto-tagging across every channel',
      'Segments wired straight to ticket data',
      'Email + SMS + social, one composer',
      'Revenue-per-send and per-campaign in real time',
    ],
    modules: ['reach', 'grow'],
  },
];

function PageSolutions({ onNav }) {
  return (
    <div>
      <PageHero
        eyebrow="Solutions"
        title="Built for the people"
        titleAccent="who actually run the fair."
        lead="Whether you're the manager juggling vendors, the board reviewing the year, or the marketer tracking social ROI across platforms, Fairs.com adapts to your role."
      />

      <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', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {SOLUTIONS.map((sol, i) => {
            const tilts = [-0.6, 0.4, -0.4];
            return (
              <button key={sol.id} onClick={() => onNav(sol.id)} style={{
                background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 16, padding: 32,
                boxShadow: `5px 5px 0 0 ${i === 1 ? S.red : S.ink}`,
                transform: `rotate(${tilts[i]}deg)`,
                textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                <div style={{ width: 56, height: 56, borderRadius: 12, background: S.red100, color: S.red, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Ico name={sol.icon} size={26} strokeWidth={1.6} />
                </div>
                <SectionEyebrow>{sol.eyebrow}</SectionEyebrow>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, color: S.ink, lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0 }}>
                  {sol.title} <em style={{ fontStyle: 'italic', color: S.red }}>{sol.titleAccent}</em>
                </h3>
                <p style={{ fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.72, margin: 0 }}>{sol.blurb}</p>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 8, color: S.red, fontWeight: 700, fontSize: 16 }}>
                  See how → <Ico name="arrowRight" size={14} strokeWidth={2.4} />
                </div>
              </button>
            );
          })}
        </div>
      </section>

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

// ─── Reusable solution page template ───────────────────────
function SolutionPage({ sol, onNav }) {
  const ROUTE = { websites: 'websites', tickets: 'ticketing', reach: 'social', grow: 'marketing' };
  return (
    <div>
      <section style={{ padding: '88px 64px', 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>{sol.eyebrow}</SectionEyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.035em', color: S.ink, margin: '20px 0 16px' }}>
              {sol.title} <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>{sol.titleAccent}</em>
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, maxWidth: 560, margin: 0 }}>{sol.blurb}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <StubBtn size="lg" onClick={() => onNav('contact')}>Book a demo</StubBtn>
              <StubBtn size="lg" variant="outline" icon={false} onClick={() => onNav('solutions')}>See all roles →</StubBtn>
            </div>
          </div>
          <div style={{ position: 'relative', justifySelf: 'end' }}>
            <Cow size={280} rotate={-3} />
            <div style={{ position: 'absolute', top: -16, left: -160 }}>
              <SpeechBubble tail="right" tilt={-3}>
                Whichever hat you wear,<br />we've got <em style={{ fontStyle: 'italic', color: S.red }}>your back.</em>
              </SpeechBubble>
            </div>
          </div>
        </div>
      </section>

      {/* Pain / Gain */}
      <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={{ display: 'grid', gridTemplateColumns: '1fr 80px 1fr', alignItems: 'stretch' }}>
            <div style={{ background: S.cream, border: `1.5px solid rgba(16,15,16,0.18)`, padding: 36, borderRadius: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase' }}>What you're juggling now</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: S.ink, margin: '8px 0 24px', letterSpacing: '-0.02em', opacity: 0.6 }}>The status quo</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {sol.pain.map((b, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 16, color: S.ink, opacity: 0.7, lineHeight: 1.4 }}>
                    <Ico name="x" size={16} strokeWidth={2.4} color={S.mute} style={{ marginTop: 2, flex: '0 0 16px' }} />
                    <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(16,15,16,0.3)' }}>{b}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: S.red, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 24px rgba(255,54,54,0.32)' }}>
                <Ico name="arrowRight" size={20} strokeWidth={2.4} color={S.cream} />
              </div>
            </div>
            <div style={{ background: S.cream, border: `1.5px solid ${S.red}`, padding: 36, borderRadius: 16, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 16, right: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', border: `1.5px solid ${S.red}`, padding: '4px 10px', transform: 'rotate(4deg)' }}>★ Fairs.com</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase' }}>With Fairs.com</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: S.ink, margin: '8px 0 24px', letterSpacing: '-0.02em' }}>
                <em style={{ fontStyle: 'italic', color: S.red }}>Streamlined</em> success
              </h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {sol.gain.map((b, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 16, color: S.ink, lineHeight: 1.4 }}>
                    <div style={{ marginTop: 2, width: 18, height: 18, borderRadius: 999, background: S.red100, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                      <Ico name="check" size={11} color={S.red} strokeWidth={2.6} />
                    </div>
                    <span>{b}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Related modules */}
      <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: 40 }}>
            <SectionEyebrow>Modules you'll love</SectionEyebrow>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, marginTop: 12, letterSpacing: '-0.025em', color: S.ink }}>
              The platform pieces <em style={{ fontStyle: 'italic', color: S.red }}>built for your role.</em>
            </h3>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${sol.modules.length}, 1fr)`, gap: 20 }}>
            {sol.modules.map(mid => {
              const mod = REAL_MODULES.find(m => m.id === mid);
              return (
                <button key={mid} onClick={() => onNav(ROUTE[mid])} style={{
                  background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 14, padding: 28,
                  cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit',
                  boxShadow: `4px 4px 0 0 ${S.ink}`,
                  display: 'flex', flexDirection: 'column', gap: 12,
                }}>
                  <Ico name={mod.icon} size={26} color={S.red} strokeWidth={1.6} />
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{mod.kicker}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, letterSpacing: '-0.02em' }}>{mod.label}</div>
                  <div style={{ fontSize: 16, color: S.ink, opacity: 0.72, lineHeight: 1.5 }}>{mod.blurb}</div>
                  <div style={{ marginTop: 6, fontSize: 12, fontWeight: 700, color: S.red }}>Learn more →</div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

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

function PageManagers({ onNav })  { return <SolutionPage sol={SOLUTIONS[0]} onNav={onNav} />; }
function PageBoards({ onNav })    { return <SolutionPage sol={SOLUTIONS[1]} onNav={onNav} />; }
function PageMarketers({ onNav }) { return <SolutionPage sol={SOLUTIONS[2]} onNav={onNav} />; }

Object.assign(window, { PageSolutions, PageManagers, PageBoards, PageMarketers });