/* AIMSify Blog — TripWire Offer Pages + Lead-Gen Architecture overview
   Routes:
     #/offers/:slug          → branded landing page for a downloadable worksheet
     #/lead-gen              → architecture page that explains the funnel
*/

const { POSTS: OFFER_POSTS, AUTHORS: OFFER_AUTHORS } = window.BLOG_DATA;

/* Catalogue of TripWire offers. Each offer is a real-world artefact
   the article alludes to. Friction-graded to email-only capture. */
const OFFERS = {
  'csa-cii-worksheet': {
    eyebrow: 'CSA-CII 2026 \u00b7 free worksheet',
    title: 'CII Scope Re-Derivation Worksheet',
    subtitle: 'Re-derive your Critical Information Infrastructure scope from essential functions in 30 minutes \u2014 with a populated example from a payments operator.',
    valueProps: [
      'Functional dependency map template (XLSX, 2 sheets)',
      'License flow-down clause checklist (DOCX)',
      'Worked example: payments operator with cloud + third-party operated CII',
      'Mapped to ISO 27001:2022 A.5.19\u2013A.5.23',
    ],
    insidePack: [
      { row: 'Sheet 1', desc: 'Essential function inventory \u2014 one row per regulated outcome, derived from your operating licence + CSA designation letter.' },
      { row: 'Sheet 2', desc: 'System-to-function dependency map. Flags every system, including cloud-hosted and third-party operated, that materially supports a designated function.' },
      { row: 'Worksheet', desc: 'Concentration heatmap \u2014 highlights where two or more designated functions share the same supplier or sub-processor.' },
      { row: 'Clause pack', desc: 'Six contract clauses your procurement team can paste in tomorrow: licence-status warranty, breach notification, audit access, sub-processor disclosure, exit terms, evidence retention.' },
    ],
    relatedPostId: 'csa-cii-2026',
    formFields: ['email', 'role', 'sector'],
    nurtureLabel: 'CSA-CII 2026 sequence',
  },

  'article-9-assessment': {
    eyebrow: 'EU AI Act Article 9 \u00b7 free self-assessment',
    title: 'Article 9 Risk-Management Self-Assessment',
    subtitle: 'A 12-question diagnostic that scores your AI risk-management system against what notified bodies are actually asking for. One-page heatmap by email.',
    valueProps: [
      '12-question diagnostic (5 minutes)',
      'One-page heatmap PDF mapped to ISO 42001 A.6.2',
      'Practitioner commentary on each gap',
      'Calibrated against three live high-risk system audits',
    ],
    insidePack: [
      { row: 'Section A', desc: 'Risk taxonomy \u2014 do you have a defined, versioned taxonomy of AI-specific risks that maps to the regulator\u2019s harm categories?' },
      { row: 'Section B', desc: 'Identified risks register \u2014 how often is it refreshed, and what triggers a refresh?' },
      { row: 'Section C', desc: 'Mitigation evidence \u2014 do you keep before/after evaluation evidence per mitigation?' },
      { row: 'Section D', desc: 'Residual risk acceptance \u2014 who signs, against what authority, and what triggers re-acceptance?' },
      { row: 'Section E', desc: 'Post-market monitoring loop \u2014 frequency, scope, and what feeds back into risk taxonomy.' },
    ],
    relatedPostId: 'eu-ai-act-article-9',
    formFields: ['email', 'role', 'sector'],
    nurtureLabel: 'EU AI Act Article 9 sequence',
  },

  'evidence-pack-index': {
    eyebrow: 'Audit \u00b7 free template',
    title: 'Audit Evidence Pack Index',
    subtitle: 'The exact six-folder structure auditors expect. Drop it into SharePoint or Google Drive and save the first week of audit prep.',
    valueProps: [
      'Six folders, twenty-three sub-folders, forty-one example artefacts',
      'Read-only links per folder \u2014 audit-ready by default',
      'Mapped to ISO 27001:2022 A.5\u2013A.8 sample selection',
      'Includes evidence freshness register (XLSX)',
    ],
    insidePack: [
      { row: '01_Scope', desc: 'Statement of applicability, in-scope inventory, exclusions register with rationale.' },
      { row: '02_Controls_in_Operation', desc: 'Per-control evidence folder, naming convention, sample-period coverage tracker.' },
      { row: '03_Exceptions', desc: 'Risk-accepted exceptions, expiry dates, authority of acceptance, compensating controls.' },
      { row: '04_Third_Party_Assurance', desc: 'SOC 2 Type II reports, ISO 27001 certificates, sub-processor disclosures, gap remediation log.' },
      { row: '05_Incident_Timeline', desc: 'Incidents in audit window, RCA, remediation, regulator notifications.' },
      { row: '06_Change_Log', desc: 'ISMS change record \u2014 controls added, retired, modified \u2014 with management review minutes.' },
    ],
    relatedPostId: 'audit-evidence-pack',
    formFields: ['email', 'role'],
    nurtureLabel: 'Audit prep sequence',
  },

  'ai-vendor-questionnaire': {
    eyebrow: 'AI procurement \u00b7 free questionnaire',
    title: 'AI Vendor Due-Diligence Questionnaire',
    subtitle: 'A 47-question pack your procurement team can run on any AI vendor \u2014 covering training data, model card, evaluation methodology, oversight design, drift, and incident notification.',
    valueProps: [
      '47 questions across 6 AIMS domains',
      'Word + Excel format, branded for your org',
      'Pre-mapped to ISO 42001 A.6\u2013A.10 and NIST AI RMF',
      'Scoring rubric with red-flag thresholds',
    ],
    insidePack: [
      { row: 'Domain 1', desc: 'Data \u2014 training set provenance, consent basis, IP clearance, sensitive-attribute handling.' },
      { row: 'Domain 2', desc: 'Model \u2014 model card completeness, evaluation methodology, known limitations, licence terms.' },
      { row: 'Domain 3', desc: 'Operations \u2014 inference logging, drift monitoring, retraining cadence, model versioning.' },
      { row: 'Domain 4', desc: 'Human oversight \u2014 design of escalation, override authority, exception handling.' },
      { row: 'Domain 5', desc: 'Security \u2014 prompt injection, data exfiltration, model theft, supply-chain attestation.' },
      { row: 'Domain 6', desc: 'Lifecycle \u2014 incident notification SLA, decommissioning evidence, transition support.' },
    ],
    relatedPostId: 'ai-vendor-questionnaire',
    formFields: ['email', 'role', 'sector'],
    nurtureLabel: 'AI vendor sequence',
  },

  'license-clause-pack': {
    eyebrow: 'CSA licensing \u00b7 free clause pack',
    title: 'CSP Licence-Status Contract Clause Pack',
    subtitle: 'Three-page pack: licence-status warranty, renewal cadence, breach notification, audit access. Drafted by GRC + Legal practitioners. Drop into your MSA addendum.',
    valueProps: [
      'Six clauses your legal team can adapt in an hour',
      'Aligned to CSA licensing framework + ISO 27001 A.5.19',
      'Includes commentary on enforceability and audit-day evidence',
      'Word format \u2014 bring to your next supplier renewal',
    ],
    insidePack: [
      { row: 'Clause 1', desc: 'Licence-status warranty + ongoing maintenance obligation.' },
      { row: 'Clause 2', desc: 'Renewal cadence and notice of lapse \u2014 who tells whom, how fast.' },
      { row: 'Clause 3', desc: 'Breach notification SLA aligned to CSA reporting cadence.' },
      { row: 'Clause 4', desc: 'Audit access for licence verification \u2014 records, frequency, scope.' },
      { row: 'Clause 5', desc: 'Sub-processor disclosure and licence flow-down obligation.' },
      { row: 'Clause 6', desc: 'Exit triggers if licence is suspended or revoked.' },
    ],
    relatedPostId: 'csa-licensing-framework',
    formFields: ['email', 'role'],
    nurtureLabel: 'CSA licensing sequence',
  },
};

