// TitanProcess.jsx — How it works + Dark stats sections

const TitanProcess = () => {
  const steps = [
    {
      num: '01',
      title: 'Schedule a free call',
      body: 'Tell us about your business — your industry, size, and current pain points. No pressure, no sales pitch.',
    },
    {
      num: '02',
      title: 'We clean up your books',
      body: 'Our team connects to your accounts, reconciles transactions, and gets everything up to date — usually within a week.',
    },
    {
      num: '03',
      title: 'Monthly financials, delivered',
      body: 'Every month you receive clean P&L statements, a balance sheet, and a brief summary of what changed and why.',
    },
    {
      num: '04',
      title: 'Ask anything, anytime',
      body: "I'm always a message away. Questions about a transaction, a vendor, a reconciliation? You'll hear back within one business day — usually faster.",
    },
  ];

  return (
    <section id="how-it-works" style={{ background: '#f8fafc', padding: '96px 32px', fontFamily: "'DM Sans', sans-serif", borderTop: '1px solid #e5edf5' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: '#967844', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 16 }}>How it works</div>
        <div className="process-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(26px,3.5vw,38px)', fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.64px', color: '#0F1A2E', marginBottom: 16, textWrap: 'pretty' }}>
              Up and running in days, not months
            </h2>
            <p style={{ fontSize: 16, fontWeight: 300, lineHeight: 1.6, color: '#475569', marginBottom: 40, textWrap: 'pretty' }}>
              Switching to Titan Ledgers is painless. We handle the migration, connect your accounts, and get your books in order — fast.
            </p>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '11px 22px', borderRadius: 4,
              fontSize: 15, fontWeight: 500, background: '#16263D', color: '#BD9748', border: 'none',
              cursor: 'pointer', textDecoration: 'none', transition: 'background 150ms, color 150ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = '#223249'; e.currentTarget.style.color = '#E9CE87'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#16263D'; e.currentTarget.style.color = '#BD9748'; }}
            >Book your free call &rarr;</a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {steps.map((step, i) => (
              <div key={i} style={{ display: 'flex', gap: 20, paddingBottom: i < steps.length - 1 ? 28 : 0, position: 'relative' }}>
                {/* connector line */}
                {i < steps.length - 1 && (
                  <div style={{ position: 'absolute', left: 19, top: 40, bottom: 0, width: 1, background: '#e5edf5' }} />
                )}
                <div style={{
                  width: 40, height: 40, borderRadius: 6, border: '1px solid #E2C887',
                  background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, boxShadow: 'rgba(189,151,72,0.10) 0px 3px 6px 0px',
                  zIndex: 1,
                }}>
                  <span style={{ fontSize: 12, fontWeight: 500, color: '#967844', fontFeatureSettings: '"tnum"' }}>{step.num}</span>
                </div>
                <div style={{ paddingTop: 8 }}>
                  <div style={{ fontSize: 16, fontWeight: 400, color: '#0F1A2E', marginBottom: 6, letterSpacing: '-0.2px' }}>{step.title}</div>
                  <div style={{ fontSize: 14, fontWeight: 300, color: '#475569', lineHeight: 1.6 }}>{step.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .process-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          #how-it-works { padding: 56px 20px !important; }
          .dark-stats-section { padding: 56px 20px !important; }
          .dark-stats-cta { flex-direction: column !important; }
          .dark-stats-cta a { text-align: center !important; justify-content: center !important; }
        }
      `}</style>
    </section>
  );
};

const TitanDarkStats = () => {
  const stats = [
    { stat: '2019', label: 'Year founded', body: 'Six years of monthly closes for businesses across Texas and the U.S.' },
    { stat: '25+', label: 'Five-star Google reviews', body: 'Every review is real and attributable. Read them all.' },
    { stat: '1', label: "CPAs you'll work with", body: "Same person, every month. That's me." },
    { stat: '100%', label: 'Bookkeeping focus', body: 'No tax prep. No advisory. No audit. Just clean books.' },
  ];

  return (
    <section className="dark-stats-section" style={{ background: '#16263D', padding: '96px 32px', fontFamily: "'DM Sans', sans-serif" }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ fontSize: 12, fontWeight: 400, color: '#D0B270', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 16 }}>By the numbers</div>
        <h2 style={{ fontSize: 'clamp(26px,3.5vw,36px)', fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.64px', color: '#fff', maxWidth: 520, marginBottom: 16, textWrap: 'pretty' }}>
          Real numbers. No marketing math.
        </h2>
        <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.55, color: 'rgba(255,255,255,0.6)', maxWidth: 460, marginBottom: 56, textWrap: 'pretty' }}>
          Every claim on this page is verifiable. The work speaks for itself.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 48 }}>
          {stats.map((item, i) => <TitanDarkCard key={i} {...item} />)}
        </div>
        <div className="dark-stats-cta" style={{ display: 'flex', gap: 12 }}>
          <a href="#" style={{
            display: 'inline-flex', alignItems: 'center', padding: '11px 22px', borderRadius: 4,
            fontSize: 15, fontWeight: 500, background: '#BD9748', color: '#0F1A2E', border: 'none',
            cursor: 'pointer', textDecoration: 'none', transition: 'background 150ms',
          }}
            onMouseEnter={e => e.currentTarget.style.background = '#D0B270'}
            onMouseLeave={e => e.currentTarget.style.background = '#BD9748'}
          >Get started &rarr;</a>
          <a href="#" style={{
            display: 'inline-flex', alignItems: 'center', padding: '11px 22px', borderRadius: 4,
            fontSize: 15, fontWeight: 400, background: 'transparent', color: 'rgba(255,255,255,0.85)',
            border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer', textDecoration: 'none', transition: 'background 150ms',
          }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >View services</a>
        </div>
      </div>
    </section>
  );
};

const TitanDarkCard = ({ stat, label, body }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: hovered ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.03)',
        border: '1px solid rgba(255,255,255,0.1)',
        borderRadius: 6, padding: '24px',
        transition: 'background 200ms',
        fontFamily: "'DM Sans', sans-serif",
      }}
    >
      <div style={{ fontSize: 34, fontWeight: 300, color: '#fff', letterSpacing: '-0.5px', fontFeatureSettings: '"tnum"', marginBottom: 4 }}>{stat}</div>
      <div style={{ fontSize: 12, fontWeight: 400, color: '#D0B270', marginBottom: 10, textTransform: 'uppercase', letterSpacing: 0.3 }}>{label}</div>
      <div style={{ fontSize: 14, fontWeight: 300, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6 }}>{body}</div>
    </div>
  );
};

Object.assign(window, { TitanProcess, TitanDarkStats, TitanDarkCard });