/* ===== Community ===== */
const COMMUNITY = {
  cards: [
    { title: "Общий чат", desc: "Все участники — в одном Telegram-чате. Делятся прогрессом, спрашивают, дают друг другу обратную связь каждый день." },
    { title: "Офлайн-встречи", desc: "Регулярно собираемся вживую — каждый занят своим проектом, но плечом к плечу. Обсуждаем идеи и помогаем с конкретными задачами." },
    { title: "Поддержка команды Sorgent", desc: "Мы рядом и после старта: разбираем сложные ситуации, делимся инструментами и контактами." },
    { title: "Showcase проектов", desc: "Готовый продукт попадает в раздел проектов на сайте — его видят гости, первые пользователи и те, кто придёт следом." },
    { title: "Совместные запуски", desc: "Люди с разными навыками объединяются и запускают новое вместе. Команды рождаются прямо внутри сообщества." },
    { title: "Сцена, которая растёт", desc: "Каждый новый человек делает окружение сильнее. Через год это уже не несколько знакомых, а заметная сцена создателей." },
  ],
  vision: [
    { ic: <IcTool s={26} />, t: "Build Nights", when: "Регулярно", d: "Вечера, когда собираемся и просто делаем — каждый своё, но не в одиночку." },
    { ic: <IcFlag s={26} />, t: "Demo Days", when: "Раз в сезон", d: "Показываем готовые продукты публике. Идея перестаёт быть идеей." },
    { ic: <IcCommunity s={26} />, t: "Совместные проекты", when: "Внутри сообщества", d: "Объединяемся по навыкам и запускаем новое вместе." },
    { ic: <IcProjects s={26} />, t: "Новые стартапы", when: "Долгая игра", d: "Из сообщества вырастают продукты, которыми пользуются люди." },
  ],
  mantras: [
    ["Ship fast.", "Выпускай быстро"],
    ["Done > perfect.", "Сделано важнее идеального"],
    ["Build publicly.", "Делай на публике"],
    ["Launch, then iterate.", "Сначала запусти"],
    ["Ты — создатель.", "Не зритель"],
  ],
};

