/* Octomatica — content sections */

function SectionHead({ data, center }) {
  return (
    <div className={"section-head reveal " + (center ? "center" : "")}>
      <span className="eyebrow">{data.label}</span>
      <h2 className="h-sec">{data.title}</h2>
      {data.desc && <p className="lead">{data.desc}</p>}
    </div>
  );
}

/* ====== Capabilities ====== */
function Capabilities() {
  const d = window.OCTO.capabilities;
  const [active, setActive] = React.useState(0);
  const it = d.items[active];
  return (
    <section className="section" id="capabilities">
      <div className="wrap wrap-wide">
        <SectionHead data={d} />
        <div className="cap-layout">
          <div className="cap-list reveal" data-d="1">
            {d.items.map((c, i) => (
              <button key={c.key} className={"cap-tab " + (i === active ? "on" : "")}
                onClick={() => setActive(i)} style={{ "--hue": `var(${c.color})` }}>
                <span className="cap-tab-ic"><Icon name={c.icon} size={20} /></span>
                <span className="cap-tab-title">{c.title}</span>
                <span className="cap-tab-chev"><Icon name="chev" size={16} /></span>
              </button>
            ))}
          </div>
          <div className="cap-panel card" key={active} style={{ "--hue": `var(${it.color})` }}>
            <div className="cap-panel-top">
              <span className="cap-panel-ic"><Icon name={it.icon} size={26} /></span>
              <h3 className="cap-panel-title">{it.title}</h3>
            </div>
            <ul className="cap-bullets">
              {it.bullets.map((b, i) => (
                <li key={i}><span className="cap-bdot"><Icon name="check" size={12} stroke={2.6} /></span>{b}</li>
              ))}
            </ul>
            <div className="cap-example">
              <div className="cap-example-metric">{it.metric}</div>
              <p className="cap-example-desc">{it.example}</p>
            </div>
            <div className="cap-benefit"><Icon name="spark" size={15} />{it.benefit}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== How it works ====== */
function HowItWorks() {
  const d = window.OCTO.how;
  return (
    <section className="section how" id="how">
      <div className="wrap wrap-wide">
        <SectionHead data={d} center />
        <div className="how-steps">
          {d.steps.map((s, i) => (
            <div className="how-step reveal card card-hover" data-d={i + 1} key={i}>
              <div className="how-n">{s.n}</div>
              <h3 className="how-step-title">{s.title}</h3>
              <p className="how-step-desc muted">{s.desc}</p>
              {i < d.steps.length - 1 && <div className="how-connector" aria-hidden="true"><Icon name="arrow" size={18} /></div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== Self-healing proof ====== */
function SelfHealing() {
  const d = window.OCTO.selfheal;
  return (
    <section className="section selfheal">
      <div className="wrap wrap-wide selfheal-grid">
        <div className="selfheal-copy">
          <SectionHead data={{ label: d.label, title: d.title, desc: d.desc }} />
        </div>
        <div className="selfheal-log reveal card" data-d="1">
          <div className="log-head">
            <span className="log-dots"><i/><i/><i/></span>
            <span className="log-title">octomatica · ops</span>
            <span className="pill" style={{ marginLeft:"auto" }}><span className="pill-dot live"/>live</span>
          </div>
          <div className="log-body">
            {d.log.map((l, i) => (
              <div className={"log-row reveal k-" + l.k} data-d={i + 1} key={i}>
                <span className="log-t">{l.t}</span>
                <span className="log-line"><span className={"log-badge b-" + l.k}/>{l.s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====== Field stories ====== */
function Stories() {
  const d = window.OCTO.stories;
  return (
    <section className="section stories" id="stories">
      <div className="wrap wrap-wide">
        <SectionHead data={d} />
        <div className="stories-grid">
          {d.items.map((s, i) => (
            <article className="story card card-hover reveal" data-d={(i % 3) + 1} key={i} style={{ "--hue": `var(${s.hue})` }}>
              <div className="story-metric"><span className="story-dot"/>{s.metric}</div>
              <h3 className="story-title">{s.title}</h3>
              <p className="story-desc muted">{s.desc}</p>
              <blockquote className="story-quote">«{s.quote}»</blockquote>
              <div className="story-who">
                <span className="story-av" style={{ background:`var(${s.hue})` }}>{s.person[0]}</span>
                <span className="story-who-meta">
                  <strong>{s.person}</strong>
                  <span>{s.role}{s.company ? ` · ${s.company}` : ""}</span>
                </span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== Comparison ====== */
function Comparison() {
  const d = window.OCTO.compare;
  return (
    <section className="section compare">
      <div className="wrap wrap-wide">
        <SectionHead data={{ label: d.label, title: d.title, desc: d.sub }} center />
        <div className="compare-table reveal" data-d="1">
          <div className="compare-col-head them">Чаты и конструкторы</div>
          <div className="compare-col-head us"><Octo kind="center" size={26} /> Octomatica</div>
          {d.rows.map((r, i) => (
            <React.Fragment key={i}>
              <div className="compare-cell them"><span className="compare-x">✕</span>{r.them}</div>
              <div className="compare-cell us"><span className="compare-c"><Icon name="check" size={13} stroke={2.6} /></span>{r.us}</div>
            </React.Fragment>
          ))}
        </div>
        <p className="compare-punch reveal" data-d="2">{d.punch}</p>
        {d.cta && (
          <div className="compare-cta reveal" data-d="3">
            <a href={d.cta.href} className="btn btn-soft btn-lg">{d.cta.text}<Icon name="arrow" size={18} /></a>
          </div>
        )}
      </div>
    </section>
  );
}

/* ====== Use cases grid ====== */
function Cases() {
  const d = window.OCTO.cases;
  return (
    <section className="section">
      <div className="wrap wrap-wide">
        <SectionHead data={d} />
        <div className="cases-grid">
          {d.items.map((c, i) => (
            <div className="case card card-hover reveal" data-d={(i % 3) + 1} key={i} style={{ "--hue": `var(${c.hue})` }}>
              <div className="case-top">
                <span className="case-emoji">{c.icon}</span>
                <span className="case-tag">{c.tag}</span>
              </div>
              <h3 className="case-title">{c.title}</h3>
              <p className="case-desc muted">{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== Pricing ====== */
function Pricing() {
  const d = window.OCTO.pricing;
  return (
    <section className="section pricing" id="pricing">
      <div className="wrap wrap-wide">
        <SectionHead data={d} center />
        <div className="pricing-grid">
          {d.tiers.map((t, i) => (
            <div className={"tier card reveal " + (t.featured ? "tier-feat" : "")} data-d={i + 1} key={i}>
              {t.featured && <span className="tier-badge">Популярный</span>}
              <div className="tier-name">{t.name}</div>
              <div className="tier-price">{t.price}<span>/ {t.period}</span></div>
              <p className="tier-desc muted">{t.desc}</p>
              <a href={window.OCTO.tg} className={"btn " + (t.featured ? "btn-primary" : "btn-soft")} style={{ width:"100%" }}>{t.cta}</a>
              <ul className="tier-feats">
                {t.features.map((f, k) => (
                  <li key={k}><span className="tier-tick"><Icon name="check" size={12} stroke={2.6} /></span>{f}</li>
                ))}
              </ul>
            </div>
          ))}
          <div className="tier-examples reveal" data-d="3">
            <div className="tier-ex-label eyebrow no-tick">{d.examplesLabel}</div>
            <div className="tier-ex-list">
              {d.examples.map((e, i) => (
                <div className="tier-ex" key={i}>
                  <div className="tier-ex-meta">
                    <strong>{e.tag}</strong>
                    <span className="muted">{e.body}</span>
                  </div>
                  <span className="tier-ex-price">{e.price}</span>
                </div>
              ))}
            </div>
            <div className="tier-ex-cta">
              <p className="muted">{d.bottomCta}</p>
              <a href={window.OCTO.tg} className="btn btn-ghost"><Icon name="tg" size={16} />{d.bottomBtn}</a>
            </div>
          </div>
        </div>
        <p className="pricing-note muted reveal">{d.note}</p>
      </div>
    </section>
  );
}

/* ====== Demo section (reuses thread) ====== */
function Demo() {
  return (
    <section className="section demo">
      <div className="wrap wrap-wide demo-grid">
        <div className="demo-copy">
          <SectionHead data={{ label:"Как это выглядит", title:"Чат и есть интерфейс. Обсуждение и есть ТЗ.", desc:"Запрос в групповом чате становится готовым ассетом, рисёрч-доком или деплоем — каждый за пару минут." }} />
          <div className="demo-points">
            {["Видит весь контекст обсуждения","Работает прямо в треде команды","Отдаёт готовый файл, а не совет"].map((p,i)=>(
              <div className="demo-point" key={i}><span className="cap-bdot"><Icon name="check" size={12} stroke={2.6}/></span>{p}</div>
            ))}
          </div>
          <a href={window.OCTO.tg} className="btn btn-primary"><Icon name="tg" size={18}/>Сделай так же в своём чате</a>
        </div>
        <div className="demo-phone reveal" data-d="1">
          <TelegramThread />
        </div>
      </div>
    </section>
  );
}

/* ====== AI tools inside (ChatGPT / Codex / Claude Code / OpenCode / n8n) ====== */
function AiTools() {
  const d = window.OCTO.aitools;
  if (!d) return null;
  return (
    <section className="section" id="aitools">
      <div className="wrap wrap-wide">
        <SectionHead data={d} center />
        {d.models && (
          <div className="aitools-models reveal" data-d="1">
            {d.models.map((m, i) => (
              <span className="aitools-model" key={i}><span className="pill-dot" />{m}</span>
            ))}
          </div>
        )}
        {d.note && <p className="pricing-note muted reveal" data-d="2" style={{ marginTop: 18, textAlign: "center" }}>{d.note}</p>}
      </div>
    </section>
  );
}

/* ====== FAQ ====== */
function Faq() {
  const d = window.OCTO.faq;
  if (!d) return null;
  return (
    <section className="section faq" id="faq">
      <div className="wrap wrap-wide">
        <SectionHead data={d} center />
        <div className="faq-list reveal" data-d="1">
          {d.items.map((it, i) => (
            <details className="faq-item card" key={i}>
              <summary className="faq-q">
                <span>{it.q}</span>
                <span className="faq-chev"><Icon name="chev" size={18} /></span>
              </summary>
              <p className="faq-a muted">{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, Capabilities, HowItWorks, SelfHealing, Stories, Comparison, Cases, AiTools, Pricing, Demo, Faq });