// ============= INTERFACE SHOWCASE + PRICING =============
function LeadsMiniMock() {
  const { lang } = useApp();
  const labels = { ru:{ a:"AI Генерация лидов", b:"AI подберёт прибыльные темы", gen:"Сгенерировать 100 тем", auto:"Авто", niche:"По нишам" },
    en:{ a:"AI Lead generation", b:"AI picks profitable topics", gen:"Generate 100 topics", auto:"Auto", niche:"By niche" },
    uk:{ a:"AI Генерація лідів", b:"AI підбере прибуткові теми", gen:"Згенерувати 100 тем", auto:"Авто", niche:"За нішами" } }[lang] || {};
  return (
    <div style={{ padding: "20px 20px 76px", background: "var(--bg)", height: "100%" }}>
      <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 16 }}>
        <span style={{ width: 40, height: 40, borderRadius: 12, display: "grid", placeItems: "center", color: "#fff", background: "linear-gradient(150deg,var(--accent-bright),var(--accent-deep))" }}><IconWand /></span>
        <div><div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 15, color: "var(--text-hi)" }}>{labels.a}</div>
          <div style={{ fontSize: 11.5, color: "var(--text-lo)" }}>{labels.b}</div></div>
      </div>
      <div className="mock__seg" style={{ maxWidth: 220, marginBottom: 16 }}><b className="on">{labels.auto}</b><b>{labels.niche}</b></div>
      <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
        {["20","50","100","200","500"].map((n) => (
          <div key={n} style={{ flex: 1, textAlign: "center", padding: "10px 0", borderRadius: 10, fontSize: 12, fontWeight: 600,
            background: n === "100" ? "linear-gradient(180deg,color-mix(in oklab,var(--accent),white 8%),var(--accent))" : "var(--surface)",
            color: n === "100" ? "#fff" : "var(--text-lo)", border: "1px solid " + (n === "100" ? "transparent" : "var(--border)") }}>{n}</div>
        ))}
      </div>
      <button className="mock__chip" style={{ width: "100%", justifyContent: "center", padding: "11px 0" }}><IconBolt />{labels.gen}</button>
    </div>
  );
}

function Showcase() {
  const { t } = useApp();
  const screens = t("showcase.screens") || [];
  const COMP = [<DashboardMock />, <ScreenLeads />, <ScreenAnalytics />, <ScreenVerify />, <ScreenInbox />];
  const CHIP_ICO = [<IconGrid />, <IconYT />, <IconChart />, <IconShield />, <IconInbox />];
  const [idx, setIdx] = useState(0);
  const n = COMP.length;
  const go = (d) => setIdx((i) => (i + d + n) % n);
  const cur = screens[idx] || {};
  return (
    <section className="section" id="interface">
      <div className="wrap">
        <SecHead eyebrow={t("showcase.eyebrow")} t1={t("showcase.title1")} t2={t("showcase.title2")} sub={t("showcase.sub")} center />
        <Reveal className="carow">
          <button className="carow__arrow" onClick={() => go(-1)} aria-label="Prev"><IconChevL /></button>
          <div className="carow__stage">
            <div className="carow__glow" aria-hidden="true"></div>
            <div className="carow__frame">
              <div className="carow__bar">
                <div className="carow__dots"><i></i><i></i><i></i></div>
                <span className="carow__url"><IconLock />{cur.url}</span>
                <span className="carow__live"><span className="dot"></span>LIVE</span>
              </div>
              <div className="carow__screens">
                {COMP.map((C, i) => (
                  <div key={i} className={`carow__screen ${i === idx ? "on" : ""}`}>{i === idx ? C : null}</div>
                ))}
              </div>
              <div className="carow__hovercap no-tr">
                <div className="carow__hovercap-kick no-tr">{cur.kick}</div>
                <div className="carow__hovercap-t no-tr">{cur.t}</div>
                <div className="carow__hovercap-d no-tr">{cur.d}</div>
              </div>
            </div>
          </div>
          <button className="carow__arrow" onClick={() => go(1)} aria-label="Next"><IconChevR /></button>
        </Reveal>

        <div className="carow__meta">
          <div className="carow__info">
            <div className="carow__kick">{cur.kick}</div>
            <div className="carow__t">{cur.t}</div>
            <div className="carow__d">{cur.d}</div>
          </div>
          <div className="carow__count"><b>{String(idx + 1).padStart(2, "0")}</b> / {String(n).padStart(2, "0")}</div>
        </div>

        <div className="carow__rail">
          {screens.map((s, i) => (
            <button key={i} className={`carow__chip ${i === idx ? "on" : ""}`} onClick={() => setIdx(i)}>
              {CHIP_ICO[i]}{s.chip}
            </button>
          ))}
        </div>

        <div className="carow__mobnav">
          <button className="carow__arrow" onClick={() => go(-1)} aria-label="Prev"><IconChevL /></button>
          <button className="carow__arrow" onClick={() => go(1)} aria-label="Next"><IconChevR /></button>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { t, authed, ctaHref, ctaLabel } = useApp();
  const [yearly, setYearly] = useState(false);
  const tiers = t("pricing.tiers") || [];
  const cur = t("pricing.cur"), per = t("pricing.per");
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <SecHead eyebrow={t("pricing.eyebrow")} t1={t("pricing.title1")} t2={t("pricing.title2")} sub={t("pricing.sub")} center />
        <div className="price__head">
          <div className="price__toggle">
            <button className={!yearly ? "on" : ""} onClick={() => setYearly(false)}>{t("pricing.monthly")}</button>
            <button className={yearly ? "on" : ""} onClick={() => setYearly(true)}>{t("pricing.yearly")}<span className="save">{t("pricing.save")}</span></button>
          </div>
        </div>
        <div className="price__grid">
          {tiers.map((tier, i) => (
            <Reveal key={i} className={`tier ${tier.hot ? "tier--hot" : ""}`} delay={i * 80}>
              {tier.badge ? <div className="tier__badge">{tier.badge}</div> : null}
              <div className="tier__name">{tier.name}</div>
              <div className="tier__d">{tier.d}</div>
              <div className="tier__price">
                <span className="tier__cur">{cur}</span>
                <span className="tier__amt">{yearly ? tier.price.y : tier.price.m}</span>
                <span className="tier__per">{per}</span>
              </div>
              <a href={ctaHref} className={`btn tier__btn ${tier.hot ? "btn--primary" : "btn--ghost"}`}>{authed ? ctaLabel("nav.cta") : tier.cta}</a>
              <div className="tier__feats">
                {tier.features.map((f, k) => (
                  <div key={k} className="tier__feat"><IconCheck />{f}</div>
                ))}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Showcase, Pricing });