/* Static page chrome (header + footer + emblem) for /terms, /privacy, /about */
const { useEffect: useEffectP } = React;

function StaticPage({ kind = 'terms', updatedOn = 'May 24, 2026', title, lead, sections }) {
  return (
    <div className="relative min-h-screen w-full bg-black text-white overflow-hidden">
      {/* Subtle backdrop */}
      <div className="mesh-bg" style={{ opacity: 0.4 }}></div>
      <div className="mesh-wire" style={{ opacity: 0.35 }}></div>
      <div className="absolute inset-0 pointer-events-none" style={{background:'radial-gradient(140% 90% at 50% 110%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%)'}}></div>

      {/* Header */}
      <header className="relative z-20 flex items-center justify-between px-6 md:px-10 pt-6">
        <a href="/" className="font-mono text-[12px] tracking-[0.24em] uppercase text-white hover:text-white/80 transition-colors">Ourcly</a>
        <a href="/" className="font-mono text-[11px] tracking-[0.22em] uppercase text-white/55 hover:text-white transition-colors">← back</a>
      </header>

      <main className="relative z-10 px-6 md:px-10 pt-14 md:pt-24 pb-32 md:pb-40">
        <article className="mx-auto max-w-2xl">
          <h1
            className="font-display text-white leading-[0.92] tracking-[-0.03em] lowercase"
            style={{ fontSize: 'clamp(48px, 7.2vw, 96px)', fontVariationSettings: '"MONO" 0, "CASL" 0, "wght" 460' }}
          >
            {title.before}{' '}
            <span
              className="italic bg-clip-text text-transparent"
              style={{
                backgroundImage: 'linear-gradient(120deg, #ffffff 0%, #B4B4FF 35%, #0000FE 100%)',
                fontVariationSettings: '"MONO" 0, "CASL" 0.7, "wght" 760, "slnt" -12, "CRSV" 1',
              }}
            >{title.accent}</span>{title.after || ''}
          </h1>

          {lead && (
            <p className="mt-7 text-white/75 font-display text-lg md:text-xl leading-[1.4] tracking-[-0.005em] text-balance">
              {lead}
            </p>
          )}

          {/* Sections */}
          <div className="mt-12 space-y-12">
            {sections.map((sec, i) => (
              <section key={i}>
                <div className="flex items-baseline gap-4">
                  <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-white/35 tabular-nums">
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <h2
                    className="font-display text-white tracking-[-0.015em] text-xl md:text-2xl"
                    style={{ fontVariationSettings: '"MONO" 0, "CASL" 0, "wght" 580' }}
                  >
                    {sec.heading}
                  </h2>
                </div>
                <div className="mt-4 ml-0 md:ml-[34px] space-y-4 font-display text-white/75 text-[15px] md:text-base leading-[1.65]">
                  {sec.paragraphs.map((p, j) => (
                    <p key={j} className="text-balance">{p}</p>
                  ))}
                  {sec.list && (
                    <ul className="space-y-2 pt-1">
                      {sec.list.map((item, k) => (
                        <li key={k} className="flex gap-3">
                          <span className="text-white/30 select-none">—</span>
                          <span>{item}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </section>
            ))}
          </div>

          <div className="mt-16 pt-8 border-t border-white/10 font-mono text-[11px] tracking-[0.18em] uppercase text-white/50">
            Questions? <a href="mailto:contact@ourcly.com" className="text-white hover:text-white/80 transition-colors">contact@ourcly.com</a>
          </div>
        </article>
      </main>

      {/* Emblem above footer */}
      <div className="absolute right-5 md:right-8 bottom-24 md:bottom-28 z-30">
        <PulseEmblem />
      </div>

      {/* Footer */}
      <footer className="absolute left-0 right-0 bottom-0 z-20 px-6 md:px-10 py-5 border-t border-white/10 flex flex-wrap items-center justify-between gap-x-8 gap-y-2 font-mono text-[11px] tracking-[0.22em] uppercase text-white/55 bg-black/40 backdrop-blur-sm">
        <div className="flex items-center gap-6">
          <a href="/terms"   className={`transition-colors ${kind==='terms' ? 'text-white' : 'hover:text-white'}`}>Terms</a>
          <a href="/privacy" className={`transition-colors ${kind==='privacy' ? 'text-white' : 'hover:text-white'}`}>Privacy</a>
        </div>
        <a href="mailto:contact@ourcly.com" className="hover:text-white transition-colors">
          <span className="text-white/35">Contact /&nbsp;</span>contact@ourcly.com
        </a>
      </footer>
    </div>
  );
}

window.StaticPage = StaticPage;