/* Pricing, Comparison, Sectors */

const Pricing = () => {
  const plans = t("pricing.plans");
  const ent = t("pricing.enterprise");
  const ref = useReveal();
  return (
    <section id="pricing" ref={ref} style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 40 }} className="reveal">
          <div style={{ marginBottom: 14 }}><span className="eyebrow">{t("pricing.eyebrow")}</span></div>
          <h2 className="h2" style={{ maxWidth: 720, margin: "0 auto 14px" }}>{t("pricing.title")}</h2>
          <p className="body-lg" style={{ maxWidth: 560, margin: "0 auto 18px", color: "var(--ink-3)" }}>{t("pricing.subtitle")}</p>
          <div style={{
            display: "inline-flex", gap: 10, alignItems: "center",
            padding: "8px 18px", borderRadius: 999,
            background: "#fff", border: "1px solid var(--line)",
            fontSize: 13, color: "var(--ink-2)",
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
            {t("pricing.billedLabel")}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="price-grid">
          {plans.map((p, i) => (
            <div key={i} className="reveal" style={{
              padding: 28,
              borderRadius: 22,
              background: p.featured ? "var(--accent)" : "#fff",
              color: p.featured ? "#fff" : "var(--ink)",
              border: "1px solid " + (p.featured ? "var(--accent)" : "var(--line)"),
              boxShadow: p.featured ? "0 30px 60px -20px rgba(193,92,196,0.35)" : "var(--shadow-sm)",
              display: "flex", flexDirection: "column", gap: 16,
              position: "relative",
            }}>
              {p.featured && (
                <span style={{
                  position: "absolute", top: -11, left: 24,
                  padding: "4px 12px", borderRadius: 999,
                  background: "#fff", color: "var(--accent)",
                  fontSize: 10, fontWeight: 600, letterSpacing: "0.08em",
                }}>{p.badge}</span>
              )}
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: p.featured ? "rgba(255,255,255,0.18)" : "var(--bg-cream)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                color: p.featured ? "#fff" : "var(--accent)",
              }}>
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M11 3l2 5h5l-4 3 1.5 5-4.5-3-4.5 3L8 11 4 8h5l2-5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></svg>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400, letterSpacing: "-0.01em" }}>{p.name}</div>
                <div style={{ fontSize: 13, color: p.featured ? "rgba(255,255,255,0.85)" : "var(--ink-3)", marginTop: 4 }}>{p.desc}</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400 }}>{p.price}</div>
                <div style={{ fontSize: 12, color: p.featured ? "rgba(255,255,255,0.85)" : "var(--ink-3)", marginTop: 6 }}>{p.period}</div>
              </div>
              <a href={window.ctaUrl()} target="_blank" rel="noreferrer" className="btn" style={{
                width: "100%",
                background: p.featured ? "#fff" : "var(--accent)",
                color: p.featured ? "var(--accent)" : "#fff",
              }}>
                {t("pricing.ctaFree")}
              </a>
              <div style={{ height: 1, background: p.featured ? "rgba(255,255,255,0.25)" : "var(--line-soft)" }} />
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: p.featured ? "rgba(255,255,255,0.85)" : "var(--ink-3)", marginBottom: 10 }}>{p.includesLabel}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                  {p.includes.map((f, j) => (
                    <li key={j} style={{ display: "flex", gap: 10, fontSize: 13 }}>
                      <span style={{ color: "var(--accent)", flex: "none", marginTop: 3 }}><Check /></span>
                      {f}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: p.featured ? "rgba(255,255,255,0.85)" : "var(--ink-3)", marginBottom: 10 }}>{p.keyLabel}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                  {p.features.map((f, j) => (
                    <li key={j} style={{ display: "flex", gap: 10, fontSize: 13 }}>
                      <span style={{ color: "var(--accent)", flex: "none", marginTop: 3 }}><Check /></span>
                      {f}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* Enterprise strip */}
        <div className="reveal" style={{
          marginTop: 16,
          padding: "22px 28px",
          borderRadius: 18,
          background: "#fff", border: "1px solid var(--line)",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
        }}>
          <span style={{ fontSize: 15, color: "var(--ink-2)" }}>{ent.text}</span>
          <a href="#contact" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14 }}>
            {t("pricing.ctaEnt")} <ArrowRight />
          </a>
        </div>

        {/* Free trial badges */}
        <div style={{ display: "flex", gap: 18, justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
          {t("pricing.freeTrial").map((s, i) => (
            <span key={i} style={{ display: "inline-flex", gap: 8, alignItems: "center", color: "var(--ink-3)", fontSize: 13 }}>
              <span style={{ color: "var(--accent)" }}><Check /></span>{s}
            </span>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .price-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const Comparison = () => {
  const rows = t("comparison.rows");
  const ref = useReveal();
  return (
    <section id="comparison" ref={ref}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 40 }} className="reveal">
          <div style={{ marginBottom: 14 }}><span className="eyebrow">{t("comparison.eyebrow")}</span></div>
          <h2 className="h2" style={{ maxWidth: 800, margin: "0 auto 16px" }}>{t("comparison.title")}</h2>
          <p className="body-lg" style={{ maxWidth: 620, margin: "0 auto", color: "var(--ink-3)" }}>{t("comparison.subtitle")}</p>
        </div>

        <div className="reveal" style={{
          display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 0,
          alignItems: "stretch",
        }} id="cmp-wrap">
          <div className="card" style={{ padding: 28, background: "var(--bg-soft)" }}>
            <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 14 }}>{t("comparison.traditional")}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {rows.map((r, i) => (
                <li key={i} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: i < rows.length - 1 ? "1px solid var(--line-soft)" : "none" }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 6,
                    background: "rgba(0,0,0,0.05)", color: "var(--ink-3)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    flex: "none",
                  }}><Cross /></span>
                  <span style={{ fontSize: 14, color: "var(--ink-2)" }}>{r.trad}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: "0 8px",
            fontFamily: "var(--font-display)",
            fontSize: 32, fontStyle: "italic", color: "var(--accent)",
          }}>
            {t("comparison.vs")}
          </div>
          <div className="card" style={{
            padding: 28,
            background: "linear-gradient(180deg, #fbe3f0, #f8ecf4)",
            borderColor: "var(--accent)",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <Logo />
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {rows.map((r, i) => (
                <li key={i} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: i < rows.length - 1 ? "1px solid rgba(193, 92, 196, 0.15)" : "none" }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 6,
                    background: "var(--accent)", color: "#fff",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    flex: "none",
                  }}><Check /></span>
                  <span style={{ fontSize: 14, color: "var(--ink)" }}>{r.ai}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 32 }} className="reveal">
          <a href={window.ctaUrl()} target="_blank" rel="noreferrer" className="btn btn-primary btn-lg">
            {t("comparison.cta")} <ArrowRight />
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          #cmp-wrap { grid-template-columns: 1fr !important; gap: 12px !important; }
          #cmp-wrap > div[style*="italic"] { padding: 12px 0 !important; }
        }
      `}</style>
    </section>
  );
};

const Sectors = () => {
  const tabs = t("sectors.tabs");
  const hi = t("sectors.highlights");
  const [active, setActive] = React.useState(0);
  const ref = useReveal();
  const cur = tabs[active];
  return (
    <section ref={ref} style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 36 }} className="reveal">
          <div style={{ marginBottom: 14 }}><span className="eyebrow">{t("sectors.eyebrow")}</span></div>
          <h2 className="h2" style={{ maxWidth: 680, margin: "0 auto" }}>{t("sectors.title")}</h2>
        </div>

        <div role="tablist" style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap", justifyContent: "center" }} className="reveal">
          {tabs.map((tb, i) => (
            <button key={tb.key} role="tab" aria-selected={active === i} onClick={() => setActive(i)} style={{
              padding: "10px 18px", borderRadius: 999, fontSize: 13,
              border: "1px solid " + (active === i ? "var(--accent)" : "var(--line)"),
              background: active === i ? "var(--accent)" : "#fff",
              color: active === i ? "#fff" : "var(--ink-2)",
              transition: "all 200ms var(--ease)",
              cursor: "pointer",
            }}>
              {tb.label}
            </button>
          ))}
        </div>

        <div className="card reveal" style={{ padding: 36, background: "#fff" }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 2.8vw, 34px)", fontWeight: 400, letterSpacing: "-0.015em", marginBottom: 22 }}>{cur.headline}</h3>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="sec-grid">
            {cur.items.map((it, i) => (
              <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <div style={{ fontSize: 16, fontWeight: 500 }}>{it.title}</div>
                <p className="body" style={{ color: "var(--ink-3)" }}>{it.body}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
            {hi.map((h, i) => (
              <span key={i} className="pill" style={{ fontSize: 12 }}><span className="dot" /> {h}</span>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .sec-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

window.Pricing = Pricing;
window.Comparison = Comparison;
window.Sectors = Sectors;