/* Penrose homepage — section components (part 2)
 * Requires penrose-atoms.jsx to be loaded first.
 */

const { useState: useState2, useRef: useRef2 } = React;
const { PnButton: Btn, PnOrb: Orb } = window;
const BOOKING_URL_LEGACY = window.PENROSE_BOOKING_URL || 'https://calendar.app.google/xFdbQsvUw5x5eVS48';

// ---------- Interactive Studio Demo ---------------------------------------

const DEMO_VERTICALS = [
  {
    id: 'home',
    label: 'Home services',
    brand: 'Pioneer Plumbing',
    angle: '24/7 emergency plumbing in Houston',
    offer: '$49 service call',
    chips: ['Meta', 'YouTube Shorts', 'TikTok', 'Local CTV'],
    ads: [
      { ch: 'Meta', score: '8.4', hook: 'Before the leak spreads.',          bg: 'linear-gradient(160deg, #2a4a3a, #4a6b58 40%, #c8a584)' },
      { ch: 'Reels', score: '7.9', hook: 'POV: 3am, no water.',                bg: 'linear-gradient(180deg, #1f1f24, #3a4250 60%, #6b7a8a)' },
      { ch: 'TikTok', score: '9.1', hook: "Plumbers won't tell you this.",     bg: 'linear-gradient(150deg, #3a2a1c, #785a3a 50%, #f4c5a8)' },
      { ch: 'YT Shorts', score: '8.7', hook: '$49 saves $4,900 later.',        bg: 'linear-gradient(170deg, #2a1c3a, #5a4a78 50%, #c8b8e0)' },
      { ch: 'Meta', score: '7.4', hook: "We answer at 3am. They don't.",       bg: 'linear-gradient(160deg, #1c2a3a, #4a5a78 50%, #a8c8e8)' },
      { ch: 'CTV', score: '8.0', hook: 'Local plumbers, on call all night.',   bg: 'linear-gradient(180deg, #2a1c1c, #5a3a3a 50%, #e8b8c4)' },
      { ch: 'Reels', score: '7.6', hook: 'The pipe sound nobody warns you about.', bg: 'linear-gradient(160deg, #1c3a2a, #3a6b58 50%, #a7e5d3)' },
      { ch: 'TikTok', score: '8.9', hook: 'Watch us fix it in 4 minutes.',     bg: 'linear-gradient(170deg, #3a1c2a, #6b3a4a 50%, #e8b8c4)' },
    ],
  },
  {
    id: 'franchise',
    label: 'Franchises',
    brand: 'Oak & Kin BBQ',
    angle: 'Two new Dallas locations, opening weekend',
    offer: 'Free brisket sandwich · Sat only',
    chips: ['Meta', 'TikTok', 'Local CTV', 'YouTube'],
    ads: [
      { ch: 'TikTok', score: '9.3', hook: 'Two locations. One Saturday.',     bg: 'linear-gradient(150deg, #3a2a1c, #785a3a 40%, #f4c5a8)' },
      { ch: 'Meta', score: '8.6', hook: 'Free brisket. Read that again.',     bg: 'linear-gradient(170deg, #2a1c1c, #5a3a3a 50%, #c8a584)' },
      { ch: 'CTV', score: '8.1', hook: 'The line starts at 11.',              bg: 'linear-gradient(160deg, #1c1c2a, #3a3a5a 50%, #a8c8e8)' },
      { ch: 'Reels', score: '7.9', hook: 'Brisket. Burnt ends. Both.',        bg: 'linear-gradient(180deg, #3a1c1c, #6b3a3a 50%, #e8b8c4)' },
      { ch: 'YT Shorts', score: '8.4', hook: '14 hours in the smoker.',       bg: 'linear-gradient(170deg, #2a3a1c, #5a6b3a 50%, #c8c884)' },
      { ch: 'TikTok', score: '8.8', hook: 'Watch the pitmaster slice this.',  bg: 'linear-gradient(150deg, #3a2a1c, #6b4a3a 45%, #e8b8a8)' },
      { ch: 'Meta', score: '7.2', hook: 'Dallas, meet your new lunch.',       bg: 'linear-gradient(160deg, #1c1c1c, #3a3a3a 60%, #a8a298)' },
      { ch: 'CTV', score: '7.8', hook: 'Open Saturday. Closed when sold out.', bg: 'linear-gradient(180deg, #2a1c2a, #5a3a5a 50%, #e8b8c4)' },
    ],
  },
  {
    id: 'recruiting',
    label: 'Recruiting',
    brand: 'Mercy Valley Health',
    angle: 'Hiring 40 RNs by Q3',
    offer: '$8K sign-on bonus',
    chips: ['Meta', 'TikTok', 'YouTube Shorts', 'CTV'],
    ads: [
      { ch: 'TikTok', score: '9.0', hook: 'Hiring 40 nurses this quarter.',   bg: 'linear-gradient(180deg, #1c2a3a, #4a5a78 50%, #a8c8e8)' },
      { ch: 'Meta', score: '8.5', hook: '$8K to sign. Day-one PTO.',          bg: 'linear-gradient(160deg, #2a3a1c, #5a6b3a 50%, #b8c884)' },
      { ch: 'Reels', score: '8.2', hook: 'A shift that ends at 7. On time.',  bg: 'linear-gradient(170deg, #2a1c3a, #5a4a78 50%, #c8b8e0)' },
      { ch: 'YT Shorts', score: '7.9', hook: 'Why nurses leave us less.',     bg: 'linear-gradient(180deg, #1c1c2a, #3a3a5a 50%, #a8b8d8)' },
      { ch: 'CTV', score: '8.6', hook: 'Built around the people who stay.',   bg: 'linear-gradient(160deg, #2a1c1c, #5a3a3a 50%, #e8b8a8)' },
      { ch: 'Meta', score: '7.6', hook: 'See what a 1:4 ratio looks like.',   bg: 'linear-gradient(170deg, #1c2a2a, #3a5a5a 50%, #a8d8d8)' },
      { ch: 'TikTok', score: '8.3', hook: 'Three days on, four off.',         bg: 'linear-gradient(150deg, #2a2a3a, #4a4a6a 50%, #b8b8d8)' },
      { ch: 'Reels', score: '7.4', hook: 'The unit our last hire ranked #1.', bg: 'linear-gradient(180deg, #1c3a2a, #3a6b58 50%, #a7e5d3)' },
    ],
  },
  {
    id: 'healthcare',
    label: 'Healthcare',
    brand: 'Northstar Dermatology',
    angle: 'Same-week appointments for acne and rosacea',
    offer: 'New-patient consult · $89',
    chips: ['Meta', 'YouTube', 'TikTok', 'Local CTV'],
    ads: [
      { ch: 'Meta', score: '8.8', hook: 'A face you stop hiding.',            bg: 'linear-gradient(160deg, #3a1c2a, #785a78 50%, #e8b8c4)' },
      { ch: 'TikTok', score: '9.2', hook: "The skincare nobody's selling.",   bg: 'linear-gradient(170deg, #2a1c3a, #5a4a78 50%, #c8b8e0)' },
      { ch: 'Reels', score: '8.0', hook: 'See the 8-week chart.',             bg: 'linear-gradient(180deg, #1c2a3a, #4a5a78 50%, #a8c8e8)' },
      { ch: 'YT Shorts', score: '8.4', hook: 'Booked this week. Treated this week.', bg: 'linear-gradient(150deg, #2a3a2a, #4a6b4a 50%, #a7e5b8)' },
      { ch: 'CTV', score: '7.7', hook: 'A board-certified plan for $89.',     bg: 'linear-gradient(160deg, #2a1c1c, #5a3a3a 50%, #e8a89e)' },
      { ch: 'Meta', score: '8.1', hook: 'Rosacea isn\'t forever.',            bg: 'linear-gradient(170deg, #3a2a1c, #6b5a3a 50%, #e8d8a8)' },
      { ch: 'TikTok', score: '8.6', hook: 'Day 1 vs. day 56.',                bg: 'linear-gradient(180deg, #2a1c2a, #5a3a5a 50%, #e8b8c4)' },
      { ch: 'YT Shorts', score: '7.8', hook: 'Why we don\'t prescribe a cleanser.', bg: 'linear-gradient(150deg, #1c1c2a, #3a3a5a 50%, #b8b8e0)' },
    ],
  },
];

