// Infrastructure setup — bridge section between dev plans and monthly plans

function Setup({ t }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 44, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>{t.setup.eyebrow}</span>
            <h2 className="h2" style={{ marginTop: 24, maxWidth: "18ch" }}>{t.setup.title}</h2>
          </div>
          <p className="lead" style={{ maxWidth: "44ch", marginBottom: 6 }}>{t.setup.sub}</p>
        </div>

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

              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
                <span style={{ fontFamily: "var(--ff-display)", fontSize: 12, color: "var(--fg-2)" }}>{t.plans.currency}</span>
                <span style={{ fontFamily: "var(--ff-display)", fontSize: 38, fontWeight: 500, letterSpacing: "-0.03em", lineHeight: 1, color: "var(--accent)", fontVariantNumeric: "tabular-nums" }}>
                  {c.price}
                </span>
              </div>
              <div className="mono" style={{ marginBottom: 22 }}>CLP · {t.setup.one_time}</div>

              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: 10 }}>
                {c.features.map((f, j) => (
                  <li key={j} style={{ display: "flex", gap: 10, 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.setup.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.Setup = Setup;