// site/site-shared.jsx, shared atoms for the live site.
// Reuses helpers from the root shared.jsx (Ico, TreatedPhoto, PHOTOS, MODULES,
// REAL_MODULES, REAL_FAIRS, REAL_TESTIMONIALS, REAL_COMPARE, REAL_STATS,
// REAL_TRANSFORM, REAL_PILLARS, useCarousel).

const S = {
  cream:   '#FDF9F0',
  cream2:  '#F5EDD9',
  cream3:  '#F1EADC',
  kraft:   '#E8DCC2',
  ink:     '#100F10',
  ink2:    '#1E2028',
  red:     '#FF3636',
  redDk:   '#BF2626',
  red50:   '#FFF1F1',
  red100:  'rgba(255,54,54,0.10)',
  border:  'rgba(16,15,16,0.10)',
  borderD: 'rgba(255,255,255,0.12)',
  mute:    '#6B6F8C',
};

// ─── Ticket-stub button (notched, primary/red default) ─────
function StubBtn({ children, variant = 'primary', size = 'md', icon = true, onClick, href, kind = 'arrow', target, rel }) {
  const h = size === 'lg' ? 56 : size === 'sm' ? 38 : 46;
  const p = size === 'lg' ? '0 26px' : size === 'sm' ? '0 16px' : '0 22px';
  const fs = size === 'sm' ? 12 : 16;
  const fill = variant === 'primary' ? S.red
    : variant === 'ink'    ? S.ink
    : variant === 'cream'  ? S.cream2
    : 'transparent';
  // Brand black text on the red/cream/outline buttons (ink-on-#FF3636 = 5.3:1,
  // clears AA). Only the dark `ink` variant keeps cream text.
  const fg   = variant === 'ink' ? S.cream : S.ink;
  const bd   = (variant === 'outline' || variant === 'cream') ? `1.5px solid ${S.ink}` : 'none';
  const body = (
    <>
      <span style={{
        position: 'absolute', inset: 0, background: fill, border: bd, borderRadius: 8,
        WebkitMaskImage: `radial-gradient(circle 6px at 0 50%, transparent 5.5px, #000 6px), radial-gradient(circle 6px at 100% 50%, transparent 5.5px, #000 6px)`,
        WebkitMaskComposite: 'source-in',
        transition: 'transform .15s',
      }} />
      <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        {children}
        {icon && kind === 'arrow' && <Ico name="arrowRight" size={size === 'sm' ? 14 : 16} strokeWidth={2.2} />}
      </span>
    </>
  );
  const sx = {
    position: 'relative', height: h, padding: p, background: 'transparent', border: 0,
    fontFamily: 'inherit', fontSize: fs, fontWeight: 700, color: fg, cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8, letterSpacing: '0.01em',
    textDecoration: 'none',
  };
  if (href) return <a href={href} onClick={onClick} style={sx} target={target} rel={rel || (target === '_blank' ? 'noopener noreferrer' : undefined)}>{body}</a>;
  return <button onClick={onClick} style={sx}>{body}</button>;
}

// ─── Eyebrow chip (red, ticket-stub edges) ─────────────────
function StubChip({ children, color = S.red, tone = 'red' }) {
  const bg = tone === 'red' ? 'rgba(255,54,54,0.08)' : 'rgba(16,15,16,0.06)';
  const bdc = tone === 'red' ? 'rgba(255,54,54,0.22)' : 'rgba(16,15,16,0.18)';
  return (
    <div style={{ display: 'inline-flex', position: 'relative' }}>
      <span style={{
        position: 'absolute', inset: 0, background: bg, borderRadius: 999,
        border: `1px solid ${bdc}`,
        WebkitMaskImage: `radial-gradient(circle 5px at 0 50%, transparent 4.5px, #000 5px), radial-gradient(circle 5px at 100% 50%, transparent 4.5px, #000 5px)`,
        WebkitMaskComposite: 'source-in',
      }} />
      <span style={{ position: 'relative', padding: '7px 16px', fontSize: 12, fontWeight: 600, color, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: color }} />
        {children}
      </span>
    </div>
  );
}

