// Saola — All Projects page
const { useState: useStateAP, useMemo: useMemoAP } = React;
const ALL = window.SAOLA_ALL_PROJECTS;
const CoverArtAP = window.CoverArt;

const FILTERS = [
  { key: "All", match: () => true },
  { key: "AI", match: p => /AI/i.test(p.tags.join(" ") + " " + p.cat) },
  { key: "Blockchain", match: p => /Blockchain|DeFi|RWA|Wallet|DEX|DAO|Token|BSC|VeChain|Bitcoin|Monad|Ethereum|Base|Solana/i.test(p.tags.join(" ") + " " + p.cat) },
  { key: "Fintech", match: p => /Fintech|Banking|Securities|Treasury|Payments/i.test(p.tags.join(" ") + " " + p.cat) },
  { key: "Healthcare", match: p => /Healthcare/i.test(p.cat) },
  { key: "E-commerce", match: p => /E-commerce|Commerce|Retail|Marketplace/i.test(p.tags.join(" ") + " " + p.cat) },
  { key: "Travel", match: p => /Travel|Connectivity/i.test(p.cat) },
  { key: "Real Estate", match: p => /Real Estate/i.test(p.cat) },
  { key: "Enterprise", match: p => /Enterprise|GIS|B2B|Corporate/i.test(p.tags.join(" ") + " " + p.cat) },
  { key: "Gaming", match: p => /Gaming|NFT|P2E/i.test(p.tags.join(" ") + " " + p.cat) },
];

function HeaderLite() {
  return (
    <header className="header">
      <div className="container header__inner">
        <a href="index.html" className="brand">
          <span className="brand__mark"><span>S</span></span>
          <span>Saola Labs</span>
        </a>
        <nav className="nav">
          <a href="index.html#services" className="nav__link">Services</a>
          <a href="projects.html" className="nav__link" style={{color: "var(--color-text)"}}>Portfolio</a>
          <a href="index.html#how" className="nav__link">How we work</a>
          <a href="index.html#process" className="nav__link">Process</a>
          <a href="index.html#company" className="nav__link">Company</a>
        </nav>
        <div className="header__actions">
          <a href="index.html#quote" className="btn btn--ghost btn--sm">Talk to us</a>
          <a href="index.html#quote" className="btn btn--primary btn--sm">Request Free Quote <span className="arrow">→</span></a>
        </div>
      </div>
    </header>
  );
}

function FooterLite() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__bottom" style={{borderTop: "none", paddingTop: 0}}>
          <div>© 2026 Saola Labs Pte. Ltd. · All rights reserved.</div>
          <div style={{display: "flex", gap: 18}}>
            <a href="#linkedin">LinkedIn</a>
            <a href="#whatsapp">WhatsApp</a>
            <a href="#telegram">Telegram</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function AllProjectsApp() {
  const [active, setActive] = useStateAP("All");
  const [q, setQ] = useStateAP("");

  const filtered = useMemoAP(() => {
    const f = FILTERS.find(x => x.key === active) || FILTERS[0];
    return ALL.filter(p => f.match(p) && (q ? (p.name + " " + p.summary + " " + p.tags.join(" ")).toLowerCase().includes(q.toLowerCase()) : true));
  }, [active, q]);

  const counts = useMemoAP(() => {
    const out = {};
    FILTERS.forEach(f => { out[f.key] = ALL.filter(f.match).length; });
    return out;
  }, []);

  return (
    <>
      <HeaderLite/>
      <main>
        <section className="hero" style={{paddingTop: 96, paddingBottom: 56}}>
          <div className="container">
            <div className="hero__eyebrow-row">
              <a href="index.html" className="eyebrow" style={{color: "var(--color-text-2)"}}>← Back to home</a>
              <span className="eyebrow muted">Portfolio · {ALL.length} projects</span>
            </div>
            <h1 className="display" style={{maxWidth: "20ch"}}>
              Every project we've shipped, in <span className="accent">one place</span>.
            </h1>
            <p className="lede hero__lede">
              Production software across AI, fintech, blockchain, healthcare, travel, e-commerce, and enterprise systems. Filter by capability or search to drill into the work.
            </p>
            <div className="hero__cta-row" style={{marginTop: 32}}>
              <input
                type="search"
                placeholder="Search projects, tech, industries…"
                value={q}
                onChange={(e) => setQ(e.target.value)}
                style={{
                  flex: 1, maxWidth: 480,
                  padding: "14px 18px",
                  fontSize: 15,
                  borderRadius: 9999,
                  border: "1px solid var(--color-border)",
                  background: "#fff",
                  outline: "none",
                  fontFamily: "inherit",
                }}
              />
            </div>
            <div className="chips" style={{marginTop: 24}}>
              {FILTERS.map(f => (
                <button key={f.key} className={`chip ${active === f.key ? "is-active" : ""}`} onClick={() => setActive(f.key)}>
                  {f.key}<span className="chip__count">{counts[f.key]}</span>
                </button>
              ))}
            </div>
          </div>
        </section>

        <section className="section section--flush" style={{paddingTop: 32}}>
          <div className="container">
            {filtered.length === 0 ? (
              <div style={{padding: "80px 0", textAlign: "center", color: "var(--color-text-3)"}}>
                <div className="h3">No projects match.</div>
                <p style={{marginTop: 8}}>Try a different filter or search term.</p>
              </div>
            ) : (
              <>
                <div style={{display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-text-3)", letterSpacing: "0.08em", textTransform: "uppercase"}}>
                  <span>Showing {filtered.length} of {ALL.length}</span>
                  <span>{active === "All" ? "All capabilities" : active}</span>
                </div>
                <div className="portfolio__grid">
                  {filtered.map(p => (
                    <article key={p.id} className="proj" style={{gridColumn: "span 4"}}>
                      <div className="proj__cover" style={{height: 200}}>
                        <div className="proj__cover-pattern"><CoverArtAP id={p.id} glyph={p.glyph}/></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>
                        <div className="proj__foot">
                          <span>{p.stack}</span>
                          <a href={`#case/${p.id}`}>Case study <span>→</span></a>
                        </div>
                      </div>
                    </article>
                  ))}
                </div>
              </>
            )}
          </div>
        </section>

        <section className="section">
          <div className="container">
            <div className="quote" style={{gridTemplateColumns: "1fr", textAlign: "center", padding: "56px 32px"}}>
              <div className="quote__intro" style={{maxWidth: 640, margin: "0 auto"}}>
                <h2 className="h2" style={{color: "#fff"}}>Don't see what you're looking for?</h2>
                <p style={{marginTop: 16, color: "rgba(255,255,255,0.7)"}}>We've shipped 65+ projects across most things you'd want to build. Send us a brief — we'll come back within one business day.</p>
                <a href="index.html#quote" className="btn btn--primary btn--lg" style={{marginTop: 24, background: "#3279F9"}}>Request Free Quote <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
        </section>
      </main>
      <FooterLite/>
    </>
  );
}

// Override gridColumn span for all-projects three-column grid
const _apStyles = document.createElement("style");
_apStyles.textContent = `
  .portfolio__grid .proj { grid-column: span 4 !important; }
  @media (max-width: 1024px) { .portfolio__grid .proj { grid-column: span 6 !important; } }
  @media (max-width: 720px) { .portfolio__grid .proj { grid-column: span 12 !important; } }
`;
document.head.appendChild(_apStyles);

ReactDOM.createRoot(document.getElementById("root")).render(<AllProjectsApp/>);