// Projects — 5 cards in 2 symmetric groups.
// Flagship is marked only by a 2px copper line on top.
function Projects({ onNav }) {
  const cards = {
    yoolipAI: {
      n: "01",
      title: ["Yoolip AI"],
      tags: "SaaS · AI · Ozon · WB",
      desc: "SaaS для аналитики маркетплейсов. 700+ магазинов, написан на Claude Code за 58 дней.",
      status: { tone: "yoolip", label: "SaaS продукт" },
      href: "https://yoolip.ai",
      screenshot: "assets/screen-yoolip-ai.webp",
      visual: "yoolip-ai",
      flagship: true,
    },
    yoolipAgency: {
      n: "02",
      title: ["Yoolip", "Агентство"],
      tags: "Agency · Ads · Ozon",
      desc: "Управление рекламой на маркетплейсах. Не консалтинг — берём магазин и работаем с ним.",
      status: { tone: "copper", label: "Услуги" },
      href: "https://yoolip.ru",
      screenshot: "assets/screen-yoolip-agency.webp",
      visual: "yoolip-agency",
      flagship: false,
    },
    yoolipFf: {
      n: "03",
      title: ["Yoolip", "Фулфилмент"],
      tags: "Fulfillment · Logistics",
      desc: "Склад и логистика для селлеров маркетплейсов. Принимаем, упаковываем, отправляем.",
      status: { tone: "copper", label: "Услуги" },
      href: "https://yoolip.ru",
      screenshot: "assets/screen-yoolip-ff.webp",
      visual: "yoolip-ff",
      flagship: false,
    },
    systemLaunch: {
      n: "04",
      title: ["Запуск", "Система Райта"],
      tags: "Education · AI · Claude · MCP",
      desc: "Обучение моей AI-системе. Раз в неделю — реальные промты, рабочие файлы, разборы. Не для тех, кто впервые слышит про промт.",
      status: { tone: "copper", label: "Онлайн-обучение" },
      href: "https://romarayt.ru/system",
      screenshot: "assets/screen-system-launch.webp",
      visual: "system-launch",
      flagship: true,
    },
    systemFree: {
      n: "05",
      title: ["Сообщество", "Система Райта"],
      tags: "Community · Free · Closed",
      desc: "Закрытое сообщество. Бесплатно. AI-практики, селлеры, продакты — без бот-флуда.",
      status: { tone: "muted", label: "Бесплатное сообщество" },
      href: "https://l.salebot.pro/ba41cf74704f",
      placeholder: "коллаж аватаров · комьюнити",
      visual: "system-free",
      flagship: false,
    },
  };

  return (
    <section id="projects" className="section section--projects" data-screen-label="projects">
      <div className="container">
        <header className="projects-head">
          <h2 className="projects-head__title">Проекты<span className="dot">.</span></h2>
          <div className="projects-head__meta">01 / Что я делаю прямо сейчас</div>
        </header>

        {/* Group 1 — Yoolip */}
        <div className="projects-group">
          <div className="projects-group__head">
            <h3 className="projects-group__name">
              Yoolip <span className="sep">/</span> e-commerce стек для селлеров
            </h3>
            <div className="projects-group__count">3 проекта</div>
          </div>

          <div className="projects-grid projects-grid--3up">
            <ProjectCard card={cards.yoolipAI} visualRatio="4-3" />
            <ProjectCard card={cards.yoolipAgency} visualRatio="4-3" />
            <ProjectCard card={cards.yoolipFf} visualRatio="4-3" />
          </div>
        </div>

        {/* Group 2 — Система Райта */}
        <div className="projects-group">
          <div className="projects-group__head">
            <h3 className="projects-group__name">
              Система Райта <span className="sep">/</span> AI и обучение
            </h3>
            <div className="projects-group__count">2 проекта</div>
          </div>

          <div className="projects-grid projects-grid--2up">
            <ProjectCard card={cards.systemLaunch} visualRatio="16-10" />
            <ProjectCard card={cards.systemFree} visualRatio="16-10" />
          </div>
        </div>

        <a href="#manifest" className="projects-foot"
           onClick={(e)=>{ e.preventDefault(); onNav("manifest"); }}>
          <span className="projects-foot__num">01</span>
          <span className="projects-foot__label">читать манифест</span>
          <Icon name="arrow" size={16}/>
        </a>
      </div>
    </section>
  );
}

function ProjectCard({ card, visualRatio }) {
  const isExternal = card.href.startsWith("http");
  const cls = [
    "project-card",
    card.flagship ? "project-card--flagship" : "",
  ].filter(Boolean).join(" ");

  return (
    <a href={card.href}
       className={cls}
       target={isExternal ? "_blank" : undefined}
       rel={isExternal ? "noopener noreferrer" : undefined}>
      {card.flagship && <span className="project-card__flag" aria-hidden="true" />}

      <article className="project-card__inner">
        <div className={"project-card__visual project-card__visual--" + card.visual + " ratio-" + visualRatio + (card.screenshot ? " has-shot" : "")}>
          {card.screenshot ? (
            <img className="project-card__shot" src={card.screenshot} alt={card.title.join(" ")} width="1600" height="833" loading="lazy" decoding="async" />
          ) : (
            <div className="project-card__visual-bg" aria-hidden="true" />
          )}
          {!card.screenshot && card.placeholder && (
            <div className="project-card__visual-label">{card.placeholder}</div>
          )}
        </div>

        <div className="project-card__body">
          <div className="project-card__meta">
            <span className="project-card__num">Project /{card.n}</span>
          </div>

          <div className="project-card__rule" aria-hidden="true" />

          <div className="project-card__title-row">
            <h4 className="project-card__title">
              {card.title.map((line, i) => (
                <span key={i} className="project-card__title-line">{line}</span>
              ))}
            </h4>
            <span className="project-card__arrow" aria-hidden="true">
              <Icon name="arrow" size={20}/>
            </span>
          </div>

          <p className="project-card__desc">{card.desc}</p>

          <div className={"project-card__status project-card__status--" + card.status.tone}>
            <span className="project-card__dot" aria-hidden="true"></span>
            {card.status.label}
          </div>
        </div>
      </article>
    </a>
  );
}

window.Projects = Projects;
window.ProjectCard = ProjectCard;