// menove-patterns-airy.jsx, the Patterns tab, density study.
// Same evidence, same reported-language register; the chrome thins out.
// The strongest pattern leads as an editorial moment; the rest become quiet rows.
// Depends on menove-patterns.jsx (PTFrame, PTReportBar, PTRow, PTStateFilter,
// PTExpCard, PTVerdictStrip, PT_PATTERNS), menove-final.jsx (FB, FBEyebrow),
// menove-circle.jsx (fbTint).

/* the Mona question, a line of type, not a chip */
function PTAQuestion({ q = 'Why do your Tuesdays run tender?' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, padding: '16px 26px 0', flex: 'none' }}>
      <span style={{ fontFamily: FB.display, fontStyle: 'italic', fontSize: 14.5, color: FB.body, flex: 1 }}>{q}</span>
      <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum, whiteSpace: 'nowrap' }}>Ask Mona</span>
      <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2.2" style={{ width: 10, height: 10, flex: 'none', alignSelf: 'center' }}><path d="M6 6l12 12M18 6L6 18" /></svg>
    </div>
  );
}

/* the lead pattern, boxless, editorial, one quiet action line */
function PTAFeature({ claim, chip, hits, challenge, onChallenge }) {
  const when = chip.includes('·') ? chip.split('·').slice(1).join('·').trim() : chip;
  return (
    <div style={{ padding: '4px 26px 0' }}>
      <div style={{ fontFamily: FB.display, fontSize: 18, lineHeight: 1.5, color: FB.ink, textWrap: 'pretty' }}>{claim}</div>
      <div style={{ display: 'flex', gap: 4.5, alignItems: 'center', marginTop: 14 }}>
        {Array.from({ length: 21 }).map((_, i) => (
          <span key={i} style={{
            width: 10, height: 7.5, flex: 'none', borderRadius: TK_SHAPES[i % 4], transform: `rotate(${i % 2 ? -8 : 7}deg)`,
            background: hits.includes(i) ? FB.day.tender.deep : fbTint(FB.ink, .08),
          }}></span>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 13 }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: FB.soft }}>{when} · <span style={{ color: FB.plum, fontWeight: 700 }}>Ask Mona about this</span></span>
        {challenge ? <span onClick={onChallenge} style={{ fontSize: 11, fontWeight: 700, color: FB.aub, borderBottom: `1.3px solid ${fbTint(FB.aub, .35)}`, paddingBottom: 1, whiteSpace: 'nowrap', cursor: onChallenge ? 'pointer' : 'default' }}>Take it on · {challenge}</span> : null}
      </div>
    </div>
  );
}

/* the others, hairline rows, no boxes, no chips */
function PTARow({ claim, hits }) {
  return (
    <div style={{ padding: '15px 0', borderTop: `1px solid ${FB.line}`, display: 'flex', alignItems: 'center', gap: 14 }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: FB.ink, textWrap: 'pretty' }}>{claim}</div>
        <div style={{ marginTop: 9 }}><PTRow hits={hits} /></div>
      </div>
      <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2" style={{ width: 13, height: 13, flex: 'none' }}><path d="M9 5l7 7-7 7" /></svg>
    </div>
  );
}

/* watching, lines of type behind a small open eye of a glyph, not cards */
function PTAWatchLine({ body, unlock }) {
  return (
    <div style={{ display: 'flex', gap: 11, padding: '13px 0 0', alignItems: 'flex-start' }}>
      <span style={{ width: 13, height: 9, marginTop: 4, flex: 'none', borderRadius: '54% 46% 52% 48% / 58% 56% 44% 42%', boxShadow: `inset 0 0 0 1.3px ${fbTint(FB.ink, .3)}`, transform: 'rotate(-6deg)' }}></span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, lineHeight: 1.6, color: FB.body }}>{body}</div>
        {unlock ? <div style={{ fontSize: 11, fontWeight: 700, color: FB.plum, marginTop: 5 }}>{unlock}</div> : null}
      </div>
    </div>
  );
}

/* ---------- the airy tab ---------- */
function PatternsHomeAiry({ filter = 'confirmed', label = 'P-A · Patterns, the airy revision' }) {
  const cards = PT_PATTERNS[filter];
  return (
    <PTFrame label={label}>
      <PTReportBar />
      <PTAQuestion />
      <div style={{ paddingTop: 26 }}>
        <div style={{ padding: '0 26px', marginBottom: 12 }}>
          <FBEyebrow color={FB.soft}>Patterns</FBEyebrow>
        </div>
        <PTStateFilter active={filter} />
        <div style={{ height: 8 }}></div>
        <PTAFeature claim={cards[0].claim} chip={cards[0].chip} hits={cards[0].hits} challenge={cards[0].challenge} />
        <div style={{ padding: '18px 26px 0' }}>
          {cards.slice(1).map((c, i) => <PTARow key={i} claim={c.claim} hits={c.hits} />)}
        </div>
      </div>
      <div style={{ paddingTop: 30 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '0 26px', marginBottom: 11 }}>
          <FBEyebrow color={FB.soft}>What you're trying</FBEyebrow>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: FB.plum, whiteSpace: 'nowrap' }}>Verdicts</span>
        </div>
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PTExpCard />
          <PTVerdictStrip />
        </div>
      </div>
      <div style={{ paddingTop: 30 }}>
        <div style={{ padding: '0 26px' }}>
          <FBEyebrow color={FB.soft}>What Mona is watching</FBEyebrow>
          <PTAWatchLine body={<span>Wine evenings and night sweats: <b>4 paired days</b> so far. About 6 more make it speak.</span>} />
          <PTAWatchLine body={<span>Breakfast timing and your morning energy, blocked for now.</span>} unlock="Waiting on your meals area · 2 minutes with Mona" />
        </div>
      </div>
      <div style={{ height: 28 }}></div>
    </PTFrame>
  );
}

Object.assign(window, { PatternsHomeAiry, PTAFeature, PTARow, PTAQuestion, PTAWatchLine });