/* 区块渲染器 — 把内容模型渲染成各区块；样式差异交给 [data-dir] CSS。 */

// **强调** -> <mark>
function rich(text) {
  if (!text) return null;
  const parts = String(text).split(/\*\*(.+?)\*\*/g);
  return parts.map((p, i) => (i % 2 === 1 ? <mark key={i}>{p}</mark> : <React.Fragment key={i}>{p}</React.Fragment>));
}

const Eyebrow = ({ children }) => (
  <span className="eyebrow"><span className="dot" />{children}</span>
);

const Check = () => (
  <svg viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.2 4.2L19 7" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
);

const Arrow = () => (
  <svg className="arrow" width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
);

function Hero({ b }) {
  return (
    <header className="section hero">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h1>{rich(b.title)}</h1>
        <p className="sub">{rich(b.sub)}</p>
        <div className="hero-cta">
          <button className="btn" onClick={() => window.openCheckup && window.openCheckup(window.__pageBranch)}>{b.cta}<Arrow /></button>
          <span className="cta-sub">{b.ctaSub}</span>
        </div>
      </div>
    </header>
  );
}

function PainList({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <ul className="painlist">
          {b.items.map((it, i) => (
            <li key={i}><span className="mk">{i + 1}</span><span>{rich(it)}</span></li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Questions({ b }) {
  const ref = React.useRef(null);
  const [play, setPlay] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) { setPlay(true); return; }
    let done = false;
    const trigger = () => { if (!done) { done = true; setPlay(true); } };
    let io;
    try {
      io = new IntersectionObserver(
        (entries) => entries.forEach((e) => { if (e.isIntersecting) trigger(); }),
        { threshold: 0.08 }
      );
      io.observe(el);
    } catch (err) { trigger(); }
    const t = setTimeout(trigger, 2200);
    return () => { if (io) io.disconnect(); clearTimeout(t); };
  }, []);
  return (
    <section className={play ? "section qchat play" : "section qchat"} ref={ref}>
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="qlist">
          <div className="chat-head">
            <span className="chat-av"><img src="assets/logo-jh.webp" alt="骏航" /></span>
            <span className="chat-id">骏航AI<small>在线 · 想问你三个问题</small></span>
          </div>
          {b.items.map((it, i) => (
            <div className="qrow" key={i}>
              <span className="q-av"><img src="assets/logo-jh.webp" alt="骏航" /></span>
              <span className="qn">{i + 1}</span>
              <div className="qbubble"><p className="qt">{it}</p></div>
            </div>
          ))}
          <div className="chat-typing"><span /><span /><span /></div>
        </div>
        <p className="q-body" data-sender="骏航AI · 划重点">{rich(b.body)}</p>
      </div>
    </section>
  );
}

function Steps({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="steps">
          {b.items.map((s, i) => (
            <div className="step" key={i}>
              <div className="k">{s.k}</div>
              <div className="t">{s.t}</div>
              <p className="d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="features">
          {b.items.map((f, i) => (
            <div className="feat" key={i}><span className="ck"><Check /></span><span>{rich(f)}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Tags({ items }) {
  return (
    <div className="tags">
      {items.map((t, i) => {
        const ph = t.indexOf("【") !== -1;
        return <span className={ph ? "tag tag-ph" : "tag"} key={i}><span className="tdot" />{t}</span>;
      })}
    </div>
  );
}

function CaseSingle({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <div className="case">
          <h3>{b.title}</h3>
          <p>{b.body}</p>
          <Tags items={b.tags} />
          {b.note && <p className="note">{b.note}</p>}
        </div>
      </div>
    </section>
  );
}

function CaseGrid({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="cases">
          {b.items.map((c, i) => (
            <div className="case" key={i}>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
              <Tags items={c.tags} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Tiers({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="tiers">
          {b.items.map((t, i) => (
            <div className="tier" key={i}>
              <span className="ttag">{t.tag}</span>
              <h3>{t.t}</h3>
              {t.price && <div className="tprice">{t.price}</div>}
              <p>{t.d}</p>
              {t.hi && <p className="thi">{t.hi}</p>}
              {t.result && (
                <p className="tresult"><span className="tresult-k">你拿到的</span>{t.result}</p>
              )}
            </div>
          ))}
        </div>
        {b.note && <p className="tier-note">{rich(b.note)}</p>}
      </div>
    </section>
  );
}

function Dont({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="dont">
          {b.items.map((d, i) => (
            <div className="drow" key={i}><span className="x">✕</span><span>{rich(d)}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Price({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        {b.anchor && (
          <div className="price-anchor">
            <div className="pa-l"><span className="pa-tag">标准价</span>{b.anchor.t}</div>
            <div className="pa-p">{b.anchor.p}</div>
          </div>
        )}
        <div className="pricebox">
          {b.rows.map((r, i) => (
            <div className="prow" key={i}><span className="pt">{r.t}</span><span className="pp">{r.p}</span></div>
          ))}
        </div>
        {b.priceNote && <p className="price-note">{b.priceNote}</p>}
      </div>
    </section>
  );
}

function CTA({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="ctablock">
          <div className="cta-left">
            <Eyebrow>{b.eyebrow}</Eyebrow>
            <h2>{b.title}</h2>
            {b.listItems ? (
              <ul className="clist">{b.listItems.map((l, i) => <li key={i}>{l}</li>)}</ul>
            ) : (
              <p className="cbody">{b.body}</p>
            )}
            <div className="cta-actions">
              <button className="btn" onClick={() => window.openCheckup && window.openCheckup(window.__pageBranch)}>{b.btn}<Arrow /></button>
              <button className="btn-ghost" onClick={() => window.jhAddWecom ? window.jhAddWecom() : (window.openCheckup && window.openCheckup())}>加企微咨询</button>
            </div>
          </div>
          <div className="cta-right">
            <div className="qr"><img className="qrcode" src="assets/wecom-qr.jpg" alt="企微二维码" /></div>
            <span className="qrcap">{b.qrLabel} · 扫码即聊</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ b }) {
  return (
    <footer className="section foot">
      <div className="wrap">
        <div className="fline"><img className="brandmark" src="assets/logo-jh.webp" alt="骏航" />{b.text}</div>
        <p className="fnote">{b.note}</p>
      </div>
    </footer>
  );
}

function Agent({ b }) {
  const c = b.console;
  const [ran, setRan] = React.useState(false);
  return (
    <section className="section agentsec">
      <div className="wrap">
        <div className="agent-grid">
          <div className="agent-copy">
            <Eyebrow>{b.eyebrow}</Eyebrow>
            <h2 className="h2">{b.title}</h2>
            <ul className="agent-points">
              {b.points.map((p, i) => (
                <li key={i}><span className="apk" /><span>{rich(p)}</span></li>
              ))}
            </ul>
            <p className="agent-proof"><span className="dotpulse" />{b.proof}</p>
          </div>
          <div className={ran ? "agent-console ran" : "agent-console"}>
            <div className="console-bar">
              <span className="cdot" /><span className="cdot" /><span className="cdot" />
              <span className="console-title">{c.title}</span>
            </div>
            <div className="console-body">
              {c.rows.map((r, i) => (
                <div className="console-row" key={i} style={{ transitionDelay: (i * 0.12) + "s" }}>
                  <span className="crk">{String(i + 1).padStart(2, "0")}</span>
                  <span className="crt">{r.t}</span>
                  <span className="crs">{ran ? "✓ 已完成" : r.s}</span>
                </div>
              ))}
              <button className="console-btn" onClick={() => setRan(!ran)}>
                <span className="play">{ran ? "✓" : "▶"}</span>{ran ? c.done : c.btn}
              </button>
              <p className="console-cap">{ran ? "搞定——这就是你每天要做的全部操作。" : c.cap}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ROI({ b }) {
  return (
    <section className="section roisec">
      <div className="wrap">
        <div className="roi-panel">
          <Eyebrow>{b.eyebrow}</Eyebrow>
          <h2 className="h2">{b.title}</h2>
          <p className="roi-lead">{b.lead}</p>
          <div className="roi-steps">
            {b.items.map((it, i) => (
              <div className="roi-step" key={i}>
                <span className="roi-k">{it.k}</span>
                <div className="roi-t">{it.t}</div>
                <p className="roi-d">{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Compare({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <div className="compare">
          <div className="cmp-head"><span>你本来要养的人</span><span>交给智能体替你做</span></div>
          {b.rows.map((r, i) => (
            <div className="cmp-row" key={i}>
              <div className="cmp-human">
                <span className="cmp-role">{r.role}</span>
                <span className="cmp-cost">{r.cost}</span>
              </div>
              <div className="cmp-arrow">→</div>
              <div className="cmp-agent">{r.does}</div>
            </div>
          ))}
        </div>
        <p className="cmp-punch">{rich(b.punch)}</p>
      </div>
    </section>
  );
}

function Ladder({ b }) {
  return (
    <section className="section">
      <div className="wrap">
        <Eyebrow>{b.eyebrow}</Eyebrow>
        <h2 className="h2">{b.title}</h2>
        <p className="ladder-lead">{b.lead}</p>
        <div className="ladder">
          {b.rungs.map((r, i) => (
            <div className={r.hot ? "rung hot" : "rung"} key={i}>
              <span className="rung-n">{String(i + 1).padStart(2, "0")}</span>
              <div className="rung-main">
                <div className="rung-t">{r.t}</div>
                <div className="rung-ex">{r.ex}</div>
              </div>
              {r.tag && <span className="rung-tag">{r.tag}</span>}
            </div>
          ))}
        </div>
        <p className="ladder-note">{b.note}</p>
      </div>
    </section>
  );
}

const RENDERERS = {
  hero: Hero, pain: PainList, list: PainList, questions: Questions, steps: Steps,
  features: Features, case: CaseSingle, cases: CaseGrid, tiers: Tiers, dont: Dont,
  price: Price, cta: CTA, footer: Footer, agent: Agent, roi: ROI, compare: Compare, ladder: Ladder,
};

function Block({ b }) {
  const Comp = RENDERERS[b.type];
  return Comp ? <Comp b={b} /> : null;
}

Object.assign(window, { Block });