// home.jsx — Hero + Credo + Education + ProjectsPreview + Connect
const { useEffect: __h_useEffect, useRef: __h_useRef } = React;

// ───────── Hero ─────────

function Hero({ t }) {
  const onScroll = () => {
    const target = document.getElementById("credo");
    if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-text">
          <div className="hero-eyebrow">
            <span className="ticker-divider" />
            <span className="ticker-place">{t.hero.eyebrow}</span>
          </div>

          <h1 className="hero-name">
            <span className="hero-name-l1">{t.hero.nameLine1}</span>
            <span className="hero-name-l2">{t.hero.nameLine2}</span>
          </h1>

          <p className="hero-roles">{t.hero.rolesLine}</p>

          <p className="hero-affiliation">{t.hero.affiliation}</p>

          <button className="hero-scroll" onClick={onScroll} aria-label={t.hero.scroll}>
            <span className="hero-scroll-line" />
            <span>{t.hero.scroll}</span>
          </button>
        </div>

        <div className="hero-portrait">
          <div className="hero-portrait-frame">
            <img src="assets/natalia.png" alt="Natalia Vointseva" />
            <div className="hero-portrait-vignette" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Credo ─────────

function Quote({ t }) {
  const [ref, seen] = window.useInView();
  return (
    <section className={"credo " + (seen ? "is-in" : "")} id="credo" ref={ref}>
      <div className="credo-frame">
        <Kicker>{t.quote.kicker}</Kicker>

        <blockquote className="credo-body">
          <span className="credo-mark" aria-hidden="true">“</span>
          <p>{t.quote.body}</p>
          <span className="credo-mark credo-mark--close" aria-hidden="true">”</span>
        </blockquote>

        <figcaption className="credo-attribution">
          <span className="credo-author">— {t.quote.author}</span>
          <span className="credo-author-detail">{t.quote.authorDetail}</span>
        </figcaption>

        <div className="credo-ornament" aria-hidden="true">
          <svg viewBox="0 0 80 8" width="80" height="8">
            <line x1="0" y1="4" x2="30" y2="4" stroke="currentColor" strokeWidth="0.6" />
            <circle cx="40" cy="4" r="2" stroke="currentColor" strokeWidth="0.6" fill="none" />
            <line x1="50" y1="4" x2="80" y2="4" stroke="currentColor" strokeWidth="0.6" />
          </svg>
        </div>
      </div>
    </section>
  );
}

// ───────── Education ─────────

function Education({ t }) {
  const [ref, seen] = window.useInView(0.05);
  return (
    <section className={"education " + (seen ? "is-in" : "")} id="education" ref={ref}>
      <div className="education-grid">
        <aside className="education-side">
          <Kicker>{t.education.kicker}</Kicker>
          <SectionTitle text={t.education.title} />
          <p className="education-lede">{t.education.lede}</p>
        </aside>

        <ol className="education-list">
          {t.education.items.map((item, i) => (
            <li
              key={i}
              className="edu-item"
              style={{ transitionDelay: seen ? `${i * 60}ms` : "0ms" }}
            >
              <div className="edu-item-body">
                <span className="edu-item-tag">{item.tag}</span>
                <h3 className="edu-item-inst">{item.inst}</h3>
                <p className="edu-item-prog">{item.prog}</p>
              </div>
              <span className="edu-item-rule" />
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ───────── Projects preview (on home page) ─────────

function ProjectsPreview({ t }) {
  const [ref, seen] = window.useInView(0.06);
  return (
    <section className={"projects " + (seen ? "is-in" : "")} id="projects" ref={ref}>
      <div className="projects-grid">
        <aside className="projects-side">
          <Kicker>{t.projects.kicker}</Kicker>
          <SectionTitle text={t.projects.title} />
          <p className="projects-lede">{t.projects.lede}</p>
        </aside>

        <ol className="projects-list">
          {t.projects.list.map((p, i) => (
            <li key={p.id} style={{ transitionDelay: seen ? `${i * 80}ms` : "0ms" }}>
              <a className="proj-card" href={"#/projects/" + p.id}>
                <span className={"proj-card-thumb proj-card-thumb--" + p.id}>
                  <ProjThumb id={p.id} />
                </span>
                <div className="proj-card-body">
                  <span className="proj-card-tag">{p.tag}</span>
                  <h3 className="proj-card-name">{p.name}</h3>
                  <p className="proj-card-short">{p.short}</p>
                  <span className="proj-card-cta">
                    {t.projects.readMore}
                    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
                      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </div>
              </a>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function ProjThumb({ id }) {
  if (id === "moi-dedans") {
    return <img src="assets/moi-dedans/flatlay-roses-2.jpg" alt="" />;
  }
  if (id === "catzpacho") {
    // Telegram channel profile photo (t.me/catzpacho), fetched 2026-05-19.
    return <img src="assets/catzpacho.jpg" alt="" />;
  }
  if (id === "otvetno") {
    // Telegram channel profile photo (t.me/otvetno), fetched 2026-05-19.
    return <img src="assets/otvetno.jpg" alt="" />;
  }
  return null;
}

// ───────── Connect ─────────

const ICONS = {
  Vimeo: (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="currentColor">
      <path d="M23.9 6.9c-.1 2.4-1.8 5.6-5 9.7-3.4 4.3-6.3 6.4-8.6 6.4-1.5 0-2.7-1.4-3.7-4.1L4.6 12c-.7-2.7-1.5-4.1-2.4-4.1-.2 0-.8.4-2 1.1L0 7.4c1.3-1.2 2.6-2.3 3.9-3.5 1.7-1.5 3-2.3 3.9-2.4 2-.2 3.3 1.2 3.7 4.3.5 3.3.8 5.3 1 6 .6 2.6 1.2 3.9 1.9 3.9.5 0 1.4-.9 2.5-2.6 1.1-1.7 1.7-3 1.8-3.9.1-1.5-.5-2.2-1.8-2.2-.6 0-1.2.1-1.9.4 1.2-4 3.6-6 7-5.9 2.6 0 3.8 1.7 3.6 5.1z" />
    </svg>
  ),
  Teletype: (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.4">
      <rect x="3.5" y="6" width="17" height="13" rx="1.2" />
      <path d="M7 10h10M7 13h10M7 16h6" strokeLinecap="round" />
    </svg>
  ),
  Substack: (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="currentColor">
      <path d="M5 4h14v2.5H5zM5 8.5h14v2.5H5zM5 13h14v8l-7-3.5L5 21z" />
    </svg>
  ),
  Telegram: (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="currentColor">
      <path d="M21.5 4 2.7 11.2c-1 .4-1 1.7 0 2L8 14.8l2 6.3c.3.9 1.4 1.1 2 .4l3-3.4 5.2 3.8c.9.6 2 .1 2.2-.9l3-15.4c.2-1.2-1-2.1-2.1-1.6zm-3.5 4.5-8 7.3-.5 4-2-5.4 10.5-5.9z" />
    </svg>
  ),
};

function Connect({ t }) {
  const [ref, seen] = window.useInView(0.1);
  const listRef = __h_useRef(null);

  const handleClick = () => {
    if (listRef.current) {
      listRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <section className={"connect " + (seen ? "is-in" : "")} id="connect" ref={ref}>
      <div className="connect-frame">
        <Kicker>{t.connect.kicker}</Kicker>

        <div className="connect-stage">
          <SectionTitle text={t.connect.title} />

          <button className="connect-handle" onClick={handleClick} aria-label={t.connect.handle}>
            <span className="connect-handle-at">@</span>
            <span className="connect-handle-name">voinatale</span>
            <svg className="connect-handle-arrow" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
              <path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          <p className="connect-handle-sub">{t.connect.handleSub}</p>
        </div>

        <ul className="connect-links" ref={listRef}>
          {t.connect.links.map((l, i) => (
            <li key={i}>
              <a href={l.href} target="_blank" rel="noreferrer">
                <span className="connect-link-icon">{ICONS[l.label]}</span>
                <span className="connect-link-label">{l.label}</span>
                <span className="connect-link-note">{l.note}</span>
                <span className="connect-link-arrow" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="14" height="14">
                    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ───────── Home page ─────────

function HomePage({ t }) {
  return (
    <>
      <Hero t={t} />
      <Quote t={t} />
      <Education t={t} />
      <ProjectsPreview t={t} />
      <Connect t={t} />
    </>
  );
}

Object.assign(window, { Hero, Quote, Education, ProjectsPreview, Connect, HomePage, ICONS });