// Results — light cards with charts

function CaseChart({ data, color = "var(--accent)" }) {
  const w = 320,h = 100,pad = 4;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const stepX = (w - pad * 2) / (data.length - 1);
  const pts = data.map((p, i) => [pad + i * stepX, h - pad - (p - min) / (max - min || 1) * (h - pad * 2)]);
  const d = pts.map((p, i) => i ? `L${p[0].toFixed(1)},${p[1].toFixed(1)}` : `M${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = d + ` L${pts[pts.length - 1][0]},${h - pad} L${pts[0][0]},${h - pad} Z`;
  const id = React.useId().replace(/:/g, '_');
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id={`g${id}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity=".22" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#g${id})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="3.4" fill={color} />
    </svg>);

}

function CaseCard({ data }) {
  const [callsBefore, ra] = useCountUp(data.before, { duration: 1400 });
  const [callsAfter, rb] = useCountUp(data.after, { duration: 1600 });
  return (
    <div className="case reveal">
      <div className="case-head">
        <div>
          <div className="case-cat mono">{data.cat}</div>
          <h3 className="case-name">{data.name}</h3>
          {data.city && <div className="case-city">{data.city}</div>}
          <div className="case-nda mono">по NDA · покажем доступы лично</div>
        </div>
        <span className="case-badge">
          <span className="up mono">+{data.growth}%</span>
          <span className="dim">за {data.period}</span>
        </span>
      </div>

      <div className="case-chart-wrap">
        <CaseChart data={data.series} />
      </div>

      <div className="case-stats">
        <div className="cs-cell">
          <div className="cs-l">Звонки/мес — до</div>
          <div className="cs-v mono dim" ref={ra}>{callsBefore}</div>
        </div>
        <div className="cs-cell">
          <div className="cs-l">Звонки/мес — после</div>
          <div className="cs-v mono up" ref={rb}>{callsAfter}</div>
        </div>
        <div className="cs-cell">
          <div className="cs-l">Позиция в ТОП</div>
          <div className="cs-v mono">{data.rank}</div>
        </div>
      </div>

      <style>{`
        .case{
          background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;
          display:flex;flex-direction:column;gap:22px;
          transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
          box-shadow:0 1px 0 rgba(0,0,0,.02);
        }
        .case:hover{border-color:color-mix(in srgb, var(--accent) 35%, transparent);transform:translateY(-2px);
          box-shadow:0 18px 40px -16px rgba(0,0,0,.12)}
        .case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
        .case-cat{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px;font-weight:600}
        .case-name{font-size:20px;letter-spacing:-.02em;margin-bottom:4px;font-weight:600}
        .case-city{font-size:13px;color:var(--mute)}
        .case-nda{font-size:10px;color:var(--mute);letter-spacing:.08em;margin-top:6px;text-transform:lowercase}
        .case-badge{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
        .case-badge .up{font-size:24px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
        .case-badge .dim{font-size:11px;color:var(--mute)}
        .case-chart-wrap{height:90px;margin:0 -4px}
        .case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:18px;border-top:1px solid var(--line)}
        .cs-l{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-weight:500}
        .cs-v{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
        .cs-v.up{color:var(--accent)}
        .cs-v.dim{color:var(--mute)}
        @media (max-width:540px){
          .case-stats{grid-template-columns:1fr 1fr;gap:14px 24px}
          .cs-cell:nth-child(3){grid-column:span 2}
        }
      `}</style>
    </div>);

}

function Results() {
  const cases = [
  { cat: "Кофейня", name: "Сеть из 4 точек", city: null,
    growth: 412, period: "90 дней", before: 28, after: 143, rank: "1-2",
    series: [22, 28, 26, 40, 38, 55, 72, 88, 96, 110, 128, 143] },
  { cat: "Стоматология", name: "Частная клиника", city: null,
    growth: 318, period: "120 дней", before: 42, after: 176, rank: "1",
    series: [40, 38, 52, 60, 75, 82, 98, 112, 128, 140, 158, 176] },
  { cat: "Автосервис", name: "СТО + шиномонтаж", city: null,
    growth: 287, period: "90 дней", before: 54, after: 209, rank: "1-3",
    series: [50, 58, 55, 68, 76, 92, 108, 124, 148, 165, 188, 209] },
  { cat: "Барбершоп", name: "Городская студия", city: null,
    growth: 240, period: "60 дней", before: 31, after: 105, rank: "1",
    series: [28, 32, 30, 42, 55, 63, 72, 82, 91, 98, 102, 105] }];


  return (
    <section id="results" className="sec results">
      <div className="wrap">
        <div className="res-head reveal">
          <span className="eyebrow">Кейсы</span>
          <h2 style={{ marginTop: 18, marginBottom: 18 }}>
            Цифры, которые<br /><span className="em-red">можно проверить.</span>
          </h2>
          <p className="lead">
            Каждый кейс — реальная карточка в Яндекс.Картах. Покажем доступы, аналитику и отзывы клиента
            при подписании NDA.
          </p>
        </div>

        <div className="res-grid">
          {cases.map((c, i) => <CaseCard key={i} data={c} />)}
        </div>

        <div className="res-foot reveal">
          <div className="rf-stat">
            <div className="rf-v mono">200+</div>
            <div className="rf-l">проектов с 2020 года</div>
          </div>
          <div className="rf-stat">
            <div className="rf-v mono">99%</div>
            <div className="rf-l">достигли ТОП-10 за 90 дней</div>
          </div>
          <div className="rf-stat">
            <div className="rf-v mono">7.4×</div>
            <div className="rf-l">средний ROI клиента в год</div>
          </div>
          <a href="#cta" className="btn dark" style={{ justifySelf: 'end' }}>Полный список кейсов <Arrow /></a>
        </div>
      </div>

      <style>{`
        .res-head{max-width:760px;margin-bottom:56px}
        .res-grid{display:grid;gap:18px}
        @media (min-width:780px){.res-grid{grid-template-columns:1fr 1fr;gap:20px}}
        .res-foot{
          margin-top:48px;padding-top:32px;border-top:1px solid var(--line);
          display:grid;grid-template-columns:repeat(3,auto) 1fr;align-items:center;gap:40px;
        }
        @media (max-width:780px){
          .res-foot{grid-template-columns:1fr 1fr;gap:24px}
          .res-foot .btn{grid-column:span 2;justify-self:start}
        }
        .rf-v{font-size:40px;font-weight:700;letter-spacing:-.035em;color:var(--fg);line-height:1}
        .rf-l{font-size:13px;color:var(--mute);margin-top:6px;line-height:1.3}
      `}</style>
    </section>);

}

window.Results = Results;