// Saola Labs Landing — Sections part 2 (Portfolio, Filters, HowWeWork, Process, Testimonials)
const D2 = window.SAOLA_DATA;
const { useState: useState2 } = React;
const CoverArt = window.CoverArt;

function _CoverArt_inline_disabled({ id, glyph }) {
  // Each cover gets a deterministic abstract motif
  const variants = {
    begood: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="grid-bg" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#E6EAF0" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="600" height="300" fill="#F8F9FC"/>
        <rect width="600" height="300" fill="url(#grid-bg)"/>
        {Array.from({length: 24}).map((_, i) => (
          <circle key={i} cx={60 + (i % 8) * 70} cy={80 + Math.floor(i / 8) * 70} r={2 + (i % 4)} fill={i === 11 ? "#3279F9" : "#121317"} opacity={i === 11 ? 1 : 0.5}/>
        ))}
        <line x1="60" y1="80" x2="480" y2="220" stroke="#3279F9" strokeWidth="1" strokeDasharray="4 4"/>
      </svg>
    ),
    singularity: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#121317"/>
        {Array.from({length: 6}).map((_, i) => (
          <circle key={i} cx="300" cy="150" r={30 + i * 22} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
        ))}
        <circle cx="300" cy="150" r="14" fill="#3279F9"/>
        <text x="50" y="40" fill="rgba(255,255,255,0.6)" fontFamily="ui-monospace, monospace" fontSize="11">zk · institutional · privacy</text>
      </svg>
    ),
    gohub: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#EFF2F7"/>
        <path d="M0,180 Q150,80 300,180 T600,180" fill="none" stroke="#121317" strokeWidth="1.5"/>
        <path d="M0,200 Q150,100 300,200 T600,200" fill="none" stroke="#3279F9" strokeWidth="1.5"/>
        {[80, 180, 280, 380, 480].map((x, i) => (
          <g key={i}><circle cx={x} cy={i % 2 ? 170 : 130} r="4" fill="#121317"/><text x={x+8} y={i % 2 ? 174 : 134} fontFamily="ui-monospace, monospace" fontSize="10" fill="#45474D">{["SG","JP","US","DE","AU"][i]}</text></g>
        ))}
      </svg>
    ),
    flow: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#F8F9FC"/>
        {Array.from({length: 5}).map((_, i) => (
          <rect key={i} x={60 + i*100} y={80} width="60" height="140" fill="none" stroke="#121317" strokeWidth="1"/>
        ))}
        <line x1="60" y1="80" x2="520" y2="80" stroke="#3279F9" strokeWidth="2"/>
        {[0,1,2,3,4].map(i => <circle key={i} cx={90+i*100} cy={80} r="4" fill="#3279F9"/>)}
        <text x="60" y="260" fontFamily="ui-monospace, monospace" fontSize="11" fill="#45474D">N-OF-M APPROVAL · MULTI-CHAIN</text>
      </svg>
    ),
    esri: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#EFF2F7"/>
        <path d="M50,200 Q150,140 220,180 T380,160 T560,140" stroke="#3279F9" strokeWidth="1.5" fill="none"/>
        <path d="M50,220 Q150,170 220,210 T380,190 T560,170" stroke="#121317" strokeWidth="1" fill="none" opacity="0.5"/>
        {Array.from({length: 40}).map((_, i) => (
          <rect key={i} x={(i%10)*60} y={Math.floor(i/10)*30+40} width="4" height="4" fill="#45474D" opacity={Math.random() * 0.4 + 0.1}/>
        ))}
      </svg>
    ),
    bidup: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#121317"/>
        <rect x="60" y="60" width="200" height="180" rx="8" fill="#212226" stroke="rgba(255,255,255,0.1)"/>
        <circle cx="160" cy="120" r="3" fill="#FF0000"/><text x="172" y="124" fill="#fff" fontFamily="ui-monospace, monospace" fontSize="10">LIVE</text>
        <rect x="290" y="80" width="240" height="40" rx="6" fill="#3279F9"/>
        <text x="306" y="106" fill="#fff" fontFamily="ui-monospace, monospace" fontSize="13">BID  $1,247</text>
        <rect x="290" y="130" width="240" height="24" rx="4" fill="rgba(255,255,255,0.06)"/>
        <rect x="290" y="162" width="180" height="24" rx="4" fill="rgba(255,255,255,0.06)"/>
        <rect x="290" y="194" width="220" height="24" rx="4" fill="rgba(255,255,255,0.06)"/>
      </svg>
    ),
    tayo: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#F8F9FC"/>
        <g transform="translate(60, 60)">
          <rect width="180" height="180" fill="none" stroke="#121317" strokeWidth="1"/>
          {Array.from({length: 36}).map((_, i) => (
            <rect key={i} x={(i%6)*30} y={Math.floor(i/6)*30} width="30" height="30" fill={i < 14 ? "#3279F9" : "transparent"} opacity={i < 14 ? 0.18 + (i/36)*0.6 : 1} stroke="#E1E6EC" strokeWidth="0.5"/>
          ))}
        </g>
        <text x="280" y="100" fontFamily="ui-monospace, monospace" fontSize="11" fill="#45474D">FRACTIONS OWNED</text>
        <text x="280" y="130" fontFamily="ui-monospace, monospace" fontSize="36" fill="#121317" fontWeight="500">38.9%</text>
        <text x="280" y="170" fontFamily="ui-monospace, monospace" fontSize="11" fill="#45474D">ERC-1155 · BSC</text>
      </svg>
    ),
    node: (
      <svg width="100%" height="100%" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
        <rect width="600" height="300" fill="#EFF2F7"/>
        {[[120,80],[200,150],[300,90],[400,140],[480,80],[150,220],[260,240],[380,220],[470,200]].map(([x,y], i) => (
          <g key={i}>
            {[[120,80],[200,150],[300,90],[400,140],[480,80],[150,220],[260,240],[380,220],[470,200]].map(([x2,y2], j) => j > i && Math.hypot(x2-x, y2-y) < 130 ? <line key={j} x1={x} y1={y} x2={x2} y2={y2} stroke="#3279F9" strokeWidth="0.5" opacity="0.4"/> : null)}
            <circle cx={x} cy={y} r={i===4 ? 8 : 5} fill={i===4 ? "#3279F9" : "#121317"}/>
          </g>
        ))}
      </svg>
    ),
  };
  return variants[id] || null;
}

