// Development plans (3 cards) + Monthly plans

const { useState: useStateP } = React;

function Plans({ t }) {
  return (
    <section id="plans" className="section">
      <div className="container">
        <div style={{ marginBottom: 70, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "end" }} className="plans-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>{t.plans.eyebrow}</span>
            <h2 className="h2" style={{ marginTop: 24, maxWidth: "12ch" }}>{t.plans.title}</h2>
          </div>
          <p className="lead" style={{ marginBottom: 6 }}>{t.plans.sub}</p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr 1fr", gap: 16 }} className="plans-grid">
          {t.plans.tiers.map((tier, i) => (
            <PlanCard key={i} tier={tier} popular={i === 1} t={t} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PlanCard({ tier, popular, t }) {
  const [hover, setHover] = useStateP(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: popular ? "var(--bg-2)" : "var(--bg-1)",
        border: `1px solid ${popular ? "var(--accent)" : "var(--line)"}`,
        borderRadius: "var(--r-lg)",
        padding: popular ? "44px 36px" : "36px 32px",
        position: "relative",
        transform: popular ? "translateY(-12px)" : "translateY(0)",
        boxShadow: popular ? "0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-soft)" : "none",
        transition: "all 0.35s var(--ease)",
        ...(hover && !popular ? { transform: "translateY(-4px)", borderColor: "var(--line-strong)" } : {}),
      }}
    >
      {popular && (
        <div style={{
          position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
          background: "var(--accent)", color: "var(--accent-fg)",
          padding: "6px 14px", borderRadius: 999,
          fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
          fontWeight: 700,
          display: "inline-flex", alignItems: "center", gap: 6,
          boxShadow: "0 8px 24px var(--accent-glow)",
        }}>
          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 0L6.18 3.27L9.76 3.46L7.05 5.73L7.94 9.21L5 7.27L2.06 9.21L2.95 5.73L0.24 3.46L3.82 3.27Z" fill="currentColor"/></svg>
          {t.plans.popular}
        </div>
      )}

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
        <h3 className="h3" style={{ fontSize: 26 }}>{tier.name}</h3>
        <span className="mono">+ Impuesto</span>
      </div>

      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 8 }}>
        <span style={{ fontFamily: "var(--ff-display)", fontSize: 12, color: "var(--fg-2)", marginRight: 2 }}>{t.plans.currency}</span>
        <span style={{ fontFamily: "var(--ff-display)", fontSize: 56, fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 1, color: popular ? "var(--accent)" : "var(--fg-0)" }}>
          {tier.price}
        </span>
      </div>
      <div className="mono" style={{ marginBottom: 28 }}>CLP · {t.plans.one_time}</div>

      <p style={{ color: "var(--fg-1)", fontSize: 15, lineHeight: 1.5, marginBottom: 28, minHeight: 48 }}>{tier.desc}</p>

      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 32px", display: "flex", flexDirection: "column", gap: 12 }}>
        {tier.features.map((f, i) => (
          <li key={i} style={{ display: "flex", gap: 12, fontSize: 14, color: "var(--fg-1)", lineHeight: 1.4 }}>
            <span style={{ color: "var(--accent)", flexShrink: 0, marginTop: 2 }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7L6 11L12 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
            {f}
          </li>
        ))}
      </ul>

      <a href="#contact" className={popular ? "btn btn--primary" : "btn btn--ghost"} style={{ width: "100%", justifyContent: "center" }}>
        {t.plans.cta}
        <span className="arrow"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
      </a>
    </div>
  );
}

function MonthlyPlans({ t }) {
  const [mode, setMode] = useStateP("monthly");
  const multiplier = { monthly: 1, semester: 0.9, annual: 0.8 };

  const formatPrice = (p) => {
    const num = parseInt(p.replace(/[.,]/g, ""), 10);
    const adjusted = Math.round(num * multiplier[mode]);
    return adjusted.toLocaleString("es-CL");
  };

  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 50, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>{t.monthly.eyebrow}</span>
            <h2 className="h2" style={{ marginTop: 24, maxWidth: "16ch" }}>{t.monthly.title}</h2>
          </div>
          {/* mode switcher */}
          <div style={{ display: "inline-flex", padding: 4, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 999 }}>
            {Object.keys(t.monthly.modes).map(k => (
              <button
                key={k}
                onClick={() => setMode(k)}
                style={{
                  padding: "10px 18px",
                  borderRadius: 999,
                  border: "none",
                  background: mode === k ? "var(--accent)" : "transparent",
                  color: mode === k ? "var(--accent-fg)" : "var(--fg-1)",
                  fontFamily: "var(--ff-body)",
                  fontWeight: 500,
                  fontSize: 13,
                  letterSpacing: "-0.01em",
                  transition: "all 0.25s var(--ease)",
                  display: "flex", alignItems: "center", gap: 8,
                }}
              >
                {t.monthly.modes[k]}
                {k !== "monthly" && (
                  <span style={{
                    fontFamily: "var(--ff-mono)",
                    fontSize: 9,
                    padding: "2px 6px",
                    borderRadius: 999,
                    background: mode === k ? "rgba(7,8,11,0.2)" : "var(--accent-soft)",
                    color: mode === k ? "var(--accent-fg)" : "var(--accent)",
                  }}>
                    {k === "semester" ? "−10%" : "−20%"}
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>

        <div style={{ marginBottom: 24, fontSize: 13, color: "var(--fg-2)" }}>
          <span className="mono">→ {t.monthly.mode_note[mode]}</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="monthly-grid">
          {t.monthly.cards.map((c, i) => (
            <div key={i} className="card" style={{ padding: 36, display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12 }}>
                <h3 className="h3" style={{ fontSize: 24 }}>{c.name}</h3>
                <span className="mono">+ Impuesto</span>
              </div>
              <p style={{ color: "var(--fg-2)", fontSize: 14, lineHeight: 1.5, marginBottom: 28 }}>{c.desc}</p>

              {/* tier prices */}
              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28, padding: 16, background: "var(--bg-2)", borderRadius: "var(--r-md)", border: "1px solid var(--line)" }}>
                {c.tiers.map((tier, j) => (
                  <div key={j} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <span style={{ fontSize: 13, color: "var(--fg-1)" }}>{tier.label}</span>
                    <span style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                      <span style={{ fontFamily: "var(--ff-display)", fontSize: 24, fontWeight: 500, color: "var(--accent)", letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>
                        {t.plans.currency}{formatPrice(tier.price)}
                      </span>
                      <span className="mono" style={{ fontSize: 10 }}>{t.monthly.per_month}</span>
                    </span>
                  </div>
                ))}
              </div>

              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                {c.features.map((f, j) => (
                  <li key={j} style={{ display: "flex", gap: 8, fontSize: 13, color: "var(--fg-1)", lineHeight: 1.4 }}>
                    <span style={{ color: "var(--accent)", flexShrink: 0, marginTop: 2 }}>
                      <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2 7L6 11L12 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>

              <a href="#contact" className="btn btn--ghost" style={{ marginTop: "auto", alignSelf: "flex-start" }}>
                {t.monthly.cta}
                <span className="arrow"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Plans = Plans;
window.MonthlyPlans = MonthlyPlans;