/* Penrose — Journal, Use Cases, Pricing page bodies.
 * Requires penrose-atoms.jsx and penrose-sections.jsx loaded first.
 */

const { useState: useStateP } = React;
const { PnTopNav: PnNav, PnFooter: PnFoot, PnButton: PnBtnP } = window;
const BOOKING_URL_PAGES = window.PENROSE_BOOKING_URL || 'https://calendar.app.google/xFdbQsvUw5x5eVS48';

/* ============================== JOURNAL ============================== */

const JOURNAL_POSTS = [
{
  tag: 'Company',
  title: <>Introducing Penrose, the AI-native content agent for <em>campaigns.</em></>,
  dek: 'A new production model for agencies and media buyers that need more client-ready video creative, without adding another production calendar.',
  author: 'Penrose Team',
  avatar: 'P',
  avatarBg: 'linear-gradient(135deg, #c8a584, #6b4a3a)',
  when: '2 min read · Jan 13, 2026',
  bg: 'linear-gradient(160deg, #2a4a3a 0%, #4a6b58 40%, #c8a584 100%)',
  image: 'uploads/journal-penrose-vision-abstract.png',
  body: [
    'Today we are building Penrose, an AI-native content agent that helps agencies turn client offers, websites, reviews, and brand assets into finished Campaign Packs in 5 business days.',
    'Creative is the connection point between a business and the people it needs to reach. But while media buying has become faster, more automated, and more measurable, video production still moves like a shoot calendar. A team can launch a new audience in minutes, then wait weeks for the cut that actually tests the idea.',
    'Penrose exists to close that gap. We combine the speed and range of AI generation with human creative direction, editing, and QA. The unit of work is not one video. It is a Campaign Pack: one client, one offer, three creative hooks, three short-form cuts, three paid-social exports, captions, and delivery notes.',
    'Our north star is speed to learning. Agencies should be able to test more ideas for more clients without asking their team to become a production house. Local businesses should be able to show up with the same volume and polish as national brands. Every good offer should have enough creative around it to find the angle that works.',
    'We believe the next generation of creative production will be AI-assisted and human-polished. Software will handle the repetitive translation between brief, format, channel, and variation. People will keep the taste, judgment, strategy, and accountability. That is the production lane we are building.',
    'If you are an agency, media buyer, franchise operator, or local business that needs more video creative without more production drag, we would love to show you what Penrose can make.'
  ]
}];


const JournalPage = () => {
  const article = JOURNAL_POSTS[0];

  return (
    <div className="pn-app" data-screen-label="Journal">
      <PnNav active="Journal" />

      <section className="pn-pagehead" data-screen-label="Journal Head">
        <div className="pn-pagehead__container">
          <div className="pn-pagehead__eyebrow">Journal</div>
          <h1 className="pn-pagehead__title">Our vision for<br />an <em>AI-native content agent.</em></h1>
          <p className="pn-pagehead__sub">A short note on why Penrose exists.</p>
        </div>
      </section>

      <section className="pn-journal">
        <div className="pn-journal__container">
          <article className="pn-journal-article">
            <div
              className="pn-journal-article__hero"
              style={{
                backgroundColor: '#e4d1bd',
                backgroundImage: article.image ? `url("${article.image}")` : article.bg,
              }}
            />
            <div className="pn-journal-article__body">
              <div className="pn-journal-article__meta">
                <span className="tag">{article.tag}</span>
                <span>{article.when}</span>
              </div>
              <h2>{article.title}</h2>
              <p className="pn-journal-article__dek">{article.dek}</p>
              <div className="pn-journal-article__author">
                <span className="avatar" style={{ background: article.avatarBg }}>{article.avatar}</span>
                <span>{article.author}</span>
              </div>
              <div className="pn-journal-article__copy">
                {article.body.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}
              </div>
              <PnBtnP variant="primary" href={BOOKING_URL_PAGES}>Get Started</PnBtnP>
            </div>
          </article>
        </div>
      </section>

      <PnFoot />
    </div>);

};

/* ============================== USE CASES ============================== */

