/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */
/* specialists.jsx — For Data Specialists page. */

const SpecHero = () => {
  const { c } = useLang();
  const s = c.specialists;
  return (
    <section className="tm-spec-hero">
      <div className="tm-container">
        <span className="tm-pricing-eyebrow">{s.heroEyebrow}</span>
        <h1 className="tm-spec-h1">
          {s.heroH1} <em className="tm-spec-h1-em">{s.heroH1Em}</em>
        </h1>
        <p className="tm-spec-sub">{s.heroSub}</p>
        <p className="tm-spec-stat">{s.heroStat}</p>
        <div className="tm-spec-hero-actions">
          <a className="tm-btn tm-btn-dark tm-btn-lg" href={c.links.app}>
            {s.ctaPrimary}
            <i className="ph-bold ph-arrow-right"></i>
          </a>
          <a className="tm-btn tm-btn-ghost tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer">
            {c.callCta}
            <i className="ph-bold ph-calendar-blank"></i>
          </a>
          <a className="tm-spec-hero-link" href="docs.html">
            {s.ctaSecondary}
            <i className="ph-bold ph-arrow-up-right"></i>
          </a>
        </div>
      </div>
    </section>
  );
};

const SpecCapabilities = () => {
  const { c } = useLang();
  const s = c.specialists.capabilities;
  return (
    <section className="tm-spec-section tm-spec-caps">
      <div className="tm-container">
        <div className="tm-spec-head">
          <h2 className="tm-spec-h2">{s.h2}</h2>
          <p className="tm-spec-section-sub">{s.sub}</p>
        </div>
        <div className="tm-spec-caps-grid">
          {s.items.map((it, i) => (
            <article key={i} className="tm-spec-cap">
              <span className="tm-spec-cap-icon"><i className={`ph-bold ${it.icon}`}></i></span>
              <h3 className="tm-spec-cap-title">{it.title}</h3>
              <p className="tm-spec-cap-body">{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const SpecArchitecture = () => {
  const { c } = useLang();
  const s = c.specialists.architecture;
  return (
    <section className="tm-spec-section tm-spec-arch">
      <div className="tm-container">
        <div className="tm-spec-head">
          <h2 className="tm-spec-h2">{s.h2}</h2>
          <p className="tm-spec-section-sub">{s.sub}</p>
        </div>
        <div className="tm-arch-flow">
          {s.layers.map((layer, i) => (
            <React.Fragment key={i}>
              <article className={`tm-arch-layer is-${layer.tag.toLowerCase()}`}>
                <span className="tm-arch-tag">{layer.tag}</span>
                <h3 className="tm-arch-title">{layer.title}</h3>
                <p className="tm-arch-body">{layer.body}</p>
              </article>
              {i < s.layers.length - 1 && (
                <span className="tm-arch-arrow" aria-hidden="true">
                  <i className="ph-bold ph-arrow-right"></i>
                </span>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

const SpecSQL = () => {
  const { c } = useLang();
  const s = c.specialists.sql;

  // Lightweight SQL syntax highlight
  const KEYWORDS = /\b(WITH|AS|SELECT|FROM|WHERE|AND|OR|INTERVAL|NOW|ROUND|SUM|AVG|COUNT|JOIN|USING|GROUP BY|ORDER BY|DESC|ASC|ON|NULL|NOT|IN|IS|LIKE|HAVING|LIMIT)\b/g;
  const STRINGS = /'[^']*'/g;
  const NUMBERS = /\b\d+(\.\d+)?\b/g;
  const COMMENTS = /--.*$/g;

  const colorize = (line) => {
    // Tokenize via placeholders to avoid double-coloring
    const tokens = [];
    let working = line;
    working = working.replace(STRINGS, (m) => {
      tokens.push(`<span class="sql-str">${m}</span>`);
      return `\x00${tokens.length - 1}\x00`;
    });
    working = working.replace(KEYWORDS, '<span class="sql-kw">$1</span>');
    working = working.replace(NUMBERS, '<span class="sql-num">$&</span>');
    working = working.replace(COMMENTS, '<span class="sql-cmt">$&</span>');
    working = working.replace(/\x00(\d+)\x00/g, (_, i) => tokens[+i]);
    return working;
  };

  return (
    <section className="tm-spec-section tm-spec-sql">
      <div className="tm-container">
        <div className="tm-spec-head">
          <h2 className="tm-spec-h2">{s.h2}</h2>
          <p className="tm-spec-section-sub">{s.sub}</p>
        </div>
        <div className="tm-sql-card">
          <div className="tm-sql-prompt">
            <span className="tm-sql-prompt-label">prompt</span>
            <p>{s.prompt}</p>
          </div>
          <div className="tm-sql-arrow" aria-hidden="true">
            <i className="ph-bold ph-arrow-down"></i>
          </div>
          <div className="tm-sql-code">
            <div className="tm-sql-code-head">
              <span className="tm-sql-code-tab">query.sql</span>
              <span className="tm-sql-code-status">
                <span className="tm-sql-code-dot"></span>
                Generated by Teramot
              </span>
            </div>
            <pre className="tm-sql-code-body">
              {s.sqlLines.map((line, i) => (
                <div key={i} className="tm-sql-line">
                  <span className="tm-sql-line-num">{i + 1}</span>
                  <code dangerouslySetInnerHTML={{ __html: colorize(line) }} />
                </div>
              ))}
            </pre>
          </div>
        </div>
      </div>
    </section>
  );
};

const SpecIntegrations = () => {
  const { c } = useLang();
  const s = c.specialists.integrations;
  return (
    <section className="tm-spec-section tm-spec-integ">
      <div className="tm-container">
        <div className="tm-spec-head">
          <h2 className="tm-spec-h2">{s.h2}</h2>
          <p className="tm-spec-section-sub">{s.sub}</p>
        </div>
        <div className="tm-integ-grid">
          {s.groups.map((g, gi) => (
            <div key={gi} className="tm-integ-col">
              <h3 className="tm-integ-label">{g.label}</h3>
              <div className="tm-integ-pills">
                {g.items.map((it, i) => (
                  <span key={i} className="tm-integ-pill">{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SpecSpecs = () => {
  const { c } = useLang();
  const s = c.specialists.specs;
  return (
    <section className="tm-spec-section tm-spec-specs">
      <div className="tm-container">
        <div className="tm-spec-head">
          <h2 className="tm-spec-h2">{s.h2}</h2>
        </div>
        <div className="tm-specs-grid">
          {s.items.map((it, i) => (
            <article key={i} className="tm-specs-card">
              <span className="tm-specs-icon"><i className={`ph-bold ${it.icon}`}></i></span>
              <h3 className="tm-specs-title">{it.title}</h3>
              <p className="tm-specs-body">{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const SpecCta = () => {
  const { c } = useLang();
  const s = c.specialists.cta;
  return (
    <section className="tm-spec-finalcta">
      <div className="tm-container">
        <h2 className="tm-spec-cta-h2">{s.h2}</h2>
        <p className="tm-spec-cta-sub">{s.sub}</p>
        <div className="tm-spec-cta-actions">
          <a className="tm-btn tm-btn-dark tm-btn-lg" href={c.links.app}>
            {s.primary}
            <i className="ph-bold ph-arrow-right"></i>
          </a>
          <a className="tm-btn tm-btn-ghost tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer">
            {c.callCta}
            <i className="ph-bold ph-calendar-blank"></i>
          </a>
          <a className="tm-spec-cta-link" href="docs.html">
            {s.secondary}
            <i className="ph-bold ph-arrow-up-right"></i>
          </a>
        </div>
      </div>
    </section>
  );
};

const SpecialistsApp = () => (
  <LangProvider>
    <NavBar current="specialists" />
    <main>
      <SpecHero />
      <SpecCapabilities />
      <SpecArchitecture />
      <SpecSQL />
      <SpecIntegrations />
      <SpecSpecs />
      <SpecCta />
    </main>
    <Footer />
  </LangProvider>
);

ReactDOM.createRoot(document.getElementById('root')).render(<SpecialistsApp />);
