/* sections.jsx — continuation page sections */

const ICONS = {
  ShieldCheck, Zap, Gauge, Lock, Server, Cpu, Database, Gamepad, Cloud, Layers, Globe,
};

/* scroll-reveal helper */
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const els = ref.current ? ref.current.querySelectorAll('.reveal') : [];
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
  return ref;
}

/* ---------- Features ---------- */
function Features({ t }) {
  return (
    <section className="section">
      <div className="sec-head row">
        <div>
          <div className="eyebrow reveal">{t.f_eyebrow}</div>
          <h2 className="sec-title reveal">{t.f_title_a}<span className="soft">{t.f_title_soft}</span></h2>
        </div>
        <p className="sec-lead reveal">{t.f_lead}</p>
      </div>
      <div className="grid grid-4">
        {t.features.map((f, i) => {
          const Icon = ICONS[f.icon];
          return (
            <div className="glass-card reveal" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
              <span className="glow" />
              <div className="ic-tile"><Icon /></div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ---------- Services (3 cards) ---------- */
function Services({ t }) {
  return (
    <section className="section">
      <div className="sec-head row">
        <div>
          <div className="eyebrow reveal">{t.s_eyebrow}</div>
          <h2 className="sec-title reveal">{t.s_title_a}<span className="soft">{t.s_title_soft}</span></h2>
        </div>
        <p className="sec-lead reveal">{t.s_lead}</p>
      </div>
      <div className="grid grid-3">
        {t.services.map((s, i) => {
          const Icon = ICONS[s.icon];
          return (
            <a href={s.href || '#'} className="glass-card svc-card reveal" key={i}
               style={{ transitionDelay: `${i * 70}ms`, textDecoration: 'none', display: 'flex', flexDirection: 'column' }}>
              <span className="glow" />
              <div className="svc-top">
                <div className="ic-tile"><Icon /></div>
                <h3>{s.t}</h3>
                <ul className="svc-specs">
                  {s.specs.map((sp, j) => <li key={j}><Check /> {sp}</li>)}
                </ul>
              </div>
              <div className="price">
                <div className="amount">{s.price}<small>{t.perMonth}</small></div>
                <div className="go"><ArrowUpRight /></div>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

/* ---------- Data center showcase ---------- */
function DataCenter({ t }) {
  return (
    <section className="section">
      <div className="showcase">
        <div>
          <div className="eyebrow reveal">{t.dc_eyebrow}</div>
          <h2 className="sec-title reveal">{t.dc_title_a}<span className="soft">{t.dc_title_soft}</span></h2>
          <p className="sec-lead reveal">{t.dc_lead}</p>
          <ul className="svc-specs reveal" style={{ marginTop: '1.6rem', gap: '0.9rem' }}>
            {t.dc_bullets.map((b, i) => (
              <li key={i} style={{ fontSize: '1rem' }}><CheckCircle /> {b}</li>
            ))}
          </ul>
        </div>
        <div className="badges reveal">
          <div className="float-badge" style={{ top: '1.1rem', left: '1.1rem' }}><Layers />{t.dc_badge1}</div>
          <div className="float-badge" style={{ bottom: '1.1rem', right: '1.1rem' }}><Cpu />{t.dc_badge2}</div>
          <image-slot id="hostline-dc" shape="rounded" radius="28"
            placeholder={t.dc_slot} src="datacenter.svg"></image-slot>
        </div>
      </div>
    </section>
  );
}

/* ---------- Stat band ---------- */
function StatBand({ t }) {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="stat-band reveal">
        {t.stats.map((s, i) => (
          <div className="cell" key={i}>
            <div className="big">{s.big}</div>
            <div className="cap">{s.cap}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- CTA ---------- */
function CTA({ t }) {
  return (
    <section style={{ padding: '0 0.75rem' }}>
      <div className="cta reveal">
        <div className="cta-inner">
          <h2>{t.cta_title}</h2>
          <p>{t.cta_sub}</p>
          <div className="hero-actions" style={{ marginTop: 0 }}>
            <a href="vps.html" className="btn btn-primary">{t.cta_primary}<ArrowRight /></a>
            <a href="contacts.html" className="btn btn-ghost">{t.cta_ghost}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, Features, Services, DataCenter, StatBand, CTA });