/* SpeakMind — Variant B: a lean, qwentype-style landing.
   Reuses the real components (Nav, hero showcase, pricing, testimonials) but
   drops the dense middle (personas, marquee, type banner, stats wall) in favor
   of ONE consistent "spoken → clean" sequence. Mounted by mount.jsx when the
   visitor's A/B coin lands on B. */

/* The before→after spine: one capability per row, one concrete example.
   `clean` is a string, or { lead, items } for a list. ⟦term⟧ → accent chip. */
const BA_ROWS = [
  {
    title: "No more “um, uh, like”",
    desc: "Fillers, false starts and repeats are gone in a single pass — you just talk.",
    raw: "Umm so like I was thinking we should maybe push the launch to friday, no wait, thursday — yeah thursday works.",
    clean: "I think we should push the launch to Thursday.",
  },
  {
    title: "Rambles become clean lists",
    desc: "Say a pile of things; get a tidy, numbered list you can send as-is.",
    raw: "this week I need to file the kickoff deck, finish the spec, oh and lock the GTM plan",
    clean: { lead: "This week:", items: ["File the kickoff deck", "Finish the spec", "Lock the GTM plan"] },
  },
  {
    title: "It catches your self-correction",
    desc: "Change your mind mid-sentence — it keeps only your final intended version.",
    raw: "let's meet in room two on the third floor — no wait, room three",
    clean: "Let's meet in room 3 on the third floor.",
  },
  {
    title: "One sentence → a full email",
    desc: "In your mail app it adds the greeting, body and sign-off — only from what you said.",
    raw: "write this as an email: thank the team for the demo, we'll send feedback by next week",
    clean: "Hi team,\n\nThanks for the demo today. We'll review internally and send feedback by next week.\n\nBest",
  },
  {
    title: "Think in Chinese, ship in English",
    desc: "Translate as you speak — phrasing that reads like a native wrote it.",
    raw: "把发布会改到周四，然后通知整个团队",
    clean: "Let's move the launch to Thursday and tell the whole team.",
  },
  {
    title: "Names spelled right, every time",
    desc: "Your people, products and codenames stay correct — it learns them from how you talk.",
    raw: "remind sarah chen to sync the helios and northstar launch dates",
    clean: "Remind ⟦Sarah Chen⟧ to sync the ⟦Helios⟧ and ⟦Northstar⟧ launch dates.",
  },
];

function BACard({ row }) {
  const { RichText } = window.SMOverlay;
  const t = window.SM.t;
  const c = row.clean;
  return (
    <div className="ba-cards reveal" data-d="2">
      <div className="ba-card raw">
        <div className="ba-cap mono"><span className="ba-dot rec" /> {t("Raw speech")}</div>
        <p>{t(row.raw)}</p>
      </div>
      <div className="ba-arrow mono">✨ SpeakMind</div>
      <div className="ba-card out">
        <div className="ba-cap mono"><span className="ba-dot ok" /> {t("Clean, ready to paste")}</div>
        {typeof c === "string"
          ? <p className="ba-clean">{t(c).split("\n").map((ln, i) => <span key={i}>{ln ? <RichText text={ln} /> : <br />}{ln && <br />}</span>)}</p>
          : <div className="ba-clean">
              <p>{t(c.lead)}</p>
              <ol>{c.items.map((it, i) => <li key={i}><RichText text={t(it)} /></li>)}</ol>
            </div>}
      </div>
    </div>
  );
}

function LeanFeatures() {
  const t = window.SM.t;
  return (
    <section id="how" className="lean-sec">
      <div className="wrap">
        <div className="section-head center reveal">
          <div className="eyebrow">{t("How it works")}</div>
          <h2>{t("Speak loosely.")}<br /><span className="ink-accent">{t("Get clean text.")}</span></h2>
          <p>{t("Hold a key and talk the way you think. SpeakMind cleans it up and drops finished text right where your cursor is — in any app.")}</p>
        </div>
        <div className="ba-list">
          {BA_ROWS.map((row, i) => (
            <div className={"ba-row" + (i % 2 ? " alt" : "")} key={i}>
              <div className="ba-copy reveal">
                <h3>{t(row.title)}</h3>
                <p>{t(row.desc)}</p>
              </div>
              <BACard row={row} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* On-theme animated background: a real app-style voice waveform (SpeakMind =
   voice). A centered cluster of vertical bars that pulse up/down (no sideways
   motion), tallest in the middle. Sits faint, fixed, behind the content. */
function SoundWaveBG() {
  const N = 24;
  const bars = [];
  for (let i = 0; i < N; i++) {
    const env = Math.sin((i / (N - 1)) * Math.PI); // hump: short edges, tall center
    bars.push({
      peak: (0.16 + env * 0.84).toFixed(2),
      dur: (0.9 + (i % 6) * 0.17).toFixed(2),
      delay: (((i * 37) % 17) * 0.06).toFixed(2),
    });
  }
  return (
    <div className="bwave" aria-hidden="true">
      <div className="bw-bars">
        {bars.map((b, i) => (
          <i key={i} style={{ "--peak": b.peak, animationDuration: b.dur + "s", animationDelay: b.delay + "s" }} />
        ))}
      </div>
    </div>
  );
}

function AppB() {
  const Nav = window.SMNav;
  const HeroSplit = window.SMHero.HERO_VARIANTS.split.Comp;
  const { HeroStats } = window.SMx;
  const { Pricing, Testimonials, FooterCTA } = window.SMSections;
  const [locale, setLoc] = useState(window.SM.locale || "en");
  const onLocale = (loc) => { if (loc === locale) return; window.SM.setLocale(loc); setLoc(window.SM.locale); };

  useEffect(() => { setAccent("#d9481f"); setPaper("#ffffff"); }, []);
  useScrollReveals("b·" + locale);

  return (
    <div id="top">
      <SoundWaveBG />
      <Nav locale={locale} onLocale={onLocale} />
      <main key={locale}>
        <div className="hero-stage">
          <div className="aurora" aria-hidden="true"><b></b><b></b><b></b></div>
          <div className="wrap"><HeroSplit /></div>
        </div>
        <HeroStats />
        <LeanFeatures />
        <Pricing />
        <Testimonials />
        <FooterCTA />
      </main>
    </div>
  );
}

window.SMAppB = AppB;