// TitanServices.jsx — 8 bookkeeping services in a locked 4×2 grid

const TitanServices = () => {
  const services = [
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="3" width="20" height="18" rx="2"/><path d="M8 10h8M8 14h5"/>
        </svg>
      ),
      title: 'Monthly Bookkeeping',
      body: 'Recording and organizing your day-to-day financial transactions so nothing slips through the cracks.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/>
        </svg>
      ),
      title: 'Bank & Credit Card Reconciliations',
      body: 'Matching every transaction to your statements so your books stay accurate and audit-ready.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
        </svg>
      ),
      title: 'Financial Statement Preparation',
      body: 'Monthly Profit & Loss, Balance Sheet, and Cash Flow reports — formatted for clarity and decision-making.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M8 12h8M8 16h5"/>
        </svg>
      ),
      title: 'Accounts Payable',
      body: 'Bills logged, coded, and tracked so vendor obligations are never a surprise.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
        </svg>
      ),
      title: 'Accounts Receivable',
      body: 'Invoices issued, payments matched, and aging reviewed so revenue actually lands.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
        </svg>
      ),
      title: 'Payroll Support',
      body: 'Payroll processing, reporting, and the bookkeeping support that keeps every pay cycle on the books correctly.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/>
        </svg>
      ),
      title: 'Catch-up & Clean-up',
      body: 'Stalled or messy books reconstructed from source documents — getting you current and back in control.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
        </svg>
      ),
      title: 'QuickBooks Setup & Support',
      body: 'QuickBooks setup, chart of accounts cleanup, integrations, and ongoing support so your tools work for you.',
    },
  ];

  return (
    <section id="services" style={{ background: '#fff', padding: '96px 32px', fontFamily: "'DM Sans', sans-serif" }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: '#967844', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 16 }}>Services</div>
        <div className="services-heading-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 56 }}>
          <h2 style={{ fontSize: 'clamp(28px,4vw,40px)', fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.64px', color: '#0F1A2E' }}>
            An Accounting Department Built Around Your Business
          </h2>
          <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.65, color: '#475569', textWrap: 'pretty' }}>
            We're not a generalist firm juggling tax prep on the side. Every hour we spend is focused on keeping your books precise, current, and usable.
          </p>
        </div>
        <div className="services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {services.map((s, i) => <TitanServiceCard key={i} {...s} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .services-heading-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 36px !important; }
        }
        @media (max-width: 540px) {
          .services-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 768px) {
          #services { padding: 56px 20px !important; }
        }
      `}</style>
    </section>
  );
};

const TitanServiceCard = ({ icon, title, body }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: '#fff', border: '1px solid #e5edf5', borderRadius: 8, padding: '28px 24px',
        transition: 'box-shadow 200ms ease-out, transform 200ms ease-out, border-color 200ms',
        boxShadow: hovered ? 'rgba(15,26,46,0.12) 0px 24px 40px -24px, rgba(0,0,0,0.04) 0px 4px 12px -4px' : 'rgba(23,23,23,0.04) 0px 1px 3px 0px',
        borderColor: hovered ? '#E2C887' : '#e5edf5',
        transform: hovered ? 'translateY(-6px)' : 'none',
        cursor: 'default',
        display: 'flex', flexDirection: 'column',
      }}
    >
      <div style={{ width: 40, height: 40, borderRadius: 8, background: 'rgba(189,151,72,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
        {icon}
      </div>
      <div style={{ fontSize: 15, fontWeight: 500, color: '#0F1A2E', letterSpacing: '-0.2px', marginBottom: 8, lineHeight: 1.3 }}>{title}</div>
      <div style={{ fontSize: 13.5, fontWeight: 300, color: '#475569', lineHeight: 1.6 }}>{body}</div>
    </div>
  );
};

Object.assign(window, { TitanServices, TitanServiceCard });