/* ============================================================
   OFFER PAGE — single TripWire landing
   ============================================================ */
function OfferPage({ slug }) {
  const offer = OFFERS[slug];
  if (!offer) return <NotFound />;

  const post = OFFER_POSTS.find((p) => p.id === offer.relatedPostId);
  const author = OFFER_AUTHORS.rajesh;

  const [submitted, setSubmitted] = React.useState(false);

  return (
    <>
      <Header />
      <main className="offer-shell">
        {/* HERO */}
        <header className="offer-hero">
          <div className="offer-hero-text">
            <span className="offer-eyebrow">{offer.eyebrow}</span>
            <h1>{offer.title}</h1>
            <p className="offer-sub">{offer.subtitle}</p>

            <ul className="offer-value-list">
              {offer.valueProps.map((v, i) => (
                <li key={i}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12 L10 17 L19 7"/>
                  </svg>
                  <span>{v}</span>
                </li>
              ))}
            </ul>

            <p className="offer-trust">
              <strong>No sales call.</strong> Email-only delivery. Unsubscribe anytime. We do not share your address.
            </p>
          </div>

          {/* FORM */}
          <aside className="offer-form-wrap">
            {!submitted ? (
              <form className="offer-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                <div className="offer-form-head">
                  <span className="offer-form-eyebrow">Free \u00b7 instant download</span>
                  <h3>Get the worksheet</h3>
                  <p>Email it to me. I read every reply.</p>
                </div>

                {offer.formFields.includes('email') && (
                  <label className="offer-field">
                    <span>Work email *</span>
                    <input type="email" required placeholder="you@yourcompany.com" />
                  </label>
                )}
                {offer.formFields.includes('role') && (
                  <label className="offer-field">
                    <span>Your role *</span>
                    <select required defaultValue="">
                      <option value="" disabled>Select \u2026</option>
                      <option>CISO / Head of Security</option>
                      <option>GRC Lead</option>
                      <option>Privacy / DPO</option>
                      <option>AI / Data Governance</option>
                      <option>Auditor / Consultant</option>
                      <option>Other</option>
                    </select>
                  </label>
                )}
                {offer.formFields.includes('sector') && (
                  <label className="offer-field">
                    <span>Sector</span>
                    <select defaultValue="">
                      <option value="">\u2014</option>
                      <option>Banking / Capital Markets</option>
                      <option>Insurance</option>
                      <option>Healthcare</option>
                      <option>Public Sector</option>
                      <option>Telco / CII operator</option>
                      <option>Tech / SaaS</option>
                      <option>Other</option>
                    </select>
                  </label>
                )}

                <button type="submit" className="offer-submit">
                  Email me the worksheet
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12 H19"/><path d="M13 6 L19 12 L13 18"/>
                  </svg>
                </button>

                <p className="offer-fineprint">
                  We use your email to send the file and (with your consent) ~3 follow-up notes over the next 21 days. Unsubscribe with one click.
                </p>
              </form>
            ) : (
              <div className="offer-thanks">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M9 12 L11 14 L16 9"/>
                </svg>
                <h3>Check your inbox</h3>
                <p>Your worksheet is on its way. If it does not arrive in 5 minutes, check spam (and let me know \u2014 reply to the email, it comes from me directly).</p>
                <p className="offer-thanks-meta">\u2014 Rajesh Laskary</p>
              </div>
            )}
          </aside>
        </header>

        {/* WHAT'S INSIDE */}
        <section className="offer-inside">
          <h2>What\u2019s inside the pack</h2>
          <div className="offer-inside-grid">
            {offer.insidePack.map((row, i) => (
              <div key={i} className="offer-inside-row">
                <span className="offer-inside-key">{row.row}</span>
                <p>{row.desc}</p>
              </div>
            ))}
          </div>
        </section>

        {/* WHO IT'S FOR */}
        <section className="offer-fit">
          <div className="offer-fit-col">
            <h3>Who this is for</h3>
            <ul>
              <li>CISOs and GRC heads with a regulatory deadline this year</li>
              <li>Practitioners running ISO 27001, 42001, or sector frameworks side-by-side</li>
              <li>Procurement and legal teams updating supplier obligations</li>
              <li>Anyone who would rather not start from a blank Excel sheet</li>
            </ul>
          </div>
          <div className="offer-fit-col">
            <h3>Who this is not for</h3>
            <ul>
              <li>If you want a sales pitch \u2014 there isn\u2019t one in the pack</li>
              <li>If you want a generic best-practices PDF \u2014 this is operational</li>
              <li>If you have a 27001 ISMS at Stage 2+ already, this might be too foundational</li>
            </ul>
          </div>
        </section>

        {/* RELATED ARTICLE */}
        {post && (
          <section className="offer-related">
            <span className="offer-related-eyebrow">Read the article that goes with this</span>
            <a className="offer-related-card" href={`#/post/${post.slug}`}>
              <div className="offer-related-card-body">
                <h4>{post.title}</h4>
                <p>{post.dek}</p>
                <span className="offer-related-card-meta">
                  By {OFFER_AUTHORS[post.author].name} \u00b7 {post.readMins} min read
                </span>
              </div>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M7 17 L17 7"/><path d="M9 7 H17 V15"/>
              </svg>
            </a>
          </section>
        )}

        {/* AUTHOR LINE */}
        <section className="offer-author">
          <div className="offer-author-text">
            <span className="offer-author-eyebrow">From the author</span>
            <p>
              <strong>Rajesh Laskary</strong> &mdash; Founder, Artan Consulting Pte Ltd \u00b7 Creator of AIMSify.
              Twenty years operationalising security and AI governance across financial services, healthcare,
              public sector, and CII. ISO 27001 lead auditor; ISO 42001 + EU AI Act practitioner.
              Singapore. Replies in person within 24 hrs.
            </p>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

/* ============================================================
   LEAD-GEN OVERVIEW — internal page that explains the funnel
   architecture (CISO-grade business case for the team)
   ============================================================ */
function LeadGenOverviewPage() {
  return (
    <>
      <Header />
      <main className="leadgen-shell">
        <header className="leadgen-hero">
          <span className="leadgen-eyebrow">Lead-Gen Architecture \u00b7 Internal</span>
          <h1>Five-tier intent ladder &mdash; how the AIMSify journal converts.</h1>
          <p>Most blogs catch one rung. The AIMSify journal sorts readers by intent and gives each rung the right next step. This is the architecture, the offers, and the maths.</p>
        </header>

        {/* LADDER */}
        <section className="leadgen-section">
          <div className="leadgen-section-head">
            <span className="leadgen-section-eyebrow">01 \u00b7 The ladder</span>
            <h2>Five rungs. Five different next steps.</h2>
            <p>Each visitor is at exactly one rung. The right CTA depends on the rung.</p>
          </div>
          <div className="ladder-table">
            {[
              { rung: '01', name: 'Browser', signal: '30s skim, bounces', want: 'Validation that you exist', cta: 'Brand exposure', conv: '<0.5%' },
              { rung: '02', name: 'Researcher', signal: 'Reads to end, scans diagrams', want: 'More signal', cta: 'Newsletter \u00b7 next article', conv: '2\u20135%' },
              { rung: '03', name: 'Educator', signal: 'Sends article internally', want: 'Help framing the problem', cta: 'TripWire artefact (free worksheet)', conv: '8\u201315%', highlight: true },
              { rung: '04', name: 'Operator', signal: 'Has the problem now', want: 'A working answer', cta: 'AIMSify diagnostic + demo', conv: '15\u201325%', highlight: true },
              { rung: '05', name: 'Buyer', signal: 'Has budget + timeline', want: 'A trusted human', cta: 'Talk to Rajesh', conv: '35\u201350%', highlight: true },
            ].map((r) => (
              <div key={r.rung} className={`ladder-row ${r.highlight ? 'is-target' : ''}`}>
                <span className="ladder-rung">{r.rung}</span>
                <div className="ladder-name">{r.name}</div>
                <div className="ladder-signal">{r.signal}</div>
                <div className="ladder-want">{r.want}</div>
                <div className="ladder-cta">{r.cta}</div>
                <div className="ladder-conv">{r.conv}</div>
              </div>
            ))}
          </div>
          <p className="ladder-insight">
            <strong>The shift:</strong> Rungs 3 + 4 are where convertible volume sits. A single end-of-article \u201cTalk to Rajesh\u201d
            CTA only catches Rung 5 \u2014 we lose 90% of the convertible audience to no-action.
          </p>
        </section>

        {/* OFFERS */}
        <section className="leadgen-section leadgen-section--alt">
          <div className="leadgen-section-head">
            <span className="leadgen-section-eyebrow">02 \u00b7 The offer matrix</span>
            <h2>One TripWire per article topic. One diagnostic per pillar.</h2>
            <p>Friction-graded \u2014 lowest friction at the top, human time at the bottom.</p>
          </div>

          <div className="offer-matrix">
            <div className="offer-matrix-col">
              <h4>Tier 1 \u2014 TripWire (Rung 3)</h4>
              <p className="offer-matrix-desc">Free downloadable artefact. Email + role. ~10% download rate.</p>
              <ul>
                <li>CSA-CII Re-Scoping Worksheet</li>
                <li>EU AI Act Article 9 Self-Assessment</li>
                <li>Audit Evidence Pack Index</li>
                <li>AI Vendor Questionnaire</li>
                <li>CSP Licence Clause Pack</li>
                <li>Board Report Template</li>
              </ul>
            </div>
            <div className="offer-matrix-col">
              <h4>Tier 2 \u2014 Diagnostic (Rung 4)</h4>
              <p className="offer-matrix-desc">5-min interactive scoping. Returns personalised heatmap. ~5% completion.</p>
              <ul>
                <li>AIMSify ISMS Posture Check</li>
                <li>42001 Annex A Readiness Score</li>
                <li>Supplier Concentration Heatmap</li>
                <li>Shadow-AI Discovery Sniff</li>
              </ul>
            </div>
            <div className="offer-matrix-col">
              <h4>Tier 3 \u2014 Human time (Rung 5)</h4>
              <p className="offer-matrix-desc">Direct calendar with Rajesh. ~1\u20132% of readers, ~40% close rate.</p>
              <ul>
                <li>20-min AIMSify demo</li>
                <li>30-min advisory second-opinion</li>
                <li>Quarterly board-pack workshop</li>
              </ul>
            </div>
          </div>
        </section>

        {/* THE MATHS */}
        <section className="leadgen-section">
          <div className="leadgen-section-head">
            <span className="leadgen-section-eyebrow">03 \u00b7 The maths</span>
            <h2>From 1,000 monthly readers \u2192 ~6 demo-ready leads.</h2>
            <p>Conservative. Tested in regulated B2B (banking GRC, healthcare AI governance, public-sector security).</p>
          </div>
          <div className="funnel">
            {[
              { stage: '1,000', label: 'monthly article readers', sub: 'organic + LinkedIn + newsletter' },
              { stage: '\u2193 12%', label: '\u2014', sub: 'TripWire conversion (Rung 3)' },
              { stage: '120', label: 'TripWire downloaders', sub: 'now segmented by topic' },
              { stage: '\u2193 8%', label: '\u2014', sub: 'Diagnostic completion + demo book (Rung 4)' },
              { stage: '10', label: 'demo-qualified leads', sub: 'arrives with intent + context' },
              { stage: '\u2193 60%', label: '\u2014', sub: 'demo \u2192 active sales conversation' },
              { stage: '6', label: 'active opportunities', sub: 'monthly recurring inflow' },
            ].map((s, i) => (
              <div key={i} className={`funnel-row ${s.label === '\u2014' ? 'funnel-arrow' : ''}`}>
                <span className="funnel-num">{s.stage}</span>
                <div>
                  {s.label !== '\u2014' && <span className="funnel-label">{s.label}</span>}
                  <span className="funnel-sub">{s.sub}</span>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* NURTURE PREVIEW */}
        <section className="leadgen-section leadgen-section--alt">
          <div className="leadgen-section-head">
            <span className="leadgen-section-eyebrow">04 \u00b7 The nurture loop</span>
            <h2>Five touches over 21 days. Per-segment.</h2>
            <p>The leads above only convert if we re-engage. Each TripWire feeds a different sequence.</p>
          </div>
          <div className="nurture-grid">
            {[
              { day: 'Day 0', tone: 'value', subject: 'Your CSA-CII worksheet (and how to use it)', what: 'Delivers the file. One-line ask: hit reply if you get stuck. Founder voice, plain text.' },
              { day: 'Day 2', tone: 'commentary', subject: 'The CII scope mistake I see most often', what: 'Short field note expanding on the article. Links to a second related piece. No pitch.' },
              { day: 'Day 7', tone: 'social proof', subject: 'How a Tier-1 bank used this worksheet', what: 'Anonymised case study. Surfaces the AIMSify automation moment without selling it.' },
              { day: 'Day 14', tone: 'soft CTA', subject: 'Worth a 20-min call?', what: 'Direct invite to demo OR advisory call \u2014 reader picks. Calendar link in body.' },
              { day: 'Day 21', tone: 'check-out', subject: 'Last note (then I\u2019ll stop)', what: 'Either book a call, stay on the weekly briefing, or unsubscribe. Honour all three.' },
            ].map((t, i) => (
              <div key={i} className="nurture-touch">
                <div className="nurture-touch-head">
                  <span className="nurture-day">{t.day}</span>
                  <span className={`nurture-tone nurture-tone--${t.tone.replace(' ','-')}`}>{t.tone}</span>
                </div>
                <h4>{t.subject}</h4>
                <p>{t.what}</p>
              </div>
            ))}
          </div>
          <p className="nurture-foot">
            See the full Day-0 to Day-21 copy in <a href="#/offers/csa-cii-worksheet">the CSA-CII worksheet sequence</a>.
          </p>
        </section>

        {/* CTA back */}
        <section className="leadgen-section leadgen-section--cta">
          <h3>Want to turn this into the live system?</h3>
          <p>This is the architecture. Wiring it up is one engineering sprint plus content scoping.</p>
          <a className="leadgen-cta" href="https://aimsify.ai/book-demo" target="_blank" rel="noreferrer">
            Open Rajesh\u2019s calendar
            <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>
        </section>
      </main>
      <Footer />
    </>
  );
}

Object.assign(window, { OfferPage, LeadGenOverviewPage, OFFERS });