// ─── Cow mascot (real fairs.com illustration via CDN) ─────
function Cow({ size = 200, flip = false, rotate = 0, style }) {
  return (
    <img src={(typeof PHOTOS !== 'undefined' && PHOTOS.cowMascot) || 'assets/site-cow.webp'}
      alt="Fairs.com mascot" style={{
      width: size, height: 'auto', display: 'block',
      transform: `${flip ? 'scaleX(-1) ' : ''}rotate(${rotate}deg)`,
      filter: 'drop-shadow(0 10px 20px rgba(40,30,20,0.18))',
      ...style,
    }} />
  );
}

// ─── Speech bubble (cream w/ ink border, red drop shadow) ─
function SpeechBubble({ children, tail = 'left', tilt = 0, style }) {
  return (
    <div style={{
      position: 'relative', display: 'inline-block', maxWidth: 260,
      background: S.cream, border: `2px solid ${S.ink}`, borderRadius: 14,
      padding: '12px 16px', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 16,
      color: S.ink, lineHeight: 1.3,
      boxShadow: `4px 4px 0 0 ${S.red}`, transform: `rotate(${tilt}deg)`,
      ...style,
    }}>
      {children}
      <span style={{
        position: 'absolute',
        [tail === 'left' ? 'left' : 'right']: 22, bottom: -14,
        width: 0, height: 0,
        borderLeft: '10px solid transparent',
        borderRight: '10px solid transparent',
        borderTop: `14px solid ${S.ink}`,
      }} />
      <span style={{
        position: 'absolute',
        [tail === 'left' ? 'left' : 'right']: 24, bottom: -10,
        width: 0, height: 0,
        borderLeft: '8px solid transparent',
        borderRight: '8px solid transparent',
        borderTop: `12px solid ${S.cream}`,
      }} />
    </div>
  );
}

// ─── Hand-drawn underline scribble ──────────────────────────
function Scribble({ width = 280, color = S.red, thick = 4 }) {
  return (
    <svg width={width} height="16" viewBox={`0 0 ${width} 16`} style={{ display: 'block' }}>
      <path d={`M 4 10 Q ${width*0.18} 2 ${width*0.38} 9 T ${width*0.7} 8 T ${width-4} 7`}
        stroke={color} strokeWidth={thick} fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ─── 180+ stamp ─────────────────────────────────────────────
function Stamp180() {
  return (
    <div style={{
      width: 132, height: 132, borderRadius: '50%', border: `2px dashed ${S.red}`,
      background: 'rgba(253,249,240,0.92)', color: S.red,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center', boxShadow: '0 12px 22px rgba(40,30,20,0.16)',
      fontFamily: 'var(--font-display)', fontWeight: 700,
    }}>
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, opacity: 0.75, letterSpacing: '0.22em', textTransform: 'uppercase' }}>Trusted by</div>
        <div style={{ fontSize: 36, lineHeight: 1, marginTop: 4 }}>180+</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 4, letterSpacing: '0.18em', textTransform: 'uppercase' }}>fairs</div>
      </div>
    </div>
  );
}

// ─── Postage stamp logo wall card ──────────────────────────
function PostageStamp({ fair, src }) {
  return (
    <div style={{
      background: S.cream, padding: 10, border: `1px dashed rgba(16,15,16,0.3)`,
      boxShadow: '0 8px 18px rgba(40,30,20,0.10)',
    }}>
      <TreatedPhoto src={src} treatment="sepia" style={{ width: '100%', aspectRatio: '4/3' }} />
      <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>★ Fair · USA</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, lineHeight: 1.2, color: S.ink, marginTop: 2, letterSpacing: '-0.01em' }}>{fair}</div>
        </div>
        <div style={{
          border: `1.5px solid ${S.red}`, color: S.red, padding: '2px 6px',
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em', transform: 'rotate(-6deg)', flexShrink: 0,
        }}>20¢</div>
      </div>
    </div>
  );
}

// ─── Section eyebrow (red star kicker) ─────────────────────
function SectionEyebrow({ children }) {
  return (
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
      ★ {children} ★
    </div>
  );
}

