// shared.jsx — Tutorial step engine, photo placeholder, common UI bits

function PhotoSlot({ width = '100%', height = 200, label = 'photo', radius = 8, style = {} }) {
  return (
    <div className="placeholder-img" style={{
      width, height, borderRadius: radius,
      ...style,
    }}>
      <span>{label}</span>
    </div>
  );
}

// Spotlight + tooltip rendered inside a relative container.
// rect: {top, left, width, height} in container coords
// tip: {text, num, arrow, x, y}
function Spotlight({ rect }) {
  if (!rect) return null;
  return (
    <div className="spotlight" style={{
      top: rect.top - 4, left: rect.left - 4,
      width: rect.width + 8, height: rect.height + 8,
      borderRadius: rect.radius || 14,
    }} />
  );
}

function TutorialTip({ tip }) {
  if (!tip) return null;
  return (
    <div className="tutorial-tip"
      data-arrow={tip.arrow || 'left'}
      style={{ left: tip.x, top: tip.y, maxWidth: tip.width || 240 }}>
      {tip.num && <div className="tt-num">{tip.num}</div>}
      <div>{tip.text}</div>
    </div>
  );
}

// Step list panel
function StepsPanel({ steps, current, setCurrent }) {
  return (
    <div className="steps">
      {steps.map((s, i) => (
        <button
          key={i}
          className={`step ${i === current ? 'active' : ''} ${i < current ? 'done' : ''}`}
          onClick={() => setCurrent(i)}
        >
          <div className="marker">{i < current ? '✓' : i + 1}</div>
          <div className="body">
            <div className="title">{s.title}</div>
            <div className="desc">{s.desc}</div>
          </div>
        </button>
      ))}
      <div className="step-nav">
        <button onClick={() => setCurrent(Math.max(0, current - 1))} disabled={current === 0}>← Back</button>
        <button className="primary"
          onClick={() => setCurrent(Math.min(steps.length - 1, current + 1))}
          disabled={current === steps.length - 1}>
          Next →
        </button>
      </div>
    </div>
  );
}

// Lesson scaffolding
function LessonHead({ num, title, sub, eyebrow, time }) {
  return (
    <div className="lesson-head">
      <div className="left">
        <div className="num">{num}</div>
        <h1>{title}</h1>
        <div className="sub">{sub}</div>
      </div>
      <div className="right">
        {eyebrow}
        <span className="v">{time}</span>
      </div>
    </div>
  );
}

Object.assign(window, { PhotoSlot, Spotlight, TutorialTip, StepsPanel, LessonHead });