// About section
const About = () => {
  const [ref, visible] = window.useReveal();
  const data = window.PORTFOLIO_DATA;

  const renderText = (html) => {
    // Simple replacement: <hl>...</hl> → highlighted span, <code>...</code> → code
    const parts = [];
    let remaining = html;
    let key = 0;
    while (remaining.length) {
      const hlMatch = remaining.match(/<hl>(.+?)<\/hl>/);
      const codeMatch = remaining.match(/<code>(.+?)<\/code>/);
      const next = [hlMatch, codeMatch].filter(Boolean).sort((a, b) => a.index - b.index)[0];
      if (!next) {
        parts.push(<span key={key++}>{remaining}</span>);
        break;
      }
      if (next.index > 0) {
        parts.push(<span key={key++}>{remaining.slice(0, next.index)}</span>);
      }
      if (next === hlMatch) {
        parts.push(<span key={key++} className="hl">{next[1]}</span>);
      } else {
        parts.push(<code key={key++}>{next[1]}</code>);
      }
      remaining = remaining.slice(next.index + next[0].length);
    }
    return parts;
  };

  return (
    <section id="about" ref={ref} className={`reveal ${visible ? "visible" : ""}`}>
      <div className="container">
        <h2 className="section-title">
          The short version<span style={{ color: "var(--amber)" }}>.</span>
        </h2>
        <div className="about-grid">
          <div className="about-text">
            {data.about.map((p, i) => (
              <p key={i}>{renderText(p.content)}</p>
            ))}
          </div>
          <div className="about-stats">
            {data.stats.map((s, i) => (
              <div key={i} className="stat-card">
                <div className="stat-value">{s.value}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.About = About;