// Behind-the-screens — every stage visible, each with a 3-image horizontal slider

const { useState: useBsS2, useRef: useBsR, useEffect: useBsE } = React;

const STAGES = [
{
  n: "01",
  label: "Meta Ads Manager",
  sub: "Your live ad account",
  blurb: "Full transparency into spend, CPL, and ROAS — you own the account.",
  shots: [
  { file: "ads-manager-1.png", caption: "Campaign view — spend & performance" },
  { file: "ads-manager-2.png", caption: "Ad set breakdown — CPL per creative" },
  { file: "ads-manager-3.png", caption: "Creative library — active ads" }]

},
{
  n: "02",
  label: "CRM Pipeline",
  sub: "Every lead, every stage",
  blurb: "New leads flow in, get qualified, hit your calendar, close into jobs — all tracked.",
  shots: [
  { file: "crm-pipeline-1.png", caption: "Pipeline view — leads by stage" },
  { file: "crm-pipeline-2.png", caption: "Lead detail — full conversation history" },
  { file: "crm-pipeline-3.png", caption: "Pipeline reporting — conversion by stage" }]

},
{
  n: "03",
  label: "SMS Qualification",
  sub: "Instant + human follow-up",
  blurb: "Acreage, service type, timeline, budget — filtered before it ever hits your phone.",
  shots: [
  { file: "sms-flow-1.png", caption: "Instant SMS reply — under 60 seconds" },
  { file: "sms-flow-2.png", caption: "Qualifier questions in conversation" },
  { file: "sms-flow-3.png", caption: "Booking confirmation thread" }]

},
{
  n: "04",
  label: "Booking Calendar",
  sub: "On-site estimates, confirmed",
  blurb: "Qualified leads hit your calendar direct. Three SMS confirmations before you drive.",
  shots: [
  { file: "calendar-1.png", caption: "Week view — booked estimates" },
  { file: "calendar-2.png", caption: "Appointment detail + confirmation log" },
  { file: "calendar-3.png", caption: "Month overview — schedule density" }]

}];


// ===== Slider with dots + arrows =====
const StageSlider = ({ shots }) => {
  const [idx, setIdx] = useBsS2(0);
  const trackRef = useBsR(null);

  const go = (i) => {
    const next = (i % shots.length + shots.length) % shots.length;
    setIdx(next);
  };

  return (
    <div style={{ position: "relative" }}>
      <div style={{
        position: "relative", overflow: "hidden",
        border: "1px solid var(--line)", background: "var(--bg)"
      }}>
        <div
          ref={trackRef}
          style={{
            display: "flex",
            transform: `translateX(-${idx * 100}%)`,
            transition: "transform 0.45s cubic-bezier(0.22, 1, 0.36, 1)"
          }}>
          {shots.map((s) =>
          <div key={s.file} style={{ flex: "0 0 100%", position: "relative" }}>
              <ShotImage file={s.file} caption={s.caption} />
            </div>
          )}
        </div>

        {/* Arrow buttons */}
        <button onClick={() => go(idx - 1)} aria-label="Previous" style={arrowStyle("left")}>
          ←
        </button>
        <button onClick={() => go(idx + 1)} aria-label="Next" style={arrowStyle("right")}>
          →
        </button>

        {/* Live pill */}
        <div style={{
          position: "absolute", top: 14, right: 14,
          display: "flex", gap: 8, alignItems: "center",
          background: "rgba(0,0,0,0.78)",
          border: "1px solid var(--line)",
          padding: "7px 11px",
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "var(--ink-dim)"
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: "50%",
            background: "#3aed5f", boxShadow: "0 0 8px #3aed5f88"
          }} />
          Live
        </div>
      </div>

      {/* Caption + dots bar */}
      <div style={{
        marginTop: 14, display: "flex", justifyContent: "space-between",
        alignItems: "center", gap: 16, flexWrap: "wrap"
      }}>
        <div className="mono" style={{
          fontSize: 11, color: "var(--ink-dim)",
          letterSpacing: "0.08em", textTransform: "uppercase"
        }}>
          <span style={{ color: "var(--flame)" }}>▸</span> {shots[idx].caption}
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span className="mono" style={{
            fontSize: 10, color: "var(--ink-faint)",
            letterSpacing: "0.14em", marginRight: 4
          }}>
            {String(idx + 1).padStart(2, "0")} / {String(shots.length).padStart(2, "0")}
          </span>
          {shots.map((_, i) =>
          <button
            key={i}
            onClick={() => go(i)}
            aria-label={`Show image ${i + 1}`}
            style={{
              width: i === idx ? 28 : 10,
              height: 6, border: "none", padding: 0, cursor: "pointer",
              background: i === idx ? "var(--flame)" : "var(--line)",
              transition: "width 0.25s ease, background 0.25s ease"
            }} />

          )}
        </div>
      </div>
    </div>);

};

const arrowStyle = (side) => ({
  position: "absolute",
  top: "50%", transform: "translateY(-50%)",
  [side]: 14,
  width: 44, height: 44,
  background: "rgba(0,0,0,0.72)",
  border: "1px solid var(--line)",
  color: "var(--ink)",
  fontSize: 18,
  cursor: "pointer",
  display: "flex", alignItems: "center", justifyContent: "center",
  fontFamily: "'IBM Plex Mono', monospace",
  backdropFilter: "blur(6px)",
  transition: "background 0.15s, border-color 0.15s"
});

