// Shared landing-page components
const { useState, useEffect, useRef } = React;

function TopBar({ t, lang, setLang, onCTA, onSignIn, onOpenWallet }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const off = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", off);
    return () => document.removeEventListener("mousedown", off);
  }, []);
  const langs = [
    { id: "uk", label: "Українська", flag: "🇺🇦" },
    { id: "en", label: "English", flag: "🇬🇧" },
    { id: "ru", label: "Русский", flag: "🌐" },
  ];
  const cur = langs.find(l => l.id === lang);
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a className="brand" href="#" onClick={(e) => { e.preventDefault(); window.MH_nav("home"); }}>
          <span className="brand-mark">M</span>
          Meeting Helper
        </a>
        <nav className="nav">
          <a href="#how" onClick={(e) => { e.preventDefault(); document.getElementById("how")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}>{t.nav.how}</a>
          <a href="#pricing" onClick={(e) => { e.preventDefault(); document.getElementById("pricing")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}>{t.nav.pricing}</a>
        </nav>
        <div className="topbar-spacer" />
        <div className="rel" ref={ref}>
          <button className="lang-pill" onClick={() => setOpen(v => !v)}>
            <span>{cur.flag}</span>
            <span>{cur.id.toUpperCase()}</span>
            <span className="chev">▾</span>
          </button>
          {open && (
            <div className="lang-menu">
              {langs.map(l => (
                <div key={l.id} className={"lang-item " + (l.id === lang ? "is-active" : "")} onClick={() => { setLang(l.id); setOpen(false); }}>
                  <span>{l.flag}</span><span>{l.label}</span>
                </div>
              ))}
            </div>
          )}
        </div>
        {window.UserPill ? <window.UserPill onSignIn={onSignIn} onOpenWallet={onOpenWallet} /> : null}
        <button className="btn btn-primary" onClick={onCTA}>{t.nav.start}</button>
      </div>
    </header>
  );
}

function HeroPreview({ t }) {
  return (
    <div className="hero-preview">
      <div className="preview-window">
        <div className="preview-bar">
          <span className="dot" /><span className="dot" /><span className="dot" />
          <span className="url">meeting-helper.app / session</span>
        </div>
        <div className="preview-body">
          <div className="preview-transcript">
            <div className="bubble them">Tell me about a time when you had to push back on a stakeholder.</div>
            <div className="bubble you">Sure — let me walk you through a recent example from my work on the billing system…</div>
            <div className="bubble them">And how did you measure whether it actually worked?</div>
          </div>
          <div className="preview-hint">
            <div className="label">AI</div>
            <ul>
              <li>Start with the specific metric (e.g. failed-charge rate dropping 40%).</li>
              <li>Mention what you'd measure if you ran it again.</li>
              <li>End with the business outcome — money saved or churn avoided.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

function Landing({ t, lang, setLang, onStart, onBuyPack, onBuyPro, onSignIn, onOpenWallet }) {
  return (
    <div className="landing">
      {window.InvitedBanner ? <window.InvitedBanner /> : null}
      <TopBar t={t} lang={lang} setLang={setLang} onCTA={onStart} onSignIn={onSignIn} onOpenWallet={onOpenWallet} />
      <section className="hero">
        <span className="kicker">● {t.hero.kicker}</span>
        <h1 className="h1">{t.hero.h1a}<br />{t.hero.h1b}</h1>
        <p className="lead">{t.hero.sub}</p>
        <div className="cta-row">
          <button className="btn btn-primary btn-xl" onClick={onStart}>{t.hero.cta}</button>
          <div className="cta-meta">
            {t.hero.meta.map(m => <span key={m}>{m}</span>)}
          </div>
        </div>
        <HeroPreview t={t} />
      </section>

      <section id="how">
        <div className="section-inner">
          <h2 className="section-title">{t.how.title}</h2>
          <div className="steps">
            {t.how.steps.map((s, i) => (
              <div className="step" key={i}>
                <div className="step-num">{i + 1}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--bg-2)" }}>
        <div className="section-inner">
          <h2 className="section-title">{t.cases.title}</h2>
          <div className="cases-grid">
            {t.cases.items.map(c => (
              <div className="case" key={c.t}>
                <div className="case-icon">{c.icon}</div>
                <h4>{c.t}</h4>
                <p>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="pricing" className="pricing-wrap">
        <div className="section-inner">
          <h2 className="section-title">{t.pricing.title}</h2>
          <p className="section-sub">{t.pricing.sub}</p>
          <div className="pricing-grid pricing-3">
            {(t.pricing.tiers || []).map((tier, i) => (
              <div key={i} className={"price-card" + (tier.featured ? " featured" : "")}>
                {tier.tag && <div className="tier-tag">{tier.tag}</div>}
                <h3>{tier.t}</h3>
                <p className="price-desc">{tier.d}</p>
                <div className="price-figure">
                  <span className="amount">{tier.price}</span>
                  <span className="per">{tier.per}</span>
                </div>
                <ul className="price-bullets">
                  {tier.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
                <button className={"btn " + (tier.featured ? "btn-primary" : "btn-outline") + " btn-lg"} style={{ marginTop: "auto" }} onClick={() => { if (i === 0) onStart(); else if (i === 1) onBuyPack && onBuyPack(); else if (i === 2) onBuyPro && onBuyPro(); }}>{tier.cta}</button>
              </div>
            ))}
          </div>
          <div className="single-call-line">
            <span>{t.pricing.single.t} —</span>
            <strong>{t.pricing.single.price}</strong>
            <span>{t.pricing.single.per}</span>
            <button className="btn btn-ghost" onClick={onStart}>{t.pricing.single.cta} →</button>
          </div>
          <p className="price-note">{t.pricing.note}</p>
        </div>
      </section>

      <section>
        <div className="privacy">
          <div className="icon">🔒</div>
          <div>
            <h4>{t.privacy.t}</h4>
            <p>{t.privacy.d}</p>
          </div>
        </div>
      </section>

      <section className="closing">
        <h2>{t.closing.t}</h2>
        <button className="btn btn-primary btn-xl" onClick={onStart}>{t.closing.cta}</button>
        <div className="cta-meta">
          {t.hero.meta.map(m => <span key={m}>{m}</span>)}
        </div>
      </section>

      <footer>{t.foot}</footer>

      <footer className="legal-footer">
        ФОП Барановський В.Г. · ІПН 3228413358 · м. Київ
        {" · "}
        <a href="/oferta" target="_blank" rel="noopener">Публічна оферта та умови повернення</a>
      </footer>
    </div>
  );
}

window.Landing = Landing;