// Pillars — one self-contained card per pillar. Stacked vertically.
// Card content: number badge · name · constraint · video · checklist.
// Nothing else. The video and the SOP doc carry the depth.

function PillarVideo({ p }) {
  const id = window.ytId(p.videoUrl);
  if (id) {
    return (
      <div className="video-wrap">
        <iframe
          src={`https://www.youtube.com/embed/${id}`}
          title={`Pillar ${p.n} training`}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      </div>
    );
  }
  return (
    <div className="video-wrap empty" style={{background:`linear-gradient(160deg, ${p.accentTint}, white)`,borderColor:p.accent}}>
      <div className="video-empty-inner">
        <div className="video-play" style={{background:p.accent,boxShadow:`0 8px 20px -6px ${p.accent}`}}>
          <i className="fas fa-play"></i>
        </div>
        <div style={{fontFamily:'var(--font-headline)',fontWeight:800,fontSize:14,color:p.accentDark,letterSpacing:'-0.005em',marginBottom:4}}>
          Training video · Module {p.n}
        </div>
        <div style={{fontSize:12,color:'var(--fg-3)',lineHeight:1.45,maxWidth:340}}>
          Paste a YouTube URL into <code>videoUrl</code> for pillar {p.n} in <code>components/pillars-data.js</code>
        </div>
      </div>
    </div>
  );
}

const NOTE_META = {
  tension:    { icon: 'fa-code-branch',     label: 'Open tension' },
  compliance: { icon: 'fa-scale-balanced',  label: 'Compliance flag' },
  build:      { icon: 'fa-screwdriver-wrench', label: 'Build requirement' },
  tbd:        { icon: 'fa-circle-question',  label: 'To confirm' },
};

function PillarCard({ p, idx, checks, onToggle, exMeta }) {
  const done = checks.filter(Boolean).length;
  const total = checks.length;
  const complete = done === total;
  const ex = p.examples[exMeta.id] || Object.values(p.examples)[0];
  return (
    <article
      id={`pillar-${p.n}`}
      className={`pillar-card ${complete ? 'is-complete' : ''}`}
      style={{['--accent']: p.accent, ['--accent-dark']: p.accentDark, ['--accent-tint']: p.accentTint}}
    >
      <div className="pillar-card-head">
        <span className="pillar-num-badge" style={{background:p.accent}}>{p.n}</span>
        <div style={{flex:1,minWidth:0}}>
          <div className="pillar-eyebrow">Pillar {p.n}</div>
          <h2 className="pillar-name">{p.name}</h2>
        </div>
        <span className={`pillar-progress ${complete ? 'complete' : ''}`}>
          {complete ? <><i className="fas fa-check"></i> Pass</> : <>{done}/{total}</>}
        </span>
      </div>

      <p className="pillar-constraint">{p.constraint}</p>

      <div className="pillar-examples">
        <div className="example-card bad">
          <div className="example-lbl"><i className="fas fa-xmark"></i> Don't</div>
          <div className="example-txt">{p.antis[0]}</div>
        </div>
        <div className="example-card good">
          <div className="example-lbl"><i className={`fas ${exMeta.icon}`}></i> Like {exMeta.name}</div>
          <div className="example-txt">{ex.quote}</div>
          {ex.tail && <div className="example-sub">{ex.tail}</div>}
        </div>
      </div>

      {ex.note && (
        <div className={`pillar-note ${ex.note.type}`}>
          <i className={`fas ${(NOTE_META[ex.note.type] || NOTE_META.tbd).icon}`}></i>
          <div>
            <span className="pillar-note-lbl">{(NOTE_META[ex.note.type] || NOTE_META.tbd).label}</span>
            <span className="pillar-note-txt">{ex.note.text}</span>
          </div>
        </div>
      )}

      <PillarVideo p={p} />

      <div className="pillar-checklist">
        <div className="pillar-checklist-hd">Pass / Fail</div>
        {p.check.map((c, ci) => (
          <label
            key={ci}
            className={`row-check ${checks[ci] ? 'checked' : ''}`}
            onClick={() => onToggle(ci)}
          >
            <span className="row-box" style={checks[ci] ? {background:p.accent, borderColor:p.accent} : {}}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </span>
            <span className="row-label">{c}</span>
          </label>
        ))}
      </div>
    </article>
  );
}

function Pillars({ checks, setChecks, example }) {
  const exMeta = window.OFFERIQ_EXAMPLES.find(e => e.id === example) || window.OFFERIQ_EXAMPLES[0];
  const onToggle = (pIdx, ci) => {
    setChecks(prev => {
      const next = prev.map(r => [...r]);
      next[pIdx][ci] = !next[pIdx][ci];
      return next;
    });
  };
  return (
    <section className="pillars-list-section">
      <div className="container-narrow" style={{display:'flex',flexDirection:'column',gap:28}}>
        {window.PILLARS.map((p, i) => (
          <PillarCard key={p.n} p={p} idx={i} checks={checks[i]} onToggle={(ci) => onToggle(i, ci)} exMeta={exMeta} />
        ))}
      </div>
    </section>
  );
}

window.Pillars = Pillars;