/* Products — Jongtoh (LINE chat demo) + FlowAIOS (dashboard glimpse) */

const JongtohDemo = ({ lang }) => {
  const script = lang === "th" ? [
    { who: "user", text: "สวัสดีค่ะ คืนวันเสาร์ยังว่างไหมคะ ขอโต๊ะ 4 ที่นั่ง ทุ่มครึ่ง" },
    { who: "ai", text: "สวัสดีค่ะ 🌿 คืนวันเสาร์ที่ 16 พ.ค. ทุ่มครึ่ง โต๊ะ 4 ที่นั่ง ยังว่างค่ะ ต้องการให้จองให้เลยไหมคะ" },
    { who: "user", text: "จองเลยค่ะ คุณมิ้น เบอร์ 0812345678" },
    { who: "ai", text: "จองเรียบร้อยค่ะ #BK-2841 รบกวนถึงร้านก่อน 5 นาที ดูเมนูได้ที่ลิงก์นี้ค่ะ" },
    { who: "system", text: "Booking captured · routed to host" },
  ] : [
    { who: "user", text: "Hi! Any tables for 4 this Saturday at 7:30 pm?" },
    { who: "ai", text: "Hi there 🌿 Yes — Saturday May 16, 7:30 pm, table for 4 is available. Would you like me to book it?" },
    { who: "user", text: "Yes please. Min, 081-234-5678" },
    { who: "ai", text: "Booked! Confirmation #BK-2841. Please arrive 5 min early. Menu link below." },
    { who: "system", text: "Booking captured · routed to host" },
  ];

  const [shown, setShown] = React.useState(1);
  const [typing, setTyping] = React.useState(false);
  React.useEffect(() => {
    if (shown >= script.length) {
      const t = setTimeout(() => setShown(1), 4500);
      return () => clearTimeout(t);
    }
    setTyping(script[shown].who === "ai");
    const t = setTimeout(() => {
      setTyping(false);
      setShown((s) => s + 1);
    }, script[shown].who === "ai" ? 1700 : 900);
    return () => clearTimeout(t);
  }, [shown, lang]);

  React.useEffect(() => { setShown(1); }, [lang]);

  return (
    <div className="line-frame">
      <div className="line-hd">
        <div className="line-hd-l">
          <div className="line-avatar">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <circle cx="11" cy="11" r="11" fill="var(--accent)" />
              <text x="11" y="14.5" textAnchor="middle" fontFamily="var(--font-display)" fontSize="11" fontWeight="600" fill="#0E1208">J</text>
            </svg>
          </div>
          <div>
            <div className="line-name">Jongtoh · Banyan Bistro</div>
            <div className="line-sub">{lang === "th" ? "ตอบเร็ว · LINE OA" : "Fast reply · LINE OA"}</div>
          </div>
        </div>
        <div className="line-hd-r mono-tag">LINE</div>
      </div>
      <div className="line-body">
        {script.slice(0, shown).map((m, i) => {
          if (m.who === "system") {
            return <div key={i} className="line-system">{m.text}</div>;
          }
          return (
            <div key={i} className={`line-msg ${m.who}`}>
              <div className="line-bubble">{m.text}</div>
            </div>
          );
        })}
        {typing && (
          <div className="line-msg ai">
            <div className="line-bubble typing">
              <span></span><span></span><span></span>
            </div>
          </div>
        )}
      </div>
      <div className="line-foot">
        <div className="line-input">{lang === "th" ? "พิมพ์ข้อความ…" : "Type a message…"}</div>
        <div className="line-send">↑</div>
      </div>
    </div>
  );
};

