/* Technologies index — grouped grid of the tools we build with. */

function TechIndexPage() {
  React.useEffect(() => {
    document.title = "Technologies — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name", "description"); document.head.appendChild(m); }
    m.setAttribute("content", "The technologies Innoveev builds with — Flutter, React Native, Next.js, React, Node.js — with honest comparisons of when each one wins.");
  }, []);

  const apps = window.APPS || [];

  return (
    <>
      <Nav />

      <header className="sub-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">Technologies</span>
            <h1 className="sub-hero__title">The tools, and <em>when they win.</em></h1>
            <p className="sub-hero__lede">
              Every framework here earns its place in a real product decision. Open one to
              see how it compares to its rivals, where each stands out — and the apps
              we've shipped with it.
            </p>
          </div>
        </div>
      </header>

      <section className="section section--tight" style={{ paddingTop: 0 }}>
        <div className="container">
          {window.TECH_DOMAINS.map((domain) => {
            const techs = window.TECHS.filter((t) => t.domain === domain);
            if (!techs.length) return null;
            const note = (window.TECH_DOMAIN_NOTES || {})[domain];
            return (
              <div key={domain} className="tech-group">
                <div className="tech-group__label">{domain}</div>
                {note && (
                  <div className="tech-manifesto">
                    <div className="tech-manifesto__label">{note.label}</div>
                    <p className="tech-manifesto__text">{note.text}</p>
                  </div>
                )}
                <div className="tech-grid">
                  {techs.map((t) => (
                    <a key={t.slug} href={`technology.html?slug=${t.slug}`} className="tech-card" data-cursor="Compare">
                      <div className="tech-card__head">
                        <TechTile tech={t} size={52} />
                        <div>
                          <div className="tech-card__name">{t.name}</div>
                          <div className="tech-card__role">{t.role}</div>
                        </div>
                      </div>
                      <p className="tech-card__line">{t.oneLiner}</p>
                      <div className="tech-card__foot">
                        <span>vs {t.compare.contenders.slice(1).map((c) => c.name).join(" · ")}</span>
                        <strong>Compare →</strong>
                      </div>
                    </a>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <GlossarySection />

      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Stack recommender</span>
              <h2 className="h2 section-head__title">Not sure <em>which stack?</em></h2>
            </div>
            <p className="lede section-head__lede">
              Five questions, an honest sketch of where we'd start — and the trade-offs in writing when you talk to us.
            </p>
          </div>
          <StackRecommender />
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
      <BuildMode />
      <KeyboardEggs />
    </>
  );
}

window.TechIndexPage = TechIndexPage;