function Portfolio() {
  return (
    <section className="section" id="portfolio">
      <div className="container">
        <div className="sec-head sec-head__row">
          <div className="sec-head">
            <span className="eyebrow"><span className="dot"></span>Selected Work</span>
            <h2 className="h2">Production software, shipped.</h2>
            <p className="lede">Eight projects across AI, DeFi, healthcare, commerce, and enterprise — each running in the real world with real users.</p>
          </div>
          <a className="btn btn--secondary" href="projects.html">View all 65+ projects <span className="arrow">→</span></a>
        </div>

        <div className="portfolio__grid">
          {D2.projects.map(p => (
            <article key={p.id} className={`proj ${p.wide ? "proj--wide" : ""}`}>
              <div className="proj__cover">
                <div className="proj__cover-pattern"><CoverArt id={p.id} glyph={p.glyph}/></div>
                <div className="proj__cover-label">{p.cat}</div>
              </div>
              <div className="proj__body">
                <div className="proj__tags">
                  {p.tags.map(t => <span key={t} className="proj__tag">{t}</span>)}
                </div>
                <h3 className="proj__name">{p.name}</h3>
                <p className="proj__summary">{p.summary}</p>
                <ul className="proj__highlights">
                  {p.highlights.map(h => <li key={h}>{h}</li>)}
                </ul>
                <div className="proj__foot">
                  <span>{p.stack}</span>
                  <a href={`#case/${p.id}`}>Case study <span>→</span></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Filters() {
  const [active, setActive] = useState2("All");
  return (
    <section className="section section--tight">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>Industries & Capabilities</span>
          <h2 className="h2">We've shipped across most things you'd want to build.</h2>
        </div>
        <div className="chips">
          {D2.filters.map(f => (
            <button key={f} className={`chip ${active === f ? "is-active" : ""}`} onClick={() => setActive(f)}>
              {f}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowWeWork() {
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>Engagement Models</span>
          <h2 className="h2">Three ways to work together.</h2>
          <p className="lede">We adapt the engagement to where you are. Most teams start with one model and graduate to another as the product matures.</p>
        </div>
        <div className="models">
          {D2.models.map(m => (
            <div className="model" key={m.n}>
              <div className="model__num">{m.n}</div>
              <div className="model__name">{m.name}</div>
              <p className="model__copy">{m.copy}</p>
              <div className="model__when">
                <div className="model__when-lbl">Best for</div>
                <ul>{m.when.map(w => <li key={w}>{w}</li>)}</ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section section--tight" id="process">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>Delivery Process</span>
          <h2 className="h2">From conversation to launch in nine steps.</h2>
        </div>
        <div className="process">
          <div className="process__steps">
            {D2.process.map(s => (
              <div key={s.n} className={`process__step ${s.key ? "is-key" : ""}`}>
                <div className="n">{s.n}</div>
                <div className="name">{s.name}</div>
                <div className="desc">{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>What partners say</span>
          <h2 className="h2">Trusted by founders, CTOs, and protocol teams.</h2>
        </div>
        <div className="tess">
          {D2.testimonials.map((t, i) => (
            <div className="tes" key={i}>
              <div className="tes__mark">"</div>
              <div className="tes__quote">{t.quote}</div>
              <div className="tes__person">
                <div className="tes__name">{t.name}</div>
                <div className="tes__role">{t.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio, Filters, HowWeWork, Process, Testimonials });