/* Technology detail page — technology.html?slug=…
   Hero → facts → what/how prose → comparison table →
   where-each-stands-out cards → our take. TechTile comes from components/tech-tile.jsx. */

function TechPage() {
  const slug = new URLSearchParams(window.location.search).get("slug");
  const tech = window.findTech(slug);

  React.useEffect(() => {
    if (!tech) { document.title = "Technology — Innoveev"; return; }
    document.title = `${tech.name} — 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", tech.oneLiner);
  }, [tech]);

  if (!tech) {
    return (
      <>
        <Nav />
        <main className="section container">
          <h1 className="h2">Technology not found.</h1>
          <p className="lede"><a href="technologies.html">← All technologies</a></p>
        </main>
        <Footer />
      </>
    );
  }

  return (
    <>
      <Nav />

      <header className="container app-detail__nav">
        <div className="app-detail__crumbs">
          <a href="index.html">Innoveev</a>
          <span aria-hidden="true">›</span>
          <a href="technologies.html">Technologies</a>
          <span aria-hidden="true">›</span>
          <span>{tech.name}</span>
        </div>
      </header>

      <section className="sub-hero" style={{ "--accent-hue": tech.hue, "--tech-hue": tech.hue, paddingTop: 40 }}>
        <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">
            <div style={{ display: "flex", alignItems: "center", gap: 22, marginBottom: 8 }}>
              <TechTile tech={tech} size={72} />
              <div>
                <span className="eyebrow">{`Technology · ${tech.domain}`}</span>
                <h1 className="sub-hero__title" style={{ marginTop: 10 }}>{tech.name}</h1>
              </div>
            </div>
            <p className="sub-hero__lede">{tech.oneLiner}</p>
          </div>

          <div className="tech-facts">
            {tech.facts.map(([k, v]) => (
              <div key={k} className="tech-facts__item">
                <div className="tech-facts__k">{k}</div>
                <div className="tech-facts__v">{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What it is / how we use it */}
      <section className="section section--tight" style={{ "--tech-hue": tech.hue }}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">In plain English</span>
              <h2 className="h2 section-head__title">What it is, and why we use it.</h2>
            </div>
          </div>
          <div className="tech-prose">
            <p>{tech.what}</p>
            <p>{tech.howWeUse}</p>
          </div>
        </div>
      </section>

      {/* Comparison */}
      <section className="section section--tight" style={{ "--tech-hue": tech.hue }}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Key differences</span>
              <h2 className="h2 section-head__title">
                {tech.compare.contenders.map((c) => c.name).join(" vs ")}.
              </h2>
            </div>
            <p className="lede section-head__lede">{tech.compare.intro}</p>
          </div>

          <div className="tech-compare-wrap">
            <table className="tech-compare">
              <thead>
                <tr>
                  <th scope="col"><span className="visually-hidden">Dimension</span></th>
                  {tech.compare.contenders.map((c, i) => (
                    <th key={c.name} scope="col" className={i === 0 ? "is-self" : ""}>
                      {c.slug && c.slug !== tech.slug
                        ? <a href={`technology.html?slug=${c.slug}`}>{c.name}</a>
                        : c.name}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {tech.compare.rows.map((row) => (
                  <tr key={row.dim}>
                    <th scope="row">{row.dim}</th>
                    {row.cells.map((cell, i) => (
                      <td key={i} className={i === 0 ? "is-self" : ""}>{cell}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="tech-standout">
            {tech.standout.map((s, i) => (
              <div key={s.name} className={`tech-standout__card ${i === 0 ? "is-self" : ""}`}>
                <h3 className="tech-standout__name">{s.name}</h3>
                <ul className="tech-standout__list">
                  {s.points.map((p, j) => <li key={j}>{p}</li>)}
                </ul>
              </div>
            ))}
          </div>

          <div className="tech-verdict">
            <div className="tech-verdict__label">Our take</div>
            <p className="tech-verdict__text">{tech.verdict}</p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section--tight">
        <div className="container">
          <div className="faq-closing">
            <h2 className="faq-closing__title">Thinking about <em>{tech.name}?</em></h2>
            <p className="faq-closing__lede">
              Tell us what you're building — we'll tell you honestly whether {tech.name} is the right tool for it.
            </p>
            <div className="faq-closing__ctas">
              <a href="contact.html" className="btn btn--primary">Talk to an engineer <Arrow /></a>
              <a
                href={`services/${({ Mobile: "mobile", Web: "web", Backend: "backend", AI: "ai" })[tech.domain] || "web"}.html`}
                className="btn btn--secondary"
              >
                Our {tech.domain === "AI" ? "AI" : tech.domain.toLowerCase()} practice
              </a>
              <a href="technologies.html" className="btn btn--secondary">All technologies</a>
            </div>
          </div>
        </div>
      </section>

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

window.TechPage = TechPage;