const USE_CASES = [
{
  tag: 'Home services',
  title: <>HVAC, plumbing, roofing, restoration.</>,
  body: 'Seasonal campaigns, service-area variants, financing offers — across Meta, Instagram, TikTok, and Facebook. Fresh video creative for local service clients in days, not weeks.',
  formats: ['3 creative hooks', '9:16 vertical', '1:1 square', 'Captions', '5 business days'],
  thumbCap: 'Mercer HVAC — summer tune-up pack',
  bg: 'linear-gradient(160deg, #2a4a3a, #4a6b58 38%, #c8a584)',
  image: 'uploads/usecase-home-services-abstract.png'
},
{
  tag: 'Franchise & multi-location',
  title: <>One concept, <em>every</em> market.</>,
  body: 'A single brand-approved offer turned into agency-ready creative, with optional localization for branches, service areas, and grand-opening dates.',
  formats: ['White-label delivery', 'Localization add-on', 'Service-area variants', 'Shared workspace'],
  thumbCap: 'Hearthstone Roofing — 14 markets',
  bg: 'linear-gradient(170deg, #3a2a4a, #6b4a78 45%, #e8b8c4)',
  image: 'uploads/usecase-franchise-abstract.png'
},
{
  tag: 'Recruiting',
  title: <>Hiring campaigns that don't <em>burn out.</em></>,
  body: 'Technicians, drivers, nurses, sales reps, apprentices. Give recruiting clients enough creative variation to keep paid social from burning out.',
  formats: ['3 hooks', '3 video exports', 'Text overlays', 'Extra concepts add-on'],
  thumbCap: 'Mercy Valley Health — RN cohort',
  bg: 'linear-gradient(180deg, #1c2a3a, #4a5a78 50%, #a8c8e8)',
  image: 'uploads/usecase-recruiting-abstract.png'
},
{
  tag: 'CTV & local',
  title: <>Affordable video for the <em>streaming</em> shelf.</>,
  body: 'Paid-social packs by default, with optional 16:9 YouTube / CTV exports when a local advertiser is ready to expand beyond feed and stories.',
  formats: ['9:16 + 1:1 included', '16:9 add-on', 'YouTube add-on', 'CTV add-on'],
  thumbCap: 'Pioneer Plumbing — Houston CTV',
  bg: 'linear-gradient(150deg, #3a2a1c, #785a3a 50%, #f4c5a8)',
  image: 'uploads/usecase-ctv-local-abstract.png'
},
{
  tag: 'Offer refreshes',
  title: <>Financing. Free estimates. <em>Limited-time.</em></>,
  body: 'Per-offer hook variations so the buyer can match creative to whichever promotion is running this week. Holiday, financing, seasonal — each gets its own Campaign Pack.',
  formats: ['Pay per campaign', 'Extra revision add-on', 'Rush delivery add-on', 'New concept add-on'],
  thumbCap: 'Oak & Kin BBQ — Memorial Day',
  bg: 'linear-gradient(180deg, #2a1c1c, #5a3a3a 50%, #e8a89e)',
  image: 'uploads/usecase-offer-refreshes-abstract.png'
}];


const UseCasesPage = () =>
<div className="pn-app" data-screen-label="Use Cases">
    <PnNav active="Use cases" />

    <section className="pn-pagehead" data-screen-label="UseCases Head">
      <div className="pn-pagehead__container">
        <div className="pn-pagehead__eyebrow">Use cases</div>
        <h1 className="pn-pagehead__title">Built for agencies<br />that need <em>creative capacity</em>.</h1>
        <p className="pn-pagehead__sub">Five places where white-label video ad production helps agencies and media buyers move faster.</p>
      </div>
    </section>

    <section className="pn-uc">
      <div className="pn-uc__container">
        <div className="pn-uc-hero">
          <div>
            <div className="pn-eyebrow">By the numbers</div>
            <h2 style={{
            fontFamily: 'var(--el-font-display)', fontWeight: 300,
            fontSize: 'clamp(32px, 3.6vw, 44px)', lineHeight: 1.05,
            letterSpacing: '-1px', margin: 0, color: 'var(--el-ink)',
            textWrap: 'balance'
          }}>
              Fresh video creative for your clients in days, not weeks.
            </h2>
          </div>
          <div className="pn-uc-hero__stats">
            <div className="pn-uc-hero__stat"><span className="n">1</span><span className="l">brief in</span></div>
            <div className="pn-uc-hero__stat"><span className="n">3</span><span className="l">ready-to-run video ads out</span></div>
            <div className="pn-uc-hero__stat"><span className="n">5</span><span className="l">business day turnaround</span></div>
          </div>
        </div>

        <div className="pn-uc-list">
          {USE_CASES.map((c, i) =>
        <div key={i} className="pn-uc-item">
              <div className="pn-uc-item__num">{String(i + 1).padStart(2, '0')}</div>
              <div>
                <div className="pn-uc-item__tag">{c.tag}</div>
                <h3 className="pn-uc-item__title">{c.title}</h3>
              </div>
              <div>
                <p className="pn-uc-item__body">{c.body}</p>
                <div className="pn-uc-item__formats">
                  {c.formats.map((f) => <span key={f}>{f}</span>)}
                </div>
              </div>
              <div
                className="pn-uc-item__thumb"
                style={{
                  backgroundColor: '#d9c4aa',
                  backgroundImage: c.image ? `url("${c.image}")` : c.bg,
                }}
              >
                <div className="pn-uc-item__thumb-cap">{c.thumbCap}</div>
              </div>
            </div>
        )}
        </div>
      </div>
    </section>

    <PnFoot />
  </div>;


