// sections-b.jsx — Portfolio, Pricing, Maintenance, Process, Why

// ---------------------------------------------------------------------------
// Portfolio
// ---------------------------------------------------------------------------
function Portfolio({ t }) {
  return (
    <section id="portfolio" className="section container">
      <div className="sec-head">
        <span className="eyebrow reveal">{t.portfolio.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.portfolio.title}</h2>
        <p className="lede reveal d2">{t.portfolio.sub}</p>
      </div>
      <div className="port-grid">
        {t.portfolio.items.map((it, i) => (
          <a
            key={i}
            href="#"
            className={"port-card reveal d" + ((i % 4) + 1)}
            onClick={(e) => e.preventDefault()}
          >
            <div className="port-img">
              <img src={it.img} alt={it.name} loading="lazy" />
              <div className="port-img-overlay" />
              <span className="port-tag">{it.tag}</span>
            </div>
            <div className="port-body">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8, marginBottom: 4 }}>
                <h3 className="h-card" style={{ fontSize: 19 }}>{it.name}</h3>
              </div>
              <div style={{ fontSize: 13, color: "var(--gold-deep)", fontWeight: 500, marginBottom: 4 }}>{it.type}</div>
              <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 14, lineHeight: 1.55 }}>{it.desc}</p>
              <div className="port-meta">
                <span className="port-link">
                  {t.portfolio.cta}
                  <window.I.arrow width={14} height={14} />
                </span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Pricing
// ---------------------------------------------------------------------------
function Pricing({ t, waLink }) {
  return (
    <section id="pricing" className="section container">
      <div className="sec-head center">
        <span className="eyebrow reveal">{t.pricing.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.pricing.title}</h2>
        <p className="lede reveal d2" style={{ textAlign: "center", marginInline: "auto" }}>{t.pricing.sub}</p>
      </div>

      <div className="pricing-grid">
        {t.pricing.plans.map((p, i) => (
          <div key={i} className={"price-card reveal d" + (i + 1) + (p.featured ? " featured" : "")}>
            {p.featured && <span className="price-badge">{t.pricing.featuredLabel}</span>}
            <div>
              <div className="price-name">{p.name}</div>
              <div className="price-from">{t.pricing.from}</div>
              <div className="price-amount">
                {p.amount}
                <span className="currency">{t.pricing.currency}</span>
              </div>
            </div>

            <div className="price-features">
              {p.features.map((f, j) => (
                <div key={j} className="price-feature">
                  <window.I.check />
                  <span>{f}</span>
                </div>
              ))}
            </div>

            <a
              href={waLink}
              target="_blank"
              rel="noopener"
              className={"btn " + (p.featured ? "btn-gold" : "btn-ghost")}
              style={{ width: "100%" }}
            >
              {t.pricing.cta}
              <window.I.arrow style={{ transform: t.dir === "rtl" ? "scaleX(-1)" : "none" }} />
            </a>
          </div>
        ))}
      </div>

      <p className="price-note reveal">{t.pricing.note}</p>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Maintenance
// ---------------------------------------------------------------------------
function Maintenance({ t, waLink }) {
  return (
    <section className="section-tight container">
      <div className="maint reveal">
        <div style={{ position: "relative", zIndex: 1 }}>
          <span className="eyebrow" style={{ background: "rgba(212,178,119,.18)", color: "var(--gold-soft)", borderColor: "rgba(212,178,119,.3)", marginBottom: 16 }}>
            {t.maint.eyebrow}
          </span>
          <h3 className="h-section" style={{ color: "var(--bg)", marginTop: 14, marginBottom: 14 }}>{t.maint.title}</h3>
          <p style={{ color: "color-mix(in srgb, var(--bg) 75%, transparent)", fontSize: 15.5, lineHeight: 1.65, margin: "0 0 24px", maxWidth: "44ch" }}>
            {t.maint.sub}
          </p>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 28 }}>
            <span style={{ fontSize: 13, color: "color-mix(in srgb, var(--bg) 60%, transparent)" }}>{t.maint.from}</span>
            <span className="maint-price">{t.maint.price}</span>
            <span style={{ fontSize: 14, color: "color-mix(in srgb, var(--bg) 70%, transparent)" }}>{t.maint.currency}</span>
          </div>
          <a href={waLink} target="_blank" rel="noopener" className="btn btn-gold">
            {t.maint.cta}
            <window.I.arrow style={{ transform: t.dir === "rtl" ? "scaleX(-1)" : "none" }} />
          </a>
        </div>

        <div className="maint-feats" style={{ position: "relative", zIndex: 1 }}>
          {t.maint.features.map((f, i) => (
            <div key={i} className="maint-feat">
              <window.I.check width={16} height={16} />
              <span>{f}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Process
// ---------------------------------------------------------------------------
function Process({ t }) {
  const icons = [window.I.send, window.I.palette, window.I.clock, window.I.launch];
  return (
    <section className="section container">
      <div className="sec-head">
        <span className="eyebrow reveal">{t.process.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.process.title}</h2>
      </div>

      <div className="process-grid">
        {t.process.steps.map((s, i) => {
          const Icon = icons[i] || window.I.send;
          return (
            <div key={i} className={"process-step reveal d" + (i + 1)}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div className="process-icon"><Icon /></div>
                <span className="process-num">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <h4>{s.t}</h4>
              <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Why
// ---------------------------------------------------------------------------
function Why({ t }) {
  const icons = [
    window.I.bolt, window.I.phone, window.I.whatsapp, window.I.heart,
    window.I.shield, window.I.sparkle, window.I.refresh,
  ];
  return (
    <section className="section container">
      <div className="sec-head">
        <span className="eyebrow reveal">{t.why.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.why.title}</h2>
      </div>

      <div className="why-grid">
        {t.why.items.map((it, i) => {
          const Icon = icons[i] || window.I.star;
          return (
            <div key={i} className={"why-item reveal d" + ((i % 4) + 1)}>
              <Icon />
              <h4>{it.t}</h4>
              <p>{it.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio, Pricing, Maintenance, Process, Why });