/* Shared shell for regulation detail pages.
   Renders: hero · status callout · scope · timeline · what to disclose ·
            how Carbon Titan maps · exports · FAQ · CTA.
   All content is data-driven via a single `reg` object passed to <RegulationPage>. */
(function(){

const { SiteNav, SiteFooter } = window;

/* ------- Atomic blocks ------- */

const Tag = ({ children, color }) => (
  <span style={{
    display: 'inline-block',
    padding: '4px 10px',
    fontFamily: 'var(--ct-mono)',
    fontSize: 10.5,
    fontWeight: 600,
    letterSpacing: '.12em',
    textTransform: 'uppercase',
    color: color || 'var(--ct-green)',
    border: `1px solid ${color || 'var(--ct-green)'}`,
    borderRadius: 3,
    background: `${color || '#00d4aa'}15`,
  }}>{children}</span>
);

const SectionTitle = ({ kicker, title, sub }) => (
  <div style={{ marginBottom: 32 }}>
    <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ct-green)', marginBottom: 10 }}>{kicker}</div>
    <h2 style={{ fontFamily: 'var(--ct-serif)', fontSize: 38, fontWeight: 400, color: 'var(--ct-white)', margin: 0, lineHeight: 1.15 }}>{title}</h2>
    {sub && <p style={{ color: 'var(--ct-cloud)', fontSize: 16, lineHeight: 1.6, margin: '14px 0 0', maxWidth: 680 }}>{sub}</p>}
  </div>
);

/* ------- Hero ------- */

const Hero = ({ reg }) => (
  <section style={{ padding: '88px 48px 64px', position: 'relative' }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse 70% 50% at 30% 0%, ${reg.accent}1a 0%, transparent 60%)`,
      pointerEvents: 'none',
    }} />
    <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
      <div style={{ display: 'flex', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
        <Tag color={reg.accent}>{reg.region}</Tag>
        <Tag color="var(--ct-amber)">{reg.urgency}</Tag>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 13, color: 'var(--ct-smoke)', marginBottom: 14, letterSpacing: '.05em' }}>{reg.code} · {reg.fullName}</div>
          <h1 style={{ fontFamily: 'var(--ct-serif)', fontSize: 56, fontWeight: 400, color: 'var(--ct-white)', margin: 0, lineHeight: 1.12, letterSpacing: '-.02em', textWrap: 'balance', paddingBottom: '0.12em' }}>{reg.headline}</h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ct-cloud)', margin: '28px 0 0', maxWidth: 620 }}>{reg.lede}</p>
        </div>
        <div style={{
          background: 'var(--ct-graphite)', border: '1px solid var(--ct-slate)', borderRadius: 10,
          padding: 28, fontFamily: 'var(--ct-mono)', fontSize: 13, color: 'var(--ct-cloud)',
        }}>
          <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ct-smoke)', marginBottom: 16 }}>At a glance</div>
          {reg.glance.map(([k,v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid var(--ct-slate)', gap: 16 }}>
              <span style={{ color: 'var(--ct-smoke)' }}>{k}</span>
              <span style={{ color: 'var(--ct-white)', textAlign: 'right' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ------- Status callout (legal status / urgency banner) ------- */

const Status = ({ reg }) => (
  <section style={{ padding: '0 48px 48px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{
        background: `linear-gradient(90deg, ${reg.accent}10 0%, transparent 60%)`,
        border: `1px solid ${reg.accent}40`, borderLeft: `3px solid ${reg.accent}`,
        borderRadius: 8, padding: '24px 28px',
        display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32, alignItems: 'center',
      }}>
        <div>
          <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 10.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ct-smoke)', marginBottom: 6 }}>Current status</div>
          <div style={{ fontFamily: 'var(--ct-serif)', fontSize: 24, color: reg.accent }}>{reg.statusLabel}</div>
        </div>
        <div style={{ color: 'var(--ct-cloud)', fontSize: 14.5, lineHeight: 1.65 }}>{reg.statusDetail}</div>
      </div>
    </div>
  </section>
);

/* ------- Scope (who's covered) ------- */

const Scope = ({ reg }) => (
  <section style={{ padding: '64px 48px', background: 'var(--ct-graphite)' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <SectionTitle kicker="Who's covered" title="Scope and thresholds" sub={reg.scopeIntro} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {reg.scope.map(s => (
          <div key={s.label} style={{
            background: 'var(--ct-carbon)', border: '1px solid var(--ct-slate)', borderRadius: 8,
            padding: 24,
          }}>
            <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 10.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ct-smoke)', marginBottom: 8 }}>{s.tag}</div>
            <div style={{ fontFamily: 'var(--ct-serif)', fontSize: 22, color: 'var(--ct-white)', marginBottom: 10 }}>{s.label}</div>
            <p style={{ color: 'var(--ct-cloud)', fontSize: 13.5, lineHeight: 1.6, margin: 0 }}>{s.detail}</p>
          </div>
        ))}
      </div>
      {reg.exemptions && (
        <div style={{ marginTop: 32, padding: '20px 24px', background: 'rgba(0,0,0,.3)', border: '1px dashed var(--ct-slate)', borderRadius: 6 }}>
          <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 11, color: 'var(--ct-smoke)', marginBottom: 6, letterSpacing: '.1em', textTransform: 'uppercase' }}>Exemptions</div>
          <div style={{ color: 'var(--ct-cloud)', fontSize: 13.5, lineHeight: 1.65 }}>{reg.exemptions}</div>
        </div>
      )}
    </div>
  </section>
);

/* ------- Timeline ------- */

const Timeline = ({ reg }) => (
  <section style={{ padding: '80px 48px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <SectionTitle kicker="Reporting calendar" title="Key deadlines" sub={reg.timelineIntro} />
      <div style={{ position: 'relative', paddingLeft: 24 }}>
        <div style={{ position: 'absolute', left: 7, top: 8, bottom: 8, width: 2, background: 'var(--ct-slate)' }} />
        {reg.timeline.map((t, i) => (
          <div key={i} style={{ position: 'relative', paddingBottom: 28 }}>
            <div style={{
              position: 'absolute', left: -24, top: 4, width: 16, height: 16, borderRadius: '50%',
              background: t.active ? reg.accent : 'var(--ct-graphite)',
              border: `2px solid ${t.active ? reg.accent : 'var(--ct-slate)'}`,
              boxShadow: t.active ? `0 0 0 4px ${reg.accent}30` : 'none',
            }} />
            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 28, alignItems: 'baseline' }}>
              <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 13, fontWeight: 600, color: t.active ? reg.accent : 'var(--ct-white)', letterSpacing: '.02em' }}>{t.date}</div>
              <div>
                <div style={{ color: 'var(--ct-white)', fontSize: 16, fontWeight: 500, marginBottom: 4 }}>{t.event}</div>
                <div style={{ color: 'var(--ct-cloud)', fontSize: 13.5, lineHeight: 1.6 }}>{t.detail}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------- What to Disclose ------- */

const Disclose = ({ reg }) => (
  <section style={{ padding: '80px 48px', background: 'var(--ct-graphite)' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <SectionTitle kicker="What you disclose" title="Required disclosures" sub={reg.discloseIntro} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {reg.disclose.map(d => (
          <div key={d.title} style={{
            background: 'var(--ct-carbon)', border: '1px solid var(--ct-slate)', borderRadius: 8, padding: 28,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 5, background: `${reg.accent}20`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--ct-mono)', fontSize: 12, fontWeight: 700, color: reg.accent,
              }}>{d.n}</div>
              <div style={{ fontFamily: 'var(--ct-serif)', fontSize: 20, color: 'var(--ct-white)' }}>{d.title}</div>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {d.items.map((it, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, padding: '7px 0', color: 'var(--ct-cloud)', fontSize: 13.5, lineHeight: 1.55 }}>
                  <span style={{ color: reg.accent, marginTop: 2 }}>›</span><span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------- How Carbon Titan maps ------- */

const Mapping = ({ reg }) => (
  <section style={{ padding: '80px 48px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <SectionTitle kicker="How Carbon Titan handles it" title={`${reg.code} on the platform`} sub="Each requirement maps to a capability that's already in the product. No bolt-ons, no separate compliance module — the same ledger that runs your day-to-day produces the filing." />
      <div style={{ border: '1px solid var(--ct-slate)', borderRadius: 10, overflow: 'hidden' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 0,
          background: 'var(--ct-graphite)', padding: '14px 24px',
          fontFamily: 'var(--ct-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em',
          textTransform: 'uppercase', color: 'var(--ct-smoke)',
          borderBottom: '1px solid var(--ct-slate)',
        }}>
          <div>{reg.code} requirement</div>
          <div>Carbon Titan capability</div>
          <div>How it works</div>
        </div>
        {reg.mapping.map((m, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 0,
            padding: '20px 24px',
            borderBottom: i === reg.mapping.length - 1 ? 'none' : '1px solid var(--ct-slate)',
            background: i % 2 === 0 ? 'var(--ct-carbon)' : 'rgba(255,255,255,.01)',
          }}>
            <div style={{ paddingRight: 16 }}>
              <div style={{ color: 'var(--ct-white)', fontSize: 14.5, fontWeight: 500, marginBottom: 4 }}>{m.req}</div>
              <div style={{ color: 'var(--ct-smoke)', fontSize: 12, fontFamily: 'var(--ct-mono)' }}>{m.cite}</div>
            </div>
            <div style={{ paddingRight: 16 }}>
              <div style={{ color: reg.accent, fontSize: 14, fontFamily: 'var(--ct-mono)', fontWeight: 500 }}>{m.cap}</div>
            </div>
            <div style={{ color: 'var(--ct-cloud)', fontSize: 13, lineHeight: 1.55 }}>{m.how}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------- Exports ------- */

const Exports = ({ reg }) => (
  <section style={{ padding: '64px 48px', background: 'var(--ct-graphite)' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <SectionTitle kicker="One-click exports" title="What comes out of the platform" sub={`When the ${reg.code} reporting window opens, you click Export. The platform produces these artifacts from your live ledger — already reconciled, already assured.`} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
        {reg.exports.map(e => (
          <div key={e.name} style={{
            background: 'var(--ct-carbon)', border: '1px solid var(--ct-slate)', borderRadius: 6,
            padding: 20,
          }}>
            <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 11, color: reg.accent, marginBottom: 6, letterSpacing: '.05em' }}>{e.format}</div>
            <div style={{ color: 'var(--ct-white)', fontSize: 15, fontWeight: 500, marginBottom: 6 }}>{e.name}</div>
            <div style={{ color: 'var(--ct-smoke)', fontSize: 12.5, lineHeight: 1.55 }}>{e.desc}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------- FAQ ------- */

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--ct-slate)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer',
        padding: '22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
        color: 'var(--ct-white)', fontFamily: 'var(--ct-sans)', fontSize: 16, fontWeight: 500,
      }}>
        <span>{q}</span>
        <span style={{ fontFamily: 'var(--ct-mono)', color: 'var(--ct-smoke)', fontSize: 18, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .15s' }}>+</span>
      </button>
      {open && <div style={{ paddingBottom: 22, color: 'var(--ct-cloud)', fontSize: 14, lineHeight: 1.7, maxWidth: 800 }}>{a}</div>}
    </div>
  );
};

const FAQ = ({ reg }) => (
  <section style={{ padding: '80px 48px' }}>
    <div style={{ maxWidth: 960, margin: '0 auto' }}>
      <SectionTitle kicker="Common questions" title="FAQ" />
      <div>{reg.faq.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} />)}</div>
    </div>
  </section>
);

/* ------- CTA ------- */

const CTA = ({ reg }) => (
  <section style={{ padding: '80px 48px 96px' }}>
    <div style={{
      maxWidth: 1280, margin: '0 auto',
      background: `linear-gradient(135deg, ${reg.accent}15 0%, var(--ct-graphite) 60%)`,
      border: `1px solid ${reg.accent}40`, borderRadius: 14,
      padding: '56px 56px',
      display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center',
    }}>
      <div>
        <div style={{ fontFamily: 'var(--ct-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: reg.accent, marginBottom: 14 }}>Get {reg.code}-ready</div>
        <h2 style={{ fontFamily: 'var(--ct-serif)', fontSize: 40, fontWeight: 400, color: 'var(--ct-white)', margin: 0, lineHeight: 1.15 }}>{reg.ctaTitle}</h2>
        <p style={{ color: 'var(--ct-cloud)', fontSize: 16, lineHeight: 1.6, margin: '18px 0 0', maxWidth: 540 }}>{reg.ctaBody}</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <a href="/request-access" style={{
          padding: '14px 24px', background: 'var(--ct-green)', color: 'var(--ct-carbon)',
          textAlign: 'center', borderRadius: 6, fontSize: 14.5, fontWeight: 600, textDecoration: 'none',
        }}>Request access</a>
        <a href="/pricing" style={{
          padding: '14px 24px', border: '1px solid var(--ct-slate)', color: 'var(--ct-white)',
          textAlign: 'center', borderRadius: 6, fontSize: 14.5, fontWeight: 500, textDecoration: 'none',
        }}>See packages</a>
        <a href="/regulations" style={{
          padding: '4px 0', color: 'var(--ct-smoke)', fontSize: 13,
          textAlign: 'center', textDecoration: 'none', fontFamily: 'var(--ct-mono)',
        }}>← All regulations</a>
      </div>
    </div>
  </section>
);

/* ------- Top-level page ------- */

const RegulationPage = ({ reg }) => (
  <div data-screen-label={`Regulation · ${reg.code}`}>
    <SiteNav active="Regulation" />
    <Hero reg={reg} />
    <Status reg={reg} />
    <Scope reg={reg} />
    <Timeline reg={reg} />
    <Disclose reg={reg} />
    <Mapping reg={reg} />
    <Exports reg={reg} />
    <FAQ reg={reg} />
    <CTA reg={reg} />
    <SiteFooter />
  </div>
);

Object.assign(window, { RegulationPage });
})();
