// ============================================================
// SERVICES + STACK + PORTFOLIO
// ============================================================

function Services({ t }) {
  const s = t.services;
  return (
    <section className="section" id="services" data-screen-label="03 Services">
      <div className="page">
        <SectionHead num={s.num} label={s.label} title={s.title} kicker={s.kicker} />
        <div className="services-grid">
          {s.items.map((it, i) => {
            const Icon = Icons[it.icon] || Icons.page;
            return (
              <article className="service" key={i}>
                <div className="icon"><Icon /></div>
                <div>
                  <h3>{it.title}</h3>
                  <p>{it.desc}</p>
                  <ul>
                    {it.bullets.map((b, j) => <li key={j}>{b}</li>)}
                  </ul>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Stack({ t }) {
  const s = t.stack;
  return (
    <section className="section" id="stack" data-screen-label="04 Stack">
      <div className="page">
        <SectionHead num={s.num} label={s.label} title={s.title} kicker={s.kicker} />
        <div className="stack-grid">
          {s.groups.map((g, i) => (
            <div className="stack-group" key={i}>
              <div className="head">
                <h3>{g.name}</h3>
                <span className="idx">— {g.idx}</span>
              </div>
              <div className="items">
                {g.items.map((it, j) => (
                  <div className="stack-item" key={j}>
                    <span className="name">{it.name}</span>
                    <span className="use">{it.use}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// SVG visual blocks for portfolio - hand-crafted, no external imagery
function PortfolioVisual({ type }) {
  if (type === 'system') {
    return (
      <svg viewBox="0 0 320 110" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
        {/* Window chrome */}
        <rect x="8" y="8" width="304" height="94" fill="none" stroke="rgba(217,190,148,0.25)" />
        <line x1="8" y1="22" x2="312" y2="22" stroke="rgba(217,190,148,0.15)" />
        <circle cx="16" cy="15" r="2" fill="#d9be94" opacity="0.6" />
        <circle cx="24" cy="15" r="2" fill="#d9be94" opacity="0.35" />
        <circle cx="32" cy="15" r="2" fill="#d9be94" opacity="0.2" />
        {/* Sidebar */}
        <rect x="8" y="22" width="56" height="80" fill="rgba(217,190,148,0.04)" />
        <line x1="8" y1="22" x2="64" y2="22" stroke="rgba(217,190,148,0.15)" />
        {[35, 50, 65, 80, 95].map((y, i) => (
          <line key={i} x1="16" y1={y} x2={i === 0 ? 56 : 48} y2={y}
            stroke={i === 0 ? '#d9be94' : 'rgba(217,190,148,0.3)'} strokeWidth="1" />
        ))}
        {/* Table rows */}
        {[36, 50, 64, 78, 92].map((y, i) => (
          <g key={i}>
            <line x1="76" y1={y} x2="304" y2={y} stroke="rgba(217,190,148,0.08)" />
            <line x1="76" y1={y - 6} x2="160" y2={y - 6} stroke="rgba(217,190,148,0.5)" strokeWidth="1" opacity={i === 0 ? 1 : 0.5} />
            <line x1="180" y1={y - 6} x2="220" y2={y - 6} stroke="rgba(217,190,148,0.3)" />
            <line x1="240" y1={y - 6} x2="280" y2={y - 6} stroke="rgba(217,190,148,0.3)" />
          </g>
        ))}
      </svg>
    );
  }
  if (type === 'brand') {
    return (
      <svg viewBox="0 0 320 110" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
        {/* Centered emblem suggesting brand identity */}
        <g transform="translate(160 55)">
          {/* Trident-ish + beard motif minimal */}
          <line x1="-50" y1="0" x2="-15" y2="0" stroke="rgba(217,190,148,0.4)" />
          <line x1="15" y1="0" x2="50" y2="0" stroke="rgba(217,190,148,0.4)" />
          <circle r="22" fill="none" stroke="#d9be94" strokeWidth="1" />
          <path d="M 0 -16 L 0 -8 M -6 -12 L -6 -6 M 6 -12 L 6 -6" stroke="#d9be94" strokeWidth="1.2" fill="none"/>
          <path d="M -8 -2 Q 0 12 8 -2" fill="none" stroke="#d9be94" strokeWidth="1" />
          <text y="40" textAnchor="middle" fontFamily="Cinzel" fontSize="9" fill="#d9be94" letterSpacing="2">TRATO</text>
        </g>
        {/* Greek-key flanks */}
        <g fill="none" stroke="rgba(217,190,148,0.35)" strokeWidth="1">
          <path d="M 20 50 h 8 v -6 h -6 v 12 h 14 v -12 h -6 v 6 h 8" />
          <path d="M 304 50 h -8 v -6 h 6 v 12 h -14 v -12 h 6 v 6 h -8" />
        </g>
      </svg>
    );
  }
  // leads / chart
  return (
    <svg viewBox="0 0 320 110" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      {/* Grid */}
      {[20, 40, 60, 80, 100].map((y, i) => (
        <line key={i} x1="20" y1={y} x2="300" y2={y} stroke="rgba(217,190,148,0.06)" />
      ))}
      {/* Y axis labels */}
      <line x1="20" y1="10" x2="20" y2="100" stroke="rgba(217,190,148,0.2)" />
      <line x1="20" y1="100" x2="300" y2="100" stroke="rgba(217,190,148,0.2)" />
      {/* Bars rising - leads over weeks */}
      {[
        [40, 80, 88], [70, 70, 88], [100, 60, 88], [130, 52, 88], [160, 42, 88],
        [190, 36, 88], [220, 28, 88], [250, 22, 88], [280, 18, 88],
      ].map(([x, y, b], i) => (
        <rect key={i} x={x - 8} y={y} width="14" height={b - y}
          fill={i > 5 ? '#d9be94' : 'rgba(217,190,148,0.35)'} />
      ))}
      {/* Arrow up */}
      <path d="M 250 30 L 285 14 M 285 14 L 275 14 M 285 14 L 285 24"
        stroke="#d9be94" strokeWidth="1.2" fill="none" strokeLinecap="round" />
    </svg>
  );
}

function Portfolio({ t }) {
  const w = t.work;
  return (
    <section className="section" id="work" data-screen-label="05 Work">
      <div className="page">
        <SectionHead num={w.num} label={w.label} title={w.title} kicker={w.kicker} />
        <div className="portfolio-grid">
          {w.items.map((it, i) => (
            <article className="portfolio-item" key={i}>
              <span className="num">— {it.n} / {String(w.items.length).padStart(2, '0')}</span>
              <div className="cat">{it.cat}</div>
              <h3>{it.title}</h3>
              <p className="desc">{it.desc}</p>
              <div className="portfolio-visual">
                <PortfolioVisual type={it.chartType} />
              </div>
              <div className="visual" style={{ marginTop: 0, paddingTop: 0, borderTop: 'none' }}>
                <div className="stack-line">{it.stack}</div>
                <p className="result">{it.result}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Stack, Portfolio, PortfolioVisual });