/* global React, Icon */

// ---------------------------------------------------------------- Problem callout
const Problem = () => {
  const findings = [
    { title: 'Incomplete profile', label: 'Google Business Profile fields left blank, the #1 driver of local cases.' },
    { title: 'No local landing pages', label: 'Nothing built for the service-area cities you want cases from.' },
    { title: 'Scattered listings', label: 'Inconsistent NAP across the directories that matter.' },
    { title: 'Blind ad spend', label: 'Local Service Ads running with no conversion tracking.' },
    { title: 'No Local Service Ads', label: 'Leaving the Google Screened spot at the very top of the results page to competitors.' },
    { title: 'Wasted budget', label: 'Paying every month for search terms that never produce a call.' },
  ];
  return (
    <section id="problem" className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 96 }}>
          <div className="eyebrow" style={{ color: 'var(--accent-red)' }}>The problem</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            Most local marketing for law firms is broken.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--gray-900)', marginTop: 20, maxWidth: 460 }}>
            If your agency sends you a monthly PDF and a number that goes "up and to the right," you're being managed, not marketed.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--gray-600)', marginTop: 14, maxWidth: 460 }}>
            Here's what we find when we audit firms switching to us. Six failure modes that cost real cases every month.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {findings.map((f, i) => (
            <div key={i} style={{
              background: '#fff',
              border: '1px solid var(--gray-300)',
              borderRadius: 12, padding: '22px 22px 24px',
              display: 'flex', flexDirection: 'column', gap: 10,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 14, right: 14,
                width: 22, height: 22, borderRadius: 999,
                background: 'rgba(255,59,48,0.1)',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name="x" size={12} color="var(--accent-red)" strokeWidth={2.5} />
              </div>
              <div style={{
                fontSize: 19, fontWeight: 700, lineHeight: 1.2, color: 'var(--ink-black)',
                letterSpacing: '-0.01em', paddingRight: 28,
              }}>{f.title}</div>
              <div style={{ fontSize: 14, color: 'var(--gray-600)', lineHeight: 1.5 }}>{f.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- Solution
const Solution = () => {
  const steps = [
    "Clients search at the moment of crisis.",
    "They click one or two results, no more.",
    "They call the firm that looks most credible on Google.",
    "They retain the firm that picks up the phone first.",
  ];
  return (
    <section id="solution" className="section section--brand" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 880, marginInline: 'auto', textAlign: 'center' }}>
          <div className="eyebrow eyebrow--on-dark"><span style={{ color: 'rgb(255, 255, 255)' }}>The solution</span></div>
          <h2 style={{
            fontSize: 'clamp(32px, 3.8vw, 48px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: '#fff',
          }}>
            One program. Complete visibility. Built specifically for law firms.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.86)',
            marginTop: 20, maxWidth: 720, marginInline: 'auto',
          }}>
            We don't have a generic "local SEO" product that we sell to plumbers, dentists, and lawyers. Everything we do is calibrated for how attorneys actually get hired.
          </p>
        </div>

        <div style={{
          marginTop: 56,
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.15)',
          borderRadius: 16,
          padding: 32,
        }}>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent-yellow)', marginBottom: 24 }}>
            <span style={{ color: 'rgb(255, 255, 255)' }}>The buyer journey we engineer around</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 8,
                    background: '#fff', color: 'var(--brand-blue)',
                    display: 'grid', placeItems: 'center',
                    fontWeight: 700, fontSize: 16,
                  }}>{i + 1}</div>
                  {i < 3 && (
                    <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.2)', position: 'relative' }}>
                      <Icon name="arrow" size={14} color="rgba(255,255,255,0.5)" strokeWidth={2} style={{ position: 'absolute', right: -7, top: -7 }} />
                    </div>
                  )}
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.45, color: '#fff', fontWeight: 500 }}>{s}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Decorative blobs */}
      <div style={{
        position: 'absolute', top: -120, right: -120, width: 360, height: 360, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%)',
      }} />
    </section>
  );
};

// ---------------------------------------------------------------- Case Results
const CaseResults = () => {
  const cards = [
    {
      eyebrow: 'DUI defence',
      stat: '$1M+',
      statLabel: 'Annual revenue from Google Ads',
      sub: '769% return on paid media. 65+ qualified leads a month at a $125 to $200 cost per lead.',
      bar: 80,
    },
    {
      eyebrow: 'Family law',
      stat: '2,270%',
      statLabel: 'Return on paid media in 60 days',
      sub: '$100,000 in signed cases from $4,405 in ad spend and management fees. Launched from zero Google Ads history.',
      bar: 100,
      popular: true,
    },
    {
      eyebrow: 'Multi-location firm · 6 offices',
      stat: '$15',
      statLabel: 'Cost per lead',
      sub: '200+ qualified leads a month. Migrated off a previous agency with zero downtime.',
      bar: 65,
    },
  ];
  return (
    <section id="case-studies" className="section section--soft">
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 48, flexWrap: 'wrap', gap: 16 }}>
          <div style={{ maxWidth: 760 }}>
            <div className="eyebrow">Case studies</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',
            }}>
              What this looks like in practice.
            </h2>
          </div>
        </div>

        <div className="grid grid--3">
          {cards.map((c, i) => (
            <article key={i} style={{
              background: '#fff', borderRadius: 12, padding: 28,
              boxShadow: 'var(--shadow-card)',
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative', overflow: 'hidden',
            }}>
              <div className="eyebrow" style={{ color: 'var(--gray-600)' }}>{c.eyebrow}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  fontSize: 'clamp(36px, 3.4vw, 48px)', fontWeight: 700, color: 'var(--brand-blue)',
                  lineHeight: 1, letterSpacing: '-0.02em', flexShrink: 0,
                }}>{c.stat}</div>
                <div style={{ fontSize: 13, color: 'var(--gray-600)', lineHeight: 1.35 }}>{c.statLabel}</div>
              </div>

              {/* visual bar */}
              <div style={{ height: 8, borderRadius: 999, background: 'var(--gray-100)', overflow: 'hidden' }}>
                <div style={{ width: `${c.bar}%`, height: '100%', background: 'var(--brand-blue)', borderRadius: 999 }} />
              </div>

              <p style={{ fontSize: 15, color: 'var(--gray-900)', lineHeight: 1.55, marginTop: 4 }}>{c.sub}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Problem, Solution, CaseResults });