/* Movement Cube — Program detail panels */

const PROGRAMS = {
  reset: {
    key: "reset",
    num: "01",
    title: "Reset",
    tagline: "3 Anchored Visits · 12 Weeks",
    price: "$1,297",
    unit: "12-week plan",
    meta: "Hands-on care · personalized Everfit program · direct async access to Dr. Golbek",
    bullets: [
      "1 First Visit + ROF (Wk 1)",
      "1 Mid-program Re-eval (Wk 6)",
      "1 Graduation Eval (Wk 12)",
      "12-week progressive Everfit program",
      "Direct async access to Dr. Golbek between visits",
    ],
    fit: "Self-motivated patients with low-irritability presentations.",
  },
  rebuild: {
    key: "rebuild",
    num: "02",
    title: "Rebuild",
    tagline: "8 Visits · Includes 2 Rehab-Focus",
    price: "$2,447",
    unit: "12-week plan",
    meta: "The workhorse plan — most patients land here.",
    bullets: [
      "2 visits in Wk 1 (First Visit + ROF)",
      "2 visits in Wk 2 (incl. 1 rehab-focus)",
      "Single visits Wk 3, 5, 8, 12 (1 rehab-focus)",
      "2 longer rehab-focus visits included",
      "12-week progressive Everfit program",
      "Direct async access to Dr. Golbek",
    ],
    fit: "Most patients — the workhorse offer.",
  },
  restore: {
    key: "restore",
    num: "03",
    title: "Restore",
    tagline: "12 Visits · 5 Anchored + 7 Flex",
    price: "$3,197",
    unit: "12-week plan",
    meta: "Front-loaded density for complex or high-irritability cases.",
    bullets: [
      "5 anchored visits (front-loaded density)",
      "7 flex visits (Wk 5–11)",
      "12-week progressive Everfit program",
      "Direct async access to Dr. Golbek",
    ],
    fit: "High-irritability, complex cases.",
    upsell: {
      title: "Restore+",
      price: "$3,797",
      blurb: "Everything in Restore plus an integrated 3-session prolozone series.",
    },
  },
  prolozone: {
    key: "prolozone",
    num: "04",
    title: "Prolozone",
    tagline: "Clinical Injection Therapy",
    meta: "For soft tissue & joint injuries. Requires evaluation — not a wellness service.",
    tiers: [
      { name: "First Visit + Prolozone", price: "$325", desc: "Full assessment + first injection (single site). Prolozone indicated and given on visit 1." },
      { name: "Prolozone Series — 3", price: "$525", desc: "$175 / session. Post-eval series, recommended after first injection. Includes 1 re-eval." },
      { name: "Prolozone Comprehensive — 6", price: "$900", desc: "$150 / session. For chronic or multi-site cases. 6 injections + 2 re-evals." },
      { name: "Standalone Injection", price: "$200", desc: "Maintenance, post-series, or established patients." },
    ],
  },
};

function Panel({ programKey, onClose, originPt, color }) {
  const p = programKey ? PROGRAMS[programKey] : null;
  const [phase, setPhase] = React.useState("closed"); // closed | opening | open | closing
  React.useEffect(() => {
    if (p) {
      setPhase("opening");
      const t = setTimeout(() => setPhase("open"), 800);
      return () => clearTimeout(t);
    } else if (phase === "open" || phase === "opening") {
      setPhase("closing");
      const t = setTimeout(() => setPhase("closed"), 500);
      return () => clearTimeout(t);
    }
  }, [p]);

  const showPortal = phase !== "closed";
  const originStyle = originPt
    ? { '--dz-x': `${originPt[0]}%`, '--dz-y': `${originPt[1]}%`, '--dz-color': color }
    : { '--dz-x': '50%', '--dz-y': '50%', '--dz-color': color || '#000' };

  return (
    <>
      <div className={"diamond-zoomer phase-" + phase} style={originStyle}>
        <span className="dz-trail"></span>
        <span className="dz-shape"></span>
      </div>
      <div className={"panel-overlay phase-" + phase} onClick={onClose}>
        {p && (
          <div className={"panel " + p.key} onClick={(e) => e.stopPropagation()}
               style={{ '--panel-accent': color || '#c8102e' }}>
          <div className="panel-accent-bar"></div>
          <button className="panel-close" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.6" fill="none"/></svg>
          </button>

          <div className="panel-eyebrow">
            <span className="num">{p.num}</span>
            <span>{p.tagline}</span>
          </div>
          <h1 className="panel-title">{p.title}</h1>

          {p.price && (
            <div className="panel-price">
              <span className="amount">{p.price}</span>
              <span className="unit">{p.unit}</span>
            </div>
          )}
          <p className="panel-meta">{p.meta}</p>

          {p.bullets && (
            <>
              <div className="panel-section-title">What's Included</div>
              <ul className="bullet-list">
                {p.bullets.map((b, i) => <li key={i}>{b}</li>)}
              </ul>
            </>
          )}

          {p.tiers && (
            <>
              <div className="panel-section-title">Offerings</div>
              <div className="sub-card-grid">
                {p.tiers.map((t, i) => (
                  <div className="sub-card" key={i}>
                    <div className="sc-name">{t.name}</div>
                    <div className="sc-price">{t.price}</div>
                    <div className="sc-desc">{t.desc}</div>
                  </div>
                ))}
              </div>
            </>
          )}

          {p.fit && (
            <div className="fit-line">
              <strong>Best fit</strong>
              {p.fit}
            </div>
          )}

          {p.upsell && (
            <>
              <div className="panel-section-title">Upgrade Path</div>
              <div className="sub-card">
                <div className="sc-name">{p.upsell.title}</div>
                <div className="sc-price">{p.upsell.price}</div>
                <div className="sc-desc">{p.upsell.blurb}</div>
              </div>
            </>
          )}

          <div className="cta-row">
            <button className="cta ghost" onClick={onClose}>Back to Cube</button>
          </div>
        </div>
      )}
      </div>
    </>
  );
}

window.Panel = Panel;
window.PROGRAMS = PROGRAMS;