/* global React, Icon */

// ---------------------------------------------------------------- Approach (5 numbered steps)
const Approach = () => {
  const steps = [
    {
      n: '01', t: 'Local Assessment',
      b: 'We audit the signals that win local cases: your Google Business Profile, Local Services Ads eligibility and Google Screened status, existing Google Ads account health, and how competitors are showing up in the Map Pack and the paid results. We complete our assessment before we touch anything.',
    },
    {
      n: '02', t: 'Service Area Mapping',
      b: 'We identify the cities, neighbourhoods, and zip codes where your highest-value cases come from. Every campaign, every ad group, and every landing page maps back to one of them, so your budget concentrates where the cases are instead of spreading thin.',
    },
    {
      n: '03', t: 'Foundation Build',
      b: 'GBP cleanup and optimization, Local Services Ads setup and Google Screened verification, conversion tracking and call tracking, and a baseline set of city-specific landing pages built to convert paid traffic. The grunt work that most agencies skip and then blame on the algorithm.',
    },
    {
      n: '04', t: 'Campaign Launch & Optimization',
      b: 'We launch and manage your Google Ads and Local Services Ads, then tune them every week: search terms, bids, ad copy, LSA lead disputes, and landing page tests. GBP stays optimized alongside the paid campaigns so your free and paid placements reinforce each other.',
    },
    {
      n: '05', t: 'Measure What Matters',
      b: "We tie every campaign, keyword, and landing page to actual intake calls and signed cases. Not impressions. Not clicks. Not \u201cshare of voice.\u201d",
    },
  ];

  return (
    <section id="process" className="section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 880, marginInline: 'auto' }}>
          <div className="eyebrow">Our approach</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
            whiteSpace: 'nowrap',
          }}>
            A repeatable system for local visibility.
          </h2>
        </div>

        <div style={{
          position: 'relative',
          maxWidth: 900, marginInline: 'auto',
          paddingLeft: 80,
        }}>
          {/* Vertical line */}
          <div style={{
            position: 'absolute', left: 35, top: 14, bottom: 14, width: 2,
            background: 'linear-gradient(180deg, var(--brand-blue) 0%, var(--brand-blue) 92%, rgba(26,79,255,0) 100%)',
            opacity: 0.18,
          }} />

          {steps.map((s, i) => (
            <div key={s.n} style={{
              position: 'relative', paddingBottom: i < steps.length - 1 ? 36 : 0, display: 'flex', gap: 28,
            }}>
              {/* Number bubble */}
              <div style={{
                position: 'absolute', left: -80, top: 0,
                width: 72, height: 72, borderRadius: 16,
                background: '#fff', border: '2px solid var(--brand-blue)',
                color: 'var(--brand-blue)',
                display: 'grid', placeItems: 'center',
                fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em',
                boxShadow: 'var(--shadow-card)',
              }}>{s.n}</div>

              <div style={{
                background: '#fff', border: '1px solid var(--gray-300)',
                borderRadius: 12, padding: '24px 28px',
                width: '100%',
              }}>
                <h3 style={{
                  fontSize: 22, fontWeight: 700, color: 'var(--ink-black)', lineHeight: 1.2,
                }}>{s.t}</h3>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: 'var(--gray-600)', marginTop: 10,
                }}>{s.b}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- What we control
const WhatWeControl = () => {
  const items = [
    { icon: 'search', t: 'Google Ads',                       b: 'High-intent search campaigns for the cases you want, managed and optimized every week.' },
    { icon: 'map',    t: 'Google Business Profile',           b: 'The #1 driver of local cases for law firms.' },
    { icon: 'target', t: 'Local Service Ads',                 b: 'Google LSAs and Map Pack placement, where eligible.' },
    { icon: 'pin',    t: 'City + practice-area landing pages', b: 'Built to turn paid clicks into consults, per city and per practice area.' },
    { icon: 'phone',  t: 'Call & conversion tracking',        b: 'Every keyword tied to a call, a consult, and a signed case.' },
    { icon: 'layers', t: 'Local citation footprint',          b: 'NAP consistency across every directory that matters.' },
  ];
  return (
    <section className="section section--soft">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 640, marginInline: 'auto' }}>
          <div className="eyebrow">What we control</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            Every lever your local marketing program actually pulls.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          background: '#fff', borderRadius: 16, border: '1px solid var(--gray-300)', overflow: 'hidden',
        }}>
          {items.map((it, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            const total = items.length;
            const lastRow = row === Math.floor((total - 1) / 3);
            return (
              <div key={it.t} style={{
                padding: 28,
                borderRight: col < 2 ? '1px solid var(--gray-300)' : 'none',
                borderBottom: !lastRow ? '1px solid var(--gray-300)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 12,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10,
                  background: 'rgba(26,79,255,0.08)',
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={it.icon} size={22} color="var(--brand-blue)" strokeWidth={1.75} />
                </div>
                <h4 style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink-black)', lineHeight: 1.25 }}>{it.t}</h4>
                <p style={{ fontSize: 13, color: 'var(--gray-600)', lineHeight: 1.5 }}>{it.b}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- Testimonial + Stats band
const TestimonialStats = () => (
  <section className="section section--brand" style={{ paddingBlock: 80, position: 'relative', overflow: 'hidden' }}>
    <div className="container">
      <div style={{
        maxWidth: 920, marginInline: 'auto',
        display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 28,
      }}>
        <Icon name="quote" size={56} color="var(--accent-yellow)" strokeWidth={0} style={{ fill: 'var(--accent-yellow)', opacity: 0.9 }} />
        <p style={{
          fontSize: 'clamp(22px, 2.6vw, 32px)', lineHeight: 1.35, fontWeight: 500,
          color: '#fff', letterSpacing: '-0.005em',
        }}>
          "I've known Calin for over 15 years, and here's what I can say about his work: he is the rare marketing professional who actually understands the business of law. He doesn't just drive traffic, he delivers the specific, high-value cases that keep a firm profitable. His depth of experience and senior-level strategy are exactly what a law firm needs to win in today's competitive market."
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 4 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 999,
            background: 'linear-gradient(135deg, #E8E2D8, #B9AC93)',
            border: '2px solid rgba(255,255,255,0.4)',
            display: 'grid', placeItems: 'center',
            fontWeight: 700, color: 'rgba(0,0,0,0.45)', fontSize: 18,
          }}>MO</div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 700, color: '#fff' }}>Michael Oykhman</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>Strategic Criminal Defence</div>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div style={{
        marginTop: 72,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        borderTop: '1px solid rgba(255,255,255,0.18)',
      }}>
        {[
          { v: '300+',    s: 'Law firm campaigns managed' },
          { v: '20+ yrs', s: 'Legal marketing experience' },
          { v: '$10-Million+', s: 'In ad spend managed for law firms' },
        ].map((st, i) => (
          <div key={i} style={{
            padding: '36px 0',
            borderRight: i < 2 ? '1px solid rgba(255,255,255,0.18)' : 'none',
            paddingLeft: i === 0 ? 0 : 32,
          }}>
            <div style={{
              fontSize: 'clamp(40px, 4.2vw, 56px)', fontWeight: 700,
              color: 'rgb(255, 255, 255)', lineHeight: 1, letterSpacing: '-0.02em',
            }}>{st.v}</div>
            <div style={{ marginTop: 10, fontSize: 15, color: 'rgba(255,255,255,0.85)', lineHeight: 1.4, maxWidth: 280 }}>{st.s}</div>
          </div>
        ))}
      </div>
    </div>

    {/* Decorative circles */}
    <div style={{
      position: 'absolute', bottom: -150, left: -100, width: 320, height: 320, borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(255,214,10,0.18) 0%, rgba(255,214,10,0) 65%)',
    }} />
  </section>
);

Object.assign(window, { Approach, WhatWeControl, TestimonialStats });