// problem.jsx — gdzie ucieka 20-30% sprzedaży
function Problem() {
  const [ref, seen] = useInView(0.2);
  const losses = [
    { num: 27, suffix: '%', label: 'Klientów dzwoni poza godzinami pracy', sub: '— i nigdy nie oddzwania' },
    { num: 18, suffix: '%', label: 'Wycen jest niedoszacowanych', sub: '— braki w zestawach: klej, fuga, profile' },
    { num: 4.2, suffix: 'h', label: 'Średni czas odpowiedzi na zapytanie', sub: 'klient już kupił u konkurencji', dec: 1 },
    { num: 31, suffix: '%', label: 'Klientów chciałoby zamawiać online', sub: 'badanie GfK, 2024' },
  ];

  const lossList = [
    "Zamówienie z piątku 17:42 — telefon wpada na pocztę, klient szuka dalej",
    "Wycena płytek bez kleju i fugi → spór na odbiorze, rabat na pocieszenie",
    "Stały klient zamawia 3 listwy zamiast 12, bo nikt nie spytał o całość projektu",
    "Pani Aniu, jesteśmy w trasie — proszę zadzwonić jutro",
    "Wysłaliśmy ofertę mailem… 6 dni temu",
    "Sobota po 13:00, niedziela — sklep zamknięty, sprzedaż = 0 zł"
  ];

  return (
    <section id="problem" className="problem" ref={ref}>
      <div className="container">
        <div className="section-head">
          <Eyebrow>Problem</Eyebrow>
          <h2>Sprzedaż stacjonarna ma <em>cichy wyciek</em>.<br/>Średnio <span className="hl">20–30%</span> miesięcznie.</h2>
          <p>
            Większość zamówień opiera się na rozmowie i&nbsp;ręcznych wycenach.
            To model, który działa — ale ma jedno ograniczenie: <strong className="ink">ludzi</strong>.
            A ludzie mają telefon, sobotę i&nbsp;ośmiogodzinny dzień.
          </p>
        </div>

        <div className="problem-grid">
          {losses.map((l, i) => (
            <div key={i} className="problem-stat" style={{ animationDelay: `${i*60}ms` }}>
              <div className="problem-stat-num">
                {seen
                  ? <CountUp to={l.num} suffix={l.suffix} duration={1200 + i*120} decimals={l.dec || 0}/>
                  : <span>0{l.suffix}</span>}
              </div>
              <div className="problem-stat-label">{l.label}</div>
              <div className="problem-stat-sub">{l.sub}</div>
            </div>
          ))}
        </div>

        <div className="problem-leaks">
          <div className="problem-leaks-head">
            <div className="problem-leaks-title">Codziennie, w&nbsp;każdym sklepie stacjonarnym:</div>
            <div className="problem-leaks-meter">
              <div className="meter-track">
                <div className="meter-fill" style={{ width: seen ? '78%' : '0%' }}/>
              </div>
              <div className="meter-label">
                <strong>{seen ? <CountUp to={78} suffix="%" duration={1600}/> : '0%'}</strong>
                <span className="muted">odzyskiwalnej sprzedaży</span>
              </div>
            </div>
          </div>
          <ul className="problem-leaks-list">
            {lossList.map((q, i) => (
              <li key={i} style={{ animationDelay: `${300 + i*70}ms` }}>
                <span className="quote-mark">„</span>
                {q}
                <span className="quote-mark">”</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <style>{`
        .problem .section-head h2{ font-size: clamp(34px, 5.5vw, 64px); }
        .problem .section-head h2 em{
          font-style: normal;
          background: linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 100%);
          -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
        .problem .section-head h2 .hl{ color: var(--accent); }
        .problem .section-head p{ color: var(--ink-2); }
        .problem .section-head p .ink{ color: var(--ink); font-weight: 500; }

        .problem-grid{
          display:grid; grid-template-columns: repeat(4, 1fr);
          gap: 16px;
          margin-bottom: 56px;
        }
        .problem-stat{
          padding: 28px 24px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          animation: reveal .7s var(--ease-out) both;
          animation-delay: inherit;
        }
        .problem-stat-num{
          font-family: var(--font-display);
          font-size: clamp(40px, 4.5vw, 64px);
          font-weight: 600;
          letter-spacing: -0.04em;
          line-height: 1;
          color: var(--accent);
          margin-bottom: 18px;
          font-variant-numeric: tabular-nums;
        }
        .problem-stat-label{
          font-size: 15px;
          color: var(--ink);
          line-height: 1.35;
          margin-bottom: 6px;
        }
        .problem-stat-sub{
          font-size: 13px;
          color: var(--ink-3);
        }

        .problem-leaks{
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 36px 36px 32px;
        }
        .problem-leaks-head{
          display:flex; justify-content:space-between; align-items:end; gap: 24px;
          margin-bottom: 28px;
          padding-bottom: 24px;
          border-bottom: 1px dashed var(--line);
        }
        .problem-leaks-title{
          font-family: var(--font-display);
          font-size: clamp(22px, 2.4vw, 30px);
          color: var(--ink);
          max-width: 520px;
          letter-spacing: -0.02em;
        }
        .problem-leaks-meter{
          min-width: 240px;
        }
        .meter-track{
          width: 100%; height: 10px;
          background: var(--surface-2);
          border-radius: 999px;
          overflow: hidden;
          margin-bottom: 8px;
        }
        .meter-fill{
          height: 100%;
          background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
          border-radius: 999px;
          transition: width 1.6s var(--ease-out);
        }
        .meter-label{
          display:flex; align-items:baseline; gap:8px;
          font-family: var(--font-display);
          font-size: 22px;
        }
        .meter-label .muted{ font-size: 12.5px; font-family: var(--font-body); }

        .problem-leaks-list{
          list-style:none; padding:0; margin:0;
          display:grid; grid-template-columns: repeat(2, 1fr);
          gap: 12px 24px;
        }
        .problem-leaks-list li{
          font-style: italic;
          font-family: 'Instrument Serif', Georgia, serif;
          font-size: 19px;
          line-height: 1.4;
          color: var(--ink-2);
          padding-left: 4px;
          animation: reveal .7s var(--ease-out) both;
        }
        .problem-leaks-list .quote-mark{
          color: var(--ink-3);
          font-size: 22px;
          margin: 0 2px;
        }

        @media (max-width: 980px){
          .problem-grid{ grid-template-columns: repeat(2, 1fr); }
          .problem-leaks-head{ flex-direction: column; align-items: flex-start; }
          .problem-leaks-list{ grid-template-columns: 1fr; }
        }
        @media (max-width: 540px){
          .problem-leaks{ padding: 24px 20px; }
        }
      `}</style>
    </section>
  );
}

window.Problem = Problem;