// Portfolio — real client screenshots from shebytes.me
// Sits after the storefront mocks. Uses live images from the production site.

const PORTFOLIO_ITEMS = [
{
  num: "01",
  name: "Eglence",
  category: "ecommerce",
  href: "https://eglence.com.br/",
  img: "https://shebytes.me/eglence-website.jpeg",
  blurb:
  "Loja de presentes criativos com ilustrações autorais e conceito antitrabalho. Design único focado em conversão mobile-first.",
  features: [
  "Design ilustrado e personalizado",
  "100% responsivo e otimizado",
  "Integração com gateway de pagamento"]

},
{
  num: "02",
  name: "Technical Solutions",
  category: "corporate",
  href: "https://technicalsolutions.com.br/site/",
  img: "https://shebytes.me/site-tech-solutions.jpeg",
  blurb:
  "Site institucional para consultoria em QHSE (Segurança, Saúde e Meio Ambiente) para o setor de Óleo & Gás.",
  features: [
  "Linguagem técnica e autoridade de marca",
  "Estrutura multilíngue preparada",
  "Área de treinamento online integrada"]

},
{
  num: "03",
  name: "Nigra Koro Distro",
  category: "corporate",
  href: "https://nigrakorodistro.com/",
  img: "https://shebytes.me/nigrakoro-website.jpeg",
  badge: "mais popular",
  blurb:
  "Livraria independente com literatura anarquista e contra-cultura. Sistema de clube de assinatura \u201cCaixa Bomba\u201d.",
  features: [
  "Fluxo de assinatura recorrente",
  "Sistema de benefícios e mimos",
  "Identidade visual subversiva e coerente"]

},
{
  num: "04",
  name: "Pri Cardoso Art",
  category: "portfolio",
  href: "https://pricardosoart.com.br/",
  img: "https://placehold.co/1200x800/f0fdf8/082620?text=PriCardosoArt.com.br",
  blurb:
  "Portfólio minimalista para artista aquarelista. Galeria visual imersiva com fusão entre arte e natureza.",
  features: [
  "Galeria em grid responsivo com lightbox",
  "Tipografia elegante e espaçamento generoso",
  "Experiência mobile otimizada para imagens"]

}];


const ExternalIcon = () =>
<svg className="pf-ext" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
    <polyline points="15 3 21 3 21 9" />
    <line x1="10" y1="14" x2="21" y2="3" />
  </svg>;

const Chevron = () =>
<svg className="pf-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="9 18 15 12 9 6" />
  </svg>;

const Portfolio = () =>
<section className="section portfolio" id="portfolio">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">PROJETOS ENTREGUES RECENTEMENTE</div>
          <h2>Sites que <span className="italic">transformam</span> negócios.</h2>
        </div>
        <p className="lede">
          Cada projeto desenvolvido com tecnologia de ponta e
          design estratégico para gerar resultados concretos.
        </p>
      </div>

      <div className="pf-grid">
        {PORTFOLIO_ITEMS.map((item) =>
      <article key={item.num} className={"pf-card" + (item.badge ? " pf-featured" : "")} data-category={item.category}>
            {item.badge &&
        <span className="pf-badge">
                <span className="dot" />{item.badge}
              </span>
        }

            <div className="pf-card-head">
              <span className="pf-num mono">{item.num}</span>
              <h3 className="pf-title">{item.name}</h3>
            </div>

            <a className="pf-image" href={item.href} target="_blank" rel="noopener noreferrer" aria-label={"Visitar " + item.name}>
              <img src={item.img} alt={item.name} loading="lazy" />
              <span className="pf-image-overlay">
                <ExternalIcon />
              </span>
            </a>

            <p className="pf-desc">{item.blurb}</p>

            <ul className="pf-features">
              {item.features.map((f, i) =>
          <li key={i}>
                  <span className="pf-tick" aria-hidden="true">✱</span>
                  {f}
                </li>
          )}
            </ul>

            <a className={"btn pf-cta " + (item.badge ? "btn-primary" : "btn-ghost")} href={item.href} target="_blank" rel="noopener noreferrer">
              Visitar site
              <Chevron />
            </a>
          </article>
      )}
      </div>

      <div className="pf-foot">
        <p>
          Cada projeto é único.{" "}
          <strong>Vamos criar juntos</strong> o melhor site para sua empresa?
        </p>
        <a className="btn btn-primary" href="#planos">
          Iniciar projeto
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M5 12h14M13 5l7 7-7 7" />
          </svg>
        </a>
      </div>
    </div>
  </section>;

window.Portfolio = Portfolio;