// EditorialPanel — left column of the two-column stage.
// Big green surface with serif italic headline + step copy + progress.
// Content varies per step (via the `step` prop, 0..3).

const EDITORIAL_COPY = [
  {
    eyebrow: "Step 01 · Prospect Basics",
    headlinePre: "Who are we",
    headlineEm: "building this for?",
    body: "Kick things off with the essentials. Already have an AE prep guide? Drop it in and we'll pre-fill what we can.",
    aside: "Takes about 2 minutes.",
  },
  {
    eyebrow: "Step 02 · Use Cases",
    headlinePre: "What should the demo",
    headlineEm: "showcase?",
    body: "Pick one or more. Each use case ships with a ready-to-demo set of components — you'll fine-tune names in the next step.",
    aside: "Tap Watch explainer for a 60-second walkthrough of each flow.",
  },
  {
    eyebrow: "Step 03 · Configure",
    headlinePre: "Name things the way the",
    headlineEm: "demo should read.",
    body: "Defaults are seeded from the company name. Tweak anything — copy runs through the generated tenant on every surface.",
    aside: "Components per use case are fixed. Names are yours.",
  },
  {
    eyebrow: "Step 04 · Review & Build",
    headlinePre: "Ready to spin up the",
    headlineEm: "tenant.",
    body: "One last look before we scaffold. You can always hop back to tweak anything. Build takes about six seconds.",
    aside: "You'll land on the live tenant URL when the build completes.",
  },
];

function EditorialPanel({ step, form, selected, onStepClick, maxStep }) {
  const copy = EDITORIAL_COPY[step] || EDITORIAL_COPY[0];
  const steps = window.STEPS || [];
  // Always allow navigating to any step — users want free click-through.
  const reachable = steps.length - 1;
  return (
    <aside className="ed-panel" aria-label="Step overview">
      <div className="ed-panel-inner">
        <div className="ed-top">
          <div className="ed-eyebrow">{copy.eyebrow}</div>
          <h1 className="ed-headline">
            {copy.headlinePre}{" "}
            <em>{copy.headlineEm}</em>
          </h1>
          <p className="ed-body">{copy.body}</p>
        </div>

        {/* In-panel step ribbon: replaces the old page-top Ribbon */}
        <nav className="ed-steps" aria-label="Wizard steps">
          {steps.map((s, i) => {
            const state = i < step ? "done" : i === step ? "active" : "upcoming";
            const canClick = !!onStepClick && i !== step;
            const Tag = canClick ? "button" : "div";
            return (
              <Tag
                key={s.n}
                type={canClick ? "button" : undefined}
                className={`ed-step ${state} ${canClick ? "clickable" : ""}`}
                onClick={canClick ? () => onStepClick(i) : undefined}
                aria-current={i === step ? "step" : undefined}
              >
                <span className="ed-step-dot" aria-hidden>
                  {i < step ? (
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 12 10 17 19 7"/></svg>
                  ) : null}
                </span>
                <span className="ed-step-text">
                  <span className="ed-step-n">{s.n}</span>
                  <span className="ed-step-t">{s.t}</span>
                </span>
              </Tag>
            );
          })}
        </nav>

        <div className="ed-progress">
          <div className="ed-progress-label">
            <span>Step <b>{step + 1}</b> of {steps.length}</span>
            {form && form.company && <span className="ed-company">· {form.company}</span>}
          </div>
        </div>

        <div className="ed-aside">{copy.aside}</div>

        {/* decorative gradient art — abstract, no imagery */}
        <div className="ed-art" aria-hidden>
          <div className="ed-art-blob ed-art-blob-1" />
          <div className="ed-art-blob ed-art-blob-2" />
          <div className="ed-art-blob ed-art-blob-3" />
          <div className="ed-art-dots" />
        </div>
      </div>
    </aside>
  );
}

Object.assign(window, { EditorialPanel });