/* PulseSections2.jsx — Platform Components, New Working Mode, Use Cases */

/* =========================================================
   PLATFORM COMPONENTS — Section 03 · warm PULSE dark
   Three platform layers as switchable component tabs.
   ========================================================= */
const PULSE_PLATFORM = [
{
  key: 'agent', num: '01', tab: 'AI Interview Agent', label: 'Wissen erheben', icon: 'msg',
  title: 'AI Interview Agent',
  desc: 'PULSE führt intelligente Interviews und fragt kontextbezogen nach. Bisher verborgenes Wissen wird hierdurch skalierbar erfasst.',
  bullets: ['AI-gestützte Folgefragen', 'Freitext und mehrere Fragetypen', 'Interviewlinks ohne Login für Teilnehmende', 'Konsistente Erhebung über viele Stimmen hinweg'],
  value: 'Mehr Stimmen erfassen'
},
{
  key: 'context', num: '02', tab: 'Knowledge & Context Layer', label: 'Wissen verbinden', icon: 'layers',
  title: 'Knowledge & Context Layer',
  desc: 'PULSE verbindet Projektkontext, Wissensbasen, Dokumente, Anforderungen und methodische Logik als Referenz für bessere Fragen und Analysen.',
  bullets: ['Projekt- und Fragekontext', 'Knowledge Bases', 'Anforderungen und Dokumente als Referenz', 'Wiederverwendbare Wissensbasis'],
  value: 'Kontext konsistent nutzen'
},
{
  key: 'analysis', num: '03', tab: 'Analysis Engine', label: 'Wissen auswerten', icon: 'spark',
  title: 'Analysis Engine',
  desc: 'PULSE nutzt AI und erkennt hierdurch Muster, Widersprüche, Prioritäten, Risiken und Potenziale über einzelne und mehrere Interviews hinweg.',
  bullets: ['Einzelinterview-Analyse', 'Multi-Interview-Synthese', 'Analyse gegen Kontext und Anforderungen', 'Reports und neu geschaffene Wissensbasen'],
  value: 'Muster schneller erkennen'
}];


function PlatformVisual({ which }) {
  if (which === 'agent') {
    return (
      <div className="plv plv--agent">
        <div className="plv__bar">INTERVIEW · ADAPTIV</div>
        <div className="plv__msg plv__msg--ai">
          <span className="plv__from">PULSE</span>
          Wie läuft dieser Schritt heute konkret ab — vom Eingang bis zur Freigabe?
        </div>
        <div className="plv__msg plv__msg--user">
          Der Standardweg ist klar. Bei Sonderfällen entscheidet die zuständige Person — undokumentiert.
        </div>
        <div className="plv__chips">
          <span className="plv__chip">Freitext</span>
          <span className="plv__chip">Auswahl</span>
          <span className="plv__chip">Ranking</span>
          <span className="plv__chip">Skala</span>
        </div>
        <div className="plv__fup">
          <span className="plv__fupLbl">ADAPTIVE FOLGEFRAGE</span>
          Wie oft greift dieser Sonderfall — selten, regelmäßig oder bereits Standard?
        </div>
      </div>);

  }
  if (which === 'context') {
    return (
      <div className="plv plv--context">
        <div className="plv__bar">KNOWLEDGE & CONTEXT</div>
        <div className="plv__ctx">
          <div className="plv__srcs">
            <div className="plv__src"><span className="plv__srcIco">{Ico.doc()}</span>Interne Dokumente</div>
            <div className="plv__src"><span className="plv__srcIco">{Ico.book()}</span>Externe Referenzen</div>
            <div className="plv__src"><span className="plv__srcIco">{Ico.shield()}</span>Anforderungen</div>
          </div>
          <div className="plv__kb">
            <img src="assets/logos/pulse-mark.png" alt="" className="plv__kbMark" />
            <div className="plv__kbTitle">Knowledge Base</div>
            <div className="plv__kbDesc">Bezugsrahmen für Validierung &amp; Requirements Checking</div>
            <div className="plv__kbPrinciple">Referenzkontext für echte AI Intelligence</div>
          </div>
        </div>
      </div>);

  }
  return (
    <div className="plv plv--analysis">
      <div className="plv__bar">ANALYSIS ENGINE</div>
      <div className="plv__an">
        <div className="plv__anCol">
          <div className="plv__anLbl">EINGANG</div>
          <div className="plv__anRow">Interviews</div>
          <div className="plv__anRow">Kontext</div>
          <div className="plv__anRow">Anforderungen</div>
        </div>
        <div className="plv__anEngine">
          <img src="assets/logos/pulse-mark.png" alt="" className="plv__anMark" />
          <span>Muster · Widersprüche · Prioritäten</span>
        </div>
        <div className="plv__anCol">
          <div className="plv__anLbl">ERGEBNIS</div>
          <div className="plv__anRow plv__anRow--out">Einzel-Analyse</div>
          <div className="plv__anRow plv__anRow--out">Multi-Interview</div>
          <div className="plv__anRow plv__anRow--out">Reports und neue Wissensbasen</div>
        </div>
      </div>
    </div>);

}

