/* AIMSify Blog — Lead-Gen CTA System
   Five-tier intent ladder, contextual to each article topic.
   Components: TldrBar, InlineCTA, ThreeDoorBand, EditorialNewsletter,
               AuthorByline (text-only, replaces AuthorCard photo block)
*/

const { AUTHORS: CTA_AUTHORS } = window.BLOG_DATA;

/* ============================================================
   1. TL;DR PULL-QUOTE BAR
   Sits below the dek. Sets the hook.
   ============================================================ */
function TldrBar({ items = [] }) {
  if (!items || !items.length) return null;
  return (
    <aside className="tldr-bar" aria-label="Three-line summary">
      <span className="tldr-eyebrow">The 30-second read</span>
      <ul>
        {items.map((it, i) => (
          <li key={i}>
            <span className="tldr-marker" aria-hidden>{String(i + 1).padStart(2, '0')}</span>
            <span className="tldr-line">{it}</span>
          </li>
        ))}
      </ul>
    </aside>
  );
}

/* ============================================================
   2. INLINE CONTEXTUAL CTA
   Cream-tinted card. Subtle. ONE per article max, mid-read.
   `track` attribute tags it for analytics.
   ============================================================ */
function InlineCTA({
  context = 'aimsify',           // 'aimsify' | 'advisory' | 'tripwire' | 'training'
  eyebrow,
  headline,
  body,
  ctaLabel = 'Take a look',
  ctaHref = '#',
  track = 'inline-cta',
}) {
  const themes = {
    aimsify:  { eyebrow: 'INSIDE AIMSIFY',     accent: 'cyan' },
    advisory: { eyebrow: 'WORKING THIS LIVE?', accent: 'navy' },
    tripwire: { eyebrow: 'FREE WORKSHEET',     accent: 'amber' },
    training: { eyebrow: 'AIMSIFY ACADEMY',    accent: 'plum' },
  };
  const theme = themes[context] || themes.aimsify;

  return (
    <aside className={`inline-cta inline-cta--${theme.accent}`} data-cta-track={track} data-cta-context={context}>
      <div className="inline-cta-rule" aria-hidden></div>
      <div className="inline-cta-body">
        <span className="inline-cta-eyebrow">{eyebrow || theme.eyebrow}</span>
        <h4 className="inline-cta-headline">{headline}</h4>
        {body && <p className="inline-cta-text">{body}</p>}
      </div>
      <a className="inline-cta-action" href={ctaHref}>
        {ctaLabel}
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12 H19"/><path d="M13 6 L19 12 L13 18"/>
        </svg>
      </a>
    </aside>
  );
}

/* ============================================================
   3. THREE-DOOR CTA BAND
   The ONE navy moment in the article. Replaces ContactCTA + Newsletter stack.
   Three offers, friction-graded:
     - AIMSify: form (lowest commitment, asynchronous)
     - Advisory: human time (Rajesh)
     - Academy: education
   ============================================================ */
