<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KOOLD — LinkedIn Social Templates</title>
<style>
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; font-style: italic; font-display: swap;
  }
</style>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #111; min-height: 100vh; font-family: 'DM Sans', sans-serif; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;

/* ── Shared slide shell ── */
function Slide({ bg = '#F0EEE9', style = {}, children }) {
  return (
    <div style={{
      width: 480, height: 480, background: bg, position: 'relative',
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      ...style
    }}>
      {children}
    </div>
  );
}

/* ── Wordmark shorthand (CSS-rendered since we need it invertable) ── */
function Wordmark({ dark, size = 16 }) {
  return (
    <img
      src="assets/logo_wordmark_web.png"
      alt="KOOLD"
      style={{ height: size, objectFit: 'contain', filter: dark ? 'invert(1) brightness(0)' : 'none' }}
    />
  );
}
function IglooO({ dark, size = 64 }) {
  return (
    <img
      src={dark ? 'assets/logo_O_dark.png' : 'assets/logo_O_light.png'}
      alt=""
      style={{ width: size, height: size, objectFit: 'contain' }}
    />
  );
}

/* ── TEMPLATE A — HOOK ── */
const HOOKS = [
  { headline: 'Your cold chain\nhas a pulse.', sub: 'We are listening.', cta: 'KOOLD.COM · Schedule a Consultation' },
  { headline: 'The failure that\ndidn\'t happen.', sub: 'That\'s the job.', cta: 'KOOLD.COM · Learn More' },
  { headline: '4.3 seconds\nto alert.', sub: 'Before your team wakes up.', cta: 'KOOLD.COM · Start a Pilot' },
  { headline: 'Two degrees.\nMillions at stake.', sub: 'We precalculate. You sleep.', cta: 'KOOLD.COM · Schedule a Consultation' },
];
function TemplateA({ idx = 0 }) {
  const d = HOOKS[idx % HOOKS.length];
  return (
    <Slide bg="#F0EEE9">
      {/* Logo top */}
      <div style={{ padding: '28px 0 0', display: 'flex', justifyContent: 'center' }}>
        <Wordmark dark size={14} />
      </div>
      {/* Headline */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 40px' }}>
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 46, fontWeight: 500, color: '#191919', lineHeight: 1.1, textAlign: 'center', letterSpacing: '-0.01em', whiteSpace: 'pre-line' }}>
          {d.headline}
        </div>
      </div>
      {/* Igloo-O */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
        <IglooO dark size={60} />
      </div>
      {/* Subline */}
      <div style={{ textAlign: 'center', fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 400, color: '#191919', marginBottom: 20 }}>
        {d.sub}
      </div>
      {/* Footer */}
      <div style={{ textAlign: 'center', fontFamily: "'DM Sans',sans-serif", fontSize: 11, fontWeight: 500, color: '#191919', opacity: 0.5, letterSpacing: '0.04em', paddingBottom: 24 }}>
        {d.cta}
      </div>
    </Slide>
  );
}

/* ── TEMPLATE B — STATEMENT ── */
const STATEMENTS = [
  'AI-powered predictive analytics.\n100% audit-ready.',
  'Nothing happened.\nThat\'s the job.',
  'We don\'t predict.\nWe precalculate.',
  '47 failures prevented.\nThis month. One client.',
];
function TemplateB({ idx = 0 }) {
  const s = STATEMENTS[idx % STATEMENTS.length];
  return (
    <Slide bg="#F0EEE9">
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px 44px 20px' }}>
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 42, fontWeight: 500, color: '#191919', lineHeight: 1.15, textAlign: 'center', letterSpacing: '-0.01em', whiteSpace: 'pre-line' }}>
          {s}
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: 32 }}>
        <Wordmark dark size={20} />
      </div>
    </Slide>
  );
}

/* ── TEMPLATE CTA — BRAND ── */
const TAGLINES = [
  'The Pulse of Cold Chain.',
  'Always monitoring. Always steady.',
  'Certainty, not guessing.',
  'Predictable cold chain.',
];
function TemplateCTA({ idx = 0 }) {
  return (
    <Slide bg="#F0EEE9">
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
        <Wordmark dark size={40} />
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 400, fontStyle: 'italic', color: '#191919', textAlign: 'center', marginTop: 4 }}>
          {TAGLINES[idx % TAGLINES.length]}
        </div>
      </div>
      <div style={{ textAlign: 'center', fontFamily: "'DM Sans',sans-serif", fontSize: 11, fontWeight: 500, color: 'rgba(25,25,25,0.45)', letterSpacing: '0.08em', textTransform: 'uppercase', paddingBottom: 28 }}>
        Schedule a Consultation
      </div>
    </Slide>
  );
}

