/* ===== Home ===== */

/* faint background scenes for the what-is cards (flat outline, currentColor, low opacity via .card-motif) */
const MotifProgram = () => (
  <svg className="card-motif" width="360" height="208" viewBox="0 0 360 208" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
    {/* floating interface windows + connecting wires */}
    <rect x="58" y="14" width="64" height="44" rx="4" />
    <path d="M58 26 H122 M68 38 H104 M68 47 H92" />
    <rect x="148" y="6" width="56" height="40" rx="4" />
    <path d="M148 18 H204 M158 30 H188" />
    <rect x="230" y="16" width="62" height="42" rx="4" />
    <path d="M230 28 H292 M240 40 H276" />
    <g strokeDasharray="2 6" opacity="0.7"><path d="M90 58 V84 M176 46 V80 M261 58 V84" /></g>
    {/* desk */}
    <path d="M12 174 H348" />
    {/* a row of builders with laptops */}
    {[34, 116, 198, 280].map((x, i) => (
      <g key={i} transform={`translate(${x} 0)`}>
        <circle cx="22" cy="116" r="12" />
        <path d="M4 174 C4 144 40 144 40 174" />
        <path d="M8 174 L12 156 H32 L36 174 Z" />
        <path d="M12 156 H32" />
      </g>
    ))}
  </svg>
);
const MotifCommunity = () => (
  <svg className="card-motif" width="296" height="206" viewBox="0 0 296 206" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
    <g opacity="0.6"><path d="M52 70 L132 44 L212 78 L152 128 L52 70 M132 44 L152 128 M212 78 L248 150 L152 128 M52 70 L100 160 L152 128 M100 160 L248 150" /></g>
    {[[52, 70], [132, 44], [212, 78], [152, 128], [100, 160], [248, 150], [44, 150]].map(([x, y], i) => (
      <g key={i} transform={`translate(${x} ${y})`} fill="currentColor" stroke="none">
        <circle cx="0" cy="-4" r="5.4" />
        <path d="M-9 12 a9 10 0 0 1 18 0 Z" />
      </g>
    ))}
    <g>
      <rect x="166" y="18" width="38" height="25" rx="6" />
      <path d="M177 43 V51 L186 43" />
      <path d="M174 28 H196 M174 35 H187" strokeWidth="1.5" />
    </g>
  </svg>
);
const MotifProducts = () => (
  <svg className="card-motif" width="286" height="216" viewBox="0 0 286 216" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
    {[[14, 96], [66, 54], [118, 12]].map(([x, y], i) => (
      <g key={i} transform={`translate(${x} ${y})`}>
        <rect x="0" y="0" width="152" height="106" rx="6" fill="var(--bg-2)" />
        <path d="M0 22 H152" />
        <g fill="currentColor" stroke="none"><circle cx="14" cy="11" r="2.4" /><circle cx="24" cy="11" r="2.4" /><circle cx="34" cy="11" r="2.4" /></g>
        <rect x="14" y="36" width="46" height="48" rx="3" />
        <path d="M74 38 H138 M74 50 H120 M74 62 H132 M74 74 H106" />
      </g>
    ))}
  </svg>
);

/* barrier illustrations */
const CrowdArt = () => {
  const [ref, inView] = useInView({ threshold: 0.25 });
  const pts = [
    [40, 44, 0.9], [78, 38, 1], [116, 44, 0.9], [154, 38, 0.85], [192, 46, 0.8], [230, 40, 0.7],
    [22, 84, 0.85], [60, 80, 1], [98, 86, 0.95], [136, 80, 0.9], [174, 86, 0.85], [212, 82, 0.75], [248, 86, 0.65],
    [44, 120, 0.8], [82, 116, 0.9], [120, 122, 0.85], [158, 116, 0.8], [196, 122, 0.7],
  ];
  /* reveal bottom-to-top: rank figures by descending y so lower rows come first */
  const order = pts.map((_, i) => i).sort((a, b) => pts[b][1] - pts[a][1]);
  const rank = {}; order.forEach((idx, r) => { rank[idx] = r; });
  return (
    <div ref={ref} className={"ba-art" + (inView ? " in" : "")}>
      <svg width="280" height="150" viewBox="0 0 280 150" fill="#C44536" stroke="none">
        {pts.map(([x, y, o], i) => (
          <g key={i} transform={`translate(${x} ${y}) scale(0.92)`}>
            <g className="crowd-fig" style={{ "--o": o * 0.85, "--i": rank[i] }}>
              <circle cx="0" cy="0" r="5" />
              <path d="M-9 18 a9 11 0 0 1 18 0 Z" />
            </g>
          </g>
        ))}
      </svg>
    </div>
  );
};
const SoloArt = () => {
  const [ref, inView] = useInView({ threshold: 0.25 });
  return (
    <div ref={ref} className={"ba-art" + (inView ? " in" : "")}>
      <svg className="solo-art" width="280" height="160" viewBox="0 0 280 160" fill="none">
        <g className="solo-fig" fill="#C44536" stroke="none">
          <circle cx="52" cy="90" r="13" />
          <path d="M30 150 C 30 108 74 108 74 150 Z" />
        </g>
        <g>
          <rect x="116" y="34" width="150" height="104" rx="8" fill="#1a130d" stroke="#D85B43" strokeWidth="2" />
          <rect x="116" y="34" width="150" height="18" rx="8" fill="#241811" />
          <g fill="#C44536"><circle cx="130" cy="43" r="2.4" /><circle cx="140" cy="43" r="2.4" /><circle cx="150" cy="43" r="2.4" /></g>
          <rect x="132" y="68" width="118" height="40" rx="4" fill="#C44536" opacity="0.28" />
          <rect x="132" y="116" width="70" height="9" rx="3" fill="#E8973F" opacity="0.6" />
        </g>
        <path d="M78 120 L116 108" stroke="#C44536" strokeWidth="1.6" strokeDasharray="2 7" opacity="0.6" />
      </svg>
    </div>
  );
};