/* ============================== PRICING ============================== */

const PRICING_PLANS = [
{
  name: 'Campaign Pack',
  price: '$799',
  unit: 'pay-as-you-go',
  desc: 'Best for testing one client. One brief in, three ready-to-run video ads out.',
  cta: 'Get Started',
  list: [
  '1 client · 1 offer',
  '3 creative hooks',
  '3 short-form video ad cuts',
  '9:16 vertical + 1:1 square exports',
  'Captions and text overlays',
  '1 revision round',
  '5 business day turnaround']

},
{
  name: 'Agency Partner Plan',
  price: '$2,876',
  unit: 'per month',
  desc: '10% discount for agencies shipping recurring client creative.',
  cta: 'Get Started',
  featured: true,
  ribbon: 'Most picked',
  list: [
  '4 Campaign Packs / month',
  'White-label delivery',
  'Shared production workspace',
  'Priority turnaround',
  'Agency-ready handoff',
  'Unused packs reviewed monthly']

},
{
  name: 'Agency Studio Plan',
  price: '$5,114',
  unit: 'per month',
  desc: '20% discount and a dedicated production lane for agencies that need more creative capacity without hiring.',
  cta: 'Get Started',
  list: [
  '8 Campaign Packs / month',
  'White-label delivery',
  'Priority turnaround',
  'Dedicated production lane',
  'Shared production workspace',
  'Monthly planning support']

}];


const PRICING_TABLE = [
{ row: 'Campaign Packs / month', cols: ['Pay as you go', '4', '8'] },
{ row: 'Finished video ads per pack', cols: ['3 ads', '3 ads', '3 ads'] },
{ row: 'Creative hooks per pack', cols: ['3', '3', '3'] },
{ row: 'Short-form video ad cuts', cols: ['3', '3', '3'] },
{ row: '9:16 vertical exports', cols: ['check', 'check', 'check'] },
{ row: '1:1 square exports', cols: ['check', 'check', 'check'] },
{ row: 'Captions and text overlays', cols: ['check', 'check', 'check'] },
{ row: 'Turnaround', cols: ['5 business days', 'Priority', 'Priority'] },
{ row: 'White-label delivery', cols: ['check', 'check', 'check'] },
{ row: 'Shared production workspace', cols: ['dash', 'check', 'check'] },
{ row: 'Dedicated production lane', cols: ['dash', 'dash', 'check'] }];

const PRICING_ADDONS = [
  'Rush delivery',
  '16:9 YouTube / CTV exports',
  'Extra revision round',
  'Additional campaign concept',
  'Extra localization or service-area variant'
];


const PRICING_FAQ = [
{ q: 'What happens if we go over the monthly pack count?',
  a: 'You can add extra Campaign Packs at the pay-as-you-go rate or move into the next monthly plan. We keep pricing tied to finished campaign output, not billable hours.' },
{ q: 'Is ad spend included?',
  a: 'No. Ad spend stays separate and is billed directly to the advertiser or managed by the agency / media buyer. We are the production lane only.' },
{ q: 'How do revisions work?',
  a: 'Each Campaign Pack includes one revision round. Extra revision rounds, rush delivery, new concepts, and localization are available as optional add-ons.' },
{ q: 'Can we cancel or pause a monthly plan?',
  a: 'Yes. Monthly plans are designed for agencies with recurring creative volume, and we can scope the right lane around your current client load.' },
{ q: 'Do you ever bill the client directly?',
  a: 'Only if you ask us to. Default is invoice-to-agency, fully white-label. If the agency is reselling Penrose as a visible production partner, we can be on the invoice instead.' }];


