// Pricing section — custom-quote model. Dark banner, three range cards,
// a guarantee strip, and a visually secondary "a few other things" block.
function Pricing({ showHeader = true }) {
  const ranges = [
    { label: 'Straightforward Books', price: '$350 – $500', desc: '1–2 accounts · lower transaction volume · simple, clean setup' },
    { label: 'Growing Business', price: '$500 – $1,000', desc: '3–5 accounts · moderate volume · multiple revenue streams', popular: true },
    { label: 'Complex Needs', price: '$1,000+', desc: '5+ accounts · higher volume · multi-entity or complex setup' },
  ];

  const guarantees = [
    '100% satisfaction in month one or pay nothing',
    'No contracts · cancel anytime',
    'Quarterly option at 75% of monthly rate',
  ];

  const OnboardingIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3F8074" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 8v4M12 16h.01"/>
    </svg>
  );

  const CleanupIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3F8074" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="23 4 23 10 17 10"/>
      <polyline points="1 20 1 14 7 14"/>
      <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
    </svg>
  );

  const AdvisoryIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3F8074" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
      <polyline points="17 6 23 6 23 12"/>
    </svg>
  );

  const extras = [
    {
      Icon: OnboardingIcon,
      t: 'One-Time Onboarding Fee',
      body: <React.Fragment>All new clients pay a one-time <strong style={{ color: '#163F34' }}>$150 onboarding fee</strong> to cover account setup, QBO review, and getting everything connected properly from day one.</React.Fragment>,
    },
    {
      Icon: CleanupIcon,
      t: 'Cleanup & Catch-Up',
      body: <React.Fragment>Behind on your books? Cleanup is <strong style={{ color: '#163F34' }}>quoted separately</strong> based on how far behind you are. Book a call for a custom quote.</React.Fragment>,
    },
    {
      Icon: AdvisoryIcon,
      t: 'Advisory Add-On',
      body: <React.Fragment>Advisory is available as an add-on, <strong style={{ color: '#163F34' }}>starting at $997/mo</strong>. Final price depends on your scope. <a href="contact.html" style={{ color: '#3F8074', fontWeight: 600, textDecoration: 'none' }}>Contact me for details →</a></React.Fragment>,
    },
  ];

  return (
    <section id="pricing" style={{ background: '#f3f1ed', padding: '100px 32px' }}>
      <style>{`
        .ck-quote-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s; }
        .ck-quote-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(63,128,116,.45); }
        .ck-price-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; }
        .ck-price-card:hover {
          transform: translateY(-8px);
          border-color: #3F8074 !important;
          box-shadow: 0 0 0 1.5px #3F8074, 0 24px 50px rgba(22,63,52,.12) !important;
        }
        @media (max-width: 860px) {
          .ck-price-banner { flex-direction: column !important; align-items: flex-start !important; gap: 26px !important; padding: 32px 28px !important; }
          .ck-price-banner .ck-banner-right { align-items: flex-start !important; text-align: left !important; }
          .ck-guarantee-strip { flex-direction: column !important; align-items: center !important; }
          .ck-guarantee-strip > div { border-left: none !important; border-top: 1px solid #d5e7e4; width: 100%; justify-content: center !important; }
          .ck-guarantee-strip > div:first-child { border-top: none; }
        }
        @media (max-width: 640px) {
          .ck-price-banner { align-items: center !important; text-align: center !important; }
          .ck-price-banner > div:first-child { text-align: center !important; width: 100% !important; }
          .ck-banner-price-row { justify-content: center !important; }
          .ck-price-banner .ck-banner-right { align-items: center !important; text-align: center !important; width: 100% !important; }
          .ck-price-banner .ck-banner-right > a { display: block !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; }
          .ck-pricing-inner { display: flex !important; flex-direction: column !important; }
          .ck-pricing-header { order: 0 !important; }
          .ck-pricing-factor { order: 1 !important; }
          .ck-pricing-ranges { order: 2 !important; margin-bottom: 12px !important; }
          .ck-price-banner { order: 3 !important; margin-bottom: 12px !important; border-radius: 16px !important; }
          .ck-price-banner .ck-price-range { font-size: 1.75rem !important; }
          .ck-pricing-extras { order: 4 !important; }
          .ck-guarantee-strip { order: 5 !important; }
        }
      `}</style>

      <div className="ck-pricing-inner" style={{ maxWidth: 1180, margin: '0 auto' }}>

        {/* 1 — Header */}
        {showHeader && (
          <div className="ck-pricing-header" style={{ textAlign: 'center', marginBottom: 48 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#3F8074', marginBottom: 14 }}>PRICING</div>
            <h2 style={{ fontSize: 'clamp(2.25rem, 3.2vw, 3rem)', fontWeight: 800, color: '#163F34', margin: 0, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
              Transparent pricing. No surprises.
            </h2>
            <p style={{ fontSize: 16, color: '#6e8a86', margin: '16px auto 0', lineHeight: 1.6, maxWidth: 560 }}>
              Every quote is custom, but here's a clear picture of what to expect before we talk.
            </p>
          </div>
        )}

        {/* 3 — Range cards */}
        <div className="ck-pricing-ranges ck-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, alignItems: 'stretch', marginBottom: 16 }}>
          {ranges.map(r => (
            <div key={r.label} className="ck-price-card" style={{
              position: 'relative', background: '#fff',
              border: r.popular ? '1.5px solid #3F8074' : '1px solid #d5e7e4',
              borderRadius: 16, padding: '30px 28px',
              display: 'flex', flexDirection: 'column', gap: 14,
              boxShadow: '0 2px 8px rgba(22,63,52,.04)',
            }}>
              {r.popular && (
                <div style={{
                  position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)',
                  background: '#163F34', color: '#fff', fontSize: 11.5, fontWeight: 600,
                  padding: '5px 16px', borderRadius: 100, whiteSpace: 'nowrap',
                }}>Most common</div>
              )}
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#6e8a86', marginTop: r.popular ? 6 : 0 }}>{r.label}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontSize: 26, fontWeight: 800, color: '#3F8074', letterSpacing: '-0.02em' }}>{r.price}</span>
                <span style={{ fontSize: 14, color: '#6e8a86', fontWeight: 500 }}>/mo</span>
              </div>
              <div style={{ fontSize: 13.5, color: '#345048', lineHeight: 1.6 }}>{r.desc}</div>
            </div>
          ))}
        </div>

        {/* 4 — Pricing factor sentence */}
        <p className="ck-pricing-factor" style={{
          textAlign: 'center', fontSize: 13.5, color: '#6e8a86',
          margin: '0 0 32px', lineHeight: 1.6,
        }}>
          Your exact monthly rate is based on number of bank & credit card accounts, transaction volume, and overall complexity.
        </p>

        {/* 5 — A few other things to know */}
        <div className="ck-pricing-extras" style={{ borderRadius: 16, padding: '32px 40px', border: '1px solid #dce9e6', background: '#edf2f0', marginBottom: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#6e8a86', marginBottom: 24 }}>A few other things to know</div>
          <div className="ck-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 36 }}>
            {extras.map(({ Icon, t, body }) => (
              <div key={t}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 10 }}>
                  <Icon />
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: '#163F34' }}>{t}</div>
                </div>
                <div style={{ fontSize: 13.5, color: '#345048', lineHeight: 1.65 }}>{body}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 6 — Guarantee strip */}
        <div className="ck-guarantee-strip" style={{
          display: 'flex', justifyContent: 'center', flexWrap: 'wrap',
          marginTop: 0,
          marginTop: 28,
          borderTop: '1px solid #d5e7e4', borderBottom: '1px solid #d5e7e4',
        }}>
          {guarantees.map((g, i) => (
            <div key={g} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '13px 28px',
              borderLeft: i > 0 ? '1px solid #d5e7e4' : 'none',
            }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#3F8074" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
              <span style={{ fontSize: 13, color: '#345048', fontWeight: 500 }}>{g}</span>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}
Object.assign(window, { Pricing });