/* Harupa.pro — main page sections, part 2: TrackRecord, About, Articles, Contact. */
(function () {
  const { useState, useEffect } = React;
  const DS = window.HarupaProDesignSystem_4a4a6a;
  const { Stat, Overline, MeshBackground, Card, Tag, Avatar, Badge, IconButton, Button, Input, Textarea } = DS;
  const I = window.HPIcons;
  const html = (s) => ({ __html: s });

  const css = `
  .trk { position: relative; overflow: hidden; background: var(--graphite); color: var(--on-dark); padding: 104px 28px; }
  .trk__mesh { position: absolute; inset: 0; z-index: 0; opacity: 0.9; }
  .trk__wrap { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
  .trk__head { max-width: 660px; margin-bottom: 56px; }
  .trk__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; }
  .trk__title em { font-style: italic; color: var(--amber-light); }
  .trk__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-bottom: 56px;
    border-bottom: 1px solid var(--graphite-line); }
  .trk__lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 56px; }
  .trk__hl { display: flex; flex-direction: column; gap: 16px; }
  .trk__hlrow { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--graphite-line); }
  .trk__hlrow:last-child { border-bottom: 0; }
  .trk__hlrow .ic { width: 38px; height: 38px; border-radius: 9px; background: var(--graphite-3); color: var(--amber-light);
    display: flex; align-items: center; justify-content: center; flex: none; }
  .trk__hlrow h4 { font-weight: 600; font-size: 16px; color: var(--on-dark); margin: 2px 0 4px; }
  .trk__hlrow p { font-size: 14px; line-height: 1.5; color: var(--on-dark-soft); margin: 0; }
  .trk__quote { font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.4;
    letter-spacing: -0.4px; color: var(--on-dark); margin: 0; }
  .trk__byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px; color: var(--on-dark-soft); margin-top: 20px; }
  @media (max-width: 900px) { .trk__stats { grid-template-columns: 1fr 1fr; gap: 32px; } .trk__lower { grid-template-columns: 1fr; } .trk__title { font-size: 34px; } }

  .abt { background: var(--paper-soft); padding: 112px 28px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .abt__wrap { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
  .abt__card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 28px; position: sticky; top: 92px; }
  .abt__name { font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.6px; color: var(--ink); margin: 18px 0 2px; }
  .abt__role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber-deep); }
  .abt__meta { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; padding: 20px 0; border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); }
  .abt__meta div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-body); }
  .abt__meta svg { color: var(--amber); flex: none; }
  .abt__social { display: flex; gap: 10px; }
  /* Настоящие <a> в стиле hp-iconbtn: IconButton из ДС рендерит <button> и не умеет href */
  .abt__social a { width: 40px; height: 40px; display: inline-flex; align-items: center;
    justify-content: center; border: 1px solid var(--hairline); border-radius: var(--radius-full);
    color: var(--ink); transition: var(--transition-control); }
  .abt__social a:visited { color: #1b1813; }
  .abt__social a:hover { border-color: var(--amber); color: var(--amber-deep); }
  .abt__title { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.12; letter-spacing: -0.9px; color: var(--ink); margin: 16px 0 0; }
  .abt__p { font-size: 17px; line-height: 1.62; color: var(--ink-body); margin: 20px 0 0; max-width: 600px; }
  .abt__p strong { color: var(--ink); font-weight: 600; }
  .abt__sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); margin: 40px 0 16px; }
  .abt__tags { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (max-width: 900px) { .abt__wrap { grid-template-columns: 1fr; gap: 32px; } .abt__card { position: static; } .abt__title { font-size: 30px; } }

  .art { background: var(--paper); padding: 112px 28px; }
  .art__wrap { max-width: var(--container); margin: 0 auto; }
  .art__head { max-width: 640px; margin-bottom: 48px; }
  .art__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; }
  .art__sub { font-size: 17px; line-height: 1.6; color: var(--ink-body); margin: 18px 0 0; }
  .art__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .art__date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.8px; color: var(--ink-muted); text-transform: uppercase; }
  .art__ct { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.4px; color: var(--ink); margin: 12px 0 10px; }
  .art__desc { font-size: 14.5px; line-height: 1.55; color: var(--ink-body); margin: 0 0 18px; }
  .art__read { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--amber-deep); text-decoration: none; }
  .art__read:hover { text-decoration: underline; text-underline-offset: 3px; }
  .art__card { display: flex; flex-direction: column; }
  .art__card .art__desc { flex: 1; }
  .art__empty { font-size: 15px; color: var(--ink-muted); border: 1px dashed var(--hairline); border-radius: var(--radius-lg); padding: 36px; text-align: center; }
  @media (max-width: 900px) { .art__grid { grid-template-columns: 1fr; } .art__title { font-size: 34px; } }

  .ct { background: var(--paper); padding: 112px 28px; border-top: 1px solid var(--hairline); }
  .ct__wrap { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  .ct__left { display: flex; flex-direction: column; justify-content: center; padding-right: 24px; }
  .ct__title { font-family: var(--font-serif); font-weight: 400; font-size: 46px; line-height: 1.06; letter-spacing: -1.2px; color: var(--ink); margin: 18px 0 0; }
  .ct__title em { font-style: italic; color: var(--amber-deep); }
  .ct__sub { font-size: 17px; line-height: 1.6; color: var(--ink-body); margin: 20px 0 28px; max-width: 460px; }
  .ct__cal { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--paper-card); border-radius: var(--radius-lg); max-width: 460px; text-decoration: none; }
  .ct__cal:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
  .ct__cal .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--amber); color: var(--on-amber); display: flex; align-items: center; justify-content: center; flex: none; }
  .ct__cal h4 { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--ink); }
  .ct__cal p { margin: 0; font-size: 13px; color: var(--ink-muted); }
  .ct__form { display: flex; flex-direction: column; gap: 16px; }
  .ct__formhead { font-weight: 600; font-size: 18px; color: var(--ink); margin: 0; }
  .ct__success { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0; }
  .ct__success .ok { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); display: flex; align-items: center; justify-content: center; }
  @media (max-width: 900px) { .ct__wrap { grid-template-columns: 1fr; } .ct__left { padding-right: 0; } .ct__title { font-size: 34px; } }
  `;
  if (!document.getElementById("hp-main2-css")) {
    const s = document.createElement("style"); s.id = "hp-main2-css"; s.textContent = css; document.head.appendChild(s);
  }

  function TrackRecord({ t }) {
    return (
      <section className="trk" id="track-record" data-screen-label="Track record">
        <div className="trk__mesh"><MeshBackground variant="dark" density="low" connectionDistance={170} /></div>
        <div className="trk__wrap">
          <div className="trk__head">
            <Overline tone="ondark" rule>{t("trk-overline")}</Overline>
            <h2 className="trk__title">{t("trk-title-pre")}<em>{t("trk-title-em")}</em>{t("trk-title-post")}</h2>
          </div>
          <div className="trk__stats">
            {t("trk-stats").map((s, i) => <Stat key={i} variant="dark" value={s.value} label={s.label} />)}
          </div>
          <div className="trk__lower">
            <div className="trk__hl">
              {t("trk-highlights").map((d, i) => {
                const Icon = I[d.icon] || I.Spark;
                return (
                  <div className="trk__hlrow" key={i}>
                    <div className="ic"><Icon width={20} height={20} /></div>
                    <div>
                      <h4>{d.h}</h4>
                      <p>{d.p}</p>
                    </div>
                  </div>
                );
              })}
            </div>
            <Card variant="dark" padding="lg">
              <I.Quote width={28} height={28} style={{ color: "var(--amber-light)", marginBottom: 16 }} />
              <blockquote className="trk__quote">{t("trk-quote")}</blockquote>
              <div className="trk__byline">{t("trk-byline")}</div>
            </Card>
          </div>
        </div>
      </section>
    );
  }

  const STACK = ["Go", "Python", "TypeScript", "C++", "AWS", "Kubernetes", "Kafka", "NATS", "ClickHouse", "Terraform", "Bedrock", "SageMaker", "LangGraph", "Grafana"];
  const CERTS = ["SAFe® 6 Agilist", "AWS Solutions Architect", "TOGAF® EA Practitioner", "ArchiMate® 3", "CKAD", "Product Metrics & Analytics"];

  function About({ t }) {
    return (
      <section className="abt" id="about" data-screen-label="About">
        <div className="abt__wrap">
          <div className="abt__card">
            <Avatar size="xl" ring="amber" src="img/profile.jpg" alt="Dzmitry Harupa" />
            <div className="abt__name">Dzmitry Harupa</div>
            <div className="abt__role">{t("abt-role")}</div>
            <div className="abt__meta">
              <div><I.MapPin width={18} height={18} />{t("abt-loc")}</div>
              <div><I.Layers width={18} height={18} />{t("abt-years")}</div>
              <div><I.Spark width={18} height={18} />{t("abt-langs")}</div>
            </div>
            <div className="abt__social">
              <a aria-label="LinkedIn" href="https://www.linkedin.com/in/dzmitry-harupa-332131137/" target="_blank" rel="noopener noreferrer"><I.Linkedin width={20} height={20} /></a>
              <a aria-label="Telegram" href="https://t.me/d7561985" target="_blank" rel="noopener noreferrer"><I.Telegram width={20} height={20} /></a>
              <a aria-label="GitHub" href="https://github.com/d7561985" target="_blank" rel="noopener noreferrer"><I.Github width={20} height={20} /></a>
            </div>
          </div>
          <div>
            <Overline rule>{t("abt-overline")}</Overline>
            <h2 className="abt__title">{t("abt-title")}</h2>
            <p className="abt__p" dangerouslySetInnerHTML={html(t("abt-p1"))}></p>
            <p className="abt__p">{t("abt-p2")}</p>
            <div className="abt__sub">{t("abt-stack-sub")}</div>
            <div className="abt__tags">{STACK.map((x, i) => <Tag key={i}>{x}</Tag>)}</div>
            <div className="abt__sub">{t("abt-certs-sub")}</div>
            <div className="abt__tags">{CERTS.map((c, i) => <Badge key={i} variant="outline">{c}</Badge>)}</div>
          </div>
        </div>
      </section>
    );
  }

  function pickLang(field, lang) {
    if (typeof field === "string") return field;
    if (!field) return "";
    return field[lang] || field.en || field.ru || Object.values(field)[0] || "";
  }

  function Articles({ t, lang }) {
    const [posts, setPosts] = useState(null);
    useEffect(() => {
      fetch("articles/manifest.json")
        .then((r) => (r.ok ? r.json() : []))
        .then((list) => setPosts(Array.isArray(list) ? list : []))
        .catch(() => setPosts([]));
    }, []);
    const list = (posts || []).slice().sort((a, b) => (b.date || "").localeCompare(a.date || ""));
    return (
      <section className="art" id="articles" data-screen-label="Articles">
        <div className="art__wrap">
          <div className="art__head">
            <Overline rule>{t("art-overline")}</Overline>
            <h2 className="art__title">{t("art-title")}</h2>
            <p className="art__sub">{t("art-sub")}</p>
          </div>
          {list.length === 0
            ? <div className="art__empty">{t("art-empty")}</div>
            : <div className="art__grid">
                {list.map((p, i) => (
                  <Card key={i} variant="cream" padding="lg" hover className="art__card">
                    <div className="art__date">{p.date}</div>
                    <h3 className="art__ct">{pickLang(p.title, lang)}</h3>
                    <p className="art__desc">{pickLang(p.description, lang)}</p>
                    <a className="art__read" href={"articles/" + encodeURIComponent(p.slug) + (lang !== p.lang && (p.langs || []).indexOf(lang) !== -1 ? "." + lang : "") + ".html?lang=" + lang}>
                      {t("art-read")}<I.Arrow width={15} height={15} />
                    </a>
                  </Card>
                ))}
              </div>}
        </div>
      </section>
    );
  }

  function Contact({ t }) {
    const [sent, setSent] = useState(false);
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [msg, setMsg] = useState("");
    function submit(e) {
      e.preventDefault();
      const body = msg + "\n\n— " + name + (email ? " · " + email : "");
      const href = "mailto:d7561985@gmail.com?subject=" + encodeURIComponent(t("ct-email-subject")) + "&body=" + encodeURIComponent(body);
      window.location.href = href;
      setSent(true);
    }
    return (
      <section className="ct" id="contact" data-screen-label="Contact">
        <div className="ct__wrap">
          <div className="ct__left">
            <Overline rule>{t("ct-overline")}</Overline>
            <h2 className="ct__title">{t("ct-title-pre")}<em>{t("ct-title-em")}</em>{t("ct-title-post")}</h2>
            <p className="ct__sub">{t("ct-sub")}</p>
            <a className="ct__cal" href="https://calendly.com/d7561985/30min" target="_blank" rel="noopener noreferrer">
              <div className="ic"><I.Calendar width={22} height={22} /></div>
              <div>
                <h4>{t("ct-cal-title")}</h4>
                <p>{t("ct-cal-sub")}</p>
              </div>
            </a>
          </div>
          <Card variant="cream" padding="lg">
            {sent
              ? <div className="ct__success">
                  <div className="ok"><I.Check width={26} height={26} /></div>
                  <h3 className="ct__formhead">{t("ct-ok-head")}</h3>
                  <p style={{ margin: 0, color: "var(--ink-body)", fontSize: 15 }}>{t("ct-ok-sub")}</p>
                  <Button variant="secondary" onClick={() => setSent(false)}>{t("ct-again")}</Button>
                </div>
              : <form className="ct__form" onSubmit={submit}>
                  <p className="ct__formhead">{t("ct-form-head")}</p>
                  <Input label={t("ct-name")} placeholder={t("ct-name-ph")} required value={name} onChange={(e) => setName(e.target.value)} />
                  <Input label={t("ct-email")} type="email" placeholder={t("ct-email-ph")} value={email} onChange={(e) => setEmail(e.target.value)} />
                  <Textarea label={t("ct-msg")} placeholder={t("ct-msg-ph")} required value={msg} onChange={(e) => setMsg(e.target.value)} />
                  <Button type="submit" size="lg" fullWidth><I.Mail width={18} height={18} />{t("ct-send")}</Button>
                </form>}
          </Card>
        </div>
      </section>
    );
  }

  Object.assign(window, { HPTrackRecord: TrackRecord, HPAbout: About, HPArticles: Articles, HPContact: Contact });
})();