// SLIDES 13 + 14 — RESOURCES & DEFINITIONS (split: giant title left / white column right)
function ResourcesDefinitionsSlide({ defs = [], label = "13 Resources & Definitions" }) {
  return (
    <Slide eyebrow={null} logo={null} style={{label}}>
      {/* Left — black section with title stacked so TAN never overlaps the Mont row */}
      <div style={{position:'absolute', top:0, left:0, bottom:0, width:'43%', background: R.black, display:'flex', flexDirection:'column', justifyContent:'center', padding:'80px 56px 120px'}}>
        <div style={{fontFamily:'var(--font-sans)', fontWeight:700, fontSize: 40, lineHeight:1.05, letterSpacing:'-.015em'}}>Resources</div>
        <div style={{fontFamily:'var(--font-sans)', fontWeight:400, fontSize: 24, lineHeight:1.1, opacity:.65, marginTop:4}}>and</div>
        <div style={{fontFamily:'var(--font-display)', fontWeight:400, fontSize:60, lineHeight:1.0, marginTop:20, padding:'0 .08em', color:'#fff'}}>Definitions</div>

        {/* Logo bottom-left */}
        <img src="../assets/logo-horizontal-whitepink.png" alt="Client logo placeholder" style={{position:'absolute', bottom:56, left:56, height:28}}/>
      </div>

      {/* Right — white column with definitions */}
      <div style={{position:'absolute', top:0, right:0, bottom:0, width:'57%', background:'#fff', color: R.ink, padding:'60px 56px 60px 40px', overflow:'hidden'}}>
        <div style={{display:'flex', flexDirection:'column', gap: 22}}>
          {defs.map((d, i) => (
            <div key={i} style={{borderBottom: i < defs.length - 1 ? `1px solid ${R.ink}` : 'none', paddingBottom: 18}}>
              <div style={{fontWeight:700, fontSize:16, marginBottom: 10, letterSpacing:'-.005em'}}>{d.term}</div>
              <div style={{fontSize:12.5, lineHeight:1.6, color:'#222'}} dangerouslySetInnerHTML={{__html: d.body}}/>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

function ResourcesDefinitionsSlide1() {
  return <ResourcesDefinitionsSlide label="13 Resources & Definitions A" defs={[
    { term:"Paid and Organic",
      body:`We use these terms frequently in social media. <b>Organic content</b> means any content that is posted to your feed without media spend (ads) behind it. We rarely recommend brands choose to go solely with an organic strategy. <b>Paid support</b> of content allows you to actively have a say in who sees your content and what actions they take from it. Without that "boost", your reach is often limited to about 0.05% of your following — and with the way algorithmic social feeds work these days, you can almost bet that you won't see impressions from anyone outside of your following. But don't worry about feeling like you're always going to be showing cheesy ads to your audience — Chatterkick advertising strategy is designed to integrate your paid content into user feeds in a way that <i>still feels organic</i> — and drives authentic interaction.` },
    { term:"Marketing Funnel",
      body:`A marketing funnel outlines the customer's journey from initial awareness to the final purchase, segmented into stages: <b>Awareness</b> introduces your brand; <b>Interest/Engagement</b> generates curiosity; <b>Consideration/Traffic</b> involves evaluating your offerings; and <b>Conversion</b> is the final act of purchasing. This model helps businesses tailor their marketing strategies to guide potential customers through each stage, optimizing interactions to maximize conversions and loyalty.` },
    { term:"Social Algorithm",
      body:`Social algorithms are complex systems used by social media platforms to decide which content to show users, based on factors like engagement, relevancy, and user behavior. They analyze likes, shares, comments, and viewing habits to prioritize content in a user's feed, aiming to enhance user experience by displaying posts most likely to interest them. These algorithms are constantly evolving, making understanding them crucial for marketers to effectively reach and engage their target audience.` },
  ]}/>;
}

function ResourcesDefinitionsSlide2() {
  return <ResourcesDefinitionsSlide label="14 Resources & Definitions B" defs={[
    { term:"Impressions",
      body:`Impressions are the number of times your content was displayed to users, while <b>Reach</b> equals the number of unique users your content was seen by. Usually, we don't want our Impressions to Reach ratio (also known as <b>frequency</b>) to be over 4:1 — this can indicate audience fatigue and usually means it's time for fresh messaging and creative. Impressions and reach are often measured in <b>CPM — Cost Per Mille</b> or how much it costs to reach 1,000 users.` },
    { term:"Engagements",
      body:`Engagements are the number of times users engaged with your content. This often includes video views depending on the platform, which is good for improving your algorithmic reach. Traditional engagement is often thought of as reactions, comments, shares, clicks, etc. We want to see a good balance of both to determine brand health. <b>Engagement Rate</b> is the total of all engagements on your content divided by the impressions (and then multiplied by 100). A higher engagement rate equals strong audience alignment and strong content.` },
    { term:"Link Clicks",
      body:`Link clicks are the number of times users clicked on links from your posts. This action usually equals traffic to your site, but can also include clicks to your profile page, or other locations within whatever platform the user is on. <b>CTR (Click Through Rate)</b> is a percentage we measure actionable content with — a higher CTR often means your content has a valuable hook for your audience and a strong <b>Call to Action</b>. Like a high engagement rate, it usually means things are going well.` },
  ]}/>;
}

window.ResourcesDefinitionsSlide1 = ResourcesDefinitionsSlide1;
window.ResourcesDefinitionsSlide2 = ResourcesDefinitionsSlide2;
