/* 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) — fed by real catalog /api/plans ---------- */
function Services({ t }) {
  const isRu = t === I18N.ru;
  const [plans, setPlans] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/plans', { credentials: 'same-origin' })
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => setPlans(d && d.plans ? d.plans : []))
      .catch(() => setPlans([]));
  }, []);
  const rub = (n) => new Intl.NumberFormat('ru-RU').format(Math.round(Number(n || 0))) + ' ₽';

  const CATS = [
    { key: 'vps', icon: 'Server', href: '/vps', title: 'VPS / VDS' },
    { key: 'dedicated', icon: 'Cpu', href: '/dedicated', title: isRu ? 'Выделенные серверы' : 'Dedicated servers' },
    { key: 'web', icon: 'Globe', href: '/web-servers', title: isRu ? 'Веб-хостинг' : 'Web hosting' },
  ];

  let list = null;
  if (plans && plans.length) {
    list = CATS.map((c) => {
      const inCat = plans.filter((p) => p.category === c.key);
      if (!inCat.length) return null;
      const min = Math.min(...inCat.map((p) => Number(p.price)));
      const rep = inCat.find((p) => Number(p.price) === min) || inCat[0];
      return { icon: c.icon, t: c.title, href: c.href, specs: (rep.specs || []).slice(0, 4), price: (isRu ? 'от ' : 'from ') + rub(min) };
    }).filter(Boolean);
  }
  if (!list || !list.length) list = t.services;

  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">
        {list.map((s, i) => {
          const Icon = ICONS[s.icon] || ICONS.Server;
          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="assets/img/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" className="btn btn-primary">{t.cta_primary}<ArrowRight /></a>
            <a href="/contacts" className="btn btn-ghost">{t.cta_ghost}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

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