/* orvio — página de portfólio */

function PortfolioHero() {
  return (
    <header className="hero folio-hero" id="top">
      <div className="bg-field">
        <div className="blob petrol" style={{ width: 640, height: 640, top: "-20%", left: "-10%" }} />
        <div className="blob coral" style={{ width: 420, height: 420, top: "10%", right: "-8%", opacity: "calc(var(--glow) * 0.55)" }} />
      </div>
      <div className="wrap">
        <Reveal className="eyebrow" d="1">Portfólio</Reveal>
        <Reveal as="h1" d="2">Projetos que já<br />ganharam vida na internet.</Reveal>
        <Reveal as="p" className="folio-hero-sub" d="3">
          Rápido, claro e sem enrolação — o mesmo cuidado que colocamos nos
          nossos próprios produtos, aplicado ao site de quem confia na gente.
        </Reveal>
      </div>
    </header>
  );
}

function FolioCTACard() {
  return (
    <a className="folio-card folio-cta" href="/contato">
      <div className="folio-cta-body">
        <h3>Seu site pode ser o próximo.</h3>
        <p>Conte o que você precisa — a gente responde rápido.</p>
        <span className="folio-link">
          Fale com a gente
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8" /></svg>
        </span>
      </div>
    </a>
  );
}

function PortfolioGrid() {
  return (
    <section className="band folio-section">
      <div className="wrap">
        <div className="folio-grid">
          {PROJECTS.map((p) => <ProjectCard key={p.id} project={p} />)}
          <FolioCTACard />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PortfolioHero, PortfolioGrid, FolioCTACard });