// Shared primitives used by both the landing page and blog pages.
// Exports everything to window so existing JSX files can pick them up
// the same way they pick up TablyPhone, COLORS, etc.

const COLORS = /*EDITMODE-BEGIN*/{
  "primary": "#F08C2C",
  "bg": "#FAF1E4",
  "ink": "#1B1408",
  "muted": "#7A6A55",
  "card": "#FFFFFF",
  "accent": "#3FA84B"
}/*EDITMODE-END*/;

function CatMascot({ size = 40, dark = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block' }}>
      <circle cx="32" cy="34" r="22" fill="#E89A4C" />
      <path d="M12 22 L18 8 L26 18 Z" fill="#E89A4C" />
      <path d="M52 22 L46 8 L38 18 Z" fill="#E89A4C" />
      <path d="M15 19 L19 12 L23 17 Z" fill="#C46E2C" />
      <path d="M49 19 L45 12 L41 17 Z" fill="#C46E2C" />
      <path d="M22 14 Q24 18 22 22" stroke="#9B5821" strokeWidth="1.6" fill="none" strokeLinecap="round" />
      <path d="M32 10 Q32 16 32 20" stroke="#9B5821" strokeWidth="1.6" fill="none" strokeLinecap="round" />
      <path d="M42 14 Q40 18 42 22" stroke="#9B5821" strokeWidth="1.6" fill="none" strokeLinecap="round" />
      <ellipse cx="20" cy="42" rx="6" ry="4" fill="#F4B879" opacity="0.6" />
      <ellipse cx="44" cy="42" rx="6" ry="4" fill="#F4B879" opacity="0.6" />
      <circle cx="23" cy="33" r="7" fill="#FAF1E4" stroke="#1B1408" strokeWidth="1.8" />
      <circle cx="41" cy="33" r="7" fill="#FAF1E4" stroke="#1B1408" strokeWidth="1.8" />
      <line x1="30" y1="33" x2="34" y2="33" stroke="#1B1408" strokeWidth="1.8" />
      <circle cx="23" cy="33" r="2" fill="#1B1408" />
      <circle cx="41" cy="33" r="2" fill="#1B1408" />
      <path d="M30 42 L34 42 L32 45 Z" fill="#1B1408" />
      <path d="M32 45 Q30 48 28 47" stroke="#1B1408" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      <path d="M32 45 Q34 48 36 47" stroke="#1B1408" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      <line x1="10" y1="44" x2="18" y2="44" stroke="#1B1408" strokeWidth="1" strokeLinecap="round" />
      <line x1="10" y1="48" x2="18" y2="46" stroke="#1B1408" strokeWidth="1" strokeLinecap="round" />
      <line x1="46" y1="44" x2="54" y2="44" stroke="#1B1408" strokeWidth="1" strokeLinecap="round" />
      <line x1="46" y1="46" x2="54" y2="48" stroke="#1B1408" strokeWidth="1" strokeLinecap="round" />
      <circle cx="32" cy="58" r="5.5" fill="#3FA84B" stroke="#1B1408" strokeWidth="1.4" />
      <text x="32" y="61" textAnchor="middle" fontSize="7" fontWeight="700" fill="#FAF1E4" fontFamily="system-ui">$</text>
    </svg>
  );
}

function AppleIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.5 12.5c0-2.5 2-3.7 2.1-3.8-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3.1 2.4 1.2-.1 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-1-2.5-3.8zm-2.4-7c.7-.8 1.1-2 1-3.1-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1.1 3 1.1.1 2.3-.6 3-1.4z"/>
    </svg>
  );
}

function PlayIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M5 3l14 9-14 9V3z"/>
    </svg>
  );
}

function CTAButton({ children, primary = true, big = false, icon, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      background: primary ? COLORS.primary : '#fff',
      color: primary ? '#fff' : COLORS.ink,
      border: primary ? 'none' : '1px solid rgba(27,20,8,0.12)',
      borderRadius: 99, padding: big ? '16px 28px' : '12px 22px',
      fontSize: big ? 17 : 15, fontWeight: 700, letterSpacing: -0.2,
      cursor: 'pointer',
      boxShadow: primary ? '0 8px 22px rgba(240,140,44,0.32)' : 'none',
      transition: 'transform .15s ease',
    }}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
      onMouseUp={e => e.currentTarget.style.transform = ''}
      onMouseLeave={e => e.currentTarget.style.transform = ''}
    >
      {icon}{children}
    </button>
  );
}

