/* Harupa.pro — main page sections, part 1: Hero, Engagement, Services, WhyFractional. */
(function () {
  const DS = window.HarupaProDesignSystem_4a4a6a;
  const { Button, Overline, Badge, Card, MeshBackground } = DS;
  const I = window.HPIcons;
  const html = (s) => ({ __html: s });

  const css = `
  .hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--hairline); }
  .hero__mesh { position: absolute; inset: 0; z-index: 0; }
  .hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(120% 90% at 78% 30%, transparent 40%, var(--paper) 78%); }
  .hero__wrap { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto;
    padding: 96px 28px 0; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: end; }
  .hero__col { padding-bottom: 88px; max-width: 600px; }
  .hero__h1 { font-family: var(--font-serif); font-weight: 400; font-size: 58px; line-height: 1.05;
    letter-spacing: -1.6px; color: var(--ink); margin: 22px 0 0; text-wrap: balance; }
  .hero__h1 em { font-style: italic; color: var(--amber-deep); }
  .hero__lead { font-size: 18px; line-height: 1.62; color: var(--ink-body); margin: 24px 0 0; max-width: 520px; }
  .hero__lead strong { color: var(--ink); font-weight: 600; }
  .hero__cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
  .hero__trust { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
  .hero__trust .dot { color: var(--hairline); }
  .hero__art { position: relative; min-height: 560px; display: flex; align-items: flex-end; justify-content: center; }
  .hero__glow { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
    width: 80%; height: 70%; background: radial-gradient(circle at 50% 60%, var(--amber-wash), transparent 62%); z-index: 0; }
  .hero__portrait { position: relative; z-index: 1; max-height: 600px; max-width: 100%;
    object-fit: contain; object-position: bottom center; filter: drop-shadow(0 24px 40px rgba(27,24,19,0.18)); }
  .hero__ring { position: absolute; z-index: 0; bottom: 60px; left: 50%; transform: translateX(-50%);
    width: 360px; height: 360px; border: 1px solid var(--hairline); border-radius: 50%; }
  .hero__ring2 { position: absolute; z-index: 0; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 470px; height: 470px; border: 1px dashed color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 50%; }
  @media (max-width: 900px) {
    .hero__wrap { grid-template-columns: 1fr; }
    .hero__h1 { font-size: 42px; letter-spacing: -1px; }
    .hero__col { padding-bottom: 24px; }
    .hero__art { min-height: 420px; order: -1; }
  }

  .eng { background: var(--paper-soft); padding: 112px 28px; border-bottom: 1px solid var(--hairline); }
  .eng__wrap { max-width: var(--container); margin: 0 auto; }
  .eng__head { max-width: 640px; margin-bottom: 52px; }
  .eng__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; }
  .eng__sub { font-size: 17px; line-height: 1.6; color: var(--ink-body); margin: 18px 0 0; }
  .eng__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .eng__icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: var(--amber-wash); color: var(--amber-deep); margin-bottom: 18px; }
  .eng__ct { font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.2px; }
  .eng__desc { font-size: 14.5px; line-height: 1.5; color: var(--ink-body); margin: 0 0 14px; }
  .eng__list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hairline-soft);
    display: flex; flex-direction: column; gap: 8px; }
  .eng__list li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--ink-body); }
  .eng__list svg { flex: none; color: var(--amber); margin-top: 2px; }
  @media (max-width: 1100px) { .eng__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 700px) { .eng__grid { grid-template-columns: 1fr; } .eng__title { font-size: 34px; } }

  .svc { background: var(--paper); padding: 112px 28px; }
  .svc__wrap { max-width: var(--container); margin: 0 auto; }
  .svc__head { max-width: 640px; margin-bottom: 52px; }
  .svc__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; }
  .svc__sub { font-size: 17px; line-height: 1.6; color: var(--ink-body); margin: 18px 0 0; }
  .svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .svc__icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: var(--amber-wash); color: var(--amber-deep); margin-bottom: 18px; }
  .svc__ct { font-weight: 600; font-size: 19px; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.2px; }
  .svc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .svc__list li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--ink-body); }
  .svc__list svg { flex: none; color: var(--amber); margin-top: 2px; }
  .svc__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px;
    font-weight: 600; color: var(--amber-deep); text-decoration: none; }
  .svc__link:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 900px) { .svc__grid { grid-template-columns: 1fr; } .svc__title { font-size: 34px; } }
  @media (max-width: 1100px) and (min-width: 901px) { .svc__grid { grid-template-columns: 1fr 1fr; } }

  .whyf { background: var(--paper); padding: 0 28px 112px; }
  .whyf__wrap { max-width: var(--container); margin: 0 auto; border-top: 1px solid var(--hairline); padding-top: 96px; }
  .whyf__head { max-width: 640px; margin-bottom: 48px; }
  .whyf__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; }
  .whyf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
  .whyf__item { display: flex; gap: 14px; align-items: flex-start; }
  .whyf__item .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--amber-wash); color: var(--amber-deep);
    display: flex; align-items: center; justify-content: center; flex: none; }
  .whyf__item h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 2px 0 5px; }
  .whyf__item p { font-size: 14.5px; line-height: 1.52; color: var(--ink-body); margin: 0; }
  @media (max-width: 900px) { .whyf__grid { grid-template-columns: 1fr; } .whyf__title { font-size: 32px; } }
  @media (max-width: 1100px) and (min-width: 901px) { .whyf__grid { grid-template-columns: 1fr 1fr; } }
  `;
  if (!document.getElementById("hp-main1-css")) {
    const s = document.createElement("style"); s.id = "hp-main1-css"; s.textContent = css; document.head.appendChild(s);
  }

  function Hero({ t, onNavigate }) {
    return (
      <header className="hero" id="home" data-screen-label="Hero">
        <div className="hero__mesh"><MeshBackground variant="paper" density="low" connectionDistance={160} /></div>
        <div className="hero__fade"></div>
        <div className="hero__wrap">
          <div className="hero__col">
            <Overline rule>{t("hero-overline")}</Overline>
            <h1 className="hero__h1">{t("hero-h1-pre")}<em>{t("hero-h1-em")}</em>{t("hero-h1-post")}</h1>
            <p className="hero__lead" dangerouslySetInnerHTML={html(t("hero-lead"))}></p>
            <div className="hero__cta">
              <Button size="lg" onClick={() => onNavigate("contact")}><I.Calendar width={18} height={18} />{t("hero-cta1")}</Button>
              <Button size="lg" variant="secondary" onClick={() => onNavigate("services")}>{t("hero-cta2")}<I.Arrow width={18} height={18} /></Button>
            </div>
            <div className="hero__trust">
              <Badge dot dotTone="success">{t("hero-badge")}</Badge>
              <span className="dot">—</span>
              <span>{t("hero-loc")}</span>
            </div>
          </div>
          <div className="hero__art">
            <div className="hero__glow"></div>
            <div className="hero__ring2"></div>
            <div className="hero__ring"></div>
            <img className="hero__portrait" src="img/portrait-cut.png" alt="Dzmitry Harupa, Head of Architecture" />
          </div>
        </div>
      </header>
    );
  }

  function Engagement({ t }) {
    return (
      <section className="eng" id="engagement" data-screen-label="How we work">
        <div className="eng__wrap">
          <div className="eng__head">
            <Overline rule>{t("eng-overline")}</Overline>
            <h2 className="eng__title">{t("eng-title")}</h2>
            <p className="eng__sub">{t("eng-sub")}</p>
          </div>
          <div className="eng__grid">
            {t("eng-cards").map((d, i) => {
              const Icon = I[d.icon] || I.Spark;
              return (
                <Card key={i} variant="cream" padding="lg" hover>
                  <div className="eng__icon"><Icon width={24} height={24} /></div>
                  <h3 className="eng__ct">{d.title}</h3>
                  <p className="eng__desc">{d.desc}</p>
                  <ul className="eng__list">
                    {d.items.map((it, j) => <li key={j}><I.Check width={15} height={15} />{it}</li>)}
                  </ul>
                </Card>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  function Services({ t }) {
    return (
      <section className="svc" id="services" data-screen-label="Services">
        <div className="svc__wrap">
          <div className="svc__head">
            <Overline rule>{t("svc-overline")}</Overline>
            <h2 className="svc__title">{t("svc-title")}</h2>
            <p className="svc__sub">{t("svc-sub")}</p>
          </div>
          <div className="svc__grid">
            {t("svc-cards").map((d, i) => {
              const Icon = I[d.icon] || I.Spark;
              return (
                <Card key={i} variant="feature" padding="lg" hover>
                  <div className="svc__icon"><Icon width={24} height={24} /></div>
                  <h3 className="svc__ct">{d.title}</h3>
                  <ul className="svc__list">
                    {d.items.map((it, j) => <li key={j}><I.Check width={16} height={16} />{it}</li>)}
                  </ul>
                  {d.link ? (
                    <a className="svc__link" href={"llm-services.html?lang=" + (window.hpGetLang())}>
                      {d.link}<I.Arrow width={15} height={15} />
                    </a>
                  ) : null}
                </Card>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  function WhyFractional({ t }) {
    return (
      <section className="whyf" id="why-fractional" data-screen-label="Why fractional CTO">
        <div className="whyf__wrap">
          <div className="whyf__head">
            <Overline rule>{t("why-overline")}</Overline>
            <h2 className="whyf__title">{t("why-title")}</h2>
          </div>
          <div className="whyf__grid">
            {t("why-items").map((d, i) => {
              const Icon = I[d.icon] || I.Check;
              return (
                <div className="whyf__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>
    );
  }

  Object.assign(window, { HPHero: Hero, HPEngagement: Engagement, HPServices: Services, HPWhyFractional: WhyFractional });
})();