/* global React, Icon */
const { useState: useStateB } = React;

// ---------------------------------------------------------------- Practice Areas
const PracticeAreas = () => {
  const areas = [
    { t: 'Personal Injury',     k: 'PI · contingency cases',          icon: 'shield' },
    { t: 'Criminal Defence',    k: 'Emergency search behaviour',      icon: 'shield' },
    { t: 'Family Law',          k: 'High-intent local intent',        icon: 'shield' },
    { t: 'Estate Planning',     k: 'Lifetime client value',           icon: 'shield' },
    { t: 'Business & Corporate',k: 'Local commercial demand',         icon: 'shield' },
    { t: 'Immigration',         k: 'Multi-language SERPs',            icon: 'shield' },
    { t: 'Employment Law',      k: 'Wage & wrongful-termination',     icon: 'shield' },
    { t: 'Bankruptcy',          k: 'Counter-cyclical intake',         icon: 'shield' },
    { t: 'Real Estate',         k: 'Closing-velocity searches',       icon: 'shield' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 860, marginInline: 'auto' }}>
          <div className="eyebrow">Practice areas we serve</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            Local marketing for the practice areas that matter most.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--gray-600)', marginTop: 16 }}>
            If your firm practices in a high-intent vertical, we have a playbook for it.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {areas.map((a, i) => (
            <a key={a.t} href="#cta" style={{
              display: 'flex', alignItems: 'center', gap: 16,
              padding: '22px 24px',
              background: '#fff', border: '1px solid var(--gray-300)', borderRadius: 12,
              transition: 'all .18s var(--ease-out)',
              textDecoration: 'none', color: 'var(--ink-black)',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = 'var(--brand-blue)';
              e.currentTarget.style.boxShadow = 'var(--shadow-card)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'var(--gray-300)';
              e.currentTarget.style.boxShadow = 'none';
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 10,
                background: 'var(--brand-blue)', color: '#fff',
                display: 'grid', placeItems: 'center', flexShrink: 0,
                fontSize: 16, fontWeight: 700, letterSpacing: '-0.02em',
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--ink-black)' }}>{a.t}</div>
                <div style={{ fontSize: 13, color: 'var(--gray-600)', marginTop: 2 }}>{a.k}</div>
              </div>
              <Icon name="arrow" size={18} color="var(--brand-blue)" strokeWidth={2} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- Results Grid (6 lawyer cards)
const ResultsGrid = () => {
  const R = (window.__resources || {});
  const cards = [
    { firm: 'Strategic Criminal Defence', stat: '400+', metric: 'Leads per month', img: R.oykhman  || 'assets/oykhman.jpg' },
    { firm: 'Carter Booth LLP',           stat: '25+',  metric: 'Leads per month', img: R.carter   || 'assets/carter.jpg' },
    { firm: 'Knowlton Family Law',        stat: '25+',  metric: 'Sales leads',     img: R.knowlton || 'assets/knowlton.jpg' },
    { firm: 'Brenton Legal',              stat: '200+', metric: 'Leads per month', img: R.brenton  || 'assets/brenton.jpg' },
    { firm: 'Defend Your DUI',            stat: '65+',  metric: 'Leads per month', img: R.dui      || 'assets/dui.jpg' },
    { firm: 'Quijano Law',                stat: '25+',  metric: 'Leads per month', img: R.quijano  || 'assets/quijano.jpg' },
  ];
  return (
    <section id="results" className="section section--soft">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 720, marginInline: 'auto' }}>
          <div className="eyebrow">Across the program</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            The numbers our partner firms post every month.
          </h2>
        </div>

        <div className="grid grid--6">
          {cards.map((c, i) => (
            <article key={i} className="card-person" style={{ padding: 0, overflow: 'hidden' }}>
              <div className="placeholder" style={{
                height: 240, position: 'relative', background: '#EAF0FF', overflow: 'hidden',
              }}>
                <img src={c.img} alt={c.firm} style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%',
                  objectFit: 'cover', objectPosition: 'center top', display: 'block',
                }} />
              </div>
              <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{
                    fontSize: 30, fontWeight: 700, color: 'var(--brand-blue)',
                    letterSpacing: '-0.02em', lineHeight: 1,
                  }}>{c.stat}</span>
                  <span style={{ fontSize: 13, color: 'var(--gray-600)', fontWeight: 500 }}>{c.metric}</span>
                </div>
                <div style={{ fontSize: 14, color: 'var(--gray-900)', fontWeight: 500, marginTop: 4 }}>{c.firm}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- FAQ
const FAQ = () => {
  const [open, setOpen] = useStateB(0);
  const items = [
    {
      q: 'How is this different from generic local SEO?',
      a: 'Everything we do is calibrated for how clients hire attorneys: emergency search behaviour, proximity bias in the Map Pack, and the trust signals that make someone call you over the firm two miles closer to them.',
    },
    {
      q: 'How long until we see results?',
      a: 'Map Pack movement: 60–90 days. Significant call volume increase: 4–6 months. Compounding case flow: 9–12 months. We won\u2019t promise faster, and you should be skeptical of any agency that does.',
    },
    {
      q: 'What if we already have an agency?',
      a: 'We handle the switch. We reclaim your Google accounts, audit the work your current agency has done, and roll out a transition plan so you don\u2019t lose visibility during the handoff.',
    },
    {
      q: 'What\u2019s your contract length?',
      a: 'Month-to-month. No setup fee. Cancel anytime. We earn the relationship every month.',
    },
    {
      q: 'Will I work with a junior account manager?',
      a: 'No. You will work with a senior strategist who has managed law firm marketing for at least five years. We do not pass clients to junior staff.',
    },
    {
      q: 'Can you guarantee rankings?',
      a: 'No, and you should walk away from any agency that does. Google\u2019s algorithm is not for sale. What we guarantee is execution, transparency, and a documented system we have used to grow dozens of law firms profitably.',
    },
    {
      q: 'What markets do you serve?',
      a: 'Law firms across Canada and the United States. We do not take international firms outside those two markets.',
    },
  ];
  return (
    <section id="faq" className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 96 }}>
          <div className="eyebrow">FAQ</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            Have questions? Great!
          </h2>
          <p style={{ fontSize: 16, color: 'var(--gray-600)', marginTop: 16, lineHeight: 1.6, maxWidth: 360 }}>
            The questions firms actually ask before signing a contract. Don't see yours? Bring it to the strategy call.
          </p>
        </div>

        <div>
          {items.map((it, i) => (
            <div key={it.q}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}
                style={{
                  width: '100%', textAlign: 'left', background: 'transparent', border: 0,
                  borderBottom: open === i ? 0 : '1px solid var(--gray-300)',
                  padding: '22px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  cursor: 'pointer', fontFamily: 'inherit',
                  fontSize: 17, fontWeight: 600, color: 'var(--ink-black)', lineHeight: 1.4,
                }}>
                <span>{it.q}</span>
                <span style={{
                  width: 32, height: 32, background: open === i ? 'var(--ink-black)' : 'var(--brand-blue)',
                  color: '#fff', borderRadius: 6, display: 'grid', placeItems: 'center',
                  fontWeight: 600, fontSize: 18, lineHeight: 1, flexShrink: 0,
                  transition: 'background var(--dur) var(--ease-out)',
                }} aria-hidden="true">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div style={{
                  padding: '4px 0 24px', fontSize: 15, color: 'var(--gray-600)', lineHeight: 1.65,
                  borderBottom: '1px solid var(--gray-300)', maxWidth: 640,
                }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------------------------------------------------------- Final CTA
const FinalCTA = () => (
  <section id="cta" className="section section--brand" style={{ paddingBlock: 100, position: 'relative', overflow: 'hidden' }}>
    <div className="container" style={{ position: 'relative', zIndex: 1, maxWidth: 920, textAlign: 'center', marginInline: 'auto' }}>
      <div className="eyebrow eyebrow--on-dark"><span style={{ color: 'rgb(255, 255, 255)' }}>LAST THING</span></div>
      <h2 style={{
        fontSize: 'clamp(34px, 4.2vw, 56px)', fontWeight: 700, lineHeight: 1.05,
        letterSpacing: '-0.015em', marginTop: 14, color: '#fff',
      }}>
        Stop paying for marketing that doesn't show up where your clients are searching.
      </h2>
      <p style={{
        fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)',
        marginTop: 20, maxWidth: 680, marginInline: 'auto',
      }}>
        Book a free strategy call. We'll audit your local footprint live and show you exactly what's costing you cases right now.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
        <a href="#" onClick={(e) => e.preventDefault()} className="ub-convertable-trigger btn btn--white" style={{ padding: '16px 28px' }}>
          Book my free strategy call <Icon name="arrow" size={18} strokeWidth={2.2} />
        </a>
      </div>
      <div style={{
        marginTop: 28, fontSize: 14, color: 'rgba(255,255,255,0.7)',
        display: 'inline-flex', flexWrap: 'wrap', gap: 24, justifyContent: 'center',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="check" size={14} color="var(--accent-yellow)" strokeWidth={3} /> 30-min audit
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="check" size={14} color="var(--accent-yellow)" strokeWidth={3} /> No obligation
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="check" size={14} color="var(--accent-yellow)" strokeWidth={3} /> Senior strategist on the call
        </span>
      </div>
    </div>
  </section>
);

Object.assign(window, { PracticeAreas, ResultsGrid, FAQ, FinalCTA });