// edu-modal.jsx — lightweight educational / example pop-up that layers ON TOP
// of the tier modal. Reuses the l180-backdrop / l180-sheet styling. Reads its
// content from a stream's `edu` block (see L180_TIERS). Closing it drops the
// user back onto the tier card grid, not all the way out to the pyramid.
// Exports window.L180EduModal.

function L180EduModal({ stream, hue, onClose, onSchedule }) {
  const [closing, setClosing] = React.useState(false);
  const edu = stream.edu || {};
  const isExample = edu.kind === "example";
  const hasShot = !!edu.image;

  const requestClose = React.useCallback(() => {
    setClosing(true);
    setTimeout(() => onClose(), 260);
  }, [onClose]);

  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") requestClose(); }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [requestClose]);

  const accent = hue || window.L180_BRAND.cyan;

  return (
    <div className={"l180-backdrop l180-backdrop--edu" + (closing ? " closing" : "")}
         onClick={() => requestClose()}>
      <div className={"l180-sheet l180-sheet--edu" + (hasShot ? " l180-sheet--eduwide" : "")} onClick={(e) => e.stopPropagation()}
           style={{ borderTop: `2px solid ${accent}`, "--hue": accent }}>

        <button className="l180-close" onClick={() => requestClose()} aria-label="Close">✕</button>

        <div className="l180-sheet-inner">
          <div className="l180-eyebrow" style={{ color: accent }}>{edu.eyebrow || stream.name}</div>
          <h2 className="l180-edu-title">{edu.headline}</h2>
          {edu.lead && <p className="l180-edu-lead">{edu.lead}</p>}

          {/* worked example screenshot — a real run of the calculator, shown big */}
          {edu.image && (
            <figure className="l180-edu-shot" style={{ borderColor: `color-mix(in oklch, ${accent} 32%, transparent)` }}>
              <img src={edu.image.src} alt={edu.image.alt || edu.headline} loading="lazy" />
              {edu.image.caption && <figcaption>{edu.image.caption}</figcaption>}
            </figure>
          )}

          {/* assumptions + takeaways sit side-by-side in the wide example layout */}
          <div className="l180-edu-cols">
          {edu.assumptions && (
            <div className="l180-edu-assume">
              <div className="l180-edu-assume-head" style={{ color: accent }}>Assumptions</div>
              <div className="l180-edu-assume-grid">
                {edu.assumptions.inputs.map((a, i) => (
                  <div key={i} className="l180-edu-stat">
                    <span className="l180-edu-stat-l">{a.label}</span>
                    <span className="l180-edu-stat-v" style={{ color: accent }}>{a.value}</span>
                  </div>
                ))}
              </div>
              {edu.assumptions.note && <p className="l180-edu-assume-note">{edu.assumptions.note}</p>}
              {edu.assumptions.rates && (
                <div className="l180-edu-rates">
                  <div className="l180-edu-rate l180-edu-rate--head">
                    <span className="l180-edu-rate-l" style={{ color: accent }}>Current Market Rates</span>
                    <span className="l180-edu-rate-now">Today</span>
                    <span className="l180-edu-rate-avg">20-yr avg</span>
                  </div>
                  {edu.assumptions.rates.map((r, i) => (
                    <div key={i} className="l180-edu-rate">
                      <span className="l180-edu-rate-l">{r.label}</span>
                      <span className="l180-edu-rate-now">{r.now}</span>
                      <span className="l180-edu-rate-avg">{r.avg}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* purpose bullets — what this example shows */}
          {edu.bullets && (
            <ul className="l180-edu-bullets">
              {edu.bullets.map((b, i) => (
                <li key={i} className="l180-edu-bullet">
                  <span className="l180-edu-bullet-dot" style={{ background: accent, boxShadow: `0 0 10px ${accent}` }} />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          )}

          {/* side-by-side pro/con — fixed account vs. whole life */}
          {edu.compare && (
            <div className="l180-edu-vs">
              <div className="l180-edu-vs-col l180-edu-vs-col--con">
                <div className="l180-edu-vs-head">{edu.compare.left.title}</div>
                <ul>
                  {edu.compare.left.points.map((pt, i) => (
                    <li key={i}><span className="l180-edu-vs-mark l180-edu-vs-mark--x">✕</span><span>{pt}</span></li>
                  ))}
                </ul>
              </div>
              <div className="l180-edu-vs-col l180-edu-vs-col--pro"
                   style={{ borderColor: `color-mix(in oklch, ${accent} 42%, transparent)` }}>
                <div className="l180-edu-vs-head" style={{ color: accent }}>{edu.compare.right.title}</div>
                <ul>
                  {edu.compare.right.points.map((pt, i) => (
                    <li key={i}><span className="l180-edu-vs-mark" style={{ color: accent }}>✓</span><span>{pt}</span></li>
                  ))}
                </ul>
              </div>
            </div>
          )}
          </div>

          {/* contrast block — traditional dollar vs. foundation dollar */}
          {edu.contrast && (
            <div className="l180-edu-contrast">
              <div className="l180-edu-contrast-col l180-edu-contrast-col--trad">
                <span className="l180-edu-contrast-tag">Traditional</span>
                <p>{edu.contrast.traditional}</p>
              </div>
              <div className="l180-edu-contrast-col l180-edu-contrast-col--found" style={{ "--hue": accent }}>
                <span className="l180-edu-contrast-tag">Foundation asset</span>
                <p>{edu.contrast.foundation}</p>
              </div>
            </div>
          )}

          {/* education items — name + body, hue-dotted */}
          {edu.items && (
            <ul className="l180-edu-items">
              {edu.items.map((it, i) => (
                <li key={i} className="l180-edu-item">
                  <span className="l180-edu-item-dot" style={{ background: accent }} />
                  <div>
                    <strong>{it.name}</strong>
                    <p>{it.body}</p>
                  </div>
                </li>
              ))}
            </ul>
          )}

          {/* example steps — numbered, sequential */}
          {edu.steps && (
            <ol className="l180-edu-steps">
              {edu.steps.map((st, i) => (
                <li key={i} className="l180-edu-step">
                  <span className="l180-edu-step-num"
                        style={{ borderColor: `color-mix(in oklch, ${accent} 60%, transparent)`,
                                 background: `color-mix(in oklch, ${accent} 22%, transparent)` }}>
                    {i + 1}
                  </span>
                  <div>
                    <strong>{st.name}</strong>
                    <p>{st.body}</p>
                  </div>
                </li>
              ))}
            </ol>
          )}

          {edu.close && <p className="l180-edu-close">{edu.close}</p>}

          <div className="l180-edu-foot">
            <button className="l180-bigcta" style={{ "--hue": accent }} onClick={onSchedule}>
              {edu.ctaLabel || "Schedule a call with an agent"} <span className="arr">→</span>
            </button>
            <button className="l180-ghostbtn" onClick={() => requestClose()}>
              {isExample ? "Back" : "Close"}
            </button>
          </div>

          {edu.disclaimer && <p className="l180-edu-disclaimer">{edu.disclaimer}</p>}
        </div>
      </div>
    </div>
  );
}

window.L180EduModal = L180EduModal;