/* Octodus clone — content sections (ported from octomatica structure) */

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 (4 interactive tabs) ====== */
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>
  );
}

/* ====== Product demo ====== */
function Demo() {
  const dd = window.OCTO.demo || {
    label: "HOW IT LOOKS",
    title: "The chat is the interface. The discussion is the brief.",
    desc: "A request in the group chat becomes a finished asset, research doc or deployment — in minutes.",
    points: ["Sees the full discussion context", "Works right inside the team thread", "Delivers a finished file, not just advice"],
    cta: "Try it in your chat",
  };
  return (
    <section className="section demo">
      <div className="wrap wrap-wide demo-grid">
        <div className="demo-copy">
          <SectionHead data={{ label: dd.label, title: dd.title, desc: dd.desc }} />
          <div className="demo-points">
            {dd.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" target="_blank" rel="noopener">
            <Icon name="tg" size={18}/>{dd.cta}
          </a>
        </div>
        <div className="demo-phone reveal" data-d="1">
          <TelegramThread />
        </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>
  );
}

/* ====== Case studies (6 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 table ====== */
function Comparison() {
  const d = window.OCTO.compare;
  const themLabel = d.themLabel || "Chats & builders";
  return (
    <section className="section compare" id="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">{themLabel}</div>
          <div className="compare-col-head us">
            <OctoGlyph size={22} color="var(--accent)" stroke={3}/> Octodus
          </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 || window.OCTO.tg} className="btn btn-soft btn-lg">
              {d.cta.text}<Icon name="arrow" size={18} />
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

/* ====== AI stack ====== */
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>
  );
}

/* ====== Pricing ====== */
function Pricing() {
  const d = window.OCTO.pricing;
  const popularLabel = window.OCTO.popularLabel || "Popular";
  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">{popularLabel}</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%" }} target="_blank" rel="noopener">{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" target="_blank" rel="noopener">
                <Icon name="tg" size={16} />{d.bottomBtn}
              </a>
            </div>
          </div>
        </div>
        <p className="pricing-note muted reveal">{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, Demo, HowItWorks, Stories, Comparison, AiTools, Pricing, Faq });