/* global React, Icon */

// ---------------------------------------------------------------- Map pack visual
const MapPackMock = () => {
  const results = [
    { rank: 1, name: 'Hawthorne & Reed LLP', rating: 4.9, reviews: 184, distance: '0.4 mi', tag: 'Top result', ours: true },
    { rank: 2, name: 'Marin Family Law', rating: 4.8, reviews: 142, distance: '0.7 mi', tag: 'Open now', ours: true },
    { rank: 3, name: 'Greene Personal Injury', rating: 4.7, reviews: 96, distance: '1.1 mi', tag: 'Open now', ours: true },
  ];
  return (
    <div style={{
      position: 'relative',
      borderRadius: 14,
      background: '#fff',
      boxShadow: '0 24px 60px rgba(10, 10, 10, 0.18), 0 2px 4px rgba(10,10,10,0.06)',
      overflow: 'hidden',
      border: '1px solid var(--gray-300)',
      transform: 'rotate(-1.5deg)',
    }}>
      {/* Browser chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px', background: '#f6f7f9', borderBottom: '1px solid var(--gray-300)' }}>
        <span style={{ width: 10, height: 10, background: '#ff5f57', borderRadius: 999 }} />
        <span style={{ width: 10, height: 10, background: '#febc2e', borderRadius: 999 }} />
        <span style={{ width: 10, height: 10, background: '#28c840', borderRadius: 999 }} />
        <div style={{
          marginLeft: 12, flex: 1, height: 26, background: '#fff',
          border: '1px solid var(--gray-300)', borderRadius: 6,
          display: 'flex', alignItems: 'center', padding: '0 10px',
          fontSize: 12, color: 'var(--gray-600)', gap: 6,
        }}>
          <Icon name="search" size={12} color="var(--gray-600)" strokeWidth={2} />
          <span>personal injury lawyer near me</span>
        </div>
      </div>

      {/* Map area */}
      <div style={{ position: 'relative', height: 200, background: '#e8edf3', overflow: 'hidden' }}>
        {/* Faux map grid */}
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
          <defs>
            <pattern id="streets" width="60" height="60" patternUnits="userSpaceOnUse">
              <path d="M0 30 H60 M30 0 V60" stroke="#d7dde6" strokeWidth="1.5" />
              <path d="M0 0 L60 60" stroke="#dce2eb" strokeWidth="0.5" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#streets)" />
          {/* Big roads */}
          <path d="M 0 130 Q 200 110 420 145 T 800 130" stroke="#ffd8a0" strokeWidth="10" fill="none" opacity="0.9" />
          <path d="M 0 130 Q 200 110 420 145 T 800 130" stroke="#fff" strokeWidth="2" fill="none" />
          <path d="M 180 0 L 220 220" stroke="#ffe9c2" strokeWidth="8" fill="none" />
          <path d="M 180 0 L 220 220" stroke="#fff" strokeWidth="1.5" fill="none" />
          {/* Park */}
          <rect x="430" y="20" width="180" height="100" rx="10" fill="#dceac9" />
          <rect x="40" y="160" width="120" height="50" rx="8" fill="#dceac9" />
        </svg>
        {/* Pins */}
        {[
          { x: '24%', y: '38%', rank: 1 },
          { x: '52%', y: '60%', rank: 2 },
          { x: '74%', y: '32%', rank: 3 },
        ].map(p => (
          <div key={p.rank} style={{
            position: 'absolute', left: p.x, top: p.y, transform: 'translate(-50%, -100%)',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: '999px 999px 999px 4px',
              background: 'var(--brand-blue)', color: '#fff',
              display: 'grid', placeItems: 'center',
              fontWeight: 700, fontSize: 14,
              transform: 'rotate(-45deg)',
              boxShadow: '0 4px 10px rgba(26,79,255,0.45)',
              border: '2px solid #fff',
            }}><span style={{ transform: 'rotate(45deg)' }}>{p.rank}</span></div>
          </div>
        ))}
      </div>

      {/* Results list */}
      <div style={{ padding: '4px 0' }}>
        {results.map(r => (
          <div key={r.rank} style={{
            display: 'grid', gridTemplateColumns: '32px 1fr auto', gap: 12, padding: '12px 16px',
            borderBottom: r.rank < 3 ? '1px solid var(--gray-300)' : 'none', alignItems: 'center',
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 6, background: 'var(--brand-blue)',
              color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13,
            }}>{r.rank}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink-black)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name}</div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 2, fontSize: 11, color: 'var(--gray-600)' }}>
                <span style={{ color: '#e69500', fontWeight: 700 }}>{r.rating}</span>
                <Icon name="star" size={10} color="#e69500" strokeWidth={0} style={{ fill: '#e69500' }} />
                <span>({r.reviews})</span>
                <span>·</span>
                <span>{r.distance}</span>
              </div>
            </div>
            <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--brand-blue)', background: '#EAF0FF', padding: '4px 8px', borderRadius: 4 }}>
              {r.tag}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------------------------------------------------------------- Intake call notification
