/* Brand Lens — Social Playbook: the proposed Proper Sky social philosophy
   (an estimate to react to) + a live gallery of your social keepers. */
function Playbook({ recs, goReview }) {
  const P = window.Lens.SOCIAL_PHILOSOPHY;
  const social = useMemo(() => recs.filter((r) => (r.ai && r.ai.category === 'social') || r.category === 'social'), [recs]);
  const socialLiked = social.filter((r) => r.user && r.user.like);
  const socialDisliked = social.filter((r) => r.user && !r.user.like);

  return (
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ps-primary-blue)', marginBottom: 12 }}>Proper Sky · Social &amp; LinkedIn</div>
      <h2 style={{ fontSize: 'clamp(26px,2.8vw,34px)', margin: 0, fontWeight: 500, letterSpacing: '-.015em' }}>The social playbook</h2>
      <p style={{ fontSize: 16, color: 'var(--fg-2)', margin: '12px 0 0', maxWidth: '64ch', lineHeight: 1.6 }}>
        The brand guide covers photography but said nothing about social. This is my <strong style={{ color: 'var(--fg-1)', fontWeight: 500 }}>estimate</strong> of a social philosophy that fits Proper Sky — react to it, tag images as <em>Social</em> in review, and it sharpens against your real calls.
      </p>

      {/* hero summary */}
      <div style={{ background: 'var(--ps-navy)', borderRadius: 18, padding: '30px 34px', margin: '26px 0 30px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'var(--wash-navy-diagonal)', opacity: .6, pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 'clamp(20px,2.4vw,28px)', fontWeight: 500, lineHeight: 1.3, maxWidth: '24ch', marginBottom: 14 }}>
            <span className="ps-text-gradient">{P.headline}</span>
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'rgba(255,255,255,.84)', maxWidth: '60ch', margin: 0 }}>{P.intro}</p>
        </div>
      </div>

      {/* persona */}
      <PBSection title="The voice" n="01">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 16 }}>
          {P.persona.map((p, i) => (
            <div key={i} style={{ border: '1px solid var(--ps-line)', borderRadius: 14, padding: '18px 20px', background: 'var(--ps-white)', boxShadow: 'var(--sh-1)' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--ps-primary-blue)', marginBottom: 8 }}>{p.k}</div>
              <div style={{ fontSize: 14, color: 'var(--fg-1)', lineHeight: 1.6 }}>{p.v}</div>
            </div>
          ))}
        </div>
      </PBSection>

      {/* content pillars */}
      <PBSection title="Content pillars" n="02" sub="What we post, and why each earns a place in the feed.">
        <div style={{ display: 'grid', gap: 12 }}>
          {P.pillars.map((p, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '34px 1fr', gap: 14, alignItems: 'start',
              border: '1px solid var(--ps-line)', borderRadius: 12, padding: '15px 18px', background: 'var(--ps-white)' }}>
              <div style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--ps-cloud-gray)', color: 'var(--ps-primary-blue)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontFamily: 'var(--font-mono)', fontSize: 13 }}>{i + 1}</div>
              <div>
                <div style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--ps-navy)', marginBottom: 3 }}>{p.name}</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.55 }}>{p.note}</div>
              </div>
            </div>
          ))}
        </div>
      </PBSection>

      {/* visual rules */}
      <PBSection title="How a Proper Sky post looks" n="03">
        <div className="dd-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <div className="dd dd--do" style={{ borderRadius: 15, padding: '24px 26px', background: '#EAF6F0' }}>
            <p style={{ fontWeight: 700, fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', margin: '0 0 16px', display: 'flex', alignItems: 'center', gap: 8, color: '#1F7A52' }}>
              <Icon name="check" size={15} stroke={3} />Do
            </p>
            <ul style={{ margin: 0, paddingLeft: 18, listStyle: 'none' }}>
              {P.visual.map((t, i) => (
                <li key={i} style={{ fontSize: 14, lineHeight: 1.55, marginBottom: 12, color: 'var(--fg-1)', position: 'relative' }}>
                  <span style={{ position: 'absolute', left: -16, top: 7, width: 6, height: 6, borderRadius: 6, background: 'var(--st-success)' }} />{t}
                </li>
              ))}
            </ul>
          </div>
          <div className="dd dd--dont" style={{ borderRadius: 15, padding: '24px 26px', background: '#FBEDEB' }}>
            <p style={{ fontWeight: 700, fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', margin: '0 0 16px', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ps-flag-ink)' }}>
              <Icon name="x" size={15} stroke={3} />Never
            </p>
            <ul style={{ margin: 0, paddingLeft: 18, listStyle: 'none' }}>
              {P.avoid.map((t, i) => (
                <li key={i} style={{ fontSize: 14, lineHeight: 1.55, marginBottom: 12, color: 'var(--fg-1)', position: 'relative' }}>
                  <span style={{ position: 'absolute', left: -16, top: 7, width: 6, height: 6, borderRadius: 6, background: 'var(--ps-flag)' }} />{t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </PBSection>

      {/* your social keepers (live) */}
      <PBSection title="Your social keepers" n="04" sub="Social-tagged images you've kept. Tag more as “Social” in review to grow this.">
        {social.length === 0 ? (
          <div style={{ padding: '28px 24px', border: '2px dashed var(--ps-line-strong)', borderRadius: 16, background: 'var(--ps-cloud-gray)', textAlign: 'center' }}>
            <div style={{ fontSize: 15, color: 'var(--fg-2)', marginBottom: 14 }}>No social assets reviewed yet. In blind review, set an image's type to <strong>Social</strong> and it'll be judged on this playbook.</div>
            <Btn kind="primary" icon="arrow" onClick={goReview}>Go review</Btn>
          </div>
        ) : (
          <>
            <PBGallery recs={socialLiked} tone="good" empty="No social keepers yet." label="Kept" />
            {socialDisliked.length > 0 && <div style={{ height: 18 }} />}
            {socialDisliked.length > 0 && <PBGallery recs={socialDisliked} tone="bad" empty="" label="Passed" />}
          </>
        )}
      </PBSection>

      <div style={{ fontSize: 12.5, color: 'var(--fg-3)', marginTop: 8, paddingTop: 18, borderTop: '1px solid var(--ps-line)' }}>
        This is a proposed starting point, not gospel — tell me what's off and I'll revise it. The synthesized <strong style={{ color: 'var(--fg-2)', fontWeight: 500 }}>Style guide</strong> tab folds your social calls into the broader do's &amp; don'ts.
      </div>
    </div>
  );
}

function PBSection({ title, n, sub, children }) {
  return (
    <section style={{ marginBottom: 34 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, borderBottom: '1px solid var(--ps-line)', paddingBottom: 12, marginBottom: 18 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ps-dark-blue-300)', fontWeight: 600 }}>{n}</span>
        <h2 style={{ fontSize: 21, fontWeight: 500, margin: 0, letterSpacing: '-.01em' }}>{title}</h2>
      </div>
      {sub && <p style={{ fontSize: 14, color: 'var(--fg-2)', margin: '-6px 0 16px' }}>{sub}</p>}
      {children}
    </section>
  );
}

function PBGallery({ recs, tone, empty, label }) {
  if (!recs.length) return empty ? <p style={{ color: 'var(--fg-3)', fontSize: 14 }}>{empty}</p> : null;
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 10 }}>{label}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(150px,1fr))', gap: 12 }}>
        {recs.map((r) => (
          <figure key={r.id} style={{ margin: 0, borderRadius: 12, overflow: 'hidden', position: 'relative',
            border: `2px solid ${tone === 'good' ? '#BFE6D4' : '#F0C9C3'}`, boxShadow: 'var(--sh-1)' }}>
            <img src={r.dataURL} alt={r.name} loading="lazy" decoding="async" style={{ width: '100%', aspectRatio: '1/1', objectFit: 'cover', display: 'block',
              filter: tone === 'bad' ? 'grayscale(.45) brightness(.92)' : 'none' }} />
            {r.user && r.user.comment && (
              <figcaption style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '16px 10px 8px',
                background: 'linear-gradient(to top, rgba(12,14,22,.86), transparent)', color: '#fff', fontSize: 11.5, lineHeight: 1.4 }}>
                “{r.user.comment.length > 56 ? r.user.comment.slice(0, 54) + '…' : r.user.comment}”
              </figcaption>
            )}
          </figure>
        ))}
      </div>
    </div>
  );
}

window.Playbook = Playbook;