function Nav({ onCTA }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: 'blur(16px) saturate(160%)',
      WebkitBackdropFilter: 'blur(16px) saturate(160%)',
      background: 'rgba(250,241,228,0.78)',
      borderBottom: '1px solid rgba(27,20,8,0.06)',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <CatMascot size={32} />
          <span style={{ fontWeight: 800, fontSize: 22, letterSpacing: -0.4, color: COLORS.ink }}>Tably</span>
        </a>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {[
            { label: 'Features', href: '/#features' },
            { label: 'How it works', href: '/#howitworks' },
            { label: 'Blog', href: '/blog' },
            { label: 'FAQ', href: '/#faq' },
          ].map(l => (
            <a key={l.label} href={l.href} style={{
              fontSize: 14, fontWeight: 600, color: COLORS.muted, textDecoration: 'none',
            }}>{l.label}</a>
          ))}
        </div>
        <CTAButton onClick={onCTA} icon={<AppleIcon size={16} />}>Download</CTAButton>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer style={{ padding: '40px 32px 60px', borderTop: '1px solid rgba(27,20,8,0.06)' }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <CatMascot size={28} />
          <span style={{ fontWeight: 800, fontSize: 18, color: COLORS.ink }}>Tably</span>
          <span style={{ fontSize: 13, color: COLORS.muted, marginLeft: 12 }}>© 2026</span>
        </div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="/blog" style={{ fontSize: 13, color: COLORS.muted, textDecoration: 'none' }}>Blog</a>
          {['Privacy','Terms','Security','Press','Contact'].map(l => (
            <a key={l} href="#" style={{ fontSize: 13, color: COLORS.muted, textDecoration: 'none' }}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

function BlogHero({ kicker, title, italicAccent, dek }) {
  // Renders: kicker pill, large serif title with one italicized accent phrase, dek
  return (
    <header style={{
      maxWidth: 760, margin: '0 auto', padding: '64px 32px 32px',
    }}>
      {kicker && (
        <div style={{
          display: 'inline-block',
          fontSize: 12, fontWeight: 700, color: COLORS.muted, letterSpacing: 1.5,
          textTransform: 'uppercase', marginBottom: 16,
        }}>{kicker}</div>
      )}
      <h1 style={{
        fontSize: 56, lineHeight: 1.05, fontWeight: 800, letterSpacing: -1.6,
        color: COLORS.ink, margin: '0 0 16px',
        fontFamily: '"Instrument Serif", "Times New Roman", serif',
        textWrap: 'balance',
      }}>
        {title}{italicAccent && <span style={{ fontStyle: 'italic', color: COLORS.primary }}> {italicAccent}</span>}
      </h1>
      {dek && (
        <p style={{
          fontSize: 19, lineHeight: 1.5, color: COLORS.muted, margin: 0, textWrap: 'pretty',
        }}>{dek}</p>
      )}
    </header>
  );
}

function PostCard({ href, title, excerpt, date, readMin }) {
  return (
    <a href={href} style={{
      display: 'block', textDecoration: 'none', color: 'inherit',
      padding: '28px 0', borderTop: '1px solid rgba(27,20,8,0.08)',
      transition: 'transform .15s ease',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateX(4px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = ''; }}
    >
      <h2 style={{
        fontSize: 28, lineHeight: 1.15, fontWeight: 700, letterSpacing: -0.6,
        color: COLORS.ink, margin: '0 0 8px',
        fontFamily: '"Instrument Serif", "Times New Roman", serif',
      }}>{title}</h2>
      <p style={{
        fontSize: 16, lineHeight: 1.5, color: COLORS.muted, margin: '0 0 12px',
      }}>{excerpt}</p>
      <div style={{ fontSize: 13, color: COLORS.muted, fontWeight: 500 }}>
        <time dateTime={date}>{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</time>
        <span style={{ margin: '0 8px' }}>·</span>
        <span>{readMin} min read</span>
      </div>
    </a>
  );
}

function BlogCTA({ onCTA }) {
  return (
    <aside style={{
      maxWidth: 760, margin: '64px auto 0', padding: '40px 32px',
      borderRadius: 24, background: '#fff', border: '1px solid rgba(27,20,8,0.06)',
      display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
    }}>
      <CatMascot size={56} />
      <div style={{ flex: 1, minWidth: 260 }}>
        <div style={{
          fontSize: 24, lineHeight: 1.15, fontWeight: 700, color: COLORS.ink, marginBottom: 4,
          fontFamily: '"Instrument Serif", "Times New Roman", serif',
        }}>
          Try Tably — your money, <span style={{ fontStyle: 'italic', color: COLORS.primary }}>just by chatting.</span>
        </div>
        <div style={{ fontSize: 15, color: COLORS.muted }}>
          Log expenses by texting. No spreadsheets. No forms.
        </div>
      </div>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <CTAButton onClick={onCTA} icon={<AppleIcon size={16} />}>Download for iOS</CTAButton>
        <CTAButton primary={false} icon={<PlayIcon size={14} />}>Watch demo</CTAButton>
      </div>
    </aside>
  );
}

Object.assign(window, { COLORS, CatMascot, AppleIcon, PlayIcon, CTAButton, Nav, Footer, BlogHero, PostCard, BlogCTA });