/* TryIt — wraps VoiceDemo and WhatsAppDemo in a tabbed section. */

const TryIt = ({ lang }) => {
  const isAR = lang === "ar";
  const [tab, setTab] = React.useState("voice");

  return (
    <section className="section tryit" id="tryit" data-screen-label="04 Try it">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/03</span>
            <span className="eyebrow">{isAR ? "جرّب بنفسك" : "Try it"}</span>
          </div>
          <h2>{isAR ? <>اختبر <span className="it">وكيلك</span> قبل التوقيع.</> : <>Test <span className="it">your</span> agent. Before you sign.</>}</h2>
        </div>

        <p className="lead">
          {isAR
            ? "اختر صوت وكيلك. اتصل به. ثم جرّب روبوت واتساب — كأنك العميل."
            : "Pick your agent's voice. Call it. Then test the WhatsApp bot — playing the lead yourself."}
        </p>

        <div className="tryit-tabs mono">
          <button className={tab === "voice" ? "active" : ""} onClick={() => setTab("voice")}>
            <span className="tt-num">01</span>
            <span>{isAR ? "الوكيل الصوتي" : "Voice agent"}</span>
          </button>
          <button className={tab === "text" ? "active" : ""} onClick={() => setTab("text")}>
            <span className="tt-num">02</span>
            <span>{isAR ? "روبوت واتساب" : "WhatsApp bot"}</span>
          </button>
        </div>

        <div className="tryit-body">
          {tab === "voice" ? <VoiceDemo lang={lang} /> : <WhatsAppDemo lang={lang} />}
        </div>
      </div>

      <style>{`
        .tryit-tabs {
          display: flex;
          gap: 0;
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          margin-bottom: 56px;
        }
        .tryit-tabs button {
          all: unset;
          flex: 1;
          padding: 22px 24px;
          display: flex;
          align-items: baseline;
          gap: 16px;
          cursor: pointer;
          font-size: 18px;
          letter-spacing: -0.01em;
          color: var(--muted);
          border-right: 1px solid var(--rule);
          transition: all .25s var(--ease);
        }
        .tryit-tabs button:last-child { border-right: 0; }
        .tryit-tabs button:hover { color: var(--ink); background: var(--bg-2); }
        .tryit-tabs button.active { color: var(--ink); background: var(--ink); color: var(--bg); }
        .tryit-tabs button.active .tt-num { color: var(--accent); }
        .tt-num {
          font-size: 11px;
          letter-spacing: 0.16em;
          color: var(--muted);
        }
      `}</style>
    </section>
  );
};

window.TryIt = TryIt;