function PulsePlatform({ mobile }) {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const a = PULSE_PLATFORM[active < 0 ? 0 : active];

  // Auto-advance continuously, looping through the three components. Pauses
  // while the user hovers/focuses a step (that step then stays shown) and
  // resumes from there on leave. Disabled on reduced motion + mobile accordion.
  React.useEffect(() => {
    if (mobile) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (paused) return;
    const id = setTimeout(() => {
      setActive((i) => (i + 1) % PULSE_PLATFORM.length);
    }, 4200);
    return () => clearTimeout(id);
  }, [active, paused, mobile]);

  const select = (i) => setActive(i);

  if (mobile) {
    return (
      <section className="psec psec--pulse pulse-platform" data-screen-label="03 Platform Components">
        <div className="wrap wrap--wide">
          <PlatformHead />
          <div className="pl-acc">
            {PULSE_PLATFORM.map((p, i) =>
            <div key={p.key} className={'pl-accItem' + (active === i ? ' is-open' : '')}>
                <button className="pl-accHead" onClick={() => setActive(active === i ? -1 : i)} aria-expanded={active === i}>
                  <span className="pl-accNum">{p.num}</span>
                  <span className="pl-accTitle">{p.tab}</span>
                  <span className="pl-accLabel">{p.label}</span>
                  <span className="pl-accChev"><Ico.chev /></span>
                </button>
                {active === i &&
              <div className="pl-accBody">
                    <PlatformDetail p={p} />
                    <PlatformVisual which={p.key} />
                  </div>
              }
              </div>
            )}
          </div>
        </div>
      </section>);

  }

  return (
    <section className="psec psec--pulse pulse-platform" data-screen-label="03 Platform Components">
      <div className="wrap wrap--wide">
        <PlatformHead />
        <div
          className="pl-tabs" role="tablist" aria-label="Plattform-Komponenten"
          onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
          onFocusCapture={() => setPaused(true)} onBlurCapture={() => setPaused(false)}>
          {PULSE_PLATFORM.map((p, i) =>
          <button key={p.key} role="tab" aria-selected={active === i}
          className={'pl-tab' + (active === i ? ' is-active' : '')}
          onClick={() => select(i)}
          onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}>
              <span className="pl-tab__num">{p.num}</span>
              <span className="pl-tab__ico">{Ico[p.icon]()}</span>
              <span className="pl-tab__text">
                <span className="pl-tab__title">{p.tab}</span>
                <span className="pl-tab__label">{p.label}</span>
              </span>
            </button>
          )}
        </div>
        <div className="pl-stage">
          <div className="pl-stage__detail"><PlatformDetail p={a} /></div>
          <div className="pl-stage__visual">
            <div className="pl-stage__fade" key={a.key}><PlatformVisual which={a.key} /></div>
          </div>
        </div>
        <div className="pl-value" aria-label="Wertbeitrag">
          {PULSE_PLATFORM.map((p, i) =>
          <button key={p.key} type="button"
          className={'pl-value__item' + (active === i ? ' is-active' : '')}
          onClick={() => select(i)}>
              <span className="pl-value__num">{p.num}</span>
              <span className="pl-value__text">{p.value}</span>
            </button>
          )}
        </div>
      </div>
    </section>);

}

