/* page-components.jsx — shared inner-page shell: PageHero, PricingCard, FAQ, etc. */

/* ---------- Inner-page hero (mini header below nav) ---------- */
function PageHero({ eyebrow, title, titleAccent, sub, bg }) {
  return (
    <div className="hero-wrap" style={{ minHeight: 'auto' }}>
      <section className={"hero-card" + (bg === 'deep' ? ' deep' : '')}
               style={{ height: 'auto', minHeight: '360px', padding: '0', justifyContent: 'flex-end' }}>
        <div className="aurora">
          <span className="blob b1" /><span className="blob b2" /><span className="blob b3" />
          <span className="grain" />
        </div>
        <div className="hero-inner" style={{ justifyContent: 'center', padding: '4rem 1.5rem 3.5rem' }}>
          <div className="hero-text" style={{ paddingTop: 0 }}>
            {eyebrow && (
              <div className="badge anim d1">
                <Sparkles />
                <span>{eyebrow}</span>
              </div>
            )}
            <h1 className="hero-h1 anim d2">
              {title}
              {titleAccent && <><br /><span className="accent">{titleAccent}</span></>}
            </h1>
            {sub && <p className="hero-sub anim d3">{sub}</p>}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Pricing card ---------- */
function PricingCard({ plan, ru }) {
  const { name, price, period, highlight, specs, cta, ctaHref } = plan;
  return (
    <div className={"glass-card" + (highlight ? ' pricing-highlight' : '')}
         style={{ display: 'flex', flexDirection: 'column', gap: 0, padding: 0 }}>
      <span className="glow" />
      <div style={{ padding: '1.8rem 1.8rem 0' }}>
        {highlight && (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.4rem',
                        background: 'var(--brand)', color: '#fff', borderRadius: '999px',
                        padding: '0.25rem 0.8rem', fontSize: '0.75rem', fontWeight: 700,
                        letterSpacing: '0.06em', marginBottom: '1rem' }}>
            <Sparkles style={{ width: 13, height: 13 }} />
            {ru ? 'Популярный' : 'Popular'}
          </div>
        )}
        <div style={{ fontSize: '1.1rem', fontWeight: 700, color: 'rgba(var(--brand-deep),0.95)', marginBottom: '0.5rem' }}>{name}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.3rem', marginBottom: '1.4rem' }}>
          <span style={{ fontSize: '2.4rem', fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--brand)', lineHeight: 1 }}>{price}</span>
          <span style={{ fontSize: '0.88rem', color: 'var(--muted)', fontWeight: 500 }}>{period}</span>
        </div>
        <ul className="svc-specs" style={{ marginBottom: '1.6rem' }}>
          {specs.map((s, i) => <li key={i}><Check /> {s}</li>)}
        </ul>
      </div>
      <div style={{ marginTop: 'auto', padding: '1.2rem 1.8rem', borderTop: '1px solid rgba(var(--brand-deep),0.08)' }}>
        <a href={ctaHref || '#'} className={"btn" + (highlight ? ' btn-primary' : ' btn-ghost')}
           style={{ width: '100%', justifyContent: 'center' }}>
          {cta}<ArrowRight />
        </a>
      </div>
    </div>
  );
}

/* ---------- FAQ accordion ---------- */
function FAQ({ items }) {
  const [open, setOpen] = React.useState(null);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      {items.map((item, i) => (
        <div key={i} className="glass-card" style={{ padding: '1.2rem 1.6rem', cursor: 'pointer', transition: 'all 0.2s' }}
             onClick={() => setOpen(open === i ? null : i)}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem' }}>
            <span style={{ fontWeight: 600, fontSize: '1rem', color: 'rgba(var(--brand-deep),0.95)' }}>{item.q}</span>
            <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(var(--brand-rgb),0.1)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                          transform: open === i ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s' }}>
              <ChevronRight style={{ width: 16, height: 16, color: 'var(--brand)' }} />
            </div>
          </div>
          {open === i && (
            <p style={{ margin: '0.8rem 0 0', fontSize: '0.96rem', color: 'var(--muted)', lineHeight: 1.6 }}>{item.a}</p>
          )}
        </div>
      ))}
    </div>
  );
}

/* ---------- Spec table ---------- */
function SpecTable({ rows }) {
  return (
    <div className="glass-card" style={{ padding: 0, overflow: 'hidden' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} style={{ borderBottom: i < rows.length - 1 ? '1px solid rgba(var(--brand-deep),0.07)' : 'none' }}>
              <td style={{ padding: '0.9rem 1.6rem', fontWeight: 600, color: 'rgba(var(--brand-deep),0.7)', fontSize: '0.88rem', width: '38%' }}>{r[0]}</td>
              <td style={{ padding: '0.9rem 1.6rem', color: 'rgba(var(--brand-deep),0.92)', fontSize: '0.96rem' }}>{r[1]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ---------- Legal page body ---------- */
function LegalBody({ sections }) {
  return (
    <div style={{ maxWidth: '760px', margin: '0 auto' }}>
      {sections.map((s, i) => (
        <div key={i} style={{ marginBottom: '2.5rem' }} className="reveal">
          {s.h && <h2 style={{ fontSize: '1.35rem', fontWeight: 700, color: 'rgba(var(--brand-deep),0.95)', marginBottom: '0.8rem', letterSpacing: '-0.02em' }}>{s.h}</h2>}
          {s.p && <p style={{ fontSize: '1rem', lineHeight: 1.7, color: 'var(--muted)', margin: 0 }}>{s.p}</p>}
          {s.list && (
            <ul style={{ margin: '0.8rem 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
              {s.list.map((li, j) => (
                <li key={j} style={{ display: 'flex', gap: '0.6rem', alignItems: 'flex-start', fontSize: '0.98rem', color: 'var(--muted)', lineHeight: 1.6 }}>
                  <Check style={{ width: 16, height: 16, color: 'var(--brand)', flexShrink: 0, marginTop: '0.2rem' }} />
                  {li}
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
}

/* ---------- Inner-page sticky navbar ---------- */
function StickyNav({ t, lang, setLang }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'rgba(233,237,243,0.82)',
      backdropFilter: 'blur(22px)', WebkitBackdropFilter: 'blur(22px)',
      borderBottom: '1px solid rgba(47,89,214,0.07)',
    }}>
      <Navbar t={t} lang={lang} setLang={setLang} />
    </div>
  );
}

/* ---------- Inner-page app wrapper ---------- */
function PageApp({ children, title }) {
  const [lang, setLang] = React.useState(() => localStorage.getItem('hl_lang') || 'ru');
  const t = I18N[lang];
  const revealRef = useReveal();

  React.useEffect(() => { localStorage.setItem('hl_lang', lang); }, [lang]);
  React.useEffect(() => {
    const id = setTimeout(() => document.documentElement.classList.add('anims-finished'), 300);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="page" ref={revealRef}>
      <StickyNav t={t} lang={lang} setLang={setLang} />
      {typeof children === 'function' ? children({ t, lang }) : children}
      <CTA t={t} />
      <SiteFooter t={t} />
    </div>
  );
}

Object.assign(window, { PageHero, PricingCard, FAQ, SpecTable, LegalBody, PageApp });