/* ── TEMPLATE DARK — DEEP VOID ── */
const DARK_COPY = [
  { headline: 'Nothing happened.\nThat\'s the job.', sub: 'KOOLD.COM', accent: false },
  { headline: 'Always monitoring.\nAlways steady.', sub: 'Schedule a Consultation', accent: true },
  { headline: 'Your CFO sleeps\nbetter tonight.', sub: 'KOOLD.COM', accent: false },
  { headline: '0 violations.\n30 clients.\nThis month.', sub: 'KOOLD.COM', accent: true },
];
function TemplateDark({ idx = 0 }) {
  const d = DARK_COPY[idx % DARK_COPY.length];
  return (
    <Slide bg="#0F384D">
      <div style={{ padding: '28px 0 0', display: 'flex', justifyContent: 'center' }}>
        <Wordmark dark={false} size={14} />
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 44px' }}>
        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 44, fontWeight: 500, color: '#F0EEE9', lineHeight: 1.1, textAlign: 'center', letterSpacing: '-0.01em', whiteSpace: 'pre-line' }}>
          {d.headline}
        </div>
      </div>
      <div style={{ textAlign: 'center', fontFamily: "'DM Sans',sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: d.accent ? '#FEEC7E' : 'rgba(240,238,233,0.4)', paddingBottom: 28 }}>
        {d.sub}
      </div>
    </Slide>
  );
}

/* ── Post schedule data ── */
const SCHEDULE = [
  { week: 1,  theme: 'The Pulse',            template: 'A + B + CTA', phase: 'UNEASE',      copy: 'Your cold chain has a pulse. We are listening.' },
  { week: 2,  theme: 'You Are Here',         template: 'B + Dark',    phase: 'UNEASE',      copy: 'AI-powered predictive analytics. 100% audit-ready.' },
  { week: 3,  theme: 'Nothing Happened',     template: 'B + CTA',     phase: 'RECOGNITION', copy: 'Nothing happened. That\'s the job.' },
  { week: 4,  theme: 'Certainty Discipline', template: 'Dark + CTA',  phase: 'RECOGNITION', copy: 'We don\'t predict. We precalculate.' },
  { week: 5,  theme: 'The 3AM Call',         template: 'A + Dark',    phase: 'RECOGNITION', copy: '4.3 seconds to alert. Before your team wakes up.' },
  { week: 6,  theme: 'Stable',               template: 'B + CTA',     phase: 'HOPE',        copy: 'When everything works, nobody talks about it.' },
  { week: 7,  theme: 'You Don\'t Need Us',   template: 'A + B',       phase: 'HOPE',        copy: 'You probably don\'t need us. Unless your cold chain has ever surprised you.' },
  { week: 8,  theme: 'When Everything Works',template: 'B + Dark',    phase: 'TRUST',       copy: 'The luxury of a good system: nothing to report.' },
  { week: 9,  theme: '4.3 Seconds',          template: 'A + CTA',     phase: 'TRUST',       copy: '47 failures prevented. This month. One client.' },
  { week: 10, theme: 'Two Degree Deviation', template: 'Dark + CTA',  phase: 'ACTION',      copy: 'Start with 5 sensors. 30-day pilot. Full access.' },
];

const PHASE_COLORS = {
  UNEASE:      { bg: 'rgba(254,236,126,0.1)', color: '#FEEC7E' },
  RECOGNITION: { bg: 'rgba(74,122,144,0.25)', color: '#F0EEE9' },
  HOPE:        { bg: 'rgba(88,158,132,0.2)',  color: '#B2DE7B' },
  TRUST:       { bg: 'rgba(55,101,123,0.4)',  color: '#F0EEE9' },
  ACTION:      { bg: 'rgba(178,222,123,0.15)',color: '#B2DE7B' },
};

