// Yookie Pro (business) landing — heavier sections + shared utils.
// Loaded BEFORE biz-app.jsx; exports shared hooks/icons/consts + sections to window.
const { useState, useEffect, useRef } = React;

const AUTH = "https://pro.yookie.app/auth";
const BILLING = "billing-setup.html";
const SUPPORT_BOT = "https://t.me/yookie_support_bot";
const CLIENT_URL = "index.html";

function useIsMobileB(bp = 860) {
  const [m, setM] = useState(() => typeof window !== "undefined" && window.innerWidth <= bp);
  useEffect(() => {
    const onR = () => setM(window.innerWidth <= bp);
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, [bp]);
  return m;
}

function useReveal(threshold = 0.12) {
  const ref = useRef(null);
  const [v, setV] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setV(true); io.disconnect(); }
    }, { threshold, rootMargin: "0px 0px -18% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, v];
}

// ── Telegram glyph ──
function TgIcon({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
      <path d="M21.6 4.2 2.9 11.4c-1.3.5-1.3 1.2-.2 1.5l4.8 1.5 1.8 5.6c.2.6.4.9.9.9.4 0 .6-.2.9-.5l2.4-2.3 4.9 3.6c.9.5 1.5.2 1.7-.8L23.5 5.6c.3-1.3-.5-1.9-1.4-1.4Z"/>
    </svg>
  );
}

// ── Line icon set (24px, stroke=currentColor) ──
const ICON_PATHS = {
  bell: "M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 003.4 0",
  calendar: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 012 2v13a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z",
  chart: "M3 3v18h18M7 14l3-3 3 3 5-6",
  users: "M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8M22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
  box: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16zM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12",
  gift: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z",
  scissors: "M6 9a3 3 0 100-6 3 3 0 000 6zM6 21a3 3 0 100-6 3 3 0 000 6zM20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12",
  activity: "M22 12h-4l-3 9L9 3l-3 9H2",
  leaf: "M11 20A7 7 0 019.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8a8.6 8.6 0 01-10 10zM2 21c0-3 1.85-5.36 5.08-6",
  book: "M4 19.5A2.5 2.5 0 016.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z",
  user: "M12 11a4 4 0 100-8 4 4 0 000 8zM5.5 21a7 7 0 0113 0",
  grid: "M10 3H3v7h7V3zM21 3h-7v7h7V3zM21 14h-7v7h7v-7zM10 14H3v7h7v-7z",
  check: "M5 12l5 5 9-11",
  plus: "M12 5v14M5 12h14"
};
function Icon({ name, size = 24, sw = 1.8, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={ICON_PATHS[name]} />
    </svg>
  );
}