function PlatformHead() {
  return (
    <div className="psec__head">
      <div className="eyebrow eyebrow--pulse">DIE PULSE PLATTFORM</div>
      <h2 className="psec__h2">Drei AI-Plattform-Schichten.<br /><span className="acc-pulse">Ein nutzbares Wissenssystem.</span></h2>
      <p className="psec__lead">
        PULSE erhebt Wissen, verbindet es mit Kontext und analysiert es über
        einzelne Interviews, Gruppen und Fragestellungen hinweg.
      </p>
    </div>);

}

function PlatformDetail({ p }) {
  return (
    <div className="pl-detail">
      <div className="eyebrow eyebrow--pulse" style={{ marginBottom: 14 }}>{p.num} · {p.label}</div>
      <h3 className="pl-detail__title">{p.title}</h3>
      <p className="pl-detail__desc">{p.desc}</p>
      <div className="pl-detail__bullets">
        {p.bullets.map((b) =>
        <div key={b} className="pl-detail__bullet"><Ico.check /><span>{b}</span></div>
        )}
      </div>
    </div>);

}

/* =========================================================
   NEW WORKING MODE — Section 04 · hybrid
   Light editorial classical flow (left) vs dark PULSE intelligence
   cycle (right). The PULSE loop draws once on scroll-in.
   ========================================================= */
const CLASSIC_FLOW = [
{ t: 'Scope definieren', icon: 'filter' },
{ t: 'Große Interviewrunde', icon: 'users' },
{ t: 'Manuelle Auswertung', icon: 'doc' },
{ t: 'Statischer Bericht', icon: 'book' }];

const CLASSIC_PAINS = ['langsam', 'schwer vergleichbar', 'hoher manueller Aufwand', 'wenig wiederverwendbar'];

const PULSE_CYCLE = [
{ n: '01', key: 'Hypothese', icon: 'search', title: 'Use Case oder Hypothese definieren', micro: 'Die Erhebung startet mit einer konkreten Wissensfrage.' },
{ n: '02', key: 'Interviewen', icon: 'msg', title: 'Relevante Gruppen interviewen', micro: 'PULSE erreicht gezielt die Menschen, die die Realität kennen.' },
{ n: '03', key: 'Analysieren', icon: 'matrix', title: 'Muster und Lücken analysieren', micro: 'Antworten werden über Rollen, Gruppen und Themen hinweg ausgewertet.' },
{ n: '04', key: 'Validieren', icon: 'check', title: 'Hypothesen validieren', micro: 'Neue Interviewwellen prüfen, ob Annahmen stimmen.' },
{ n: '05', key: 'Schärfen', icon: 'zap', title: 'Nächste Erhebung schärfen', micro: 'Fragen werden präziser, statt den Prozess neu zu starten.' },
{ n: '06', key: 'Wissensbasis', icon: 'layers', title: 'Wissensbasis erweitern', micro: 'Erkenntnisse bleiben nutzbar und können später wieder eingesetzt werden.' },
{ n: '07', key: 'Messen', icon: 'clock', title: 'Wiederkehrend messen', micro: 'Pulse Checks zeigen, wie sich Wahrnehmung, Risiken und Umsetzung verändern.' }];

const PULSE_BENEFITS = ['iterativ', 'skalierbar', 'kontextbasiert', 'wiederholbar'];