/* ---------- Campaign Pack — the literal folder ---------- */

const FILE_ICONS = {
  mp4:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round">
      <rect x="3.5" y="5.5" width="17" height="13" rx="2" />
      <polygon points="10.5,9.5 10.5,14.5 15.5,12" fill="currentColor" stroke="none" />
    </svg>,

  md:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <path d="M6 3h8l4 4v14H6z" />
      <line x1="9" y1="10" x2="15" y2="10" />
      <line x1="9" y1="13" x2="15" y2="13" />
      <line x1="9" y1="16" x2="13" y2="16" />
    </svg>,

  srt:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <rect x="4" y="5" width="16" height="14" rx="2" />
      <line x1="7" y1="11" x2="11" y2="11" />
      <line x1="13" y1="11" x2="17" y2="11" />
      <line x1="7" y1="15" x2="14" y2="15" />
    </svg>,

  txt:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <path d="M6 3h8l4 4v14H6z" />
      <line x1="9" y1="11" x2="15" y2="11" />
      <line x1="9" y1="14" x2="15" y2="14" />
      <line x1="9" y1="17" x2="13" y2="17" />
    </svg>,

  pdf:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round">
      <path d="M6 3h8l4 4v14H6z" />
      <text x="7.5" y="17" fontSize="5.5" fontWeight="700" fill="currentColor" stroke="none" fontFamily="sans-serif">PDF</text>
    </svg>

};

const PACK_FOLDERS = {
  hooks: {
    label: 'Hooks', count: 3,
    files: [
    { name: 'hook_01_problem-agitate.md', size: '3 KB', kind: 'md', meta: '“Your AC is older than your Roomba…”' },
    { name: 'hook_02_neighbor-proof.md', size: '2 KB', kind: 'md', meta: '“Three houses on Maple already booked.”' },
    { name: 'hook_03_offer-stack.md', size: '3 KB', kind: 'md', meta: '“$59 tune-up · 0% financing · same week.”' }]

  },
  cuts: {
    label: 'Video cuts', count: 3,
    files: [
    { name: 'cut_01_problem_15s_9x16.mp4', size: '1.7 MB', dur: '00:15', ar: '9:16', video: 'uploads/hvac-courtroom-thermostat.mp4', bg: 'linear-gradient(160deg, #3a2a1c, #785a3a 55%, #f4c5a8)' },
    { name: 'cut_02_problem_06s_9x16.mp4', size: '1.6 MB', dur: '00:06', ar: '9:16', video: 'uploads/hvac-superhero-door.mp4', bg: 'linear-gradient(180deg, #2a1c1c, #5a3a3a 50%, #e8a89e)' },
    { name: 'cut_03_neighbor_15s_1x1.mp4', size: '1.5 MB', dur: '00:15', ar: '1:1', video: 'uploads/hvac-living-room-surreal.mp4', bg: 'linear-gradient(170deg, #1c2a3a, #4a5a78 50%, #a8c8e8)' }]

  },
  captions: {
    label: 'Captions', count: 3,
    files: [
    { name: 'cut_01.srt', size: '1.2 KB', kind: 'srt', meta: '00:00 — “Older than your Roomba. Hotter, too.”' },
    { name: 'cut_02.srt', size: '0.6 KB', kind: 'srt', meta: '00:00 — “Older. Hotter. Louder. Replace it.”' },
    { name: 'cut_03.srt', size: '1.1 KB', kind: 'srt', meta: '00:00 — “Three neighbors on Maple already booked.”' }]

  },
  copy: {
    label: 'Ad copy', count: 4,
    files: [
    { name: 'primary_headlines.txt', size: '2 KB', kind: 'txt', meta: '6 headlines · 25 char max — Meta primary text' },
    { name: 'meta_descriptions.txt', size: '3 KB', kind: 'txt', meta: '6 descriptions · 90 char max' },
    { name: 'cta_variants.txt', size: '1 KB', kind: 'txt', meta: '4 CTAs — Book Now / Get Quote / Learn More / Call' },
    { name: 'offer_disclosures.txt', size: '2 KB', kind: 'txt', meta: 'Required legal copy for the $59 tune-up offer' }]

  }
};

