// Service cards — centered titles, teal intro copy, divider, simple bulleted list.
function ServiceCard({ title, intro, bullets, badge, href, featured }) {
  return (
    <a href={href} className={`ck-service-card${featured ? ' ck-service-card-featured' : ''}`} style={{
      background: featured ? '#163F34' : '#f5fafa',
      border: featured ? '1.5px solid rgba(196,146,74,0.3)' : '1.5px solid #d5e7e4',
      borderRadius: 18,
      padding: '64px 28px',
      display: 'flex', flexDirection: 'column', gap: 24,
      boxShadow: featured ? '0 8px 32px rgba(22,63,52,.2)' : '0 2px 8px rgba(22,63,52,.04)',
      textDecoration: 'none', color: 'inherit', cursor: 'pointer',
      position: 'relative',
    }}
    >
      {featured && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          background: '#C4924A', color: '#fff',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
          padding: '5px 16px', borderRadius: 100, whiteSpace: 'nowrap',
        }}>Most Popular</div>
      )}
      <h3 style={{
        fontSize: 27, fontWeight: 700,
        color: featured ? '#fff' : '#163F34',
        margin: 0, textDecoration: 'none',
        letterSpacing: '-0.015em', lineHeight: 1.25, textAlign: 'center',
        minHeight: '2.5em', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{title}</h3>
      <p style={{
        fontSize: 13.5,
        color: featured ? 'rgba(255,255,255,0.65)' : '#3F8074',
        lineHeight: 1.55, margin: 0, textAlign: 'center',
      }}>{intro}</p>
      <div style={{ borderTop: featured ? '1px solid rgba(255,255,255,0.12)' : '1px solid #e6efee', margin: '4px -4px 0' }}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
        {bullets.map((b, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 11,
            fontSize: 13.5,
            color: featured ? 'rgba(255,255,255,0.9)' : '#163F34',
            lineHeight: 1.35,
          }}>
            <CheckFilled size={16} color={featured ? '#ddb06e' : '#3F8074'} />
            <span>{b}</span>
          </div>
        ))}
      </div>
      {badge && (
        <div style={{
          marginTop: 'auto', paddingTop: 14,
          fontSize: 11.5, fontWeight: 500, fontStyle: 'italic',
          color: featured ? 'rgba(255,255,255,0.45)' : '#8aa39e',
          textAlign: 'center',
        }}>{badge.replace(/\*/g, '')}</div>
      )}
    </a>
  );
}

function Services() {
  const services = [
    {
      title: 'Clean-Up & Catch-Up',
      href: 'cleanup.html',
      intro: "Books a mess or nonexistent? I'll get them clean and accurate, no matter how far behind.",
      bullets: [
        'Rebuild or correct months/years of records',
        'Historical account reconciliations',
        'Corrected categorization and account balances',
        'Tax-ready reports for your tax pro',
        'Clean handoff to ongoing bookkeeping or your tax professional',
        'Review meeting after completion',
      ],
    },
    {
      title: 'Monthly Bookkeeping',
      href: 'monthly-bookkeeping.html',
      featured: true,
      intro: 'Accurate books and clear financial reports, delivered every month.',
      bullets: [
        'Monthly bank & credit card reconciliation',
        'Accurate expense categorization',
        'Monthly financial reports',
        'Easy to use client portal',
        'Ongoing support with responses within one business day',
        'Year-end review & CPA coordination',
      ],
    },
    {
      title: 'Advisory',
      href: 'advisory.html',
      intro: 'Turn your numbers into clear decisions, so you can grow, spend, and pay yourself with confidence.',
      bullets: [
        'Monthly financial review & strategy call',
        'P&L, cash flow, and performance breakdown',
        'Revenue, profit & margin analysis',
        'KPI dashboard tailored to your business',
        'Financial system structuring and optimization',
      ],
      badge: '*For clients ready to go beyond the basics*',
    },
  ];

  return (
    <section id="services" style={{ background: '#ffffff', padding: '100px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
          <h2 style={{ fontSize: 'clamp(2.25rem, 3.2vw, 3rem)', fontWeight: 800, color: '#163F34', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
            Services
          </h2>
          <p style={{ fontSize: 15.5, color: '#3F8074', marginTop: 18, lineHeight: 1.55, fontWeight: 500 }}>
            Clean books, clear numbers, and support when you need it, so you can run your business with confidence.
          </p>
        </div>
        <div className="ck-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, alignItems: 'stretch' }}>
          {services.map(s => <ServiceCard key={s.title} {...s} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services, ServiceCard });