// ─── Page hero (used by every non-home page) ───────────────
// Compact hero with chip + h1 + lead + cow on the right
function PageHero({ eyebrow, title, titleAccent, lead, withCow = true, cowSize = 220, bg = S.cream }) {
  return (
    <section style={{ background: bg, padding: '120px 64px 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: withCow ? '1.4fr 1fr' : '1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <SectionEyebrow>{eyebrow}</SectionEyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.0,
            letterSpacing: '-0.035em', color: S.ink, margin: '20px 0 16px',
          }}>
            {title} {titleAccent && <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>{titleAccent}</em>}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, maxWidth: 640, margin: 0 }}>{lead}</p>
        </div>
        {withCow && (
          <div style={{ position: 'relative', justifySelf: 'end' }}>
            <Cow size={cowSize} rotate={-2} />
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Reusable CTA strip (bottom of most pages) — ink background ──
function CTAStrip({ onNav }) {
  return (
    <section style={{ background: S.ink, padding: '88px 64px', position: 'relative', overflow: 'hidden' }}>
      {/* Faint red glow */}
      <div style={{ position: 'absolute', bottom: -100, right: -100, width: 400, height: 400, borderRadius: '50%', background: S.red, opacity: 0.18, filter: 'blur(60px)' }} />
      <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 280px', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
            ★ Ready to upgrade your fair? ★
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.05,
            letterSpacing: '-0.03em', color: S.cream, margin: '16px 0 12px',
          }}>
            See it run <em style={{ fontStyle: 'italic', color: S.red }}>before your next event.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(253,249,240,0.72)', maxWidth: 560, margin: '0 0 24px' }}>
            A 30-minute consultation with a Fairs.com expert.
          </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.cream,
              border: `1.5px solid rgba(253,249,240,0.45)`, borderRadius: 8,
              fontFamily: 'inherit', fontSize: 16, fontWeight: 700, cursor: 'pointer',
            }}>Learn more →</button>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, justifySelf: 'end' }}>
          <SpeechBubble tail="right" tilt={-3}>
            See why so many fairs <em style={{ fontStyle: 'italic', color: S.red }}>swear by it!</em>
          </SpeechBubble>
          <Cow size={180} flip rotate={-4} />
        </div>
      </div>
    </section>
  );
}

// ─── Photo helpers ──────────────────────────────────────────
function FramedPhoto({ src, treatment = 'sepia', caption, style, tilt = 0 }) {
  return (
    <div style={{ transform: `rotate(${tilt}deg)`, ...style }}>
      <div style={{ background: '#fff', padding: 10, border: `1px solid ${S.border}`, boxShadow: '0 18px 38px rgba(40,30,20,0.14)' }}>
        <TreatedPhoto src={src} treatment={treatment} style={{ width: '100%', aspectRatio: '4/3' }} />
        {caption && <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 12, color: S.ink, opacity: 0.55, textAlign: 'center', letterSpacing: '0.04em' }}>{caption}</div>}
      </div>
    </div>
  );
}

