/* global React, Icon */

// ---------------------------------------------------------------- Tiers
const Tiers = () => {
  const tiers = [
    {
      name: 'Foundation', price: '1,499',
      for: 'For solo and small firms ready to start PPC.',
      mediaBuy: '$3,000 – $10,000 monthly media buy',
      features: [
        '1 practice area',
        '1 custom landing page',
        'Google Ads management (1 campaign)',
        'Conversion tracking — calls + forms',
        'Monthly performance report',
      ],
    },
    {
      name: 'Growth', price: '2,999', popular: true,
      for: 'For established firms scaling paid acquisition across multiple practice areas.',
      mediaBuy: '$5,000 – $25,000 monthly media buy',
      headline: 'Everything in Foundation, plus:',
      features: [
        'Up to 3 practice areas',
        'Up to 3 custom landing pages',
        'Local Service Ads fully managed',
        'GBP optimization (up to 1 locations)',
        'Citation building (top 50 legal directories)',
        'A/B testing program on landing pages',
        'Bi-monthly strategy calls',
      ],
    },
    {
      name: 'Scale', price: '4,999',
      for: 'For multi-location firms and high-spend campaigns.',
      mediaBuy: '$15,000 – $50,000 monthly media buy',
      headline: 'Everything in Growth, plus:',
      features: [
        'Unlimited practice areas',
        '10 custom landing pages',
        'Multi-location GBP management',
        'Weekly GBP posts per location',
        'Geo-grid rank tracking per location',
        'Full citation management',
        'Weekly CRO testing',
        'Weekly performance calls',
      ],
    },
  ];

  return (
    <section id="pricing" className="section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 720, marginInline: 'auto' }}>
          <div className="eyebrow">Three tiers</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            Three tiers. No setup fee. Cancel anytime.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--gray-600)', marginTop: 16 }}>
            Pick the tier that matches your firm's footprint today. Move up when you're ready to compete in more markets.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
          alignItems: 'stretch',
        }}>
          {tiers.map(t => {
            const pop = t.popular;
            return (
              <article key={t.name} style={{
                background: pop ? 'var(--ink-black)' : '#fff',
                color: pop ? '#fff' : 'var(--ink-black)',
                border: pop ? 'none' : '1px solid var(--gray-300)',
                borderRadius: 16,
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                overflow: 'hidden',
                boxShadow: pop ? '0 24px 60px rgba(10,10,10,0.18)' : 'none',
                transform: pop ? 'translateY(-12px)' : 'none',
              }}>
                {pop && (
                  <div style={{
                    position: 'absolute', top: 0, right: 0,
                    background: 'var(--accent-yellow)', color: 'var(--ink-black)',
                    fontSize: 12, fontWeight: 700, letterSpacing: '0.14em',
                    padding: '10px 18px', textTransform: 'uppercase',
                  }}>
                    Popular
                  </div>
                )}

                <div style={{ padding: 32, display: 'flex', flexDirection: 'column', flex: 1, gap: 18 }}>
                  <div>
                    <div style={{
                      fontSize: 28, fontWeight: 700, letterSpacing: '-0.01em',
                      color: pop ? '#fff' : 'var(--ink-black)',
                    }}>{t.name}</div>
                    <p style={{
                      fontSize: 14, marginTop: 10, lineHeight: 1.5, minHeight: 42,
                      color: pop ? 'rgba(255,255,255,0.85)' : 'var(--gray-900)',
                    }}>{t.for}</p>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 18 }}>
                      <span style={{
                        fontSize: 56, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.02em',
                        color: pop ? 'var(--accent-yellow)' : 'var(--ink-black)',
                      }}>${t.price}</span>
                      <span style={{ fontSize: 15, color: pop ? 'rgba(255,255,255,0.7)' : 'var(--gray-600)' }}>/ per month</span>
                    </div>
                  </div>

                  <div style={{ marginTop: 4 }}>
                    {t.headline && (
                      <div style={{
                        fontSize: 15, fontWeight: 700, marginBottom: 16,
                        color: pop ? '#fff' : 'var(--ink-black)',
                      }}>{t.headline}</div>
                    )}
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                      {t.features.map((f, i) => (
                        <li key={i} style={{ display: 'flex', gap: 10, fontSize: 15, lineHeight: 1.45 }}>
                          <Icon name="check" size={16} color={pop ? 'var(--accent-yellow)' : 'var(--ink-black)'} strokeWidth={3} style={{ flexShrink: 0, marginTop: 2 }} />
                          <span style={{ color: pop ? 'rgba(255,255,255,0.95)' : 'var(--gray-900)' }}>{f}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <a href="#"
                     onClick={(e) => e.preventDefault()}
                     className={(pop ? 'btn btn--white' : 'btn btn--primary') + ' ub-convertable-trigger'}
                     style={{ marginTop: 'auto', justifyContent: 'center' }}>
                    Book my free strategy call
                  </a>
                </div>

                <div style={{
                  background: pop ? 'var(--accent-yellow)' : 'var(--ink-black)',
                  color: pop ? 'var(--ink-black)' : '#fff',
                  textAlign: 'center', padding: '16px 20px',
                  fontSize: 14, fontWeight: 700, letterSpacing: '0.01em',
                }}>
                  {t.mediaBuy}
                </div>
              </article>
            );
          })}
        </div>

        <div style={{
          marginTop: 36, textAlign: 'center', fontSize: 14, color: 'var(--gray-600)',
        }}>
          Month-to-month · No setup fee · Cancel anytime · One firm per practice area per metro
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- Compare table
const Compare = () => {
  const rows = [
    ['Lock you into 12-month contracts',                              'Month-to-month. Cancel anytime.'],
    ['Send you a generic SEO report',                                  'Send you a list of consultations booked and cases signed'],
    ['Resell white-label work from an offshore vendor',                'Built and managed in-house by people who only work with law firms'],
    ['Bury performance behind dashboards you don\u2019t read',         'Show you the keyword-to-call-to-case path in plain English'],
    ['Treat Google Business Profile as a checkbox',                    'Treat GBP as your single highest-leverage local asset'],
    ['Track impressions and rankings',                                 'Track booked consultations and signed retainers'],
    ['Assign you a junior account manager',                            'Pair you with a senior strategist who only works with law firms'],
  ];

  return (
    <section className="section section--dark">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 760, marginInline: 'auto' }}>
          <div className="eyebrow eyebrow--on-dark">Us vs. them</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: '#fff',
          }}>
            How we work vs. another law firm marketing agency.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)', marginTop: 16 }}>
            The Inbound Legal difference, in plain English.
          </p>
        </div>

        <div className="cmp-grid" style={{
          borderRadius: 16, overflow: 'hidden',
          border: '1px solid rgba(255,255,255,0.12)',
        }}>
          {/* Header */}
          <div className="cmp-a" style={{
            padding: '18px 28px', display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 13, fontWeight: 700, color: 'rgba(255,255,255,0.65)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            background: 'rgba(255,255,255,0.04)',
            borderRight: '1px solid rgba(255,255,255,0.12)',
            borderBottom: '1px solid rgba(255,255,255,0.12)',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: 'rgba(255,59,48,0.18)',
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}><Icon name="x" size={12} color="var(--accent-red)" strokeWidth={2.5} /></span>
            What other agencies do
          </div>
          <div className="cmp-b" style={{
            padding: '18px 28px', display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 13, fontWeight: 700, color: 'var(--accent-yellow)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            background: 'rgba(255,255,255,0.04)',
            borderBottom: '1px solid rgba(255,255,255,0.12)',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: 'rgba(255,214,10,0.18)',
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}><Icon name="check" size={12} color="var(--accent-yellow)" strokeWidth={3} /></span>
            What we do
          </div>

          {/* Body cells */}
          {rows.map(([a, b], i) => (
            <React.Fragment key={i}>
              <div className="cmp-a" style={{
                padding: '20px 28px', display: 'flex', gap: 12, alignItems: 'flex-start',
                borderRight: '1px solid rgba(255,255,255,0.08)',
                borderBottom: i < rows.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
                color: 'rgba(255,255,255,0.55)', fontSize: 15, lineHeight: 1.5,
                textDecoration: 'line-through', textDecorationColor: 'rgba(255,59,48,0.45)',
              }}>
                {a}
              </div>
              <div className="cmp-b" style={{
                padding: '20px 28px', display: 'flex', gap: 12, alignItems: 'flex-start',
                borderBottom: i < rows.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
                color: '#fff', fontSize: 16, lineHeight: 1.5, fontWeight: 500,
                background: i % 2 === 0 ? 'rgba(26,79,255,0.06)' : 'rgba(26,79,255,0.10)',
              }}>
                {b}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Tiers, Compare });