// Problem — light theme

function Problem() {
  return (
    <section className="sec problem">
      <div className="wrap">
        <div className="row row-2 problem-grid">
          <div className="reveal">
            <span className="eyebrow">Проблема</span>
            <h2 style={{ marginTop: 18, marginBottom: 24 }}>
              Клиент ищет вас<br />в Яндекс.Картах.<br />
              <span className="em-red">Но видит конкурента.</span>
            </h2>
            <p className="lead">
              90% клиентов с деньгами, готовых купить, выбирают компанию из ТОП-15
              на Яндекс.Картах. Если вас там нет — вы просто не получаете этого клиента.
            </p>
            <div className="prob-stats">
              <div className="ps">
                <div className="ps-v mono">90%</div>
                <div className="ps-l">платёжеспособных клиентов выбирают из ТОП-15</div>
              </div>
              <div className="ps">
                <div className="ps-v mono">3.2×</div>
                <div className="ps-l">больше звонков получают карточки в ТОП-3</div>
              </div>
              <div className="ps">
                <div className="ps-v mono">68%</div>
                <div className="ps-l">не доходят до второй страницы выдачи</div>
              </div>
            </div>
          </div>

          <div className="reveal" style={{ transitionDelay: '.1s' }}>
            <div className="serp">
              <div className="serp-tabs">
                <span className="serp-tab on">Места</span>
                <span className="serp-tab">Подборки</span>
                <span className="serp-tab">Фильтры</span>
              </div>
              <div className="serp-chips">
                {["Открыто","Высокий рейтинг","Со скидкой","Рядом"].map(c =>
                  <span key={c} className="serp-chip">{c}</span>
                )}
              </div>

              <div className="serp-list">
                {[
                  { name: "Стоматология «Эстет»", rating: 5.0, reviews: 1284, badge: "Хорошее место" },
                  { name: "Клиника «Дентал-Про»", rating: 4.9, reviews: 892, badge: "Хорошее место" },
                  { name: "«Альбадент» — все услуги", rating: 4.9, reviews: 1426, badge: null },
                  { name: "Стоматология «Улыбка»", rating: 4.8, reviews: 612, badge: null },
                  { name: "Клиника «Премиум»", rating: 4.7, reviews: 318, badge: null },
                  { name: "Ваша компания", rating: 4.6, reviews: 84, badge: null, isYou: true },
                  { name: "Стоматология «Альфа»", rating: 4.5, reviews: 142, badge: null },
                ].map((c, i) => (
                  <div key={i} className={`serp-row ${c.isYou ? 'you' : ''}`}>
                    <div className="serp-thumb" style={{ background: c.isYou ? 'var(--accent)' : ['#e8e2d4','#dbe6f0','#e8d6dc','#dde6d8','#ecdedb','#000','#d8dde6'][i] }}>
                      {c.isYou ? <PinIcon size={14} color="#fff" /> : <span className="serp-thumb-l">{c.name.replace(/[«»]/g,'').trim()[0]}</span>}
                    </div>
                    <div className="serp-main">
                      <div className="serp-name">{c.name}</div>
                      <div className="serp-meta">
                        <span className="serp-stars">
                          <svg width="11" height="11" viewBox="0 0 12 12"><path d="m6 1 1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9.2l-3.2 1.7.6-3.6L.8 4.8l3.6-.5L6 1Z" fill="#F2B900"/></svg>
                          <b>{c.rating.toFixed(1)}</b>
                          <span className="dim">· {c.reviews.toLocaleString('ru-RU')} отзывов</span>
                        </span>
                      </div>
                      {c.badge && (
                        <div className="serp-badge">
                          <span className="serp-badge-ic">
                            <svg width="10" height="10" viewBox="0 0 12 12"><path d="M6 1 7.5 4.5 11 5l-2.5 2.5L9 11 6 9 3 11l.5-3.5L1 5l3.5-.5L6 1Z" fill="#E31E24"/></svg>
                          </span>
                          {c.badge} 2026
                        </div>
                      )}
                    </div>
                    {c.isYou && <span className="serp-you-tag mono">ВЫ — №6</span>}
                  </div>
                ))}
                <div className="serp-fade" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .problem-grid{align-items:center;gap:64px}
        .prob-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;
          padding-top:28px;border-top:1px solid var(--line)}
        .ps-v{font-size:36px;font-weight:700;color:var(--fg);letter-spacing:-.035em;line-height:1}
        .ps-l{margin-top:8px;font-size:13px;color:var(--mute);line-height:1.4}
        @media (max-width:600px){
          .prob-stats{grid-template-columns:1fr;gap:18px}
          .ps{padding:14px 0;border-bottom:1px solid var(--line)}
          .ps:last-child{border:0}
        }

        .serp{
          background:#fff;border:1px solid var(--line);border-radius:20px;padding:0;
          position:relative;overflow:hidden;
          box-shadow:0 20px 60px -28px rgba(0,0,0,.18), 0 4px 12px -6px rgba(0,0,0,.04);
        }
        .serp-tabs{
          display:flex;gap:24px;padding:18px 22px 0;
          border-bottom:1px solid var(--line);
        }
        .serp-tab{
          font-size:15px;font-weight:600;color:var(--mute);padding:0 0 14px;
          position:relative;letter-spacing:-.01em;
        }
        .serp-tab.on{color:#1a1a1a}
        .serp-tab.on::after{
          content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;
          background:#3D7DFF;border-radius:2px;
        }
        .serp-chips{
          display:flex;gap:8px;padding:14px 22px;overflow-x:auto;flex-wrap:nowrap;
          scrollbar-width:none;
        }
        .serp-chips::-webkit-scrollbar{display:none}
        .serp-chip{
          font-size:13px;color:var(--fg);background:#F3F3F1;border-radius:999px;
          padding:8px 14px;white-space:nowrap;font-weight:500;
        }

        .serp-list{display:flex;flex-direction:column;position:relative;padding:0 6px 8px}
        .serp-row{
          display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
          padding:14px 16px;border-bottom:1px solid var(--line);position:relative;
        }
        .serp-row:last-child{border-bottom:0}
        .serp-thumb{
          width:48px;height:48px;border-radius:10px;
          display:grid;place-items:center;flex-shrink:0;
        }
        .serp-thumb-l{
          font-size:18px;font-weight:700;color:rgba(0,0,0,.45);letter-spacing:-.02em;
        }
        .serp-main{display:flex;flex-direction:column;gap:4px;min-width:0}
        .serp-name{font-size:15px;color:var(--fg);font-weight:600;letter-spacing:-.01em;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .serp-meta{font-size:13px;color:var(--fg-2);display:flex;align-items:center;gap:6px}
        .serp-stars{display:inline-flex;align-items:center;gap:4px}
        .serp-stars b{color:var(--fg);font-weight:600}
        .serp-badge{
          display:inline-flex;align-items:center;gap:5px;
          font-size:12px;font-weight:600;color:#1a1a1a;margin-top:3px;
        }
        .serp-badge-ic{display:inline-flex;align-items:center}

        .serp-row.you{
          background:color-mix(in srgb, var(--accent) 5%, transparent);
          border-bottom:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
        }
        .serp-row.you::before{
          content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
          background:var(--accent);border-radius:0 2px 2px 0;
        }
        .serp-you-tag{
          font-size:10px;letter-spacing:.08em;color:#fff;background:var(--accent);
          padding:5px 9px;border-radius:5px;font-weight:700;
          animation:blink 1.6s ease-in-out infinite alternate;
        }
        @keyframes blink{from{opacity:.7}to{opacity:1}}
        .serp-fade{
          position:absolute;left:0;right:0;bottom:0;height:80px;
          background:linear-gradient(180deg, transparent, #fff);
          pointer-events:none;
        }
        .dim{color:var(--mute)}
      `}</style>
    </section>);

}

window.Problem = Problem;