const PACK_ROOT_FILES = [
{ name: 'client brief.pdf', kind: 'pdf' },
{ name: 'delivery-notes.md', kind: 'md' },
{ name: 'revision-round.md', kind: 'md' }];


const CampaignPackPreview = () => {
  const [active, setActive] = useStateP('cuts');
  const folder = PACK_FOLDERS[active];

  return (
    <div id="campaign-pack-preview" className="pn-pack-section" data-screen-label="Pricing Pack Preview">
      <div className="pn-pack-section__head">
        <div>
          <div className="pn-eyebrow">THE CORE UNIT · $799</div>
          <h2>What's inside one <em>Campaign Pack.</em></h2>
        </div>
        <p>One client. One offer. Three video ads. Every pack ships as a single named folder with hooks, video exports, captions, text overlays, revision notes, and white-label delivery in 5 business days.</p>
      </div>

      <div className="pn-pack">
        <div className="pn-pack__chrome">
          <div className="pn-pack__lights"><span></span><span></span><span></span></div>
          <div className="pn-pack__path">
            Penrose · Deliveries <span className="sep">›</span> Mercer HVAC <span className="sep">›</span>
            <strong>Summer Tune-Up — Pack 01</strong>
          </div>
          <div className="pn-pack__meta">5 business day delivery · 1 revision round</div>
        </div>

        <div className="pn-pack__body">
          <aside className="pn-pack__side">
            <div className="pn-pack__side-label">Folder</div>
            <div className="pn-pack__side-root">
              <span className="ico-folder"></span>
              Summer Tune-Up Pack 01
            </div>
            <ul className="pn-pack__side-list">
              {Object.entries(PACK_FOLDERS).map(([key, f]) =>
              <li key={key}
              className={active === key ? 'active' : ''}
              onClick={() => setActive(key)}>
                  <span className="ico-folder"></span>
                  <span className="name">{f.label}</span>
                  <span className="count">{f.count}</span>
                </li>
              )}
            </ul>
            <div className="pn-pack__side-label">INPUT FILES</div>
            <ul className="pn-pack__side-list">
              {PACK_ROOT_FILES.map((f) =>
              <li key={f.name} className="file">
                  <span className="ico-file">{FILE_ICONS[f.kind]}</span>
                  <span className="name">{f.name}</span>
                </li>
              )}
            </ul>
          </aside>

          <div className="pn-pack__main">
            <div className="pn-pack__crumb">
              <span>Summer Tune-Up Pack 01</span>
              <span className="sep">/</span>
              <strong>{folder.label}</strong>
              <span className="pn-pack__crumb-count">{folder.count} files</span>
            </div>

            {active === 'cuts' ?
            <div className="pn-pack__cuts">
                {folder.files.map((f) =>
              <div key={f.name} className="pn-pack-cut">
                    <div className={`pn-pack-cut__art pn-pack-cut__art--${f.ar.replace(':', 'x')}`}
                style={{ background: f.bg }}>
                      {f.video && (
                        <video
                          className="pn-pack-cut__video"
                          src={f.video}
                          autoPlay
                          muted
                          loop
                          playsInline
                          preload="metadata"
                        />
                      )}
                      <span className="ar">{f.ar}</span>
                      <span className="dur">{f.dur}</span>
                      <span className="play">
                        <svg viewBox="0 0 12 12"><polygon points="3.5,2.5 3.5,9.5 10,6" /></svg>
                      </span>
                    </div>
                    <div className="pn-pack-cut__name">{f.name}</div>
                    <div className="pn-pack-cut__size">{f.size}</div>
                  </div>
              )}
              </div> :

            <div className="pn-pack__files">
                {folder.files.map((f) =>
              <div key={f.name} className="pn-pack-file">
                    <span className="pn-pack-file__ico">{FILE_ICONS[f.kind]}</span>
                    <div className="pn-pack-file__name">{f.name}</div>
                    <div className="pn-pack-file__meta">{f.meta}</div>
                    <div className="pn-pack-file__size">{f.size}</div>
                  </div>
              )}
              </div>
            }
          </div>
        </div>

        <div className="pn-pack__foot">
          <div className="pn-pack__foot-item"><span className="k">Hooks</span><span className="v">3 creative</span></div>
          <div className="pn-pack__foot-item"><span className="k">Short-form cuts</span><span className="v">3 ads</span></div>
          <div className="pn-pack__foot-item"><span className="k">Durations</span><span className="v">15s · 6s</span></div>
          <div className="pn-pack__foot-item"><span className="k">Exports</span><span className="v">9:16 · 1:1</span></div>
          <div className="pn-pack__foot-item"><span className="k">Turnaround</span><span className="v">5 business days</span></div>
          <div className="pn-pack__foot-item"><span className="k">Revisions</span><span className="v">1 round</span></div>
        </div>
      </div>

      <div className="pn-pack-summary">
        <div className="pn-pack-summary__price">$799</div>
        <div className="pn-pack-summary__line">
          <em>One Brief in. Three ready-to-run video ads out.</em>
        </div>
      </div>
    </div>);

};