/* faint background scene: many builders around a shared table (flat, currentColor) */
const Seat = ({ x, y, side }) => (
  <g transform={`translate(${x} ${y})`} fill="currentColor" stroke="none">
    <circle cx="0" cy="0" r="16" />
    {side === "top"
      ? <path d="M-19 32 C -19 11 19 11 19 32 Z" />
      : <path d="M-19 -32 C -19 -11 19 -11 19 -32 Z" />}
  </g>
);
const Laptop = ({ x, y }) => (
  <g transform={`translate(${x} ${y})`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
    <rect x="-26" y="-16" width="52" height="32" rx="3" />
    <line x1="-26" y1="-6" x2="26" y2="-6" />
  </g>
);
const Bubble = ({ x, y }) => (
  <g transform={`translate(${x} ${y})`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
    <rect x="0" y="0" width="46" height="30" rx="8" />
    <path d="M12 30 V40 L24 30" />
    <path d="M11 11 H35 M11 19 H27" strokeWidth="1.6" />
  </g>
);
const BuildersTable = () => {
  const top = [300, 430, 560, 690, 820, 950];
  const bot = [365, 495, 625, 755, 885];
  return (
    <svg className="builders-table" viewBox="0 0 1240 480" fill="none" aria-hidden="true">
      {/* shared table */}
      <rect x="232" y="186" width="776" height="116" rx="24" stroke="currentColor" strokeWidth="2.4" opacity="0.7" />
      {/* conversation lines across the table */}
      <g stroke="currentColor" strokeWidth="1.5" strokeDasharray="2 8" opacity="0.5">
        <path d="M300 150 C 420 80 540 80 625 116" />
        <path d="M820 150 C 720 90 660 90 625 116" />
        <path d="M495 332 C 600 380 720 380 820 332" />
      </g>
      {/* people + laptops, top side */}
      {top.map((x, i) => (
        <g key={"t" + i}>
          <Seat x={x} y={132} side="top" />
          <Laptop x={x} y={210} />
        </g>
      ))}
      {/* people + laptops, bottom side */}
      {bot.map((x, i) => (
        <g key={"b" + i}>
          <Seat x={x} y={348} side="bot" />
          <Laptop x={x} y={272} />
        </g>
      ))}
      {/* ends of the table */}
      <Seat x={196} y={244} side="bot" /><Laptop x={262} y={244} />
      <Seat x={1044} y={244} side="bot" /><Laptop x={978} y={244} />
      {/* a few speech bubbles */}
      <Bubble x={356} y={56} /><Bubble x={764} y={60} /><Bubble x={620} y={392} />
    </svg>
  );
};

function CommunityPage() {
  return (
    <div>
      <MiniHero
        rubric="Sorgent Community"
        title={<React.Fragment>Наша<br /><span className="stroke">среда.</span></React.Fragment>}
        sub="Место, где люди с идеями работают бок о бок. Мы только запускаем сообщество — и ты можешь быть в первой волне."
        art={<Illo video="illo-table.mp4" src="illo-table.png" alt="Создатели за общим столом" max={520} anim="right" delay={0.2} />}
      />

      <section className="sec">
        <div className="wrap">
          <div className="sec-head">
            <h2 className="sec-title">Что даёт сообщество</h2>
            <p className="sec-lead">Программа — это только вход. Главное начинается рядом с людьми и продолжается годами.</p>
          </div>
          <div className="dir-grid">
            {COMMUNITY.cards.map((c, i) => (
              <div className="dir" key={i}>
                <span className="dn">{["I", "II", "III", "IV", "V", "VI"][i]}</span>
                <h4>{c.title}</h4>
                <p>{c.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* long-term vision */}
      <section className="vision sec alt" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <span className="rubric" style={{ marginBottom: 20, display: "inline-flex" }}>Долгая игра</span>
          <h2 className="sec-title" style={{ marginBottom: 8 }}>Куда движется Sorgent</h2>
          <div className="vision-grid" style={{ marginTop: 48 }}>
            {COMMUNITY.vision.map((v, i) => (
              <div className="vision-item" key={i}>
                <div className="vi-top">
                  <span className="vi-ic">{v.ic}</span>
                  <h4>{v.t}</h4>
                  <span className="when">{v.when}</span>
                </div>
                <p>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Phrase */}
      <section className="sec">
        <div className="wrap">
          <span className="rubric" style={{ marginBottom: 36, display: "inline-flex" }}>Во что мы верим</span>
          <p className="phrase">Среда решает больше, <span className="hl">чем талант</span> в одиночку.</p>
        </div>
      </section>

      {/* Mantras */}
      <section className="sec alt">
        <div className="wrap">
          <span className="rubric" style={{ marginBottom: 20, display: "inline-flex" }}>// что мы повторяем</span>
          <h2 className="sec-title" style={{ marginBottom: 44 }}>5 фраз, на которых мы держимся</h2>
          <div className="mantra-grid">
            {COMMUNITY.mantras.map(([p, e], i) => (
              <div className="mantra" key={i}><p className="mp">{p}</p><p className="me">{e}</p></div>
            ))}
          </div>
        </div>
      </section>

      {/* closing scene — builders around one table */}
      <section className="community-scene">
        <BuildersTable />
        <div className="wrap cs-inner">
          <span className="rubric">Sorgent Community</span>
          <h2 className="cs-title">Один стол.<br /><span className="hl">Много рук.</span></h2>
        </div>
      </section>
    </div>
  );
}
window.CommunityPage = CommunityPage;

/* ===== Showcase ===== */
function ShowcasePage() {
  return (
    <div>
      <MiniHero
        rubric="Проекты"
        title={<React.Fragment>Что здесь<br /><span className="stroke">создают.</span></React.Fragment>}
        sub="Здесь будут жить рабочие продукты, которые участники Sorgent довели до запуска."
      />
      <section className="sec">
        <div className="wrap">
          <div className="showcase-art">
            <Illo video="illo-showcase.mp4" src="illo-showcase.png" alt="Создатели Sorgent за работой" max={700} anim="up" delay={0.15} />
          </div>
          <div className="empty">
            <div className="ic"><IcCompass s={52} /></div>
            <h3>Скоро здесь появятся первые проекты</h3>
            <p>Первые участники ещё в процессе. Когда они закончат — их сайты, AI-ассистенты и MVP появятся тут с реальными ссылками.</p>
            <a className="btn-text" href="#/community" style={{ margin: "0 auto" }}>Как устроено сообщество <Arrow s={16} /></a>
          </div>
        </div>
      </section>
    </div>
  );
}
window.ShowcasePage = ShowcasePage;