// ─── Mobile-only comparison table ──────────────────────────
// Renders REAL_COMPARE as a stacked card-per-feature layout that
// reads well on narrow viewports. The desktop grid is hidden on
// mobile (CSS in site.html) and this component is shown in its place.
function MobileCompareTable() {
  const c = REAL_COMPARE;
  const brands = c.cols.map((col, i) => ({
    name: col.name,
    label: col.name === 'eTix' ? 'etix' : col.name,
    accent: !!col.accent,
    year:  c.meta[0][i + 1],
    focus: c.meta[1][i + 1],
    price: c.pricing[i + 1],
  }));
  const dotBg = (has, primary) => has ? (primary ? S.red : S.ink) : 'rgba(16,15,16,0.10)';
  return (
    <div className="cmp-mobile">
      {/* Brand strip */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 10 }}>
          ★ Comparing 3 platforms
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {brands.map((b, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '14px 16px', borderRadius: 12,
              background: b.accent ? S.red : S.cream2,
              color:      b.accent ? S.cream : S.ink,
              border:     `1.5px solid ${b.accent ? S.red : S.ink}`,
              boxShadow:  b.accent ? `4px 4px 0 0 ${S.ink}` : 'none',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.015em' }}>
                {b.label}
              </div>
              <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, opacity: b.accent ? 0.85 : 0.7, letterSpacing: '0.08em' }}>Est. {b.year}</span>
                <span style={{ fontSize: 12, opacity: b.accent ? 0.92 : 0.78 }}>{b.focus}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Feature cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {c.features.map(([feature, ...providers], fi) => (
          <div key={fi} style={{
            background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 14,
            overflow: 'hidden',
            boxShadow: '0 4px 10px rgba(40,30,20,0.06)',
          }}>
            <div style={{
              padding: '12px 14px', background: S.cream2,
              borderBottom: `1.5px solid ${S.ink}`,
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16,
              lineHeight: 1.25, color: S.ink, letterSpacing: '-0.01em',
            }}>{feature}</div>
            <div>
              {providers.map((has, pi) => {
                const b = brands[pi];
                const primary = pi === 0;
                return (
                  <div key={pi} style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '11px 14px',
                    borderBottom: pi < providers.length - 1 ? `1px solid ${S.border}` : 'none',
                    background: primary ? 'rgba(255,54,54,0.05)' : 'transparent',
                  }}>
                    <span style={{ fontSize: 16, fontWeight: primary ? 700 : 500, color: S.ink, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                      {primary && <span style={{ color: S.red }}>★</span>}
                      {b.label}
                    </span>
                    {typeof has === 'string' ? (
                      <span style={{
                        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12,
                        color: primary ? S.red : S.ink, letterSpacing: '-0.005em',
                      }}>{has}</span>
                    ) : (
                      <span style={{
                        width: 26, height: 26, borderRadius: 8,
                        background: dotBg(has, primary),
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto',
                      }}>
                        <Ico name={has ? 'check' : 'x'} size={13} color={has ? S.cream : S.ink} strokeWidth={2.6} />
                      </span>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      {/* Pricing card removed; the "Dedicated Account Manager" row now carries
          the Always / Only for Big Events answers, so the separate pricing
          section is redundant. Kept commented out for restoration if needed.
       */}
      {false && (
      <div style={{
        marginTop: 16, background: S.ink, color: S.cream,
        borderRadius: 14, overflow: 'hidden',
        boxShadow: `4px 4px 0 0 ${S.red}`,
      }}>
        <div style={{
          padding: '12px 14px',
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16,
          background: S.red, color: S.ink, letterSpacing: '-0.01em',
        }}>
          Pricing
        </div>
        <div style={{ padding: '11px 14px', fontSize: 12, color: 'rgba(253,249,240,0.85)', borderBottom: `1px solid ${S.borderD}` }}>
          {c.pricing[0]}
        </div>
        {brands.map((b, i) => {
          const primary = i === 0;
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '12px 14px',
              borderBottom: i < brands.length - 1 ? `1px solid ${S.borderD}` : 'none',
              background: primary ? 'rgba(255,54,54,0.12)' : 'transparent',
            }}>
              <span style={{ fontSize: 16, fontWeight: primary ? 700 : 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                {primary && <span style={{ color: S.red }}>★</span>}{b.label}
              </span>
              <span style={{
                fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 700,
                color: primary ? S.red : S.cream, letterSpacing: '-0.01em',
              }}>{b.price}</span>
            </div>
          );
        })}
      </div>
      )}
    </div>
  );
}

// Framed product screenshot — real manager-UI captures in the brand frame
// (ink border + red ticket-stub offset shadow). Used by the Vendors/Sponsors module pages.
function ProductShot({ src, alt, tilt = 0 }) {
  return (
    <div style={{ transform: `rotate(${tilt}deg)`, borderRadius: 16, overflow: 'hidden', border: `1.5px solid ${S.ink}`, boxShadow: `8px 8px 0 0 ${S.red}`, background: S.cream }}>
      <img src={src} alt={alt} style={{ display: 'block', width: '100%', height: 'auto' }} />
    </div>
  );
}

Object.assign(window, {
  S, StubBtn, StubChip, Cow, SpeechBubble, Scribble, Stamp180,
  PostageStamp, SectionEyebrow, PageHero, CTAStrip, FramedPhoto,
  MobileCompareTable, ProductShot,
});