const CallNotification = ({ style }) => (
  <div style={{
    position: 'absolute',
    background: '#fff',
    borderRadius: 14,
    padding: '12px 14px',
    boxShadow: '0 16px 40px rgba(10,10,10,0.18), 0 2px 4px rgba(10,10,10,0.06)',
    border: '1px solid var(--gray-300)',
    display: 'flex', alignItems: 'center', gap: 12,
    minWidth: 244,
    ...style,
  }}>
    <div style={{
      width: 40, height: 40, borderRadius: 999, background: 'var(--brand-blue)',
      display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0,
    }}>
      <Icon name="phone" size={20} color="#fff" strokeWidth={2} />
    </div>
    <div style={{ minWidth: 0 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--gray-600)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>New intake call</div>
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-black)', marginTop: 2 }}>"I was in an accident…"</div>
      <div style={{ fontSize: 12, color: 'var(--gray-600)', marginTop: 1 }}>Mississauga, ON · 38 sec ago</div>
    </div>
    <span style={{ width: 8, height: 8, borderRadius: 999, background: '#22c55e', boxShadow: '0 0 0 4px rgba(34,197,94,0.22)' }} />
  </div>
);

// ---------------------------------------------------------------- Hero
const Hero = () => (
  <section id="top" className="section section--soft" style={{ paddingTop: 80, paddingBottom: 64, overflow: 'hidden' }}>
    <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
      <div>
        <div className="eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(26,79,255,0.08)', padding: '6px 12px', borderRadius: 999 }}>
          <Icon name="pin" size={14} color="var(--brand-blue)" strokeWidth={2.2} /> Local marketing program
        </div>
        <h1 style={{
          fontSize: 'clamp(38px, 4.6vw, 56px)', fontWeight: 700, lineHeight: 1.04,
          letterSpacing: '-0.015em', color: 'var(--ink-black)', margin: '20px 0 22px',
        }}>
          Local marketing that turns Google Ads and Map Pack visibility into <span style={{ position: 'relative', whiteSpace: 'nowrap' }}>
            signed cases
            <svg viewBox="0 0 300 14" preserveAspectRatio="none" style={{
              position: 'absolute', left: 0, right: 0, bottom: -6, width: '100%', height: 10,
            }}>
              <path d="M2 8 Q 75 0 150 6 T 298 7" stroke="var(--brand-blue)" strokeWidth="4" fill="none" strokeLinecap="round" />
            </svg>
          </span>.
        </h1>
        <p style={{
          fontSize: 18, lineHeight: 1.55, color: 'var(--gray-900)', maxWidth: 560, margin: 0,
        }}>
          We help law firms dominate the three searches that actually drive cases: <em style={{ fontStyle: 'normal', fontWeight: 600 }}>[practice area] lawyer near me</em>, <em style={{ fontStyle: 'normal', fontWeight: 600 }}>[practice area] attorney [city]</em>, and the Google Map Pack. No vanity rankings. Just signed retainers from clients inside your service area.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap', alignItems: 'center' }}>
          <a href="#" onClick={(e) => e.preventDefault()} className="ub-convertable-trigger btn btn--primary">Book a free strategy call</a>
          <a href="#process" className="btn btn--ghost" style={{ padding: '14px 18px' }}>
            See how it works <Icon name="arrow" size={18} strokeWidth={2} />
          </a>
        </div>
      </div>

      <div className="hero-visual" style={{ position: 'relative', height: 460 }}>
        <div className="hero-map" style={{ position: 'absolute', top: 0, right: -20, width: '108%' }}>
          <MapPackMock />
        </div>
        <div className="hero-float">
          <CallNotification style={{ top: 30, left: -36, transform: 'rotate(-3deg)' }} />
        </div>
        <div className="hero-float" style={{
          position: 'absolute', bottom: 14, right: -8, transform: 'rotate(2deg)',
          background: 'var(--ink-black)', color: '#fff',
          borderRadius: 14, padding: '14px 18px',
          boxShadow: '0 16px 40px rgba(10,10,10,0.22)',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'rgba(255,255,255,0.65)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent-yellow)' }} />
            Signed retainers · this month
          </div>
          <div style={{ fontSize: 28, fontWeight: 700, color: '#fff', lineHeight: 1 }}>
            <span style={{ color: 'var(--accent-yellow)' }}>47</span> <span style={{ fontSize: 14, fontWeight: 500, color: 'rgba(255,255,255,0.7)' }}>+312% YoY</span>
          </div>
        </div>
      </div>
    </div>

    {/* Trust strip */}
    <div className="container" style={{ marginTop: 80 }}>
      <div className="eyebrow" style={{ color: 'var(--gray-600)', letterSpacing: '0.08em', textTransform: 'uppercase', textAlign: 'center', fontSize: 12 }}>
        Certified by the platforms law firms actually run on
      </div>
      <div style={{
        marginTop: 20,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 32, flexWrap: 'wrap',
        color: 'var(--gray-600)',
      }}>
        {[
          ['Google', 'Certified'],
          ['Clio', 'Certified'],
          ['Filevine', 'Experienced'],
          ['Lawmatics', 'Experienced'],
          ['Microsoft Advertising', 'Certified'],
        ].map(([brand, role]) => (
          <div key={brand} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, opacity: 0.85 }}>
            <span style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink-black)' }}>{brand}</span>
            <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{role}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });