/* Penrose v2 — section components.
 * Repositioning: white-label AI-assisted video creative for agencies.
 * Requires penrose-atoms.jsx and penrose-v2-atoms.jsx loaded first.
 */

const { useState: useStateS, useEffect: useEffectS } = React;
const { PnButton: BtnS, PnOrb: OrbS } = window;
const BOOKING_URL_SECTIONS = window.PENROSE_BOOKING_URL || 'https://calendar.app.google/xFdbQsvUw5x5eVS48';

/* ========== Section 2: The Problem ====================================== */
const PnProblem = () => (
  <section className="pn-section pn-section--soft" data-screen-label="The Problem">
    <div className="pn-container">
      <div className="pn-section-head">
        <div>
          <div className="pn-eyebrow">The bottleneck</div>
          <h2>Creative is the <em>bottleneck</em><br />in paid media.</h2>
        </div>
        <p className="lede">Your team can launch campaigns, manage budgets, and optimize accounts. But every client offer still needs fresh video creative before performance can move.</p>
      </div>
      <div className="pn-workflow-grid">
        <div className="pn-step">
          <div className="pn-step__num"><strong>Traditional production</strong></div>
          <h3 className="pn-step__title">Slow.</h3>
          <p className="pn-step__body">Shoots get rescheduled. Edits drag on. The seasonal window closes before the ads are live.</p>
        </div>
        <div className="pn-step">
          <div className="pn-step__num"><strong>Freelancers</strong></div>
          <h3 className="pn-step__title">Inconsistent.</h3>
          <p className="pn-step__body">One editor nails the brand. The next misses the hook, the safe zone, or the format. Your QA load doubles.</p>
        </div>
        <div className="pn-step">
          <div className="pn-step__num"><strong>DIY AI tools</strong></div>
          <h3 className="pn-step__title">Still your problem.</h3>
          <p className="pn-step__body">The tools generate clips. Your team still prompts, selects, edits, captions, formats, and reviews every output.</p>
        </div>
      </div>
      <div style={{ marginTop: 36, maxWidth: 720, fontFamily: 'var(--el-font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--el-body)', letterSpacing: '0.17px' }}>
        Penrose gives you a repeatable production layer for client creative: one brief in, three ready-to-run video ads out, delivered in 5 business days.
      </div>
    </div>
  </section>
);

/* ========== Section 3: What Agencies Get ================================= */
const PnWhatAgenciesGet = () => {
  const benefits = [
    { tag: 'Clear output',        title: <>One brief, <em>three exports.</em></>, body: 'Each Campaign Pack gives you three short-form video ad cuts, prepared for paid social.' },
    { tag: '5 business days',     title: <>Fresh creative in <em>days.</em></>, body: 'Move from slow one-off production to repeatable client-ready creative cycles.' },
    { tag: 'No production drag',  title: <>No filming. No <em>freelancers.</em></>, body: 'AI-assisted production replaces shoots, scattered editor handoffs, and open-ended production delays.' },
    { tag: 'White-label delivery',title: <>Agency-<em>ready.</em></>,body: 'Present Campaign Packs as your agency output, with delivery notes and a simple revision path.' },
    { tag: 'Output pricing',      title: <>Pay per <em>campaign.</em></>,body: 'Pay per finished Campaign Pack, not billable hours, vague retainers, or production-house line items.' },
    { tag: 'Human review',        title: <>Human-<em>polished.</em></>, body: 'Every pack gets creative review for brand fit, claims, readability, and platform safe zones before delivery.' },
  ];
  return (
    <section className="pn-section" data-screen-label="What Agencies Get">
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow">What agencies get</div>
            <h2>A creative engine your clients <em>never</em> have to see.</h2>
          </div>
          <p className="lede">Built for agencies that need more creative capacity without hiring. Your team keeps strategy and client ownership; we keep the production lane moving.</p>
        </div>
        <div className="pn-workflow-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {benefits.map((b, i) => (
            <div key={i} className="pn-step">
              <div className="pn-step__num"><strong>{String(i + 1).padStart(2, '0')}</strong> · {b.tag}</div>
              <h3 className="pn-step__title">{b.title}</h3>
              <p className="pn-step__body">{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ========== Section 4: The Campaign Pack ================================ */
const PnCampaignPack = () => {
  const CampaignPackPreviewS = window.CampaignPackPreview;
  return (
    <section className="pn-section pn-section--soft" data-screen-label="Campaign Pack">
      <div className="pn-container">
        {CampaignPackPreviewS && <CampaignPackPreviewS />}
      </div>
    </section>
  );
};

/* ========== Section 5: How It Works (Extract → Shape → Produce → Refresh) */
const PnHowItWorks = () => {
  const steps = [
    { n: '01', name: 'Brief',    title: <>Send one <em>client offer.</em></>, body: 'We start with the offer, website, brand assets, service area, reviews, and any existing creative.', art: 'linear-gradient(160deg, #f4c5a8, #fbe4d4)' },
    { n: '02', name: 'Hooks',    title: <>We shape three <em>hooks.</em></>, body: 'We turn the brief into three distinct paid-social angles your team can actually test.', art: 'linear-gradient(170deg, #c8b8e0, #e8e0f2)' },
    { n: '03', name: 'Produce',  title: <>Three ads. <em>Three files.</em></>, body: 'AI-assisted production and human review create three short-form cuts, prepared for paid social.', art: 'linear-gradient(180deg, #a8c8e8, #d6e6f3)' },
    { n: '04', name: 'Deliver',  title: <>Ready in <em>5 business days.</em></>, body: 'You get captions, text overlays, white-label delivery notes, and one revision round.', art: 'linear-gradient(160deg, #a7e5d3, #d6f5e9)' },
  ];
  return (
    <section className="pn-section" data-screen-label="How It Works">
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow">Process</div>
            <h2>From client brief<br />to campaign-ready <em>creative.</em></h2>
          </div>
          <p className="lede">One Brief in. Three ready-to-run video ads out. Run it on one client. Run it on forty.</p>
        </div>
        <div className="pn-workflow-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {steps.map((s, i) => (
            <div key={i} className="pn-step">
              <div className="pn-step__art" style={{ background: s.art, position: 'relative' }}>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', padding: 16, fontFamily: 'var(--el-font-display)', fontSize: 56, lineHeight: 1, color: 'rgba(12,10,9,0.18)', letterSpacing: '-2px' }}>
                  {s.n}
                </div>
              </div>
              <div className="pn-step__num"><strong>{s.name}</strong></div>
              <h3 className="pn-step__title">{s.title}</h3>
              <p className="pn-step__body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ========== Section 6: Why Penrose Is Different ========================== */
const PnWhyDifferent = () => {
  const rows = [
    { alt: 'Traditional video production', breaks: 'Filming, scheduling, editing, and revision loops slow every refresh.', win: 'No filming. No production delays. Fresh video creative in days, not weeks.' },
    { alt: 'Freelance editors',            breaks: 'Inconsistent quality, management overhead, and uneven paid-social instincts.', win: 'A repeatable Campaign Pack system built for agency delivery.' },
    { alt: 'DIY AI tools',                 breaks: 'Your team still prompts, selects, edits, QAs, captions, and formats.', win: 'AI-assisted. Human-polished. Agency-ready.' },
    { alt: 'Internal hires',               breaks: 'Permanent headcount is expensive and still needs management.', win: 'Creative capacity your agency can scale by finished campaign output.' },
  ];
  return (
    <section className="pn-section pn-section--dark" data-screen-label="Why Different">
      <OrbS color="#c8b8e0" style={{ width: 700, height: 700, left: -180, top: -200, opacity: 0.16 }} />
      <OrbS color="#f4c5a8" style={{ width: 560, height: 560, right: -120, bottom: -180, opacity: 0.14 }} />
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow" style={{ color: 'var(--el-on-dark-soft)' }}>The comparison</div>
            <h2 style={{ color: '#fff' }}>Faster than production.<br />More reliable than <em>DIY AI.</em></h2>
          </div>
        </div>
        <div className="pn-compare">
          <div className="pn-compare__head">
            <div>Alternative</div>
            <div>Where it breaks</div>
            <div>The Penrose advantage</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="pn-compare__row">
              <div className="pn-compare__alt">{r.alt}</div>
              <div className="pn-compare__breaks">{r.breaks}</div>
              <div className="pn-compare__win">{r.win}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ========== Section 7: Best Use Cases =================================== */
const PnUseCasesV2 = () => {
  const cases = [
    { tag: 'Home services',  orb: '#a7e5d3', title: <>HVAC, plumbing, roofing, restoration, electrical.</>,
      body: 'Seasonal campaigns, service-area variants, financing and free-estimate offers — across Meta, Instagram, TikTok, and Facebook.', stat: { n: '5 days', l: 'brief to delivery' } },
    { tag: 'Franchise & multi-location', orb: '#f4c5a8', title: <>One core campaign, <em>every</em> market.</>,
      body: 'A single concept adapted across branches, service areas, and grand-opening dates — corporate-approved, owner-deployable.', stat: { n: '94%', l: 'brand-safe on first pass' } },
    { tag: 'Recruiting',     orb: '#c8b8e0', title: <>Hiring campaigns that don't <em>burn out.</em></>,
      body: 'Technicians, drivers, nurses, sales reps, apprentices. Fresh creative every 72 hours so cost-per-applied stays flat through week six.', stat: { n: '−38%', l: 'CPA after 30 days' } },
    { tag: 'CTV & local',    orb: '#a8c8e8', title: <>Affordable video for the <em>streaming</em> shelf.</>,
      body: 'Optional 16:9 exports for advertisers who want YouTube or CTV placements — without commissioning a shoot.', stat: { n: 'Add-on', l: '16:9 exports' } },
    { tag: 'Offer refreshes',orb: '#e8b8c4', title: <>Financing. Free estimates. Limited-time.</>,
      body: 'Per-offer hook variations so the buyer can match creative to whichever promotion is running this week.', stat: { n: '3 hooks', l: 'per Campaign Pack' } },
  ];
  return (
    <section className="pn-section" data-screen-label="Use Cases">
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow">Best use cases</div>
            <h2>Built for agencies that need <em>constant</em> creative refreshes.</h2>
          </div>
          <p className="lede">Verticals where creative volume — not creative novelty — moves the pipeline.</p>
        </div>
        <div className="pn-usecase-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {cases.slice(0, 3).map((c, i) => <UseCaseCard key={i} c={c} />)}
        </div>
        <div className="pn-usecase-grid" style={{ gridTemplateColumns: '1fr 1fr', marginTop: 20 }}>
          {cases.slice(3).map((c, i) => <UseCaseCard key={i} c={c} />)}
        </div>
      </div>
    </section>
  );
};

const UseCaseCard = ({ c }) => (
  <div 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">
      <div className="pn-usecase__stat-item">
        <div className="pn-usecase__stat-num">{c.stat.n}</div>
        <div className="pn-usecase__stat-label">{c.stat.l}</div>
      </div>
    </div>
  </div>
);

/* ========== Section 8 + 9: Partner Program + Engagement Models =========== */
const PnPartnerProgram = () => {
  const models = [
    {
      name: 'Campaign Pack',
      for: '$799 · pay as you go',
      copy: 'Best for testing one client with one offer before you scale volume across the account.',
      bullets: ['1 client · 1 offer', '3 hooks · 3 video ads', '9:16 + 1:1 exports', '5 business day turnaround'],
      cta: 'Get Started',
    },
    {
      name: 'Agency Partner Plan',
      for: '$2,876/mo · 10% discount',
      copy: 'A monthly production lane for agencies that need reliable client creative every week.',
      bullets: ['4 Campaign Packs / month', 'White-label delivery', 'Shared production workspace', 'Priority turnaround'],
      cta: 'Get Started',
      featured: true,
    },
    {
      name: 'Agency Studio Plan',
      for: '$5,114/mo · 20% discount',
      copy: 'Dedicated capacity for teams with multiple clients and steady paid-social testing needs.',
      bullets: ['8 Campaign Packs / month', 'White-label delivery', 'Priority turnaround', 'Dedicated production lane'],
      cta: 'Get Started',
    },
  ];
  return (
    <section className="pn-section pn-section--soft" data-screen-label="Partner Program">
      <div className="pn-container">
        <div className="pn-section-head">
          <div>
            <div className="pn-eyebrow">Agency production plans</div>
            <h2>Simple output-based pricing for <em>client</em> creative.</h2>
          </div>
          <p className="lede">You keep the client relationship, media strategy, and ad account. We handle the repeatable video work: AI-assisted, human-polished, and agency-ready.</p>
        </div>

        <div className="pn-pricing-grid">
          {models.map((m, i) => (
            <div key={i} className={`pn-pricing ${m.featured ? 'pn-pricing--featured' : ''}`}>
              {m.featured && <div className="pn-pricing__ribbon">Most picked</div>}
              <div className="pn-pricing__name">{m.name}</div>
              <p className="pn-pricing__desc" style={{ minHeight: 'auto' }}>{m.copy}</p>
              <div style={{
                fontFamily: 'var(--el-font-body)', fontSize: 12, fontWeight: 600,
                letterSpacing: '0.96px', textTransform: 'uppercase',
                color: m.featured ? 'var(--el-on-dark-soft)' : 'var(--el-muted)',
                marginTop: -4,
              }}>{m.for}</div>
              <ul className="pn-pricing__list">
                {m.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
              {m.featured
                ? <a className="el-btn el-btn--lg" href={BOOKING_URL_SECTIONS} target="_blank" rel="noopener noreferrer" style={{ background: '#fff', color: '#0c0a09' }}>{m.cta}</a>
                : <BtnS variant="outline" href={BOOKING_URL_SECTIONS}>{m.cta}</BtnS>}
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, padding: 20, borderRadius: 12,
          background: 'rgba(255,255,255,0.5)', border: '1px solid var(--el-hairline)',
          textAlign: 'center',
          fontFamily: 'var(--el-font-body)', fontSize: 14, color: 'var(--el-muted)', letterSpacing: '0.14px',
        }}>
          Optional add-ons include rush delivery, 16:9 YouTube / CTV exports, extra revisions, additional concepts, and localization variants.
        </div>
      </div>
    </section>
  );
};

/* ========== Section 10: Proof / Sample ================================== */
const PnSampleProof = () => (
  <section className="pn-section" data-screen-label="Sample Proof">
    <div className="pn-container">
      <div className="pn-section-head">
        <div>
          <div className="pn-eyebrow">Proof — the work, not the promise</div>
          <h2>One brief.<br /><em>One</em> finished pack.</h2>
        </div>
        <p className="lede">A sample home-services pack showing the brief, hooks, outputs, captions, and delivery timeline your client receives.</p>
      </div>

      <div className="pn-sample">
        <div className="pn-sample__col">
          <div className="pn-sample__label">01 · Brief</div>
          <div className="pn-sample__brief">
            <div className="pn-sample__brief-row"><strong>Client</strong>Pioneer Plumbing</div>
            <div className="pn-sample__brief-row"><strong>Offer</strong>$49 service call · 24/7</div>
            <div className="pn-sample__brief-row"><strong>Channels</strong>Meta · Instagram · TikTok · Facebook</div>
            <div className="pn-sample__brief-row"><strong>Audience</strong>Houston homeowners, 35–65</div>
            <div className="pn-sample__brief-row"><strong>CTA</strong>Book today</div>
          </div>
          <div className="pn-sample__label" style={{ marginTop: 28 }}>02 · Hooks (3 of 3)</div>
          <ul className="pn-sample__hooks">
            <li>Before the leak <em>spreads.</em></li>
            <li><em>POV:</em> 3am, no water.</li>
            <li>Plumbers <em>won't</em> tell you this.</li>
          </ul>
        </div>

        <div className="pn-sample__col">
          <div className="pn-sample__label">03 · Final outputs (3 of 3)</div>
          <div className="pn-sample__outputs">
            <div className="pn-sample__out" style={{ background: 'linear-gradient(160deg, #2a4a3a, #4a6b58 40%, #c8a584)' }}><span>Hook 01 · 9:16</span></div>
            <div className="pn-sample__out pn-sample__out--sq" style={{ background: 'linear-gradient(170deg, #2a1c3a, #5a4a78 50%, #c8b8e0)' }}><span>Hook 01 · 1:1</span></div>
            <div className="pn-sample__out" style={{ background: 'linear-gradient(150deg, #3a2a1c, #785a3a 50%, #f4c5a8)' }}><span>Hook 02 · 9:16</span></div>
          </div>
          <div className="pn-sample__label" style={{ marginTop: 28 }}>04 · Versioning</div>
          <p className="pn-sample__verse">Same offer, three testable hooks — each with captions, text overlays, and both vertical and square exports.</p>
        </div>

        <div className="pn-sample__col">
          <div className="pn-sample__label">05 · Timeline</div>
          <div className="pn-sample__timeline">
            <div className="pn-sample__t-row"><span className="day">Day 0</span><span>Intake call · brief lock</span></div>
            <div className="pn-sample__t-row"><span className="day">Day 1</span><span>Hooks + scripts delivered</span></div>
            <div className="pn-sample__t-row"><span className="day">Day 3</span><span>Creative review + edit pass</span></div>
            <div className="pn-sample__t-row"><span className="day">Day 4</span><span>Revision window</span></div>
            <div className="pn-sample__t-row"><span className="day">Day 5</span><span>Full pack delivered</span></div>
          </div>
          <BtnS variant="primary" href={BOOKING_URL_SECTIONS} style={{ marginTop: 24, width: '100%' }}>Get Started</BtnS>
        </div>
      </div>
    </div>
  </section>
);

/* ========== Section 11: FAQ (v2) ======================================== */
const FAQ_V2 = [
  { q: 'Is this fully AI-generated?', a: 'No. Our process is AI-assisted and human-polished. AI helps us create more production options faster, but final outputs are shaped, edited, quality-checked, and approved by humans before delivery.' },
  { q: 'Can you work white-label?', a: 'Yes. Most engagements are fully white-label. We deliver assets, scripts, and production notes under your agency brand — or stay invisible to your client entirely.' },
  { q: 'Do you run the ads?', a: 'No, by default. Penrose is the creative production layer. Your agency keeps strategy, buying, reporting, and ad account ownership. We can support creative testing plans if asked.' },
  { 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.' },
  { q: 'What do you need to start?', a: 'A short brief, the client website, current offer, brand assets, service area, any existing creative, and any claims or phrases that must be included or avoided.' },
  { q: 'How fast is turnaround?', a: 'A standard Campaign Pack ships in 5 business days. Rush delivery is available as an add-on when capacity allows.' },
  { q: 'Which platforms do you support?', a: 'Campaign Packs are built for paid social: Meta, Instagram, TikTok, and Facebook placements, with 9:16 vertical and 1:1 square exports included. 16:9 YouTube / CTV exports are available as an add-on.' },
  { q: 'Do you use real client footage?', a: 'When available, yes. We combine existing brand footage, photos, logos, and AI-generated scenes. If no footage exists, we can still produce polished campaign concepts from the brief and brand assets.' },
  { q: 'How do revisions work?', a: 'Each Campaign Pack includes one revision round. Extra revision rounds, rush changes, localization, and additional concepts are available as add-ons.' },
];

const PnFAQv2 = () => {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="pn-section pn-section--soft" 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>Nine things agencies <em>want</em> to know.</h2>
        </div>
        <div className="pn-faq-grid">
          {FAQ_V2.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>
  );
};

/* ========== Section 12: Final CTA ======================================= */
const PnFinalCTA = ({ tweaks }) => {
  const palette = tweaks.palette || ['#f4c5a8', '#e8b8c4', '#c8b8e0'];
  return (
    <section className="pn-cta" data-screen-label="Final CTA">
      <OrbS color={palette[0]} drift="drift-1" style={{ width: 700, height: 700, left: '5%', top: -240, opacity: 0.45 }} />
      <OrbS color={palette[1]} drift="drift-2" style={{ width: 560, height: 560, right: '5%', top: 80, opacity: 0.45 }} />
      <OrbS 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">
        <BtnS variant="primary" size="lg" href={BOOKING_URL_SECTIONS}>Get Started</BtnS>
      </div>
    </section>
  );
};

Object.assign(window, {
  PnProblem, PnWhatAgenciesGet, PnCampaignPack, PnHowItWorks, PnWhyDifferent,
  PnUseCasesV2, PnPartnerProgram, PnSampleProof, PnFAQv2, PnFinalCTA,
});