const PnDemo = () => {
  const [verticalId, setVerticalId] = useState2('home');
  const [tab, setTab] = useState2('all');
  const [busy, setBusy] = useState2(false);
  const vertical = DEMO_VERTICALS.find(v => v.id === verticalId);

  const handlePickVertical = (id) => {
    if (id === verticalId) return;
    setBusy(true);
    setVerticalId(id);
    setTimeout(() => setBusy(false), 750);
  };

  const filtered = tab === 'all'
    ? vertical.ads
    : vertical.ads.filter(a => a.ch.toLowerCase().includes(tab));

  return (
    <section className="pn-demo" data-screen-label="Studio demo">
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow">The Studio</div>
            <h2>Brief once.<br />Ship a <em>Campaign Pack.</em></h2>
          </div>
          <p className="lede">Penrose reads the brief, pulls the assets, and ships three paid-social video ads with vertical and square exports.</p>
        </div>

        <div className="pn-demo__shell">
          <div className="pn-demo__topbar">
            <div className="pn-demo__dots"><span /><span /><span /></div>
            <div className="pn-demo__crumb">
              Campaigns <span style={{ color: 'var(--el-muted-soft)', margin: '0 6px' }}>/</span> <strong>{vertical.brand}</strong>
              <span style={{ color: 'var(--el-muted-soft)', margin: '0 6px' }}>/</span> Campaign Pack 04
            </div>
            <div className="pn-demo__topbar-right">
              <div className="pn-demo__pill">White-label · On</div>
              <div className="pn-demo__pill" style={{ background: 'var(--el-ink)', color: '#fff', borderColor: 'var(--el-ink)' }}>Human review</div>
            </div>
          </div>

          <div className="pn-demo__body">
            <aside className="pn-demo__sidebar">
              <div>
                <div className="pn-demo__field-label">Vertical</div>
                <div className="pn-demo__chips">
                  {DEMO_VERTICALS.map(v => (
                    <button key={v.id} className={`pn-demo__chip ${v.id === verticalId ? 'active' : ''}`} onClick={() => handlePickVertical(v.id)}>
                      {v.label}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <div className="pn-demo__field-label">Brand</div>
                <div className="pn-demo__field">{vertical.brand}</div>
              </div>

              <div>
                <div className="pn-demo__field-label">Angle</div>
                <div className="pn-demo__field" style={{ minHeight: 56 }}>{vertical.angle}</div>
              </div>

              <div>
                <div className="pn-demo__field-label">Offer</div>
                <div className="pn-demo__field">{vertical.offer}</div>
              </div>

              <div>
                <div className="pn-demo__field-label">Channels</div>
                <div className="pn-demo__chips">
                  {vertical.chips.map(c => (
                    <span key={c} className="pn-demo__chip active" style={{ cursor: 'default' }}>{c}</span>
                  ))}
                </div>
              </div>

              <div className="pn-demo__generate">
                <button className="pn-demo__generate-btn">
                  {busy ? <><span className="spinner" /> Producing 3 ads...</> : <>Build Campaign Pack</>}
                </button>
                <div className="pn-demo__hint">5 business days · one revision round</div>
              </div>
            </aside>

            <div className="pn-demo__canvas">
              <div className="pn-demo__canvas-head">
                <div className="pn-demo__canvas-title">
                  Campaign Pack 04 <small>· 3 ads · {vertical.brand}</small>
                </div>
                <div className="pn-demo__canvas-tabs">
                  <button className={tab === 'all' ? 'active' : ''} onClick={() => setTab('all')}>All</button>
                  <button className={tab === 'meta' ? 'active' : ''} onClick={() => setTab('meta')}>Meta</button>
                  <button className={tab === 'tiktok' ? 'active' : ''} onClick={() => setTab('tiktok')}>TikTok</button>
                  <button className={tab === 'yt' ? 'active' : ''} onClick={() => setTab('yt')}>YouTube</button>
                  <button className={tab === 'ctv' ? 'active' : ''} onClick={() => setTab('ctv')}>CTV</button>
                </div>
              </div>

              <div className="pn-demo__grid">
                {filtered.map((ad, i) => (
                  <div key={i} className="pn-ad" style={{ opacity: busy ? 0.35 : 1, transition: 'opacity 300ms ease' }}>
                    <div className="pn-ad__bg" style={{ background: ad.bg }} />
                    <div className="pn-ad__overlay" />
                    <div className="pn-ad__channel">{ad.ch}</div>
                    <div className="pn-ad__score">
                      <svg viewBox="0 0 10 10"><polygon points="5,0 6.3,3.6 10,3.6 7,6 8.2,10 5,7.7 1.8,10 3,6 0,3.6 3.7,3.6" /></svg>
                      {ad.score}
                    </div>
                    <div className="pn-ad__hook">{ad.hook}</div>
                    <div className="pn-ad__meta">
                      <span>0:15 · 9:16</span>
                      <span>Export</span>
                    </div>
                  </div>
                ))}
                {filtered.length === 0 && (
                  <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: 48, color: 'var(--el-muted)', fontSize: 14 }}>
                    No ads for this channel yet — try another tab.
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Use cases (orb cards) -----------------------------------------

const PnUseCases = () => {
  const cases = [
    {
      tag: 'Home services',
      orb: '#a7e5d3',
      title: <>Trucks rolling on the <em>same</em> day the lead came in.</>,
      body: 'Fresh paid-social creative for plumbers, HVAC, roofers, and electricians. Seasonal offers, service-area variants, and financing campaigns can each become their own Campaign Pack.',
      stats: [{ n: '3 hooks', l: 'per pack' }, { n: '5 days', l: 'brief to delivery' }],
    },
    {
      tag: 'Franchises',
      orb: '#f4c5a8',
      title: <>One brand, <em>two hundred</em> storefronts.</>,
      body: 'White-label Campaign Packs for franchisee grand openings, hiring pushes, seasonal promos, and local service-area offers.',
      stats: [{ n: '1 offer', l: 'per pack' }, { n: '3 exports', l: 'per pack' }],
    },
    {
      tag: 'Recruiting',
      orb: '#c8b8e0',
      title: <>Hiring funnels that don\'t <em>burn out</em> by Wednesday.</>,
      body: 'Short-form video ad packs for healthcare, skilled trades, fleet, and field sales recruiting campaigns that need frequent creative refreshes.',
      stats: [{ n: '3 ads', l: 'ready to run' }, { n: '1 round', l: 'revision included' }],
    },
    {
      tag: 'Healthcare',
      orb: '#a8c8e8',
      title: <>Patient acquisition that <em>doesn\'t</em> sound like an ad.</>,
      body: 'Polished Campaign Packs for local healthcare offers, practice launches, appointment availability, and community awareness.',
      stats: [{ n: 'AI + human', l: 'creative review' }, { n: 'Meta', l: 'TikTok + Facebook' }],
    },
  ];

  return (
    <section className="pn-section pn-section--soft" data-screen-label="Use cases">
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow">Built for</div>
            <h2>Local & service businesses,<br />at <em>agency</em> scale.</h2>
          </div>
          <p className="lede">Penrose is tuned for verticals where fresh creative drives pipeline. The work stays polished; the testing throughput goes up.</p>
        </div>
        <div className="pn-usecase-grid">
          {cases.map((c, i) => (
            <div key={i} className="pn-usecase">
              <div className="pn-usecase__orb" style={{ background: `radial-gradient(circle, ${c.orb} 0%, transparent 65%)` }} />
              <div className="pn-usecase__tag">{c.tag}</div>
              <h3 className="pn-usecase__title">{c.title}</h3>
              <p className="pn-usecase__body">{c.body}</p>
              <div className="pn-usecase__stat">
                {c.stats.map((s, j) => (
                  <div key={j} className="pn-usecase__stat-item">
                    <div className="pn-usecase__stat-num">{s.n}</div>
                    <div className="pn-usecase__stat-label">{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------- Testimonials --------------------------------------------------

const PnTestimonials = () => (
  <section className="pn-section" data-screen-label="Testimonials">
    <div className="pn-container">
      <div className="pn-section-head">
        <div>
          <div className="pn-eyebrow">From the buyers</div>
          <h2>Less time managing production.<br />More time improving <em>client</em> performance.</h2>
        </div>
      </div>

      <div className="pn-testimonials-grid">
        <div className="pn-testimonial pn-testimonial--dark">
          <p className="pn-testimonial__quote">
            “We needed fresh HVAC creative without adding another editor. Penrose gave us a clean Campaign Pack we could present under our own agency brand.”
          </p>
          <div className="pn-testimonial__by">
            <div className="pn-testimonial__av" style={{ background: 'linear-gradient(135deg, #f4c5a8, #fbe4d4)' }} />
            <div>
              <div className="pn-testimonial__who">Marcus Devlin</div>
              <div className="pn-testimonial__role">VP Paid Media · Halcyon Performance</div>
            </div>
          </div>
          <div className="pn-testimonial__stat-row">
            <div className="pn-testimonial__stat">
              <div className="pn-testimonial__stat-num">3</div>
              <div className="pn-testimonial__stat-label">ads ready to run</div>
            </div>
            <div className="pn-testimonial__stat">
              <div className="pn-testimonial__stat-num">5</div>
              <div className="pn-testimonial__stat-label">business day delivery</div>
            </div>
          </div>
        </div>

        <div className="pn-testimonial">
          <p className="pn-testimonial__quote">
            “Our buyers used to wait weeks for a refresh. Now we can bring clients new creative concepts in days without managing a production chain.”
          </p>
          <div className="pn-testimonial__by">
            <div className="pn-testimonial__av" style={{ background: 'linear-gradient(135deg, #c8b8e0, #e8e0f2)' }} />
            <div>
              <div className="pn-testimonial__who">Priya Ramaswamy</div>
              <div className="pn-testimonial__role">Director of Creative · Northwind Group</div>
            </div>
          </div>
          <div className="pn-testimonial__stat-row">
            <div className="pn-testimonial__stat">
              <div className="pn-testimonial__stat-num">1</div>
              <div className="pn-testimonial__stat-label">brief in</div>
            </div>
            <div className="pn-testimonial__stat">
              <div className="pn-testimonial__stat-num">0<em></em></div>
              <div className="pn-testimonial__stat-label">freelancers in the loop</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Pricing -------------------------------------------------------

const PnPricing = () => {
  return (
    <section className="pn-section pn-section--soft" data-screen-label="Pricing">
      <div className="pn-container">
        <div className="pn-section-head" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8, marginBottom: 24 }}>
          <div className="pn-eyebrow">Pricing</div>
          <h2>Simple output-based pricing.<br />Scale by the <em>Campaign Pack.</em></h2>
          <p className="lede">Pay per finished campaign, not billable hours. Start with one client, then move into a monthly agency lane.</p>
        </div>

        <div className="pn-pricing-grid">
          <div className="pn-pricing">
            <div className="pn-pricing__name">Campaign Pack</div>
            <div className="pn-pricing__price">$799<small>pay as you go</small></div>
            <p className="pn-pricing__desc">Best for testing one client. One brief in, three ready-to-run video ads out.</p>
            <ul className="pn-pricing__list">
              <li>1 client · 1 offer</li>
              <li>3 creative hooks</li>
              <li>3 short-form video ad cuts</li>
              <li>9:16 and 1:1 exports</li>
              <li>Captions, text overlays, and one revision round</li>
              <li>5 business day turnaround</li>
            </ul>
            <Btn variant="outline" href={BOOKING_URL_LEGACY}>Get Started</Btn>
          </div>

          <div className="pn-pricing pn-pricing--featured">
            <div className="pn-pricing__ribbon">Most picked</div>
            <div className="pn-pricing__name">Agency Partner Plan</div>
            <div className="pn-pricing__price">$2,876<small>/mo</small></div>
            <p className="pn-pricing__desc">10% discount for agencies with recurring client creative needs.</p>
            <ul className="pn-pricing__list">
              <li>4 Campaign Packs / month</li>
              <li>White-label delivery</li>
              <li>Shared production workspace</li>
              <li>Priority turnaround</li>
              <li>Agency-ready handoff</li>
            </ul>
            <a className="el-btn el-btn--lg" href={BOOKING_URL_LEGACY} target="_blank" rel="noopener noreferrer" style={{ background: '#fff', color: '#0c0a09' }}>Get Started</a>
          </div>

          <div className="pn-pricing">
            <div className="pn-pricing__name">Agency Studio Plan</div>
            <div className="pn-pricing__price">$5,114<small>/mo</small></div>
            <p className="pn-pricing__desc">20% discount and dedicated capacity for teams managing multiple clients and steady testing volume.</p>
            <ul className="pn-pricing__list">
              <li>8 Campaign Packs / month</li>
              <li>White-label delivery</li>
              <li>Priority turnaround</li>
              <li>Dedicated production lane</li>
              <li>Shared production workspace</li>
            </ul>
            <Btn variant="outline" href={BOOKING_URL_LEGACY}>Get Started</Btn>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- FAQ -----------------------------------------------------------

const FAQ_ITEMS = [
  { q: 'What is a Campaign Pack?', a: 'One client, one offer, three creative hooks, three short-form video ad cuts, 9:16 vertical exports, 1:1 square exports, captions, text overlays, one revision round, and white-label delivery.' },
  { q: 'Who is Penrose built for?', a: 'Penrose is built mainly for agencies, media buyers, and paid social teams that need more client creative without hiring, filming, or managing freelancers.' },
  { q: 'How fast is turnaround?', a: 'A standard Campaign Pack ships in 5 business days. Rush delivery is available as an optional add-on when capacity allows.' },
  { q: 'Which platforms do you support?', a: 'Campaign Packs are ready for paid-social placements across Meta, Instagram, TikTok, and Facebook. 16:9 YouTube / CTV exports are available as an add-on.' },
  { q: 'Is this fully AI-generated?', a: 'No. The work is AI-assisted and human-polished. AI helps create production options quickly, while humans handle creative direction, editing, QA, and final delivery.' },
  { q: 'How do revisions work?', a: 'Each Campaign Pack includes one revision round. Extra revisions, additional concepts, and service-area variants can be added when needed.' },
];

const PnFAQ = () => {
  const [open, setOpen] = useState2(0);
  return (
    <section className="pn-section" data-screen-label="FAQ">
      <div className="pn-container">
        <div className="pn-section-head" style={{ justifyContent: 'center', textAlign: 'center', flexDirection: 'column', alignItems: 'center', marginBottom: 40 }}>
          <div className="pn-eyebrow">Frequently asked</div>
          <h2>Six things buyers want to know.</h2>
        </div>
        <div className="pn-faq-grid">
          {FAQ_ITEMS.map((item, i) => (
            <div
              key={i}
              className={`pn-faq__item ${open === i ? 'pn-faq__item--open' : ''}`}
              onClick={() => setOpen(open === 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>
    </section>
  );
};

// ---------- CTA + Footer --------------------------------------------------

const PnCtaBand = ({ tweaks }) => {
  const palette = tweaks.palette || ['#c8b8e0', '#f4c5a8', '#a7e5d3'];
  return (
    <section className="pn-cta" data-screen-label="Footer CTA">
      <Orb color={palette[0]} drift="drift-1" style={{ width: 700, height: 700, left: '5%', top: -240, opacity: 0.45 }} />
      <Orb color={palette[1]} drift="drift-2" style={{ width: 560, height: 560, right: '5%', top: 80, opacity: 0.45 }} />
      <Orb color={palette[2]} drift="drift-3" style={{ width: 480, height: 480, left: '40%', bottom: -180, opacity: 0.35 }} />
      <h2>Fresh video creative for your clients<br />in <em>days</em>, not weeks.</h2>
      <p className="pn-cta__sub">One Brief in. Three ready-to-run video ads out. Built for agencies that need more creative capacity without hiring.</p>
      <div className="pn-cta__ctas">
        <Btn variant="primary" size="lg" href={BOOKING_URL_LEGACY}>Get Started</Btn>
      </div>
    </section>
  );
};

const PnFooter = () => (
  <footer className="pn-footer" data-screen-label="Footer">
    <div className="pn-footer__inner">
      <div className="pn-footer__grid">
        <div>
          <div className="pn-footer__brand">
            <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
              <path d="M16 4 L28 25 L4 25 Z" />
              <path d="M10 14 L20 14 L25 22 L7 22 Z" />
            </svg>
            Penrose
          </div>
          <p className="pn-footer__pitch">An AI-native video engine for agencies and media buyers. Built in Brooklyn and San Francisco.</p>
        </div>
        <div>
          <div className="pn-footer__h">Legal</div>
          <ul className="pn-footer__list"><li><a>Privacy</a></li><li><a>Terms</a></li><li><a>Acceptable use</a></li><li><a>Trust</a></li><li><a>HIPAA</a></li></ul>
        </div>
      </div>
      <div className="pn-footer__bottom">
        <div>© 2026 Penrose Labs, Inc. Brooklyn · SF</div>
        <div>Helping ambitious teams create at the speed of imagination.</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  PnDemo, PnUseCases, PnTestimonials, PnPricing, PnFAQ, PnCtaBand, PnFooter,
});