function PulseCycleLoop({ shown }) {
  const [hover, setHover] = React.useState(null);
  const N = PULSE_CYCLE.length;
  const cx = 50,cy = 50,Rs = 37,Rn = 38; // svg ring / node placement
  const drawMs = 1700,base = 720; // arc starts after classical reveal
  return (
    <div className={'cyc__loop' + (shown ? ' is-shown' : '')}>
      <svg className="cyc__svg" viewBox="0 0 100 100" aria-hidden="true">
        <defs>
          <linearGradient id="cycGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#B85730" />
            <stop offset="0.55" stopColor="#D97757" />
            <stop offset="1" stopColor="#E89968" />
          </linearGradient>
        </defs>
        <circle cx={cx} cy={cy} r={Rs} fill="none" stroke="rgba(217,119,87,0.16)"
        strokeWidth="0.4" strokeDasharray="1.1 2.4" vectorEffect="non-scaling-stroke" />
        <circle className="cyc__arc" cx={cx} cy={cy} r={Rs} fill="none"
        stroke="url(#cycGrad)" strokeWidth="1.2" strokeLinecap="round"
        pathLength="100" vectorEffect="non-scaling-stroke"
        transform={`rotate(-90 ${cx} ${cy})`}
        style={{ strokeDasharray: 100, strokeDashoffset: shown ? 0 : 100 }} />
      </svg>

      <div className="cyc__center">
        <img src="assets/logos/pulse-mark.png" alt="" />
        <strong>PULSE Knowledge Base</strong>
        <span>wächst mit</span>
      </div>

      {PULSE_CYCLE.map((node, i) => {
        const deg = -90 + i * (360 / N);
        const a = deg * Math.PI / 180;
        const x = cx + Rn * Math.cos(a),y = cy + Rn * Math.sin(a);
        const zx = x < 32 ? 'l' : x > 68 ? 'r' : 'c';
        const zy = y < 50 ? 'a' : 'b';
        const delay = base + i / N * drawMs;
        return (
          <div key={node.key}
          className={'cyc__node' + (hover === i ? ' is-hover' : '')}
          style={{ left: x + '%', top: y + '%', '--nd': delay + 'ms' }}
          onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
          onFocus={() => setHover(i)} onBlur={() => setHover(null)}
          tabIndex="0" role="button"
          aria-label={node.title + '. ' + node.micro}>
            <span className="cyc__dot">{Ico[node.icon]()}</span>
            <span className="cyc__klabel">{node.key}</span>
            <div className={'cyc__tip cyc__tip--' + zx + ' cyc__tip--' + zy} role="tooltip">
              <span className="cyc__tip-n">{node.n}</span>
              <strong>{node.title}</strong>
              <p>{node.micro}</p>
            </div>
          </div>);

      })}
    </div>);

}

/* Mobile-only vertical stepper rendering of the same cycle */
function PulseCycleStepper() {
  return (
    <ol className="cyc__steps">
      {PULSE_CYCLE.map((node) =>
      <li key={node.key} className="cyc__step">
          <span className="cyc__step-dot">{Ico[node.icon]()}</span>
          <div className="cyc__step-body">
            <span className="cyc__step-n">{node.n} · {node.key}</span>
            <strong>{node.title}</strong>
            <p>{node.micro}</p>
          </div>
        </li>
      )}
      <li className="cyc__step cyc__step--base">
        <span className="cyc__step-dot cyc__step-dot--base"><img src="assets/logos/pulse-mark.png" alt="" /></span>
        <div className="cyc__step-body">
          <strong>PULSE Knowledge Base wächst mit</strong>
        </div>
      </li>
    </ol>);

}

