const { useState: useStateS, useRef: useRefS, useEffect: useEffectS } = React;

function Services() {
  return (
    <section className="services" id="services" data-screen-label="Services">
      <div className="services-head">
        <div>
          <div className="section-tag">./services</div>
          <h2>o que a <em style={{fontStyle:"italic",color:"var(--accent)"}}>debug</em><br/>constrói por aí.</h2>
        </div>
        <p>
          Não somos uma agência. Não somos uma consultoria tradicional. Somos um estúdio
          pequeno de pessoas que gostam demais do ofício. Trabalhamos em ciclos curtos,
          deixamos tudo documentado, e saímos deixando seu time mais forte do que estava.
        </p>
      </div>

      <div className="services-grid">
        {window.DATA.services.map((s) => (
          <div className="service" key={s.num}>
            <div className="service-art">{s.art}</div>
            <div className="service-num">// {s.num}</div>
            <div className="service-title">{s.title}</div>
            <div className="service-desc">{s.desc}</div>
            <div className="service-tags">
              {s.tags.map(t => <span key={t}>{t}</span>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Work() {
  const [filter, setFilter] = useStateS("all");
  const [preview, setPreview] = useStateS(null);
  const [pos, setPos] = useStateS({x:0,y:0});
  const filters = ["all", "2025", "2024", "2023"];
  const rows = window.DATA.projects.filter(p => filter === "all" || p.year === filter);

  const move = (e) => setPos({x: e.clientX, y: e.clientY});

  return (
    <section className="work" id="work" data-screen-label="Work" onMouseMove={move}>
      <div className="work-head">
        <div>
          <div className="section-tag">./work</div>
          <h2>últimos <em style={{fontStyle:"italic",color:"var(--accent)"}}>commits</em>.</h2>
        </div>
        <div className="work-filters">
          {filters.map(f => (
            <button key={f} onClick={() => setFilter(f)} className={filter === f ? "on" : ""}>
              {f === "all" ? "todos" : f}
            </button>
          ))}
        </div>
      </div>

      <div className="work-list">
        {rows.map((p) => (
          <div
            className="work-row"
            key={p.num}
            onMouseEnter={() => setPreview(p)}
            onMouseLeave={() => setPreview(null)}
          >
            <div className="num">{p.num}</div>
            <div className="title">{p.title}</div>
            <div className="client">{p.client}</div>
            <div className="year">{p.year}</div>
            <div className="tags">{p.tags}</div>
            <div className="arrow">→</div>
          </div>
        ))}
      </div>

      <div
        className={"work-preview " + (preview ? "on" : "")}
        style={{left: pos.x, top: pos.y}}
      >
        {preview && (
          <div
            className="work-preview-inner"
            style={{
              background: `linear-gradient(135deg, ${preview.color} 0%, #000 100%)`
            }}
          >
            {preview.title}
          </div>
        )}
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="manifesto" data-screen-label="Manifesto">
      <div className="manifesto-inner">
        <h2>
          <em>código</em> é hipótese.<br/>
          <span className="strike">deadline</span> produto é experimento.<br/>
          <em>bug</em> é uma verdade<br/>
          que ninguém quis ouvir.
        </h2>
        <div className="manifesto-foot">
          <div>
            <span>// princípio 01</span>
            <p>Escrevemos software como se fosse ser lido amanhã por alguém com ressaca. Clareza é respeito.</p>
          </div>
          <div>
            <span>// princípio 02</span>
            <p>Hipótese antes de feature. Se não dá pra testar, não dá pra entregar. Se não dá pra medir, não existiu.</p>
          </div>
          <div>
            <span>// princípio 03</span>
            <p>Post-mortem é rotina, não castigo. Também fazemos quando dá certo — especialmente quando dá certo.</p>
          </div>
          <div>
            <span>// princípio 04</span>
            <p>A gente ri. Muito. Humor é um indicador de saúde do time tão bom quanto p95 de latência.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Team() {
  return (
    <section className="team" id="team" data-screen-label="Team">
      <div className="team-head">
        <div>
          <div className="section-tag">./team</div>
          <h2>oito humanos,<br/>uma planta esquecida.</h2>
        </div>
        <p>
          O estúdio é pequeno de propósito. Cada projeto é conduzido por 2–4 pessoas,
          com responsabilidade real. Ninguém aqui é recurso; todo mundo é autor.
        </p>
      </div>
      <div className="team-grid">
        {window.DATA.team.map((m, i) => (
          <div className="member" key={m.name}>
            <div className="member-avatar">
              <div className="badge">// {String(i+1).padStart(2,"0")}</div>
              <pre className="ascii">{m.ascii}</pre>
            </div>
            <div className="member-name">{m.name}</div>
            <div className="member-role">{m.role}</div>
            <div className="member-bio">{m.bio}</div>
            <div className="member-stats">
              {m.stats.map(([k,v]) => (
                <span key={k}><strong>{v}</strong>{k}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Services = Services;
window.Work = Work;
window.Manifesto = Manifesto;
window.Team = Team;