// detail.jsx — rechte Detailspalte: Beschreibung, Deliverables, Service-Pakete

function Detail({ active, accent }) {
  const s = SKILLS[active];
  const [key, setKey] = React.useState(active);
  React.useEffect(() => { setKey(active); }, [active]);

  return (
    <div className="detail" key={key}>
      <div className="detail-index">
        <span className="detail-index-cur">{String(active + 1).padStart(2, '0')}</span>
        <span className="detail-index-sep">/</span>
        <span className="detail-index-tot">{String(N).padStart(2, '0')}</span>
      </div>

      <h2 className="detail-title">
        <SplitText text={s.name} />
      </h2>

      <p className="detail-body">{s.body}</p>

      <div className="detail-list">
        <div className="detail-list-label">Deliverables</div>
        <ul>
          {s.deliverables.map((d, i) => (
            <li key={d} style={{ animationDelay: `${200 + i * 60}ms` }}>
              <span className="deliv-bullet" style={{ background: accent }} />
              {d}
            </li>
          ))}
        </ul>
      </div>

      <div className="detail-packages">
        <div className="detail-list-label">Pakete</div>
        <div className="pkg-grid">
          {s.packages.map((p, i) => (
            <article className="pkg" key={p.name}
                     style={{ animationDelay: `${360 + i * 90}ms` }}>
              <div className="pkg-name">{p.name}</div>
              <div className="pkg-price">
                {p.lead && <span className="pkg-lead">{p.lead}</span>}
                <span>{p.price}</span>
              </div>
              <div className="pkg-meta">{p.meta}</div>
            </article>
          ))}
        </div>
      </div>

      <div className="detail-cta-row">
        <a className="btn btn-primary"
           href={`mailto:kontakt@senso-digital.de?subject=Anfrage%20${encodeURIComponent(s.name)}`}
           style={{ background: accent, color: '#0e0d0a' }}>
          <span>Anfrage senden</span>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 11 11 3M5 3h6v6"
            stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
        </a>
        <button className="btn btn-ghost" onClick={() => {
          const el = document.getElementById('process');
          el && el.scrollIntoView && el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }}>
          <span>Ablauf ansehen</span>
        </button>
      </div>
    </div>
  );
}

// Text-Split für animiertes Eintreten
function SplitText({ text }) {
  const chars = text.split('');
  return (
    <span className="split">
      {chars.map((c, i) => (
        <span key={i} className="split-char" style={{ animationDelay: `${i * 22}ms` }}>
          {c === ' ' ? '\u00A0' : c}
        </span>
      ))}
    </span>
  );
}

Object.assign(window, { Detail, SplitText });