function Process() {
  return (
    <section className="process" id="process" data-screen-label="Process">
      <div className="process-head">
        <div className="section-tag">./process</div>
        <h2>nosso <em style={{fontStyle:"italic",color:"var(--accent)"}}>método</em> — 5 passos.</h2>
        <p>
          Todo projeto passa por 5 fases. Nenhuma pula. Nenhuma é opcional. A duração
          muda; a sequência, não. Se você quer pular o prelúdio, provavelmente a gente não é pra você.
        </p>
      </div>
      <div className="process-steps">
        {window.DATA.process.map((s, i, arr) => (
          <div className="step" key={s.n}>
            <div className="step-num">{s.n}</div>
            <div className="step-title">{s.t}</div>
            <div className="step-desc">{s.d}</div>
            {i < arr.length - 1 && <div className="step-arr">→</div>}
            <div className="step-dur">{s.dur}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Clients() {
  return (
    <section className="clients" data-screen-label="Clients">
      <div className="clients-head">
        <h3>quem já confiou o bug pra gente.</h3>
        <span>// 2012 – presente</span>
      </div>
      <div className="clients-grid">
        {window.DATA.clients.map((c) => (
          <div className="client-cell" key={c}>{c}</div>
        ))}
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="testimonials" data-screen-label="Testimonials">
      <div className="testimonials-head">
        <div className="section-tag">./testimonials</div>
        <h2>diz quem<br/>contratou.</h2>
      </div>
      <div className="testimonials-grid">
        {window.DATA.testimonials.map((t, i) => (
          <div className="quote" key={i}>
            <p className="quote-text">{t.quote}</p>
            <div className="quote-author">
              <div className="ava">{t.initials}</div>
              <div className="meta">
                <strong>{t.author}</strong>
                <span>{t.role}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Notes() {
  return (
    <section className="notes" id="notes" data-screen-label="Notes">
      <div className="notes-head">
        <h2><em style={{fontStyle:"italic",color:"var(--accent)"}}>/notes</em></h2>
        <a href="#">rss · archive →</a>
      </div>
      <div className="notes-list">
        {window.DATA.notes.map((n, i) => (
          <div className="note" key={i}>
            <div className="date">{n.date}</div>
            <div className="ttl">{n.title}</div>
            <div className="tag">{n.tag}</div>
            <div className="rt">{n.rt}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Careers() {
  return (
    <section className="careers" id="careers" data-screen-label="Careers">
      <div className="careers-inner">
        <div className="careers-left">
          <div className="section-tag">./careers</div>
          <h2>vem <em>quebrar</em> coisas<br/>com a gente.</h2>
          <p>
            Contratamos devagar. Ouvimos antes. Pagamos bem. Damos crédito. Damos feedback
            honesto. Trabalho remoto-first, com encontros presenciais trimestrais em SP.
            Não buscamos "ninjas". Buscamos gente que lê o código do outro com carinho.
          </p>
          <div className="pills">
            <span>remote-first</span>
            <span>4 dias/semana</span>
            <span>equity real</span>
            <span>budget de livros</span>
            <span>off-site trimestral</span>
            <span>planta opcional</span>
          </div>
        </div>
        <div className="roles-list">
          {window.DATA.roles.map((r, i) => (
            <div className="role" key={i}>
              <div className="ttl">{r.t}</div>
              <div className="meta">
                <span>{r.where}</span>
                <span>{r.type}</span>
              </div>
              <div className="arr">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="contact" id="contact" data-screen-label="Contact">
      <div className="contact-inner">
        <div>
          <h2>vamos<br/><em>debugar</em> seu<br/>problema<span className="cur"></span></h2>
        </div>
        <aside className="contact-aside">
          <div className="row"><span>// email</span><a href="mailto:contato@studiodebug.dev"><strong>contato@studiodebug.dev</strong></a></div>
          <div className="row"><span>// tel</span><strong>+55 11 9####-####</strong></div>
          <div className="row"><span>// endereço</span><strong>Rua dos Bugs, 404 — SP</strong></div>
          <div className="row"><span>// social</span><strong>@studiodebug / github.com/studio-debug</strong></div>
          <div className="row"><span>// horário</span><strong>seg–qui · 10h–18h (BRT)</strong></div>

          <div className="contact-cta">
            <a href="mailto:contato@studiodebug.dev">✉ mandar brief <span>→</span></a>
            <a href="#">☏ agendar call <span>→</span></a>
          </div>
        </aside>
      </div>
    </section>
  );
}

function Footer() {
  const banner = `
     _             _ _          _      _                 
  __| |_ _  _  __| (_) ___   __| | ___| |__  _   _  __ _ 
 / _\` | __| || |/ _\` | |/ _ \\ / _\` |/ _ \\ '_ \\| | | |/ _\` |
 \\__,_|\\__|\\_,_|\\__,_|_|\\___/ \\__,_|\\___|_.__/ \\__,_|\\__, |
                                                    |___/ 
`;
  return (
    <footer className="footer" data-screen-label="Footer">
      <pre className="ascii-banner">{banner}</pre>
      <div className="footer-top">
        <div className="footer-brand">
          studio<span>.</span>debug<span style={{color:"var(--accent)"}}>_</span>
          <p style={{fontFamily:"var(--font-mono)",fontSize:12,color:"var(--fg-dim)",marginTop:16,maxWidth:"36ch",lineHeight:1.6}}>
            Um laboratório pequeno, barulhento e produtivo. Construindo produtos desde 2012, com intenção desde sempre.
          </p>
        </div>
        <div className="footer-col">
          <h5>// estúdio</h5>
          <ul><li><a href="#services">services</a></li><li><a href="#work">work</a></li><li><a href="#team">team</a></li><li><a href="#process">process</a></li></ul>
        </div>
        <div className="footer-col">
          <h5>// mais</h5>
          <ul><li><a href="#notes">notes</a></li><li><a href="#careers">careers</a></li><li><a href="#">press kit</a></li><li><a href="#">rss</a></li></ul>
        </div>
        <div className="footer-col">
          <h5>// social</h5>
          <ul><li><a href="#">github</a></li><li><a href="#">twitter</a></li><li><a href="#">linkedin</a></li><li><a href="#">bluesky</a></li></ul>
        </div>
        <div className="footer-col">
          <h5>// contato</h5>
          <ul><li><a href="mailto:contato@studiodebug.dev">contato@studiodebug.dev</a></li><li><a href="mailto:jobs@studio.debug">jobs@studio.debug</a></li><li><a href="mailto:press@studio.debug">press@studio.debug</a></li></ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 studio.debug — nenhum cookie foi assado neste site.</span>
        <span>made with <span style={{color:"var(--accent-2)"}}>♥</span> e <span style={{color:"var(--accent)"}}>$()</span> pelo mundo</span>
        <span>build <span style={{color:"var(--accent)"}}>a1f3b0c</span> · {new Date().toISOString().slice(0,10)}</span>
      </div>
    </footer>
  );
}

window.Process = Process;
window.Clients = Clients;
window.Testimonials = Testimonials;
window.Notes = Notes;
window.Careers = Careers;
window.Contact = Contact;
window.Footer = Footer;