function HomePage() {
  return (
    <div>
      {/* HERO */}
      <header className="hero">
        <div className="hero-grid" />
        <HeroSky />
        <Mountains />
        <div className="wrap hero-body">
          <div className="hero-row">
            <h1 className="hero-title reveal d2">Время<br /><span className="stroke">строить.</span></h1>
            <div className="hero-aside reveal d3">
              <p className="hero-sub">AI-компания из Дагестана. Запускаем свои продукты и помогаем другим выпустить первые.</p>
            </div>
          </div>
          <div className="hero-actions reveal d4">
            <a className="btn-primary" href="#/products">Что мы строим <Arrow s={18} /></a>
            <a className="btn-text" href="#/apply">Подать заявку <Arrow s={16} /></a>
          </div>
        </div>
      </header>

      <Ornament />

      {/* ЧТО ТАКОЕ SORGENT — three parts */}
      <section className="sec alt">
        <div className="wrap">
          <div className="sec-head">
            <h2 className="sec-title">Что такое Sorgent?</h2>
            <p className="sec-lead">Программа на 3 недели. Сообщество, которое остаётся. Продукты, которые работают.</p>
          </div>
          <div className="what-grid">
            <a className="card lg" href="#/builders">
              <div className="card-head">
                <span className="card-idx">01 — ПРОГРАММА</span>
                <span className="card-ic"><IcTool s={48} /></span>
              </div>
              <div className="card-body">
                <h3>Программа Builders</h3>
                <p>3 недели. На выходе — твой первый рабочий продукт в интернете.</p>
              </div>
              <span className="card-more">Как присоединиться <Arrow s={14} /></span>
              <MotifProgram />
            </a>
            <div className="what-col">
              <a className="card sm" href="#/community">
                <div className="card-head">
                  <span className="card-idx">02 — СООБЩЕСТВО</span>
                  <span className="card-ic"><IcCommunity s={34} /></span>
                </div>
                <div className="card-body">
                  <h3>Sorgent Community</h3>
                  <p>Закрытый чат, оффлайн-встречи, совместные запуски. То, что начинается на программе, продолжается годами.</p>
                </div>
                <span className="card-more">Про сообщество <Arrow s={14} /></span>
                <MotifCommunity />
              </a>
              <a className="card sm" href="#/products">
                <div className="card-head">
                  <span className="card-idx">03 — ПРОДУКТЫ</span>
                  <span className="card-ic"><IcProjects s={34} /></span>
                </div>
                <div className="card-body">
                  <h3>Sorgent Products</h3>
                  <p>Свои AI-продукты, которыми сами пользуемся каждый день. Опыт от тех, кто в проде.</p>
                </div>
                <span className="card-more">Наши продукты <Arrow s={14} /></span>
                <MotifProducts />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* МАНИФЕСТ — barrier card */}
      <section className="manifest">
        <div className="wrap">
          <div className="barrier-head">
            <div className="barrier-head-copy">
              <span className="rubric">Сейчас твой момент</span>
              <h2 className="barrier-title">Барьер<br /><span className="stroke">исчез.</span></h2>
              <p className="barrier-lead">Чтобы запустить продукт, раньше нужна была целая команда. Сегодня хватает одного человека с идеей.</p>
            </div>
            <Illo video="illo-chaos-solo.mp4" src="illo-chaos-solo.png" alt="Хаос толпы и один создатель, идущий вверх" max={440} anim="right" />
          </div>

          <div className="barrier-card">
            <div className="ba-col">
              <div className="ba-era">
                <span className="ba-era-num">/01</span>
                <span className="ba-era-lab">Раньше</span>
              </div>
              <CrowdArt />
              <p>Деньги, большая команда и месяцы работы. Чтобы собрать продукт, нужна была <b>толпа людей</b> и долгий путь.</p>
            </div>
            <div className="ba-col now">
              <div className="ba-era now">
                <span className="ba-era-num">/02</span>
                <span className="ba-era-lab">Сейчас</span>
              </div>
              <SoloArt />
              <p>Ноутбук, идея и желание попробовать. AI — инструмент, которым <b>один человек собирает большой продукт</b>.</p>
            </div>
          </div>

          <p className="barrier-final">
            <span className="bf-line1">Идея у тебя уже есть.</span>
            <br />
            <span className="bf-line2">Не хватает только <span className="hl">людей рядом</span> — и <span className="hl">трёх недель</span>, чтобы не бросить.</span>
          </p>
        </div>
      </section>
    </div>
  );
}
window.HomePage = HomePage;