// Sections.jsx — remaining landing sections

function Proof({ t }) {
  return (
    <section id="proof" style={{ padding: "56px 32px", borderBottom: "1px solid var(--divider)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{
          font: "600 12px Manrope, sans-serif", letterSpacing: ".08em",
          textTransform: "uppercase", color: "var(--fg-muted)", marginBottom: 20,
        }}>{t.proof.title}</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {t.proof.items.map((item, i) => (
            <div key={i} style={{
              background: "var(--surface-raised)", border: "1px solid var(--border)",
              borderRadius: 14, padding: 20, boxShadow: "var(--shadow-xs)",
            }}>
              <div className="oz-num" style={{
                font: "800 40px/1.05 Manrope, sans-serif",
                letterSpacing: "-0.02em", color: "var(--fg)",
                fontVariantNumeric: "tabular-nums", marginBottom: 4,
              }}>{item.stat}</div>
              <div style={{ font: "500 13px Manrope, sans-serif", color: "var(--fg-muted)", marginBottom: 12 }}>
                {item.unit}
              </div>
              <div style={{ font: "600 14px Manrope, sans-serif", color: "var(--fg)" }}>{item.who}</div>
              <div style={{ font: "500 12px Manrope, sans-serif", color: "var(--fg-subtle)", marginTop: 2 }}>{item.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features({ t }) {
  return (
    <section id="features" style={{ padding: "96px 32px", borderBottom: "1px solid var(--divider)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <SectionHeading overline={t.features.overline} title={t.features.title} sub={t.features.sub}/>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1,
          background: "var(--border)",
          border: "1px solid var(--border)",
          borderRadius: 20, overflow: "hidden",
          marginTop: 40,
        }}>
          {t.features.items.map((it, i) => (
            <div key={i} style={{
              background: "var(--surface-raised)", padding: "28px 28px 32px",
              display: "flex", flexDirection: "column", gap: 10,
              minHeight: 200,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: "var(--info-bg)", color: "var(--brand-primary)",
                display: "grid", placeItems: "center", marginBottom: 6,
              }}>
                <Icon name={it.icon} size={18}/>
              </div>
              <div style={{ font: "700 18px Manrope, sans-serif", color: "var(--fg)", letterSpacing: "-0.005em" }}>
                {it.title}
              </div>
              <div style={{ font: "400 14px/1.6 Manrope, sans-serif", color: "var(--fg-muted)", textWrap: "pretty" }}>
                {it.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Duo({ t }) {
  return (
    <section id="duo" style={{ padding: "96px 32px", borderBottom: "1px solid var(--divider)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <SectionHeading overline={t.duo.overline} title={null} sub={null}/>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 12 }}>
          <DuoCard kind="member" title={t.duo.memberTitle} body={t.duo.memberBody} points={t.duo.memberPoints}/>
          <DuoCard kind="creator" title={t.duo.creatorTitle} body={t.duo.creatorBody} points={t.duo.creatorPoints}/>
        </div>
      </div>
    </section>
  );
}

function DuoCard({ kind, title, body, points }) {
  return (
    <div style={{
      background: "var(--surface-raised)", border: "1px solid var(--border)",
      borderRadius: 20, padding: 28, boxShadow: "var(--shadow-xs)",
      display: "flex", flexDirection: "column", gap: 20,
    }}>
      <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: kind === "member" ? "var(--info-bg)" : "var(--surface-sunken)",
          color: kind === "member" ? "var(--brand-primary)" : "var(--fg)",
          display: "grid", placeItems: "center", flexShrink: 0,
        }}>
          <Icon name={kind === "member" ? "users" : "settings"} size={22}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ font: "700 22px Manrope, sans-serif", color: "var(--fg)", letterSpacing: "-0.01em", marginBottom: 6 }}>
            {title}
          </div>
          <div style={{ font: "400 15px/1.55 Manrope, sans-serif", color: "var(--fg-muted)", textWrap: "pretty" }}>
            {body}
          </div>
        </div>
      </div>
      {kind === "member" ? <MemberMini/> : <CreatorMini/>}
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {points.map((p, i) => (
          <li key={i} style={{ display: "flex", alignItems: "center", gap: 10, font: "500 14px Manrope, sans-serif", color: "var(--fg)" }}>
            <span style={{ width: 16, height: 16, borderRadius: 999, background: "var(--success-bg)", color: "var(--success)", display: "grid", placeItems: "center" }}>
              <Icon name="check" size={10}/>
            </span>
            {p}
          </li>
        ))}
      </ul>
    </div>
  );
}

function MemberMini() {
  // Minimal phone frame showing feed row + bottom tab bar
  return (
    <div style={{
      background: "var(--surface-sunken)",
      borderRadius: 14,
      padding: 14,
      display: "grid", gridTemplateColumns: "220px 1fr", gap: 14, alignItems: "center",
      border: "1px solid var(--border)",
    }}>
      <div style={{
        width: 220, height: 260,
        background: "var(--surface-raised)",
        borderRadius: 20,
        border: "1px solid var(--border)",
        boxShadow: "var(--shadow-sm)",
        padding: "14px 12px", display: "flex", flexDirection: "column", gap: 10,
      }}>
        <div style={{ font: "700 13px Manrope, sans-serif", color: "var(--fg)" }}>Лента</div>
        {[0,1].map(i => (
          <div key={i} style={{ background: "var(--surface)", borderRadius: 10, padding: 10, display: "flex", gap: 8 }}>
            <div style={{ width: 24, height: 24, borderRadius: 999, background: i ? "#BFDDF5" : "#F4D6A8" }}/>
            <div style={{ flex: 1 }}>
              <div style={{ width: "70%", height: 7, background: "var(--border-strong)", borderRadius: 4, marginBottom: 4 }}/>
              <div style={{ width: "92%", height: 6, background: "var(--border)", borderRadius: 4 }}/>
              <div style={{ width: "60%", height: 6, background: "var(--border)", borderRadius: 4, marginTop: 3 }}/>
            </div>
          </div>
        ))}
        <div style={{ flex: 1 }}/>
        <div style={{ display: "flex", justifyContent: "space-around", padding: "6px 4px 0", borderTop: "1px solid var(--divider)", color: "var(--fg-subtle)" }}>
          <Icon name="feed" size={16} color="var(--brand-primary)"/>
          <Icon name="classroom" size={16}/>
          <Icon name="chat" size={16}/>
          <Icon name="trophy" size={16}/>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <MiniChip icon="bell" label="3 напоминания"/>
        <MiniChip icon="heart" label="12 новых реакций"/>
        <MiniChip icon="calendar" label="Вебинар через 40 мин"/>
      </div>
    </div>
  );
}

function CreatorMini() {
  // Dense admin KPI row + bars
  return (
    <div style={{
      background: "var(--surface-sunken)",
      borderRadius: 14,
      padding: 16,
      border: "1px solid var(--border)",
      display: "flex", flexDirection: "column", gap: 14,
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
        {[
          { l: "MRR", v: "1\u202F284\u202F000", u: "₸", d: "+12%" },
          { l: "Участников", v: "412", u: "", d: "+18" },
          { l: "Удержание", v: "94", u: "%", d: "+2 п.п." },
        ].map((k, i) => (
          <div key={i} style={{ background: "var(--surface-raised)", border: "1px solid var(--border)", borderRadius: 10, padding: "10px 12px" }}>
            <div style={{ font: "500 11px Manrope, sans-serif", color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".06em" }}>{k.l}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 2 }}>
              <span className="oz-num" style={{ font: "700 18px Manrope, sans-serif", color: "var(--fg)", fontVariantNumeric: "tabular-nums" }}>{k.v}</span>
              {k.u && <span style={{ font: "600 12px Manrope, sans-serif", color: "var(--fg-muted)" }}>{k.u}</span>}
            </div>
            <div style={{ font: "600 11px Manrope, sans-serif", color: "var(--success)", marginTop: 2 }}>{k.d}</div>
          </div>
        ))}
      </div>
      <div style={{ background: "var(--surface-raised)", border: "1px solid var(--border)", borderRadius: 10, padding: 12 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
          <span style={{ font: "600 12px Manrope, sans-serif", color: "var(--fg)" }}>Активность · 7 дней</span>
          <span style={{ font: "500 11px Manrope, sans-serif", color: "var(--fg-subtle)" }}>Пн–Вс</span>
        </div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 56 }}>
          {[34, 52, 48, 70, 62, 88, 74].map((h, i) => (
            <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 5 ? "var(--brand-primary)" : "color-mix(in srgb, var(--brand-primary) 22%, var(--surface))", borderRadius: 4 }}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function MiniChip({ icon, label }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10,
      padding: "10px 12px",
      background: "var(--surface-raised)", border: "1px solid var(--border)",
      borderRadius: 10,
      font: "500 13px Manrope, sans-serif", color: "var(--fg)",
    }}>
      <span style={{ color: "var(--brand-primary)" }}><Icon name={icon} size={15}/></span>
      {label}
    </div>
  );
}

function Locales({ t }) {
  return (
    <section id="locales" style={{ padding: "96px 32px", borderBottom: "1px solid var(--divider)", background: "var(--surface)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={overlineStyle}>{t.locales.overline}</div>
          <h2 style={headingStyle}>{t.locales.title}</h2>
          <p style={{ font: "400 17px/1.55 Manrope, sans-serif", color: "var(--fg-muted)", margin: 0, maxWidth: 480, textWrap: "pretty" }}>
            {t.locales.body}
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{
            background: "var(--surface-raised)", border: "1px solid var(--border)",
            borderRadius: 14, padding: 18, boxShadow: "var(--shadow-xs)",
          }}>
            <div style={overlineStyle}>{t.locales.overline.split(" ")[0]}</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 8 }}>
              {t.locales.scripts.map((s, i) => (
                <div key={i} style={{
                  padding: "12px 14px",
                  background: "var(--surface)", borderRadius: 10,
                  border: "1px solid var(--border)",
                }}>
                  <div style={{ font: "600 12px Manrope, sans-serif", color: "var(--fg-muted)", marginBottom: 4 }}>{s.label}</div>
                  <div style={{ font: "600 15px Manrope, sans-serif", color: "var(--fg)" }}>{s.sample}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            background: "var(--surface-raised)", border: "1px solid var(--border)",
            borderRadius: 14, padding: 18, boxShadow: "var(--shadow-xs)",
          }}>
            <div style={overlineStyle}>Currencies</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 8 }}>
              {t.locales.currencies.map((c, i) => (
                <div key={i} style={{
                  padding: "14px",
                  background: "var(--surface)", borderRadius: 10,
                  border: "1px solid var(--border)",
                }}>
                  <div style={{ font: "600 11px Manrope, sans-serif", color: "var(--fg-muted)", letterSpacing: ".06em" }}>{c.code}</div>
                  <div className="oz-num" style={{ font: "700 17px Manrope, sans-serif", color: "var(--fg)", marginTop: 4, fontVariantNumeric: "tabular-nums" }}>{c.sample}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing({ t, lang }) {
  return (
    <section id="pricing" style={{ padding: "96px 32px", borderBottom: "1px solid var(--divider)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <SectionHeading overline={t.pricing.overline} title={t.pricing.title} sub={t.pricing.sub}/>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 40 }}>
          {t.pricing.plans.map((p, i) => <PlanCard key={i} plan={p} lang={lang}/>)}
        </div>
        <div style={{ font: "500 13px Manrope, sans-serif", color: "var(--fg-subtle)", marginTop: 16, textAlign: "center" }}>
          {t.pricing.footnote}
        </div>
      </div>
    </section>
  );
}

function PlanCard({ plan, lang }) {
  const hi = plan.highlighted;
  return (
    <div style={{
      position: "relative",
      background: hi ? "var(--fg)" : "var(--surface-raised)",
      color: hi ? "var(--fg-inverse)" : "var(--fg)",
      border: hi ? "1px solid var(--fg)" : "1px solid var(--border)",
      borderRadius: 18, padding: 28,
      boxShadow: hi ? "var(--shadow-lg)" : "var(--shadow-xs)",
      display: "flex", flexDirection: "column", gap: 18,
    }}>
      {plan.badge && (
        <span style={{
          position: "absolute", top: -12, left: 24,
          padding: "5px 12px", borderRadius: 999,
          background: "var(--brand-accent)", color: "var(--brand-accent-fg)",
          font: "700 11px Manrope, sans-serif", letterSpacing: ".04em",
          textTransform: "uppercase",
          boxShadow: "var(--shadow-sm)",
        }}>{plan.badge}</span>
      )}
      <div>
        <div style={{ font: "700 18px Manrope, sans-serif", color: hi ? "var(--fg-inverse)" : "var(--fg)", marginBottom: 4 }}>
          {plan.name}
        </div>
        <div style={{ font: "500 13px Manrope, sans-serif", color: hi ? "color-mix(in srgb, var(--fg-inverse) 70%, transparent)" : "var(--fg-muted)", textWrap: "pretty" }}>
          {plan.summary}
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <span className="oz-num" style={{ font: "800 40px/1 Manrope, sans-serif", letterSpacing: "-0.02em", color: hi ? "var(--fg-inverse)" : "var(--fg)", fontVariantNumeric: "tabular-nums" }}>
          {plan.price}
        </span>
        <span style={{ font: "500 14px Manrope, sans-serif", color: hi ? "color-mix(in srgb, var(--fg-inverse) 65%, transparent)" : "var(--fg-muted)" }}>
          {plan.unit}
        </span>
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {plan.features.map((f, i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "center", font: "500 14px Manrope, sans-serif", color: hi ? "color-mix(in srgb, var(--fg-inverse) 85%, transparent)" : "var(--fg)" }}>
            <span style={{
              width: 16, height: 16, borderRadius: 999, flexShrink: 0,
              background: hi ? "color-mix(in srgb, var(--fg-inverse) 12%, transparent)" : "var(--info-bg)",
              color: hi ? "var(--fg-inverse)" : "var(--brand-primary)",
              display: "grid", placeItems: "center",
            }}>
              <Icon name="check" size={10}/>
            </span>
            {f}
          </li>
        ))}
      </ul>
      <div style={{ flex: 1 }}/>
      <a
        href={/^(По запросу|Негізінде|Custom|Contact)/i.test(plan.price) ? "mailto:admin@ozimiz.net" : appUrl(lang, "/signup")}
        style={{
          ...(hi ? {
            background: "var(--brand-primary-fg)",
            color: "var(--fg)",
            border: "1px solid var(--brand-primary-fg)",
          } : primaryBtn),
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          padding: "12px 18px", borderRadius: 10,
          font: "600 14px Manrope, sans-serif", textDecoration: "none",
        }}
      >{plan.cta}</a>
    </div>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: "96px 32px", borderBottom: "1px solid var(--divider)" }}>
      <div style={{ maxWidth: 860, margin: "0 auto" }}>
        <h2 style={{ ...headingStyle, textAlign: "center", marginBottom: 32 }}>{t.faq.title}</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {t.faq.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                background: "var(--surface-raised)",
                border: "1px solid var(--border)", borderRadius: 14,
                overflow: "hidden",
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  display: "flex", width: "100%", alignItems: "center", gap: 12,
                  padding: "18px 22px", border: 0, background: "transparent",
                  font: "600 16px Manrope, sans-serif", color: "var(--fg)",
                  textAlign: "left", cursor: "pointer",
                }}>
                  <span style={{ flex: 1 }}>{it.q}</span>
                  <span style={{ color: "var(--fg-muted)", transform: isOpen ? "rotate(90deg)" : "rotate(0deg)", transition: "transform var(--dur-base) var(--ease-standard)" }}>
                    <Icon name="chevron" size={16}/>
                  </span>
                </button>
                {isOpen && (
                  <div style={{
                    padding: "0 22px 20px",
                    font: "400 15px/1.6 Manrope, sans-serif", color: "var(--fg-muted)",
                    textWrap: "pretty",
                  }}>{it.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ t, lang }) {
  return (
    <section id="start" style={{ padding: "96px 32px", background: "var(--fg)", color: "var(--fg-inverse)" }}>
      <div style={{ maxWidth: 860, margin: "0 auto", textAlign: "center" }}>
        <h2 style={{
          font: "800 clamp(32px, 4vw, 48px)/1.1 Manrope, sans-serif",
          letterSpacing: "-0.02em", color: "var(--fg-inverse)",
          margin: "0 0 16px", textWrap: "balance",
        }}>{t.finalCta.title}</h2>
        <p style={{
          font: "400 18px/1.55 Manrope, sans-serif",
          color: "color-mix(in srgb, var(--fg-inverse) 70%, transparent)",
          margin: "0 auto 28px", maxWidth: 560, textWrap: "pretty",
        }}>{t.finalCta.body}</p>
        <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
          <a href={appUrl(lang, "/signup")} style={{
            ...primaryBtn, padding: "14px 22px", fontSize: 15,
            background: "var(--brand-primary-fg)", color: "var(--fg)",
          }}>{t.finalCta.primary}</a>
          <a href="mailto:admin@ozimiz.net" style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
            padding: "14px 22px",
            background: "transparent", color: "var(--fg-inverse)",
            border: "1px solid color-mix(in srgb, var(--fg-inverse) 25%, transparent)",
            borderRadius: 10,
            font: "600 15px Manrope, sans-serif", textDecoration: "none",
          }}>{t.finalCta.secondary}</a>
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang, dark }) {
  const productHrefs = ["#features", "#pricing", "#proof", "#faq"];
  const companyHrefs = ["#duo", "#proof", "mailto:admin@ozimiz.net", "mailto:admin@ozimiz.net"];
  const legalHrefs = [
    appUrl(lang, "/legal/terms"),
    appUrl(lang, "/legal/privacy"),
    appUrl(lang, "/legal/offer"),
    appUrl(lang, "/legal/refunds"),
  ];
  return (
    <footer style={{ padding: "56px 32px 48px", background: "var(--bg)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <img src={dark ? "logo-ozimiz-dark.svg" : "logo-ozimiz.svg"} width="120" height="32" alt="Ozimiz"/>
          <div style={{ font: "500 13px Manrope, sans-serif", color: "var(--fg-muted)", marginTop: 12, maxWidth: 280 }}>
            {t.footer.tagline}
          </div>
        </div>
        <FooterCol title={t.footer.product} links={t.footer.productLinks} hrefs={productHrefs}/>
        <FooterCol title={t.footer.company} links={t.footer.companyLinks} hrefs={companyHrefs}/>
        <FooterCol title={t.footer.legal} links={t.footer.legalLinks} hrefs={legalHrefs}/>
      </div>
      <div style={{
        maxWidth: 1240, margin: "40px auto 0", paddingTop: 20,
        borderTop: "1px solid var(--divider)",
        font: "500 13px Manrope, sans-serif", color: "var(--fg-subtle)",
      }}>{t.footer.copy}</div>
    </footer>
  );
}

function FooterCol({ title, links, hrefs }) {
  return (
    <div>
      <div style={{ font: "700 13px Manrope, sans-serif", color: "var(--fg)", marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {links.map((l, i) => (
          <li key={i}>
            <a href={hrefs?.[i] ?? "#"} style={{ font: "500 14px Manrope, sans-serif", color: "var(--fg-muted)", textDecoration: "none" }}>{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function SectionHeading({ overline, title, sub }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, maxWidth: 720 }}>
      {overline && <div style={overlineStyle}>{overline}</div>}
      {title && <h2 style={headingStyle}>{title}</h2>}
      {sub && <p style={{ font: "400 17px/1.55 Manrope, sans-serif", color: "var(--fg-muted)", margin: 0, textWrap: "pretty" }}>{sub}</p>}
    </div>
  );
}

const overlineStyle = {
  font: "600 12px Manrope, sans-serif", letterSpacing: ".08em",
  textTransform: "uppercase", color: "var(--fg-muted)",
};
const headingStyle = {
  font: "800 clamp(30px, 3.4vw, 40px)/1.1 Manrope, sans-serif",
  letterSpacing: "-0.02em", color: "var(--fg)",
  margin: 0, textWrap: "balance",
};

Object.assign(window, { Proof, Features, Duo, Locales, Pricing, FAQ, FinalCTA, Footer, SectionHeading });