// ═══════════════════════════════════════════════════════════
// Leftshifted - PR & Comms Page
// ═══════════════════════════════════════════════════════════

const PRCommsPage = () => {
  const { useState, useEffect } = React;
  const subServicesMap = {
    Strategy: ['Leadership', 'Data Strategy'],
    Data: ['Data Architecture', 'Data Engineering', 'Data Science', 'Data Analysis'],
    AI: ['MLOps', 'AIOps'],
    Cloud: ['Solution Architecture', 'Cloud Engineering', 'Security', 'DevOps'],
  };
  const [cycleStep, setCycleStep] = useState({ Strategy: 0, Data: 0, AI: 0, Cloud: 0 });
  useEffect(() => {
    const timers = Object.keys(subServicesMap).map(name => setInterval(() => {
      setCycleStep(c => ({ ...c, [name]: c[name] + 1 }));
    }, 1800));
    return () => timers.forEach(clearInterval);
  }, []);
  const itemH = 25;
  return (
    <PageShell current="/pr-comms">
      {/* ── HERO ───────────────────────────────── */}
      <div className="home-hero" style={{ paddingTop: 160, paddingBottom: 160 }}>
        <img src={res("assets/brand/hero-pattern.png")} alt="" style={{
          position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
          objectFit: 'cover', pointerEvents: 'none', opacity: 0.6,
        }} />
        <div className="page-wrap home-hero__grid">
          <div className="home-hero__content" style={{ textAlign: 'left', position: 'relative', zIndex: 1 }}>
            <Eyebrow variant="dark">PR intelligence that generates multi-million ARR.</Eyebrow>
            <h1 className="home-hero__h1" style={{
              marginTop: 24, maxWidth: 640,
            }}>
              The data and AI team that turns monitoring data into <span style={{ color: 'var(--ls-lime)' }}>5x ROI</span>.
            </h1>
            <p className="home-hero__sub">
              We in-house your media intelligence - whatever you need end-to-end, to go from monitoring data to commercial products your clients pay for.
            </p>
          </div>
          <div style={{ width: '100%', aspectRatio: '1920 / 1080', position: 'relative', zIndex: 1, overflow: 'visible', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img className="pr-hero-graphic" src={res("assets/brand/pr-hero-graphic.svg")} alt="" style={{ width: '230%', maxWidth: 'none', height: 'auto', objectFit: 'contain' }} />
          </div>
        </div>
      </div>

      {/* ── PR & COMMS FOCUS ───────────────────── */}
      <Section style={{ paddingTop: 120, paddingBottom: 60, minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>PR & Comms focus</Eyebrow>
          <h2 style={{
            font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)',
            marginTop: 16, textWrap: 'balance',
          }}>
            We know exactly what it takes to turn scattered monitoring data into commercial assets your clients will pay for.
          </h2>
        </div>
        <div className="m-pr-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {[
            { icon: 'database', text: 'PR firms are sitting on more data than they know what to do with.' },
            { icon: 'gauge', text: "Analyst work doesn't scale. Clients ask for more insight, faster, with more granularity than manual work allows." },
            { icon: 'trending-up', text: 'The firms that adapt to their clients needs at pace will lead the market - on offer, on margin, on position.' },
            { icon: 'check-circle', text: "We understand the commercial model, know the workflow, and have loved delivering award-winning products to prove it." },
          ].map((item, i) => (
            <div key={i}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--ls-ultramarine-blue)', color: '#fff', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                <i data-lucide={item.icon} style={{ width: 20, height: 20 }}></i>
              </div>
              <p style={{ font: 'var(--type-body)', color: 'var(--fg-muted)' }}>{item.text}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* ── PR & COMMS ANIMATION ── */}
      <Section style={{ paddingTop: 0, paddingBottom: 100 }}>
        <div className="page-wrap" style={{ textAlign: 'center', marginBottom: 8 }}>
          <Eyebrow>Your in-house media intelligence engine</Eyebrow>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <iframe
            loading="lazy"
            src={res("assets/pr-comms-animation.html")}
            title="PR & Comms"
            frameBorder="0"
            scrolling="no"
            style={{ width: '100%', maxWidth: '100%', aspectRatio: '1920 / 1080', border: 'none', display: 'block', background: 'transparent' }}
            onLoad={(e) => {
              const doc = e.target.contentDocument;
              if (!doc) return;
              const style = doc.createElement('style');
              style.textContent = '[data-omelette-chrome]{display:none!important}svg{box-shadow:none!important}';
              doc.head.appendChild(style);
              let tries = 0;
              const neutralizeLetterbox = () => {
                doc.querySelectorAll('div').forEach((el) => {
                  if (el.style.backgroundColor === 'rgb(10, 10, 10)' || el.style.backgroundColor === 'rgb(0, 0, 0)') {
                    el.style.setProperty('background', 'transparent', 'important');
                  }
                });
                if (++tries < 30) setTimeout(neutralizeLetterbox, 150);
              };
              neutralizeLetterbox();
            }}
          />
        </div>
      </Section>

      {/* ── HOW WE HELP ─────────────────────────── */}
      <Section className="m-pr-help" style={{ paddingTop: 100, paddingBottom: 100, background: 'var(--ls-ultramarine-blue)' }}>
        <div className="m-pr-help__head" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <Eyebrow variant="dark">How we help</Eyebrow>
        </div>
        <div className="m-pr-help__list" style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
          {[
            { name: 'Strategy', color: 'var(--ls-lime)', dark: true, from: "a commercial goal nobody's able to fully translate into tech", to: 'a roadmap your clients will pay for, led through to fruition' },
            { name: 'Data', color: 'var(--ls-midnight-navy)', dark: false, from: 'a hoard of messy data', to: 'clean, insightful data your clients can act on' },
            { name: 'AI', color: '#FF5A6E', dark: false, from: "proof of concepts and experiments that aren't delivering actual value", to: "AI capabilities that your clients can't leverage, impacting the bottom line" },
            { name: 'Cloud', color: '#FFC845', dark: true, from: "products that can't run unassisted, held up by single points of failure", to: 'reliable, secure, cost-effective systems that scale with you and your clients' },
          ].map((item, i) => (
            <div key={i}>
              <span style={{
                display: 'inline-block', padding: '6px 16px', borderRadius: 'var(--radius-pill)',
                background: item.color, color: item.dark ? 'var(--ls-midnight-navy)' : '#fff',
                font: '600 13px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase',
                marginBottom: 16,
              }}>{item.name}</span>
              <div className="m-fromto" style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 24, alignItems: 'stretch' }}>
                <div style={{ padding: 24, borderRadius: 'var(--radius-xl)', background: 'rgba(255,255,255,.06)' }}>
                  <span style={{ font: 'var(--type-caption)', color: 'rgba(255,255,255,.5)', textTransform: 'uppercase', letterSpacing: '.04em' }}>From</span>
                  <p style={{ font: 'var(--type-body)', color: 'rgba(255,255,255,.85)', marginTop: 8 }}>{item.from}</p>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', fontSize: 28, color: 'rgba(255,255,255,.5)' }}>&rarr;</div>
                <div style={{ padding: 24, borderRadius: 'var(--radius-xl)', background: item.color, color: item.dark ? 'var(--ls-midnight-navy)' : '#fff' }}>
                  <span style={{ font: 'var(--type-caption)', textTransform: 'uppercase', letterSpacing: '.04em', opacity: 0.7 }}>To</span>
                  <p style={{ font: '600 var(--type-body)', marginTop: 8 }}>{item.to}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* ── CASE STUDY LINK-OUT ─────────────────── */}
      <Section className="m-pr-case" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', paddingTop: 100, paddingBottom: 100 }}>
        <div className="m-pr-case-pattern" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none', display: 'none',
          mask: `url("${res('assets/brand/Union.svg')}") top left / 200px auto repeat`,
          WebkitMask: `url("${res('assets/brand/Union.svg')}") top left / 200px auto repeat`,
          background: 'rgba(28,90,249,.09)',
        }} />
        <div className="m-stack" style={{ width: '100%', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow>Case study</Eyebrow>
            <h2 style={{
              font: '700 clamp(28px, 3.2vw, 42px)/1.15 var(--font-display)', letterSpacing: 'var(--tracking-display)',
              color: 'var(--ls-midnight-navy)', marginTop: 20, textWrap: 'balance',
            }}>
              From broken build to multi-million ARR product for a top-10 PR agency.
            </h2>
            <p style={{ font: 'var(--type-body-lg)', color: 'var(--fg-muted)', marginTop: 20, maxWidth: 480 }}>
              £250k of wasted spend. Five contractors. Nearly a year. Nothing connected end to end. We came in, diagnosed honestly, and built what they hadn't expected, a fully working, award-winning media intelligence engine, in 3 months.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 24, flexWrap: 'wrap' }}>
              {[
                { name: 'Strategy', color: 'var(--ls-lime)', dark: true },
                { name: 'Data', color: 'var(--ls-midnight-navy)', dark: false },
                { name: 'AI', color: '#FF5A6E', dark: false },
                { name: 'Cloud', color: '#FFC845', dark: true },
              ].map(p => (
                <span key={p.name} style={{
                  padding: '6px 16px', borderRadius: 'var(--radius-pill)',
                  background: p.color, color: p.dark ? 'var(--ls-midnight-navy)' : '#fff',
                  font: '600 13px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase',
                }}>{p.name}</span>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 40, marginTop: 32 }}>
              {[{ v: '5x ROI', l: 'Delivered' }, { v: 'Award winning', l: '' }, { v: '£multi-million ARR', l: 'Product now in market' }].map(s => (
                <div key={s.v}>
                  <div style={{ font: '700 clamp(24px, 2.6vw, 32px)/1 var(--font-display)', color: 'var(--ls-midnight-navy)' }}>{s.v}</div>
                  <div style={{ font: 'var(--type-caption)', color: 'var(--fg-muted)', marginTop: 6 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <blockquote style={{
              margin: '32px 0 0', paddingLeft: 20, borderLeft: '3px solid var(--ls-ultramarine-blue)',
            }}>
              <p style={{ font: 'italic 600 var(--type-body-lg)', color: 'var(--ls-midnight-navy)' }}>
                "We hadn't expected to get to a fully working product."
              </p>
              <cite style={{ font: 'var(--type-caption)', color: 'var(--fg-muted)', fontStyle: 'normal' }}>- CDAO</cite>
            </blockquote>
            <a onClick={() => navigate('/case-studies/pr-ai-data-product')} style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 40, cursor: 'pointer',
              padding: '10px 8px 10px 24px', borderRadius: 'var(--radius-pill)', background: 'var(--ls-midnight-navy)',
              font: '600 var(--type-body)', color: '#fff',
            }}>
              View case study
              <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, borderRadius: '50%', background: '#fff' }}>
                <img src={res("assets/brand/arrow-right.svg")} alt="" style={{ width: 16, height: 16 }} />
              </span>
            </a>
          </div>
          <div className="m-pr-case-visual" style={{ position: 'relative', padding: 24 }}>
            <div style={{ borderRadius: 'var(--radius-3xl)', overflow: 'hidden', aspectRatio: '3/4', background: 'var(--ls-midnight-navy)', border: '1px solid var(--ls-ultramarine-blue)' }}>
              <img src={res("assets/imagery/case-pr-comms.png")} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            {[
              { top: 6, right: 8, w: 16, h: 16 }, { top: 60, right: -4, w: 18, h: 18 },
              { top: 130, right: 20, w: 30, h: 18 }, { top: 200, right: -8, w: 16, h: 16 },
              { top: 270, right: 12, w: 24, h: 18 }, { top: 340, right: -4, w: 20, h: 20 },
              { bottom: 60, left: 40, w: 20, h: 20 }, { bottom: 10, right: 60, w: 20, h: 14 },
            ].map((s, i) => (
              <div key={i} style={{ position: 'absolute', width: s.w, height: s.h, background: 'var(--ls-midnight-navy)', top: s.top, bottom: s.bottom, left: s.left, right: s.right }} />
            ))}
          </div>
        </div>
      </Section>
    </PageShell>
  );
};

Object.assign(window, { PRCommsPage });