function ThreeDoorBand({ post, articleSlug }) {
  const utm = `utm_source=blog&utm_medium=three_door&utm_campaign=${articleSlug || 'article'}`;

  const doors = [
    {
      key: 'product',
      eyebrow: 'AIMSIFY · Product',
      headline: 'See your control posture in 20 minutes.',
      body: 'Your frameworks, your evidence, your gaps — mapped on your data. No call required for the first look.',
      bullets: ['Live demo on your scope', 'Walk through your top 3 gaps', 'Get a written follow-up'],
      ctaLabel: 'Book a 20-min demo',
      ctaHref: `https://aimsify.ai/book-demo`,
      tone: 'primary',
    },
    {
      key: 'advisory',
      eyebrow: 'ARTAN · Advisory',
      headline: 'Talk to Rajesh — second opinion on a live programme.',
      body: 'Working through a regulator response, an audit, or an AI governance buildout? 30 minutes, off the record.',
      bullets: ['Direct line, no SDR layer', 'For CISOs, GRC heads, AI leads', 'Singapore + ASEAN'],
      ctaLabel: 'Open Rajesh\u2019s calendar',
      ctaHref: `https://aimsify.ai/book-demo`,
      tone: 'secondary',
    },
    {
      key: 'academy',
      eyebrow: 'AIMSIFY · Academy',
      headline: 'Train the people who run the programme.',
      body: 'ISO 42001, ISO 27001:2022 transition, EU AI Act for GRC teams \u2014 cohort and on-site formats.',
      bullets: ['Practitioner cohorts', 'Singapore, KL, Jakarta', 'Free monthly briefing'],
      ctaLabel: 'Browse the syllabus',
      ctaHref: `https://aimsify.com/academy?${utm}`,
      tone: 'tertiary',
    },
  ];

  return (
    <section className="three-door" aria-label="Next steps">
      <header className="three-door-head">
        <span className="three-door-eyebrow">What do you want to do next?</span>
        <h3 className="three-door-title">Three doors, one decision.</h3>
        <p className="three-door-sub">
          You read the piece. Pick the move that matches where you are.
        </p>
      </header>
      <div className="three-door-grid">
        {doors.map((d) => (
          <article key={d.key} className={`door door--${d.tone}`} data-cta-track={`three-door-${d.key}`}>
            <span className="door-eyebrow">{d.eyebrow}</span>
            <h4 className="door-headline">{d.headline}</h4>
            <p className="door-body">{d.body}</p>
            <ul className="door-bullets">
              {d.bullets.map((b, i) => (
                <li key={i}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                    <path d="M5 12 L10 17 L19 7"/>
                  </svg>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <a className="door-action" href={d.ctaHref} target="_blank" rel="noreferrer">
              {d.ctaLabel}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12 H19"/><path d="M13 6 L19 12 L13 18"/>
              </svg>
            </a>
          </article>
        ))}
      </div>
      <footer className="three-door-foot">
        <span>Singapore · GMT+8 · Replies within 24 hrs · No SDR layer.</span>
      </footer>
    </section>
  );
}

/* ============================================================
   4. AUTHOR BYLINE (text-only end-of-article)
   Replaces the photo+bio AuthorCard. The face already lives in
   the post-card thumbnails and the index hero — adding it again
   here is the duplication the user flagged.
   ============================================================ */
function AuthorByline({ authorId }) {
  const a = CTA_AUTHORS[authorId];
  if (!a) return null;
  return (
    <section className="author-byline" aria-label="About the author">
      <span className="author-byline-eyebrow">About the author</span>
      <p className="author-byline-text">
        Written by <a href={`#/author/${a.id}`}>{a.name}</a> &mdash; {a.title}.
        {a.bio ? ` ${a.bio.split('.')[0]}.` : ''}
        {' '}
        <a href={`#/author/${a.id}`} className="author-byline-more">More from this author &rarr;</a>
      </p>
    </section>
  );
}

/* ============================================================
   5. EDITORIAL NEWSLETTER STRIP
   Cream/off-white. Type-led. NOT navy. Sits below three-door so
   the navy moment owns the conversion peak.
   ============================================================ */
function EditorialNewsletter() {
  return (
    <section className="newsletter-strip" aria-label="Subscribe">
      <div className="newsletter-strip-text">
        <span className="newsletter-strip-eyebrow">The Tuesday briefing</span>
        <h4>Audit-ready intelligence, weekly.</h4>
        <p>One CISO-grade briefing per Tuesday morning &mdash; regulatory shifts, framework deltas, and field notes from active engagements. Curated by Rajesh and the AIMSify team.</p>
      </div>
      <form className="newsletter-strip-form" onSubmit={(e) => {
        e.preventDefault();
        const btn = e.currentTarget.querySelector('button');
        btn.textContent = 'Subscribed \u2713';
        btn.disabled = true;
        setTimeout(() => { btn.textContent = 'Subscribe'; btn.disabled = false; e.currentTarget.reset(); }, 2200);
      }}>
        <input type="email" required placeholder="you@yourcompany.com" />
        <button type="submit">Subscribe</button>
      </form>
    </section>
  );
}

/* ============================================================
   6. REFERENCES PANEL
   Authoritative third-party sources for every article. Sits
   between the body and the three-door CTA so the audit /
   procurement reader has primary sources before they convert.
   No marketing language; this is library furniture.
   ============================================================ */
function ReferencesPanel({ articleId }) {
  const refs = (window.ARTICLE_REFERENCES || {})[articleId];
  if (!refs || !refs.sources || !refs.sources.length) return null;

  return (
    <section className="refs-panel" aria-labelledby="refs-heading">
      <div className="refs-eyebrow">
        <span className="refs-eyebrow-rule" aria-hidden="true"></span>
        <span>Sources &amp; further reading</span>
      </div>
      <h3 id="refs-heading" className="refs-heading">Read the primary documents</h3>
      {refs.intro && <p className="refs-intro">{refs.intro}</p>}
      <ol className="refs-list">
        {refs.sources.map((s, i) => (
          <li key={i} className="refs-item">
            <span className="refs-num">{String(i + 1).padStart(2, '0')}</span>
            <div className="refs-body">
              <div className="refs-line">
                <span className="refs-org">{s.org}</span>
                <a className="refs-title" href={s.url} target="_blank" rel="noopener noreferrer">
                  {s.title}
                  <svg className="refs-ext" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <path d="M7 17 L17 7"/>
                    <path d="M9 7 H17 V15"/>
                  </svg>
                </a>
              </div>
              {s.note && <p className="refs-note">{s.note}</p>}
            </div>
          </li>
        ))}
      </ol>
      <p className="refs-disclaimer">
        Links go to publishers' canonical pages. Standards bodies revise documents; verify edition / version before citing in your own work.
      </p>
    </section>
  );
}

/* Expose to other Babel script scopes */
Object.assign(window, {
  TldrBar,
  InlineCTA,
  ThreeDoorBand,
  AuthorByline,
  EditorialNewsletter,
  ReferencesPanel,
});