// TitanPricing.jsx - Consolidated dark pricing section

const TitanPricing = () => {
  const pricingPoints = [
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0F1A2E" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>
        </svg>
      ),
      title: 'We learn your business first',
      body: 'A free discovery call clarifies transaction volume, tools, workflow, and cleanup needs before a quote is built.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0F1A2E" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>
        </svg>
      ),
      title: 'Transparent, flat pricing',
      body: 'One monthly fee, scoped to the work. No per-entry fees, no billable-hour games, and no package tier forcing the wrong fit.',
    },
    {
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0F1A2E" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
      ),
      title: 'Scope that flexes with you',
      body: 'Add services, drop them, or switch tools. We re-quote honestly so you only pay for what your business actually needs.',
    },
  ];

  return (
    <section id="pricing" style={{ background: '#16263D', padding: '96px 32px', fontFamily: "'DM Sans', sans-serif", position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 52 }}>
          <div style={{ fontSize: 11, fontWeight: 500, color: '#D0B270', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 16 }}>Pricing</div>
          <h2 style={{ fontSize: 'clamp(30px,4.6vw,48px)', fontWeight: 400, lineHeight: 1.08, letterSpacing: '-0.9px', color: '#fff', marginBottom: 20, textWrap: 'pretty' }}>
            No &ldquo;One-Size-Fits-All&rdquo; Pricing
          </h2>
          <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.75, color: 'rgba(255,255,255,0.74)', maxWidth: 720, textWrap: 'pretty' }}>
            Cookie cutter packages force you to pay for work you don&rsquo;t need while leaving gaps where you need the most help. A construction company with 5 bank accounts has different needs than a solo consultant with one. That&rsquo;s why we take a different approach.
          </p>
        </div>

        <div className="pricing-card-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {pricingPoints.map((item, i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.045)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 10,
              padding: '30px 26px',
              boxShadow: 'rgba(0,0,0,0.18) 0px 22px 50px -28px',
            }}>
              <div style={{ width: 42, height: 42, borderRadius: 9, background: '#BD9748', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                {item.icon}
              </div>
              <div style={{ fontSize: 16, fontWeight: 500, color: '#fff', marginBottom: 10, letterSpacing: '-0.2px', lineHeight: 1.25 }}>{item.title}</div>
              <div style={{ fontSize: 14, fontWeight: 300, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7 }}>{item.body}</div>
            </div>
          ))}
        </div>

        <div className="pricing-cta" style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
          <a href="#contact" style={{ display: 'inline-flex', alignItems: 'center', padding: '13px 26px', borderRadius: 4, fontSize: 15, fontWeight: 500, background: '#BD9748', color: '#0F1A2E', border: 'none', cursor: 'pointer', textDecoration: 'none', transition: 'background 150ms', letterSpacing: '0.1px' }}
            onMouseEnter={e => e.currentTarget.style.background = '#D0B270'}
            onMouseLeave={e => e.currentTarget.style.background = '#BD9748'}
          >Get a free consultation &rarr;</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .pricing-card-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 768px) {
          #pricing { padding: 56px 20px !important; }
          .pricing-cta { width: 100% !important; justify-content: center !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { TitanPricing });