const CasePlaceholder = ({ hue = 195, label = "Case" }) => (
  <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice">
    <defs>
      <linearGradient id={`cg-${hue}`} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor={`oklch(0.35 0.08 ${hue})`}/>
        <stop offset="1" stopColor={`oklch(0.25 0.06 ${hue+20})`}/>
      </linearGradient>
      <pattern id={`ps-${hue}`} width="8" height="8" patternUnits="userSpaceOnUse">
        <path d="M0 8 L8 0" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
      </pattern>
    </defs>
    <rect width="400" height="250" fill={`url(#cg-${hue})`}/>
    <rect width="400" height="250" fill={`url(#ps-${hue})`}/>
    <text x="20" y="30" fill="rgba(255,255,255,0.35)" fontFamily="monospace" fontSize="11" letterSpacing="1">// {label}</text>
    <g transform="translate(200 125)" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5">
      <circle r="40"/>
      <circle r="28" stroke="rgba(74,204,192,0.5)"/>
    </g>
  </svg>
);

const Cases = () => {
  const items = [
    { tag: "SAAS · Próprio", title: "BBOX Connect", desc: "Atendimento inteligente via WhatsApp. Bot + humano no mesmo painel.", meta: ["2026 → Live", "SaaS / WhatsApp API"], hue: 195, url: "https://bboxconnect.com.br" },
    // { tag: "ERP interno", title: "Órion Logística", desc: "ERP sob medida para transportadora regional. Roteirização, CTe, financeiro.", meta: ["2025", "React · Node · Postgres"], hue: 220 },
    // { tag: "E-commerce", title: "Casa Norte Home", desc: "Flagship store de decoração com checkout custom e integração com marketplace.", meta: ["2025", "Next.js · Shopify"], hue: 170 },
    { tag: "Branding + site", title: "Link Loyalty", desc: "Identidade completa e site institucional para Link Loyalty.", meta: ["2026", "Brand · Web"], hue: 240, url: "https://linkloyalty.com.br" },
  ];
  return (
    <section className="section" id="cases">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Portfólio · 04</div>
            <h2 style={{marginTop:20}}>Coisas que<br/><em className="grad-text" style={{fontWeight:400}}>fizemos acontecer.</em></h2>
          </div>
          <div className="body">Uma amostra recente. Cada projeto carrega um pedaço diferente do studio: produto, identidade, marketing, operação. Clique pra ver o case completo.</div>
        </div>
        <div className="cases">
          {items.map((c,i)=>{
            const Wrap = c.url ? 'a' : 'div';
            const wrapProps = c.url ? { href: c.url, target: "_blank", rel: "noopener noreferrer" } : {};
            return (
              <Wrap className="case" key={i} {...wrapProps} style={c.url ? {textDecoration:'none',color:'inherit'} : {}}>
                <div className="case-img"><CasePlaceholder hue={c.hue} label={c.title}/></div>
                <div className="case-body">
                  <span className="tag">◦ {c.tag}</span>
                  <h3>{c.title}</h3>
                  <p>{c.desc}</p>
                  <div className="meta">
                    {c.meta.map((m,j)=><span key={j}>{m}</span>)}
                    <span style={{marginLeft:'auto',color:'var(--teal)'}}>{c.url ? 'Visitar site →' : 'Ver case →'}</span>
                  </div>
                </div>
              </Wrap>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.Cases = Cases;