const PricingPage = () => {
  const [openFaq, setOpenFaq] = useStateP(0);
  return (
    <div className="pn-app" data-screen-label="Pricing">
      <PnNav active="Pricing" />

      <section className="pn-pagehead" data-screen-label="Pricing Head">
        <div className="pn-pagehead__container">
          <div className="pn-pagehead__eyebrow">Pricing</div>
          <h1 className="pn-pagehead__title">Simple output-based<br /><em>pricing.</em></h1>
          <p className="pn-pagehead__sub">Pay per finished campaign, not billable hours. Start with one Campaign Pack, then scale into a monthly agency lane.</p>
        </div>
      </section>

      <section className="pn-pp">
        <div className="pn-pp__container">

          <div className="pn-pp-cards">
            {PRICING_PLANS.map((p, i) =>
            <div key={i} className={`pn-pp-card ${p.featured ? 'pn-pp-card--featured' : ''}`}>
                {p.ribbon && <div className="pn-pp-card__ribbon">{p.ribbon}</div>}
                <div className="pn-pp-card__name">{p.name}</div>
                <div className="pn-pp-card__price">
                  {p.price}{p.unit && <small>· {p.unit}</small>}
                </div>
                <p className="pn-pp-card__desc">{p.desc}</p>
                {p.featured ?
              <a className="el-btn el-btn--md" href={BOOKING_URL_PAGES} target="_blank" rel="noopener noreferrer" style={{ background: '#fff', color: '#0c0a09' }}>{p.cta}</a> :
              <PnBtnP variant="outline" href={BOOKING_URL_PAGES}>{p.cta}</PnBtnP>}
                <ul className="pn-pp-card__list">
                  {p.list.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
            )}
          </div>

          <div className="pn-pp-addons">
            <div>
              <div className="pn-eyebrow">Optional add-ons</div>
              <h2>Scope only what the campaign needs.</h2>
            </div>
            <div className="pn-pp-addons__grid">
              {PRICING_ADDONS.map((item) => <div key={item} className="pn-pp-addon">{item}</div>)}
            </div>
          </div>

          <div className="pn-pp-table">
            <div className="pn-pp-table__head">
              <div>Compare lanes</div>
              <div>Pay-as-you-go</div>
              <div>Agency Partner</div>
              <div>Agency Studio</div>
            </div>
            {PRICING_TABLE.map((r, i) =>
            <div key={i} className="pn-pp-table__row">
                <div>{r.row}</div>
                {r.cols.map((c, j) =>
              <div key={j}>
                    {c === 'check' ? <span className="check" /> :
                c === 'dash' ? <span className="dash" /> :
                c}
                  </div>
              )}
              </div>
            )}
          </div>

          <CampaignPackPreview />

          <div className="pn-pp-faq">
            <div className="pn-pp-faq__head">
              <h2>Pricing, <em>answered.</em></h2>
              <p>The five questions agencies tend to ask on the partner call — answered up front, so the call can focus on your clients.</p>
            </div>
            <div className="pn-faq-grid" style={{ maxWidth: 'none' }}>
              {PRICING_FAQ.map((item, i) =>
              <div key={i}
              className={`pn-faq__item ${openFaq === i ? 'pn-faq__item--open' : ''}`}
              onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <div className="pn-faq__q">
                    {item.q}
                    <span className="pn-faq__plus">
                      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                        <line x1="6" y1="1" x2="6" y2="11" />
                        <line x1="1" y1="6" x2="11" y2="6" />
                      </svg>
                    </span>
                  </div>
                  <div className="pn-faq__a">{item.a}</div>
                </div>
              )}
            </div>
          </div>

        </div>
      </section>

      <PnFoot />
    </div>);

};

Object.assign(window, { JournalPage, UseCasesPage, PricingPage, CampaignPackPreview });