function PulseWorkingMode() {
  const [ref, shown] = usePulseReveal(0.16);
  return (
    <section className="psec psec--mist pulse-mode2" data-screen-label="04 New Working Mode"
    ref={ref}>
      <div className="wrap wrap--wide">
        <div className="psec__head">
          <div className="eyebrow eyebrow--pulse">NEUER DISCOVERY-MODUS</div>
          <h2 className="psec__h2">PULSE macht Wissenserhebung zu einem lernenden System.<br /><span className="acc-pulse">Kontinuierlich intelligenter.</span></h2>
          <p className="psec__lead">Mit PULSE testen Sie Hypothesen schneller, schärfen mit Folgeinterviews gezielt nach, bauen eine belastbare Wissensbasis auf und führen AI Analysen direkt aus – statt bei jeder Erhebung wieder bei null zu beginnen.



          </p>
        </div>

        <div className={'mode2' + (shown ? ' is-shown' : '')}>
          {/* LEFT — classical, muted, cool light surface */}
          <div className="cmp">
            <div className="cmp__head">
              <span className="cmp__lbl">EINMALIGE ERHEBUNG</span>
              <h3 className="cmp__title">Wissenerhebung war bisher aufwendig.</h3>
            </div>
            <ol className="cmp__flow">
              {CLASSIC_FLOW.map((s, i) =>
              <li key={s.t} className="cmp__step" style={{ '--sd': i * 110 + 'ms' }}>
                  <span className="cmp__step-dot">{Ico[s.icon]()}</span>
                  <span className="cmp__step-t">{s.t}</span>
                </li>
              )}
              <li className="cmp__end">endet hier · Wissen veraltet</li>
            </ol>
            <div className="cmp__pains">
              {CLASSIC_PAINS.map((p) => <span key={p} className="cmp__pain">{p}</span>)}
            </div>
          </div>

          {/* RIGHT — PULSE iterative intelligence cycle, dark */}
          <div className="cyc">
            <div className="cyc__head">
              <span className="cyc__lbl">ITERATIVER ZYKLUS</span>
              <h3 className="cyc__title">PULSE schafft intelligente Wissenbasen.</h3>
            </div>
            <PulseCycleLoop shown={shown} />
            <PulseCycleStepper />
            <p className="cyc__caption">Jede Erhebung kann Kontext für die nächste werden.</p>
            <div className="cyc__benefits">
              {PULSE_BENEFITS.map((b) => <span key={b} className="cyc__benefit">{b}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================
   USE CASES — Section 05 · light editorial
   3 primary cards w/ embedded dark PULSE artifact previews,
   then 8 additional application patterns (hover detail).
   ========================================================= */
const UC_PRIMARY = [
{ t: 'Process & Automation', sub: 'Verstehen, wo Arbeit wirklich stockt.',
  d: 'PULSE macht Prozessrealität, Engpässe, manuelle Aufwände und Automatisierungspotenziale sichtbar.',
  chips: ['Prozessrealität', 'Engpässe', 'Automatisierung'], icon: 'cog', acc: 'cobalt', viz: 'process' },
{ t: 'Requirements & Software', sub: 'Anforderungen strukturieren, bevor entschieden wird.',
  d: 'PULSE erfasst Stakeholderbedarfe, Prozesskontext, Prioritäten und offene Fit-Gap-Fragen.',
  chips: ['Requirements', 'Fit-Gap', 'Softwareauswahl'], icon: 'doc', acc: 'cobalt', viz: 'req' },
{ t: 'Transformation & Strategy', sub: 'Erkennen, ob Umsetzung wirklich tragfähig ist.',
  d: 'PULSE sammelt Perspektiven zu Verständnis, Risiken, Barrieren und Umsetzungsfähigkeit.',
  chips: ['Transformation', 'Risiken', 'Adoption'], icon: 'road', acc: 'teal', viz: 'trans' }];


const UC_PATTERNS = [
{ t: 'Wissenssicherung / Wikis', d: 'Kritisches Erfahrungswissen erfassen, bevor es verloren geht.', icon: 'book' },
{ t: 'Kundenanalyse', d: 'Kundenperspektiven strukturiert erheben und vergleichbar machen.', icon: 'users' },
{ t: 'Risikoerkennung', d: 'Schwache Signale, Abhängigkeiten und Wissenslücken früh sichtbar machen.', icon: 'warn' },
{ t: 'Due Diligence & Wertsteigerung', d: 'Unternehmen schneller verstehen und Werthebel strukturieren.', icon: 'shield' },
{ t: 'Innovation & Wachstum', d: 'Ideen, Marktimpulse und Wachstumschancen aus vielen Stimmen bündeln.', icon: 'zap' },
{ t: 'Prozessdokumentation', d: 'Gelebte Abläufe dokumentieren, nicht nur formale SOPs pflegen.', icon: 'map' },
{ t: 'Stakeholder Pulse Checks', d: 'Wiederkehrende Erhebungen für Veränderung, Stimmung und Umsetzung nutzen.', icon: 'chart' },
{ t: 'KPI & Management Requirements', d: 'Steuerungsbedarfe, Reportinglücken und Entscheidungslogik erfassen.', icon: 'grid' }];


function UcViz({ kind }) {
  if (kind === 'process') {
    return (
      <div className="uc-viz uc-viz--process" aria-hidden="true">
        <div className="uc-viz__hd"><span>Prozess-Map</span><span className="uc-viz__live">live</span></div>
        <div className="vp__flow">
          {['Eingang', 'Prüfung', 'Abgleich', 'Freigabe'].map((n, i) =>
          <React.Fragment key={n}>
              <div className={'vp__node' + (i === 1 ? ' is-friction' : '') + (i === 2 ? ' is-friction' : '')}>
                <span className="vp__dot" />
                <span className="vp__lbl">{n}</span>
                {(i === 1 || i === 2) && <em className="vp__flag">!</em>}
              </div>
              {i < 3 && <span className="vp__conn" />}
            </React.Fragment>
          )}
        </div>
        <div className="vp__chips">
          <span className="vp__chip vp__chip--auto">Auto-Potenzial</span>
          <span className="vp__chip vp__chip--warn">2 Engpässe</span>
        </div>
      </div>);

  }
  if (kind === 'req') {
    const rows = [
    { l: 'Rollen & Rechte', g: 'IT', fit: 'Fit' },
    { l: 'Schnittstellen', g: 'Ops', fit: 'Gap' },
    { l: 'Reporting', g: 'Mgmt', fit: 'Gap' }];

    return (
      <div className="uc-viz uc-viz--req" aria-hidden="true">
        <div className="uc-viz__hd"><span>Requirements</span><span className="uc-viz__live">3 Gruppen</span></div>
        <div className="vr">
          {rows.map((r) =>
          <div key={r.l} className="vr__row">
              <span className="vr__lbl">{r.l}</span>
              <span className="vr__grp">{r.g}</span>
              <span className={'vr__fit' + (r.fit === 'Gap' ? ' is-gap' : '')}>{r.fit}</span>
            </div>
          )}
        </div>
      </div>);

  }
  // transformation
  const bars = [
  { l: 'Verständnis', v: 74 },
  { l: 'Umsetzbarkeit', v: 58 },
  { l: 'Adoption', v: 41 }];

  return (
    <div className="uc-viz uc-viz--trans" aria-hidden="true">
      <div className="uc-viz__hd"><span>Readiness-Signale</span><span className="uc-viz__live">Puls</span></div>
      <div className="vt">
        {bars.map((b) =>
        <div key={b.l} className="vt__row">
            <span className="vt__lbl">{b.l}</span>
            <span className="vt__bar"><span style={{ '--v': b.v + '%' }} /></span>
          </div>
        )}
      </div>
      <div className="vt__barrier"><em>{Ico.warn()}</em> 2 Barrieren erkannt</div>
    </div>);

}

function PulseUseCases() {
  const [ref, shown] = usePulseReveal(0.1);
  return (
    <section className="psec psec--paper pulse-uc" data-screen-label="05 Use Cases">
      <div className="wrap wrap--wide">
        <div className="psec__head">
          <div className="eyebrow eyebrow--pulse">PULSE USE CASES</div>
          <h2 className="psec__h2">Ein System für <span className="acc-cool">viele Fragen.</span></h2>
          <p className="psec__lead">
            PULSE ist besonders stark, wenn viele Perspektiven, implizites Wissen,
            Kontext und Analyse zusammenkommen müssen.
          </p>
        </div>

        <div ref={ref} className={'uc-wrap' + (shown ? ' is-shown' : '')}>
          <div className="uc-feature">
            {UC_PRIMARY.map((u, i) =>
            <article key={u.t} className={'uc-card uc-acc-' + u.acc} style={{ '--i': i }}>
                <div className="uc-card__top">
                  <span className="uc-card__ico">{Ico[u.icon]()}</span>
                  <span className="uc-card__tag">PRIMÄR</span>
                </div>
                <h3 className="uc-card__title">{u.t}</h3>
                <p className="uc-card__sub">{u.sub}</p>
                <UcViz kind={u.viz} />
                <p className="uc-card__desc">{u.d}</p>
                <div className="uc-card__chips">
                  {u.chips.map((c) => <span key={c} className="uc-chip">{c}</span>)}
                </div>
                <a className="uc-card__cta" href="#">Use Case ansehen {Ico.arrow()}</a>
              </article>
            )}
          </div>

          <div className="uc-pat-head">
            <span className="uc-pat-head__lbl">WEITERE ANWENDUNGSMUSTER</span>
            <span className="uc-pat-head__hint">Plattformbreite — acht weitere Anwendungsfelder</span>
          </div>
          <div className="uc-pats">
            {UC_PATTERNS.map((p, i) =>
            <article key={p.t} className="upat" style={{ '--i': i + 3 }} tabIndex="0">
                <span className="upat__ico">{Ico[p.icon]()}</span>
                <h4 className="upat__title">{p.t}</h4>
                <p className="upat__desc">{p.d}</p>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

}