/* Harupa.pro — LLM & GenAI page sections. */
(function () {
  const DS = window.HarupaProDesignSystem_4a4a6a;
  const { Button, Overline, Card, MeshBackground, Badge } = DS;
  const I = window.HPIcons;

  const css = `
  .lh { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--hairline); }
  .lh__mesh { position: absolute; inset: 0; z-index: 0; }
  .lh__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 0%, transparent 30%, var(--paper) 80%); }
  .lh__wrap { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; padding: 120px 28px 96px; text-align: center; }
  .lh__h1 { font-family: var(--font-serif); font-weight: 400; font-size: 56px; line-height: 1.06;
    letter-spacing: -1.5px; color: var(--ink); margin: 22px 0 0; text-wrap: balance; }
  .lh__h1 em { font-style: italic; color: var(--amber-deep); }
  .lh__lead { font-size: 18px; line-height: 1.62; color: var(--ink-body); margin: 24px auto 0; max-width: 640px; }
  .lh__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
  @media (max-width: 900px) { .lh__h1 { font-size: 40px; letter-spacing: -1px; } .lh__wrap { padding: 96px 28px 72px; } }

  .lcap { background: var(--paper); padding: 104px 28px; }
  .lcap__wrap { max-width: var(--container); margin: 0 auto; }
  .lcap__head { max-width: 640px; margin-bottom: 52px; }
  .lcap__title { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1.08;
    letter-spacing: -1.1px; color: var(--ink); margin: 18px 0 0; }
  .lcap__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .lcap__icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: var(--amber-wash); color: var(--amber-deep); margin-bottom: 16px; }
  .lcap__ct { font-weight: 600; font-size: 17px; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.2px; }
  .lcap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .lcap__list li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-body); }
  .lcap__list svg { flex: none; color: var(--amber); margin-top: 2px; }
  @media (max-width: 1100px) { .lcap__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 700px) { .lcap__grid { grid-template-columns: 1fr; } .lcap__title { font-size: 34px; } }

  .lwhy { position: relative; overflow: hidden; background: var(--graphite); color: var(--on-dark); padding: 104px 28px; }
  .lwhy__mesh { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
  .lwhy__wrap { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
  .lwhy__head { max-width: 660px; margin-bottom: 52px; }
  .lwhy__title { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1.08;
    letter-spacing: -1.1px; color: var(--on-dark); margin: 18px 0 0; }
  .lwhy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
  .lwhy__item { display: flex; gap: 14px; align-items: flex-start; }
  .lwhy__item .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--graphite-3); color: var(--amber-light);
    display: flex; align-items: center; justify-content: center; flex: none; }
  .lwhy__item h3 { font-size: 16px; font-weight: 600; color: var(--on-dark); margin: 2px 0 5px; }
  .lwhy__item p { font-size: 14.5px; line-height: 1.52; color: var(--on-dark-soft); margin: 0; }
  @media (max-width: 900px) { .lwhy__grid { grid-template-columns: 1fr; } .lwhy__title { font-size: 34px; } }
  @media (max-width: 1100px) and (min-width: 901px) { .lwhy__grid { grid-template-columns: 1fr 1fr; } }

  .lstk { background: var(--paper-soft); padding: 96px 28px; border-bottom: 1px solid var(--hairline); }
  .lstk__wrap { max-width: var(--container); margin: 0 auto; }
  .lstk__head { max-width: 640px; margin-bottom: 40px; }
  .lstk__title { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.1;
    letter-spacing: -1px; color: var(--ink); margin: 18px 0 0; }
  .lstk__rows { display: flex; flex-direction: column; }
  .lstk__row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
  .lstk__row:last-child { border-bottom: 0; }
  .lstk__rt { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--amber-deep); padding-top: 2px; }
  .lstk__rd { font-size: 15.5px; line-height: 1.6; color: var(--ink-body); }
  @media (max-width: 700px) { .lstk__row { grid-template-columns: 1fr; gap: 6px; } .lstk__title { font-size: 32px; } }
  `;
  if (!document.getElementById("hp-llm-css")) {
    const s = document.createElement("style"); s.id = "hp-llm-css"; s.textContent = css; document.head.appendChild(s);
  }

  function LlmHero({ t, onNavigate, lang }) {
    return (
      <header className="lh" id="home" data-screen-label="LLM hero">
        <div className="lh__mesh"><MeshBackground variant="paper" density="medium" connectionDistance={150} /></div>
        <div className="lh__fade"></div>
        <div className="lh__wrap">
          <Overline>{t("llm-overline")}</Overline>
          <h1 className="lh__h1">{t("llm-h1-pre")}<em>{t("llm-h1-em")}</em>{t("llm-h1-post")}</h1>
          <p className="lh__lead">{t("llm-lead")}</p>
          <div className="lh__cta">
            <Button size="lg" onClick={() => onNavigate("contact")}><I.Calendar width={18} height={18} />{t("llm-cta1")}</Button>
            <Button size="lg" variant="secondary" onClick={() => { window.location.href = "index.html?lang=" + lang; }}>{t("llm-cta2")}<I.Arrow width={18} height={18} /></Button>
          </div>
        </div>
      </header>
    );
  }

  function LlmCaps({ t }) {
    return (
      <section className="lcap" id="capabilities" data-screen-label="LLM capabilities">
        <div className="lcap__wrap">
          <div className="lcap__head">
            <Overline rule>{t("llm-cap-overline")}</Overline>
            <h2 className="lcap__title">{t("llm-cap-title")}</h2>
          </div>
          <div className="lcap__grid">
            {t("llm-caps").map((d, i) => {
              const Icon = I[d.icon] || I.Spark;
              return (
                <Card key={i} variant="feature" padding="md" hover>
                  <div className="lcap__icon"><Icon width={22} height={22} /></div>
                  <h3 className="lcap__ct">{d.title}</h3>
                  <ul className="lcap__list">
                    {d.items.map((it, j) => <li key={j}><I.Check width={14} height={14} />{it}</li>)}
                  </ul>
                </Card>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  function LlmWhy({ t }) {
    return (
      <section className="lwhy" id="why" data-screen-label="LLM why me">
        <div className="lwhy__mesh"><MeshBackground variant="dark" density="low" connectionDistance={170} /></div>
        <div className="lwhy__wrap">
          <div className="lwhy__head">
            <Overline tone="ondark" rule>{t("llm-why-overline")}</Overline>
            <h2 className="lwhy__title">{t("llm-why-title")}</h2>
          </div>
          <div className="lwhy__grid">
            {t("llm-why-items").map((d, i) => {
              const Icon = I[d.icon] || I.Check;
              return (
                <div className="lwhy__item" key={i}>
                  <div className="ic"><Icon width={21} height={21} /></div>
                  <div>
                    <h3>{d.title}</h3>
                    <p>{d.desc}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  function LlmStack({ t }) {
    return (
      <section className="lstk" id="stack" data-screen-label="LLM stack">
        <div className="lstk__wrap">
          <div className="lstk__head">
            <Overline rule>{t("llm-stack-overline")}</Overline>
            <h2 className="lstk__title">{t("llm-stack-title")}</h2>
          </div>
          <div className="lstk__rows">
            {t("llm-stack").map((d, i) => (
              <div className="lstk__row" key={i}>
                <div className="lstk__rt">{d.title}</div>
                <div className="lstk__rd">{d.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { HPLlmHero: LlmHero, HPLlmCaps: LlmCaps, HPLlmWhy: LlmWhy, HPLlmStack: LlmStack });
})();