// ===== Placeholder shot (falls back to striped card if file missing) =====
const ShotImage = ({ file, caption }) => {
  const src = `screens/${file}`;
  const [status, setStatus] = React.useState('loading');
  return (
    <div style={{ position: "relative", aspectRatio: "16 / 9", width: "100%", background: "#0b0b0b" }}>
      <img
        src={src}
        alt={caption}
        onLoad={() => setStatus('loaded')}
        onError={() => setStatus('error')}
        style={{
          width: "100%", height: "100%", display: "block",
          objectFit: "contain",
          opacity: status === 'loaded' ? 1 : 0,
          transition: "opacity 0.3s"
        }} />
      
      {status !== 'loaded' &&
      <div style={{
        position: "absolute", inset: 0,
        background: `repeating-linear-gradient(135deg, #1a140e 0 2px, #221810 2px 22px)`,
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>
          <div style={{
          border: "1px dashed var(--ink-faint)",
          padding: "24px 28px",
          display: "flex", flexDirection: "column",
          alignItems: "center", gap: 8, maxWidth: "80%"
        }}>
            <div className="mono" style={{
            fontSize: 10, color: status === 'error' ? "var(--flame)" : "var(--ink-faint)",
            letterSpacing: "0.2em", textTransform: "uppercase"
          }}>
              {status === 'error' ? '◱  Missing' : '◱  Loading…'}
            </div>
            <div style={{ fontSize: 13, color: "var(--ink)", textAlign: "center" }}>
              {caption}
            </div>
            {status === 'error' &&
          <div className="mono" style={{
            fontSize: 10, color: "var(--ink-faint)",
            letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4
          }}>
                {file}
              </div>
          }
          </div>
        </div>
      }
    </div>);

};

// ===== One stage block =====
const StageBlock = ({ stage, last }) =>
<div style={{
  padding: "60px 0",
  borderTop: "1px solid var(--line)",
  borderBottom: last ? "1px solid var(--line)" : "none"
}}>
    <div className="stage-row" style={{
    display: "grid", gridTemplateColumns: "300px 1fr", gap: 56, alignItems: "start"
  }}>
      <div className="stage-meta" style={{ position: "sticky", top: 100 }}>
        <div className="mono" style={{
        fontSize: 11, color: "var(--flame)",
        letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 14
      }}>
          Stage {stage.n}
        </div>
        <h3 style={{
        fontSize: "clamp(28px, 2.8vw, 36px)", lineHeight: 1.05,
        letterSpacing: "-0.02em", fontWeight: 500, marginBottom: 10
      }}>
          {stage.label}
        </h3>
        <div className="mono" style={{
        fontSize: 11, color: "var(--ink-faint)",
        letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 18
      }}>
          {stage.sub}
        </div>
        <p style={{
        fontSize: 15, color: "var(--ink-dim)", lineHeight: 1.55, maxWidth: 280
      }}>
          {stage.blurb}
        </p>
      </div>
      <div className="stage-slider">
        <StageSlider shots={stage.shots} />
      </div>
    </div>
  </div>;


// ===== Main section =====
const Backstage = () => {
  return (
    <section id="backstage" style={{ padding: "140px 32px", background: "var(--bg-2)" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", marginBottom: 48, gap: 40, flexWrap: "wrap" }}>
          <div>
            <div className="mono" style={{
              display: "flex", alignItems: "center", gap: 14,
              fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--flame)", marginBottom: 32
            }}>
              <span style={{ color: "var(--ink-faint)" }}>01</span>
              <span style={{ width: 24, height: 1, background: "var(--flame)" }} />
              Behind the screens
            </div>
            <h2 style={{
              fontSize: "clamp(40px, 5.5vw, 76px)", lineHeight: 0.95,
              letterSpacing: "-0.03em", fontWeight: 500, maxWidth: "20ch"
            }}>
              The machine running<br />
              <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--ink-dim)" }}>
                behind your phone.
              </span>
            </h2>
          </div>
          <p style={{ fontSize: 16, color: "var(--ink-dim)", maxWidth: 400 }}>
            Every account gets the full stack. You see the spend, the leads, the bookings, and the revenue — live. No black box.
          </p>
        </div>

        <div>
          {STAGES.map((s, i) =>
          <StageBlock key={s.n} stage={s} last={i === STAGES.length - 1} />
          )}
        </div>

        <div style={{
          marginTop: 40, paddingTop: 24,
          display: "flex", justifyContent: "space-between",
          alignItems: "center", gap: 16, flexWrap: "wrap",
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
          color: "var(--ink-faint)"
        }}>
          <span>ALL CLIENTS GET WEEKLY CALLS + DAILY UPDATES</span>
          <span>YOU MONITOR EVERY ACCOUNT — META, CRM, DOMAIN, EVERYTHING</span>
        </div>
      </div>
    </section>);

};

window.Backstage = Backstage;