/* ── Main App ── */
function App() {
  const [tab, setTab] = useState('templates');
  const [templateType, setTemplateType] = useState('A');
  const [variantIdx, setVariantIdx] = useState(0);

  const TEMPLATES = { A: HOOKS.length, B: STATEMENTS.length, CTA: TAGLINES.length, Dark: DARK_COPY.length };
  const maxIdx = TEMPLATES[templateType] - 1;

  const TAB = { borderRadius: 3, padding: '7px 18px', fontSize: 12, fontWeight: 500, cursor: 'pointer', border: 'none', transition: 'all 0.15s ease', fontFamily: "'DM Sans',sans-serif", letterSpacing: '0.04em' };

  return (
    <div style={{ minHeight: '100vh', background: '#111', padding: 32 }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
        <div>
          <div style={{ fontFamily: "'Outfit',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(240,238,233,0.3)', marginBottom: 4 }}>Koold Design System</div>
          <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 28, fontWeight: 500, color: '#F0EEE9' }}>LinkedIn Social Templates</div>
        </div>
        <div style={{ display: 'flex', gap: 6, background: 'rgba(255,255,255,0.05)', padding: 4, borderRadius: 4 }}>
          {['templates', 'schedule'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{ ...TAB, background: tab===t ? '#37657B' : 'transparent', color: tab===t ? '#F0EEE9' : 'rgba(240,238,233,0.4)' }}>
              {t === 'templates' ? 'Templates' : 'Post Schedule'}
            </button>
          ))}
        </div>
      </div>

      {tab === 'templates' && (
        <div>
          {/* Template picker */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
            {Object.keys(TEMPLATES).map(k => (
              <button key={k} onClick={() => { setTemplateType(k); setVariantIdx(0); }} style={{ ...TAB, background: templateType===k ? '#FEEC7E' : 'rgba(255,255,255,0.06)', color: templateType===k ? '#0F384D' : 'rgba(240,238,233,0.6)', fontWeight: templateType===k ? 600 : 400 }}>
                Template {k}
              </button>
            ))}
          </div>

          {/* Template description */}
          <div style={{ marginBottom: 20, fontSize: 12, color: 'rgba(240,238,233,0.45)', lineHeight: 1.6 }}>
            {templateType === 'A' && 'Hook — Logo top · Large headline (Cormorant Garamond) · Igloo-O icon · Subline · Footer CTA. Primary type. Cloud Dancer background.'}
            {templateType === 'B' && 'Statement — Large centered text only · Logo bottom. Minimal, typographic. Cloud Dancer background.'}
            {templateType === 'CTA' && 'Brand Closer — Large wordmark hero · Italic tagline · Text CTA. Final slide of carousel. Cloud Dancer background.'}
            {templateType === 'Dark' && 'Dark — Deep Void background · Cloud Dancer text · Optional Signal Ice accent. For AI/tech content, contrast campaigns.'}
          </div>

          {/* Slide preview */}
          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
            <div style={{ flexShrink: 0 }}>
              {templateType === 'A'   && <TemplateA idx={variantIdx} />}
              {templateType === 'B'   && <TemplateB idx={variantIdx} />}
              {templateType === 'CTA' && <TemplateCTA idx={variantIdx} />}
              {templateType === 'Dark'&& <TemplateDark idx={variantIdx} />}
            </div>

            {/* Variant selector + spec */}
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontFamily: "'Outfit',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(240,238,233,0.35)' }}>
                Variant {variantIdx + 1} / {maxIdx + 1}
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button onClick={() => setVariantIdx(v => Math.max(0, v-1))} disabled={variantIdx===0} style={{ ...TAB, background: 'rgba(255,255,255,0.06)', color: variantIdx===0 ? 'rgba(255,255,255,0.15)' : '#F0EEE9', cursor: variantIdx===0 ? 'not-allowed' : 'pointer' }}>← Prev</button>
                <button onClick={() => setVariantIdx(v => Math.min(maxIdx, v+1))} disabled={variantIdx===maxIdx} style={{ ...TAB, background: 'rgba(255,255,255,0.06)', color: variantIdx===maxIdx ? 'rgba(255,255,255,0.15)' : '#F0EEE9', cursor: variantIdx===maxIdx ? 'not-allowed' : 'pointer' }}>Next →</button>
              </div>

              {/* Spec card */}
              <div style={{ background: '#37657B', border: '1px solid #4A7A90', borderRadius: 4, padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
                <div style={{ fontFamily: "'Outfit',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(240,238,233,0.35)', marginBottom: 4 }}>Specs</div>
                {[
                  ['Format',     'LinkedIn Post / Carousel · 1:1'],
                  ['Production', '3000×3000px PNG'],
                  ['Output',     '1080×1080px'],
                  ['Background', templateType === 'Dark' ? '#0F384D Deep Void' : '#F0EEE9 Cloud Dancer'],
                  ['Headline',   'Cormorant Garamond · 180–220px (3000px canvas)'],
                  ['Body/UI',    'DM Sans · 400'],
                  ['Accent',     templateType === 'Dark' ? '#FEEC7E Signal Ice ≤15%' : 'None — monochrome'],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', gap: 12, fontSize: 12 }}>
                    <span style={{ width: 80, color: 'rgba(240,238,233,0.4)', flexShrink: 0, fontWeight: 500 }}>{k}</span>
                    <span style={{ color: '#F0EEE9' }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* All 4 side by side */}
          <div style={{ marginTop: 32 }}>
            <div style={{ fontFamily: "'Outfit',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(240,238,233,0.35)', marginBottom: 14 }}>All Templates — Overview</div>
            <div style={{ display: 'flex', gap: 14 }}>
              {[
                { C: TemplateA,   label: 'A · Hook' },
                { C: TemplateB,   label: 'B · Statement' },
                { C: TemplateCTA, label: 'CTA · Brand' },
                { C: TemplateDark,label: 'Dark · Contrast' },
              ].map(({ C: Comp, label }) => (
                <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ transform: 'scale(0.42)', transformOrigin: 'top left', width: 480, height: 480, flexShrink: 0 }}>
                    <Comp idx={0} />
                  </div>
                  <div style={{ marginTop: -267, fontSize: 10, color: 'rgba(240,238,233,0.35)', letterSpacing: '0.05em', textAlign: 'center', width: 201 }}>{label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'schedule' && (
        <div>
          <div style={{ marginBottom: 20, fontSize: 13, color: 'rgba(240,238,233,0.5)', lineHeight: 1.6 }}>
            10-week LinkedIn campaign · KOOLD012026 · Emotional arc: UNEASE → RECOGNITION → HOPE → TRUST → ACTION
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {/* Header */}
            <div style={{ display: 'flex', gap: 0, padding: '8px 16px', fontSize: 9, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(240,238,233,0.3)', background: 'rgba(0,0,0,0.3)', borderRadius: '4px 4px 0 0' }}>
              <div style={{ width: 48 }}>Week</div>
              <div style={{ width: 160 }}>Theme</div>
              <div style={{ width: 120 }}>Templates</div>
              <div style={{ width: 100 }}>Phase</div>
              <div style={{ flex: 1 }}>Copy Direction</div>
            </div>
            {SCHEDULE.map((row, i) => {
              const p = PHASE_COLORS[row.phase];
              return (
                <div key={row.week} style={{ display: 'flex', gap: 0, padding: '13px 16px', background: i % 2 === 0 ? 'rgba(55,101,123,0.15)' : 'rgba(55,101,123,0.08)', borderLeft: '2px solid transparent', transition: 'border-color 0.15s ease', alignItems: 'center' }}>
                  <div style={{ width: 48, fontSize: 13, fontWeight: 700, color: 'rgba(240,238,233,0.35)' }}>W{row.week}</div>
                  <div style={{ width: 160, fontSize: 13, fontWeight: 500, color: '#F0EEE9' }}>{row.theme}</div>
                  <div style={{ width: 120, fontSize: 11, fontFamily: "'Courier New',monospace", color: '#FEEC7E', opacity: 0.8 }}>{row.template}</div>
                  <div style={{ width: 100 }}>
                    <span style={{ fontSize: 9, fontWeight: 600, letterSpacing: '0.06em', padding: '3px 8px', borderRadius: 2, background: p.bg, color: p.color }}>{row.phase}</span>
                  </div>
                  <div style={{ flex: 1, fontSize: 12, color: 'rgba(240,238,233,0.6)', lineHeight: 1.5, fontStyle: 'italic', fontFamily: "'Cormorant Garamond',serif", fontSize: 14 }}>"{row.copy}"</div>
                </div>
              );
            })}
          </div>

          {/* Hashtags */}
          <div style={{ marginTop: 24, background: '#37657B', border: '1px solid #4A7A90', borderRadius: 4, padding: '18px 20px' }}>
            <div style={{ fontFamily: "'Outfit',sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(240,238,233,0.35)', marginBottom: 10 }}>Standard Hashtag Set</div>
            <div style={{ fontSize: 13, color: '#F0EEE9', lineHeight: 1.8 }}>
              #ColdChain #PharmaLogistics #SupplyChainVisibility #KOOLD #PharmaCompliance #ColdChainMonitoring #RealTimeTracking #GDP #DSCSA #PharmaTech #SAPNative #AIFirst #PharmaIntelligence #LifeSciences #TemperatureControl
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