const FlowDemo = ({ lang }) => {
  const [tab, setTab] = React.useState("inbox");
  const [auto, setAuto] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setAuto((x) => x + 1), 2400);
    return () => clearInterval(id);
  }, []);

  const queue = [
    { ch: "LINE", who: "Min P.", topic: lang === "th" ? "ขอจองโต๊ะคืนนี้" : "Booking · Saturday 7:30pm", st: "agent", tag: "Booking" },
    { ch: "IG", who: "@joonchef", topic: lang === "th" ? "ถามเรื่องเมนูแพ้กลูเตน" : "Gluten-free menu Q", st: "ai", tag: "FAQ" },
    { ch: "Web", who: "form#1142", topic: lang === "th" ? "อีเวนต์ส่วนตัว 30 ที่" : "Private event · 30 pax", st: "human", tag: "Lead" },
    { ch: "Email", who: "ops@partner", topic: lang === "th" ? "ขอใบเสนอราคา" : "Quote request", st: "ai", tag: "Sales" },
    { ch: "LINE", who: "Yui K.", topic: lang === "th" ? "ขอเปลี่ยนเวลาจอง" : "Reschedule booking", st: "agent", tag: "Booking" },
  ];

  const stMeta = {
    ai: { en: "AI handled", th: "AI จัดการ", color: "var(--accent-deep)" },
    agent: { en: "Agent assigned", th: "ส่งให้พนักงาน", color: "var(--ink)" },
    human: { en: "Needs human", th: "รอคนรีวิว", color: "var(--warn)" },
  };

  return (
    <div className="flow-frame">
      <div className="flow-chrome">
        <div className="flow-chrome-l">
          <div className="flow-dot r"></div>
          <div className="flow-dot y"></div>
          <div className="flow-dot g"></div>
          <span className="mono-tag" style={{ marginLeft: 12 }}>flowaios.app/inbox</span>
        </div>
        <div className="mono-tag flow-status">
          <span className="livedot"></span> Operating
        </div>
      </div>

      <div className="flow-body">
        <div className="flow-side">
          <div className="flow-brand mono-tag">FlowAIOS</div>
          {[
            { id: "inbox", l: { en: "Unified inbox", th: "กล่องรวม" }, n: 24 },
            { id: "agents", l: { en: "AI agents", th: "AI agents" }, n: 6 },
            { id: "flows", l: { en: "Workflows", th: "เวิร์กโฟลว์" }, n: 18 },
            { id: "insight", l: { en: "Insights", th: "ข้อมูลเชิงลึก" }, n: null },
          ].map((it) => (
            <button
              key={it.id}
              className={`flow-side-item ${tab === it.id ? "on" : ""}`}
              onClick={() => setTab(it.id)}
            >
              <span>{t(it.l, lang)}</span>
              {it.n != null && <span className="flow-count">{it.n}</span>}
            </button>
          ))}
          <div className="flow-side-foot mono-tag">
            <span>● </span>
            {lang === "th" ? "เชื่อม 6 ช่องทาง" : "6 channels live"}
          </div>
        </div>

        <div className="flow-main">
          <div className="flow-main-hd">
            <div>
              <div className="display-sm" style={{ fontSize: 18, marginBottom: 2 }}>
                {lang === "th" ? "กล่องรวม" : "Unified inbox"}
              </div>
              <div className="mono-tag">
                {lang === "th" ? "24 รายการ · AI จัดการ 18" : "24 items · 18 handled by AI"}
              </div>
            </div>
            <div className="flow-filter mono-tag">All channels <ChevDown /></div>
          </div>

          <div className="flow-list">
            {queue.map((row, i) => {
              const isActive = (auto % queue.length) === i;
              const meta = stMeta[row.st];
              return (
                <div key={i} className={`flow-row ${isActive ? "active" : ""}`}>
                  <div className="flow-ch mono-tag">{row.ch}</div>
                  <div className="flow-row-mid">
                    <div className="flow-who">{row.who}</div>
                    <div className="flow-topic">{row.topic}</div>
                  </div>
                  <div className="flow-tag mono-tag">{row.tag}</div>
                  <div className="flow-st mono-tag" style={{ color: meta.color }}>
                    <span className="flow-stdot" style={{ background: meta.color }}></span>
                    {t(meta, lang)}
                  </div>
                </div>
              );
            })}
          </div>

          <div className="flow-summary">
            <div className="flow-sum-item">
              <div className="mono-tag">{lang === "th" ? "ตอบเร็วขึ้น" : "Faster reply"}</div>
              <div className="flow-sum-kpi">−72%</div>
            </div>
            <div className="flow-sum-item">
              <div className="mono-tag">{lang === "th" ? "AI จัดการได้" : "AI deflected"}</div>
              <div className="flow-sum-kpi">75%</div>
            </div>
            <div className="flow-sum-item">
              <div className="mono-tag">{lang === "th" ? "การจองสำเร็จ" : "Bookings captured"}</div>
              <div className="flow-sum-kpi">+38%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const ProductSection = ({ lang, c }) => {
  return (
    <section id="products" className="section products-section">
      <div className="grid-rule"></div>
      <div className="shell">
        <div className="section-hd">
          <span className="eyebrow eyebrow-accent">{t(c.products.eyebrow, lang)}</span>
          <h2 className="display-lg reveal">{t(c.products.title, lang)}</h2>
        </div>

        {/* Jongtoh */}
        <div className="product-row reveal">
          <div className="product-info">
            <div className="product-name-row">
              <span className="product-name display-md">Jongtoh</span>
              <span className="product-slug mono-tag">{t(c.products.jongtoh.slug, lang)}</span>
            </div>
            <p className="body-lg product-tagline">{t(c.products.jongtoh.tagline, lang)}</p>
            <p className="body-md">{t(c.products.jongtoh.desc, lang)}</p>
            <p className="body-md">{t(c.products.jongtoh.desc2, lang)}</p>

            <div className="product-meta">
              <div className="product-meta-row">
                <div className="mono-tag product-meta-l">{lang === "th" ? "สำหรับ" : "Built for"}</div>
                <div className="body-md">{t(c.products.jongtoh.builtFor, lang)}</div>
              </div>
              <div className="product-meta-row">
                <div className="mono-tag product-meta-l">{lang === "th" ? "ใช้ทำ" : "Use cases"}</div>
                <div className="product-tags">
                  {[
                    { en: "Customer Q&A", th: "ตอบลูกค้า" },
                    { en: "Booking support", th: "รับจอง" },
                    { en: "Menu info", th: "ข้อมูลเมนู" },
                    { en: "Event inquiries", th: "อีเวนต์" },
                    { en: "Lead capture", th: "เก็บลีด" },
                    { en: "Staff handoff", th: "ส่งต่อทีม" },
                  ].map((x, i) => (
                    <span key={i} className="chip">{t(x, lang)}</span>
                  ))}
                </div>
              </div>
            </div>

            <a href="https://jongtoh.com" target="_blank" rel="noopener noreferrer" className="btn btn-primary product-cta">
              {t(c.products.jongtoh.cta, lang)}
              <ArrowUpRight />
            </a>
          </div>
          <div className="product-demo">
            <div className="demo-label mono-tag">
              <span className="livedot"></span>
              {lang === "th" ? "ตัวอย่างจริง · LINE OA" : "Live preview · LINE OA"}
            </div>
            <JongtohDemo lang={lang} />
          </div>
        </div>

        {/* FlowAIOS */}
        <div className="product-row reverse reveal">
          <div className="product-info">
            <div className="product-name-row">
              <span className="product-name display-md">FlowAIOS</span>
              <span className="product-slug mono-tag">{t(c.products.flow.slug, lang)}</span>
            </div>
            <p className="body-lg product-tagline">{t(c.products.flow.tagline, lang)}</p>
            <p className="body-md">{t(c.products.flow.desc, lang)}</p>

            <div className="product-meta">
              <div className="product-meta-row">
                <div className="mono-tag product-meta-l">{lang === "th" ? "สำหรับ" : "Built for"}</div>
                <div className="body-md">{t(c.products.flow.builtFor, lang)}</div>
              </div>
              <div className="product-meta-row">
                <div className="mono-tag product-meta-l">{lang === "th" ? "ใช้ทำ" : "Use cases"}</div>
                <div className="product-tags">
                  {[
                    { en: "Unified inbox", th: "กล่องรวม" },
                    { en: "AI service agents", th: "AI agents" },
                    { en: "Workflow automation", th: "อัตโนมัติเวิร์กโฟลว์" },
                    { en: "Task routing", th: "ส่งงาน" },
                    { en: "Customer insights", th: "ข้อมูลลูกค้า" },
                    { en: "Process support", th: "ช่วยกระบวนการ" },
                  ].map((x, i) => (
                    <span key={i} className="chip">{t(x, lang)}</span>
                  ))}
                </div>
              </div>
            </div>

            <a href="https://flowaios.vercel.app" target="_blank" rel="noopener noreferrer" className="btn btn-primary product-cta">
              {t(c.products.flow.cta, lang)}
              <ArrowUpRight />
            </a>
          </div>
          <div className="product-demo">
            <div className="demo-label mono-tag">
              <span className="livedot"></span>
              {lang === "th" ? "ตัวอย่างจริง · ระบบหลังบ้าน" : "Live preview · Operations console"}
            </div>
            <FlowDemo lang={lang} />
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ProductSection, JongtohDemo, FlowDemo });