// ════════════════════════════════════════════════════════════ PRICING
function Pricing({ t }) {
  const [ref, inView] = useReveal();
  const [period, setPeriod] = useState("month");
  const icons = ["gift", "user", "users", "grid"];
  return (
    <section id="pricing" className="sec-pad" ref={ref}>
      <div className="wrap">
        <div className={`reveal ${inView ? "in" : ""}`} style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <p className="kicker ac">{t.pricing.kicker}</p>
          <h2 className="title">{t.pricing.titleA} <span className="script">{t.pricing.titleB}</span></h2>
          <p className="lede" style={{ textAlign: "center" }}>{t.pricing.sub}</p>
          <div className="seg" role="tablist">
            <button className={period === "month" ? "on" : ""} onClick={() => setPeriod("month")}>{t.pricing.monthly}</button>
            <button className={period === "year" ? "on" : ""} onClick={() => setPeriod("year")}>
              {t.pricing.yearly}<span className="save">{t.pricing.save}</span>
            </button>
          </div>
        </div>

        <div className={`price-grid stagger ${inView ? "in" : ""}`}>
          {t.pricing.plans.map((p, i) => {
            const featured = p.id === "pro";
            const isFree = p.id === "free";
            const amount = period === "month" ? p.price : p.priceYear;
            return (
              <div key={p.id} className={`price-card${featured ? " featured" : ""}${isFree ? " price-card-free" : ""}`}>
                {featured && <div className="pop">{t.pricing.popular}</div>}
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 38, height: 38, borderRadius: 11, background: isFree ? "color-mix(in srgb, var(--green) 16%, transparent)" : "var(--ac-soft)", color: isFree ? "#2a8a18" : "var(--ac)", display: "grid", placeItems: "center" }}><Icon name={icons[i]} size={20} /></span>
                  <div>
                    <div className="price-name">{p.name}</div>
                  </div>
                </div>
                <div className="price-who">{p.who}</div>
                <div className="price-amt">
                  {isFree ? <b>Бесплатно</b> : <><b>{amount}</b><span>{t.pricing.perMonth}</span></>}
                </div>
                <div className="price-note">{isFree ? "Навсегда, без карты" : (period === "month" ? t.pricing.yearNote : " ")}</div>
                <ul className="price-feats">
                  {p.feats.map((f, j) =>
                    <li key={j}><span className="ck"><Icon name="check" size={13} sw={3} color={isFree ? "#2a8a18" : "var(--ac)"} /></span>{f}</li>
                  )}
                </ul>
                <a className={`btn ${featured ? "btn-primary" : "btn-ghost"}`} href={`${AUTH}?plan=${p.id}`} data-cta={`pricing-${p.id}`} target="_blank" rel="noopener noreferrer" style={{ width: "100%" }}>
                  {p.cta || t.pricing.cta}
                </a>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════ PAYMENT FLOW
function PaymentFlow({ t }) {
  const [ref, inView] = useReveal();
  return (
    <section id="pay" className="sec-pad" ref={ref}>
      <div className="wrap">
        <div className={`reveal ${inView ? "in" : ""}`}>
          <p className="kicker">{t.pay.kicker}</p>
          <h2 className="title">{t.pay.titleA} <span className="script">{t.pay.titleB}</span></h2>
          <p className="lede">{t.pay.sub}</p>
        </div>
        <div className={`pay-grid stagger ${inView ? "in" : ""}`}>
          {t.pay.steps.map((s, i) =>
            <div key={i} className="pay-card">
              <div className="n">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          )}
        </div>
        <div className={`reveal ${inView ? "in" : ""}`} style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 20, marginTop: 28, background: "#fff", border: "1px solid var(--line)", borderRadius: 20, padding: "22px 26px", boxShadow: "0 16px 40px -28px rgba(20,70,160,0.2)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <span style={{ fontSize: 12.5, letterSpacing: 1, textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 700 }}>{t.pay.providers}</span>
            <div className="prov">
              <span className="prov-chip">Click <span className="soon">{t.pay.soon}</span></span>
              <span className="prov-chip">Payme <span className="soon">{t.pay.soon}</span></span>
            </div>
          </div>
          <a className="btn btn-ghost" href={BILLING} data-cta="billing">{t.pay.cta}</a>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════ BONUS +3
function BonusBlock({ t }) {
  const [ref, inView] = useReveal();
  return (
    <section id="bonus" className="sec-pad" ref={ref}>
      <div className="wrap">
        <div className={`bonus-card reveal-blur ${inView ? "in" : ""}`}>
          <div className="bonus-glow" />
          <div style={{ position: "relative" }}>
            <span className="pro-badge" style={{ background: "color-mix(in srgb, var(--green) 16%, transparent)", color: "#2a8a18" }}>
              <span style={{ width: 7, height: 7, borderRadius: 2, background: "var(--green)" }} />{t.bonus.badge}
            </span>
            <h2 className="title" style={{ marginTop: 18, maxWidth: 760 }}>
              {t.bonus.titleA} <span className="script" style={{ color: "var(--green)" }}>{t.bonus.titleB}</span> {t.bonus.titleC}
            </h2>
            <p className="lede" style={{ maxWidth: 620 }}>{t.bonus.desc}</p>
            <div className="bonus-steps stagger in">
              {t.bonus.steps.map((s, i) =>
                <div key={i} className="bonus-step">
                  <div className="bn">{i + 1}</div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              )}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href={SUPPORT_BOT} data-cta="bonus" target="_blank" rel="noopener noreferrer">
                <TgIcon size={16} color="#fff" />{t.bonus.cta}
              </a>
              <span style={{ fontSize: 12.5, color: "var(--ink-3)", maxWidth: 320, lineHeight: 1.45 }}>{t.bonus.fine}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════ FAQ
function FAQ({ t }) {
  const [ref, inView] = useReveal();
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="sec-pad" ref={ref}>
      <div className="wrap" style={{ maxWidth: 880 }}>
        <div className={`reveal ${inView ? "in" : ""}`}>
          <p className="kicker">{t.faq.kicker}</p>
          <h2 className="title">{t.faq.titleA} <span className="script">{t.faq.titleB}</span></h2>
        </div>
        <div className={`faq-list reveal ${inView ? "in" : ""}`}>
          {t.faq.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item${isOpen ? " open" : ""}`}>
                <button className="faq-q" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
                  {it.q}
                  <span className="ico"><Icon name="plus" size={16} sw={2.4} color="var(--ac)" /></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? 240 : 0 }}>
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════ FINAL CTA
function BizFinalCTA({ t }) {
  const [ref, inView] = useReveal(0.2);
  return (
    <section className="sec-pad" ref={ref} style={{ textAlign: "center" }}>
      <div className={`wrap reveal-blur ${inView ? "in" : ""}`}>
        <h2 className="title" style={{ fontSize: "clamp(46px, 9vw, 132px)", letterSpacing: "-3px", textAlign: "center" }}>
          {t.final.titleA} <span className="script">{t.final.titleB}</span><br />{t.final.titleC}
        </h2>
        <p className="lede" style={{ margin: "26px auto 0", textAlign: "center" }}>{t.final.sub}</p>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
          <a className="btn btn-primary" href={AUTH} data-cta="footer" target="_blank" rel="noopener noreferrer" style={{ height: 58, padding: "0 34px", fontSize: 16 }}>
            <TgIcon size={17} color="#fff" />{t.final.cta}
          </a>
        </div>
        <div style={{ marginTop: 22 }}>
          <a href={CLIENT_URL} style={{ color: "var(--ink-3)", fontSize: 14, fontWeight: 600, textDecoration: "none" }}>{t.final.clientLink}</a>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════ FOOTER
function BizFooter({ t, LangInline }) {
  return (
    <footer className="biz-footer">
      <div className="footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <span className="logo-grad" role="img" aria-label="Yookie" style={{ height: 22, width: 66, display: "inline-block" }} />
            <span className="pro-badge">Pro</span>
          </div>
          <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.55, maxWidth: 300, margin: 0 }}>{t.footer.tagline}</p>
        </div>
        <div>
          <h4>{t.footer.colProduct}</h4>
          <ul>{t.footer.product.map((p, i) => <li key={i}><a href={p[1]}>{p[0]}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.footer.colContact}</h4>
          <ul>
            <li><a href={SUPPORT_BOT} target="_blank" rel="noopener noreferrer">@yookie_support_bot</a></li>
            <li><a href="mailto:support@yookie.app">support@yookie.app</a></li>
            <li><a href={CLIENT_URL}>Yookie для клиентов</a></li>
          </ul>
        </div>
        <div>
          <h4>{t.footer.colLegal}</h4>
          <ul>{t.footer.legal.map((l, i) => <li key={i}><a href={l[1]} target="_blank" rel="noopener noreferrer">{l[0]}</a></li>)}</ul>
          <div style={{ marginTop: 16 }}>
            <h4>{t.footer.colLang}</h4>
            {LangInline}
          </div>
        </div>
      </div>
      <div className="foot-bottom">
        <span>{t.footer.copyright}</span>
        <span style={{ maxWidth: 460 }}>{t.footer.legalNote}</span>
      </div>
    </footer>
  );
}

window.YookieBiz = Object.assign(window.YookieBiz || {}, {
  AUTH, BILLING, SUPPORT_BOT, CLIENT_URL,
  useIsMobileB, useReveal, TgIcon, Icon,
  Pricing, PaymentFlow, BonusBlock, FAQ, BizFinalCTA, BizFooter
});