// Shared.jsx: links and the small building blocks every light page repeats.
// Load it before any component that uses them.
const SK_LINKS = {
  signup: 'https://console.skardi.ai/signup',
  console: 'https://console.skardi.ai',
  login: 'https://console.skardi.ai/login',
  docs: 'https://skardilabs.github.io/skardi-docs/',
  github: 'https://github.com/SkardiLabs/skardi',
  demo: '/demo',
  email: 'mailto:info@skardi.ai',
};

const SK_GRADIENT = 'linear-gradient(90deg, #2ec47a 0%, #1a8fe0 100%)';
const SK_MONO = "'JetBrains Mono', monospace";

// Brand logos from Simple Icons, tinted to `hex`. Slack left Simple Icons,
// so its mark is served from /assets/icons instead.
const skIcon = (slug, hex) => slug === 'slack'
  ? '/assets/icons/slack.svg'
  : `https://cdn.simpleicons.org/${slug}/${hex}`;

// cta_clicked is the event every CTA reports; `location` says which one.
const skTrack = (cta, location) => () => window.skardiTrack?.('cta_clicked', { cta, location });

const GradientText = ({ children }) => (
  <span style={{
    background: SK_GRADIENT,
    WebkitBackgroundClip: 'text', backgroundClip: 'text',
    WebkitTextFillColor: 'transparent', color: 'transparent',
  }}>{children}</span>
);

// The faint 24px grid behind heroes and the dark CTA band, faded out by `mask`.
const GridOverlay = ({ color = 'rgba(10,18,32,0.04)', mask, radius }) => (
  <div aria-hidden="true" style={{
    position: 'absolute', inset: 0, pointerEvents: 'none', borderRadius: radius,
    backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
    backgroundSize: '24px 24px',
    ...(mask ? { maskImage: mask, WebkitMaskImage: mask } : {}),
  }} />
);

const HeroBadge = ({ children }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '6px 14px', borderRadius: 9999,
    border: '1px solid rgba(29,168,105,0.3)', background: 'rgba(29,168,105,0.06)',
    fontFamily: SK_MONO, fontSize: 12, letterSpacing: '0.04em',
    color: '#13764a',
  }}>
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1da869', flexShrink: 0 }} />
    {children}
  </div>
);

const Eyebrow = ({ children, style }) => (
  <div style={{
    fontFamily: SK_MONO, fontSize: 12, letterSpacing: '0.12em',
    textTransform: 'uppercase', color: '#1da869', marginBottom: 14, ...style,
  }}>{children}</div>
);

// Smaller uppercase label used inside cards ("Individuals", "What we saw").
const CardLabel = ({ children }) => (
  <div style={{
    fontFamily: SK_MONO, fontSize: 11, letterSpacing: '0.1em',
    textTransform: 'uppercase', color: '#6b7e9a', marginBottom: 12,
  }}>{children}</div>
);

const SectionTitle = ({ children, style }) => (
  <h2 style={{
    fontSize: 'clamp(32px, 4.2vw, 48px)', fontWeight: 700, letterSpacing: '-0.025em',
    lineHeight: 1.1, margin: '0 0 56px', maxWidth: 720, textWrap: 'balance',
    color: '#0a1220', ...style,
  }}>{children}</h2>
);

// `tinted` sections sit on #f2f6fb with a hairline on top, alternating with white.
const Section = ({ id, tinted, maxWidth = 1100, children, ...rest }) => (
  <section id={id} className="sk-section" {...rest} style={{
    background: tinted ? '#f2f6fb' : '#fff',
    borderTop: tinted ? '1px solid rgba(30,58,100,0.08)' : 'none',
  }}>
    <div style={{ maxWidth, margin: '0 auto' }}>{children}</div>
  </section>
);

const Card = ({ accent, small, style, children }) => (
  <div style={{
    borderRadius: 12, border: '1px solid rgba(30,58,100,0.12)', background: '#fff',
    boxShadow: small ? '0 1px 4px rgba(30,58,100,0.08)' : '0 4px 16px rgba(15,42,74,0.06)',
    ...(accent ? { borderTop: `2px solid ${accent}` } : {}),
    ...style,
  }}>{children}</div>
);

const CHIP_TONES = {
  connected: { background: 'rgba(29,168,105,0.1)', color: '#13764a' },
  syncing: { background: 'rgba(26,143,224,0.1)', color: '#1a6ed8' },
  neutral: { background: '#e3ebf4', color: '#3a5578' },
};

const StatusChip = ({ tone = 'connected', dot, children }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
    fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 9999,
    ...CHIP_TONES[tone],
  }}>
    {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />}
    {children}
  </span>
);

// auto-fit grid that still fits on a phone narrower than `min`.
const autoGrid = (min, gap) => ({
  display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`, gap,
});

Object.assign(window, {
  SK_LINKS, SK_GRADIENT, SK_MONO, CHIP_TONES, skIcon, skTrack, autoGrid,
  GradientText, GridOverlay, HeroBadge, Eyebrow, CardLabel, SectionTitle, Section, Card, StatusChip,
});