/* Manifesto — massive bilingual rotating type moment between hero and what we do. */

const MANIFESTO_EN = [
  "answer", "route", "automate", "respond", "resolve", "follow up", "book", "summarise",
];
const MANIFESTO_TH = [
  "ตอบ", "ส่งต่อ", "อัตโนมัติ", "ตอบสนอง", "แก้ปัญหา", "ติดตาม", "จอง", "สรุป",
];

const Manifesto = ({ lang }) => {
  const words = lang === "th" ? MANIFESTO_TH : MANIFESTO_EN;
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % words.length), 1700);
    return () => clearInterval(id);
  }, [words.length]);

  return (
    <section className="manifesto-section">
      <div className="grid-rule"></div>
      <div className="shell manifesto-shell">
        <div className="manifesto-meta mono-tag reveal">
          <span className="ticker-pulse"></span>
          <span>{lang === "th" ? "เรื่อง · ผลิตภัณฑ์" : "Thesis · Product"}</span>
        </div>
        <div className="manifesto-line manifesto-line-1 reveal">
          <span>{lang === "th" ? "AI ที่ " : "AI that "}</span>
          <span className="manifesto-rotator">
            <span key={idx} className="manifesto-word">{words[idx]}</span>
          </span>
        </div>
        <div className="manifesto-line manifesto-line-2 reveal" style={{ "--reveal-delay": "120ms" }}>
          <span>{lang === "th" ? "ในงานที่คุณทำ" : "inside the work you already do."}</span>
        </div>
        <div className="manifesto-line manifesto-line-3 reveal" style={{ "--reveal-delay": "220ms" }}>
          <span className="manifesto-strike">{lang === "th" ? "ไม่ใช่แชทบอท" : "Not a chatbot."}</span>
          <span className="manifesto-arrow">→</span>
          <span>{lang === "th" ? "เป็นชั้นปฏิบัติการ" : "An operations layer."}</span>
        </div>

        <div className="manifesto-grid reveal" style={{ "--reveal-delay": "320ms" }}>
          {[
            { k: "01", l: lang === "th" ? "เข้าใจเจตนา" : "Understands intent" },
            { k: "02", l: lang === "th" ? "ทำงานในช่องทางเดิม" : "Works in real channels" },
            { k: "03", l: lang === "th" ? "ส่งต่อให้คน" : "Hands off to humans" },
            { k: "04", l: lang === "th" ? "เรียนรู้ต่อเนื่อง" : "Improves over time" },
          ].map((x) => (
            <div key={x.k} className="manifesto-cell">
              <span className="mono-tag">{x.k}</span>
              <span>{x.l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Manifesto = Manifesto;