/* Workfloor — Mockup variants
   5 interior states for the hero device, plus chrome shell.
   ============================================================= */

const Mark = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
    <rect x="1" y="1" width="8" height="8" rx="2" fill="#E8934A" />
    <rect x="11" y="1" width="8" height="8" rx="2" fill="#E8934A" fillOpacity="0.35" />
    <rect x="1" y="11" width="8" height="8" rx="2" fill="#E8934A" fillOpacity="0.6" />
    <rect x="11" y="11" width="8" height="8" rx="2" fill="#E8934A" fillOpacity="0.2" />
  </svg>
);

const ChromeBar = ({ businessName = "Smith's HVAC" }) => (
  <div className="wf-chrome">
    <span className="wf-chrome-dot" style={{ background: "#E85A4A" }} />
    <span className="wf-chrome-dot" style={{ background: "#E8934A" }} />
    <span className="wf-chrome-dot" style={{ background: "#4ade80" }} />
    <span style={{ flex: 1, textAlign: "center", fontSize: 11, color: "#3d5268", fontFamily: "var(--font-mono)", letterSpacing: "0.02em" }}>
      workfloor · {businessName}
    </span>
    <span style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 10, color: "#4ade80", fontWeight: 600 }}>
      <span className="wf-dot-pulse" style={{ width: 5, height: 5, borderRadius: "50%", background: "#4ade80" }} />
      Live
    </span>
  </div>
);

const MockShellBase = ({ children, businessName, height }) => (
  <div style={{
    borderRadius: 14,
    overflow: "hidden",
    background: "#080f18",
    boxShadow: "var(--wf-shadow-deep)",
    height,
  }}>
    <ChromeBar businessName={businessName} />
    {children}
  </div>
);

/* ---------------- 1. APPROVAL (default hero) ---------------- */
const ApprovalMockup = ({ businessName }) => (
  <MockShellBase businessName={businessName}>
    <div style={{ padding: "20px 18px", display: "flex", flexDirection: "column", gap: 14, minHeight: 330 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 9.5, color: "#E8934A", fontWeight: 700, letterSpacing: "0.12em" }}>1 AWAITING APPROVAL</div>
        <div style={{ fontSize: 10, color: "#3d5268", fontFamily: "var(--font-mono)" }}>11:42pm</div>
      </div>
      <div style={{ background: "#0b1a2a", border: "1px solid rgba(232,147,74,0.22)", borderLeft: "3px solid #E8934A", borderRadius: 8, padding: "16px 18px" }}>
        <div style={{ fontSize: 10.5, color: "#9AAABB", marginBottom: 10, display: "flex", justifyContent: "space-between" }}>
          <span>Williams HVAC · After-hours request</span>
          <span style={{ color: "#E85A4A" }}>● High value</span>
        </div>
        <div style={{ fontSize: 13.5, color: "#e8ddd0", lineHeight: 1.55, marginBottom: 14, fontFamily: "var(--font-display)", fontWeight: 500 }}>
          Customer requesting same-night emergency dispatch. Quoted $385 base + diagnostic. Proceed?
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span style={{ background: "rgba(74,222,128,0.12)", color: "#4ade80", border: "1px solid rgba(74,222,128,0.3)", padding: "7px 16px", borderRadius: 6, fontSize: 11, fontWeight: 600 }}>
            Approve & dispatch
          </span>
          <span style={{ color: "#6A7D8E", border: "1px solid rgba(255,255,255,0.08)", padding: "7px 16px", borderRadius: 6, fontSize: 11 }}>Decline</span>
        </div>
      </div>
      <div style={{ marginTop: "auto", textAlign: "center", paddingTop: 8 }}>
        <div style={{ fontSize: 10, color: "#3d5268", letterSpacing: "0.05em" }}>The system holds. You decide.</div>
      </div>
    </div>
  </MockShellBase>
);

/* ---------------- 2. MISSED CALL ---------------- */
const MissedCallMockup = ({ businessName }) => (
  <MockShellBase businessName={businessName}>
    <div style={{ padding: "20px 18px", display: "flex", flexDirection: "column", gap: 12, minHeight: 330 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 9.5, color: "#4ade80", fontWeight: 700, letterSpacing: "0.12em" }}>● RECOVERED</div>
        <div style={{ fontSize: 10, color: "#3d5268", fontFamily: "var(--font-mono)" }}>2:08am</div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {/* Inbound row */}
        <div style={{ background: "rgba(232,90,74,0.06)", border: "1px solid rgba(232,90,74,0.18)", borderRadius: 8, padding: "10px 12px", display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#E85A4A" }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: "#e8ddd0", fontWeight: 600 }}>+1 (319) 555-0142</div>
            <div style={{ fontSize: 10, color: "#6A7D8E" }}>Missed · 2:07am</div>
          </div>
          <span style={{ fontSize: 10, color: "#E85A4A" }}>1 ring</span>
        </div>

        {/* System response */}
        <div style={{ background: "#0b1a2a", border: "1px solid rgba(74,222,128,0.18)", borderLeft: "3px solid #4ade80", borderRadius: 8, padding: "12px 14px" }}>
          <div style={{ fontSize: 9.5, color: "#4ade80", letterSpacing: "0.1em", fontWeight: 700, marginBottom: 6 }}>SYSTEM · 9 SECONDS LATER</div>
          <div style={{ fontSize: 12, color: "#c8c0b8", lineHeight: 1.6, fontFamily: "var(--font-display)" }}>
            "Hey — this is Smith's HVAC. Saw you called. I'm the after-hours line. What's going on at the house tonight?"
          </div>
        </div>

        {/* Outcome */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 4 }}>
          <div style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 6, padding: "10px 12px" }}>
            <div style={{ fontSize: 9, color: "#6A7D8E", letterSpacing: "0.1em", fontWeight: 700 }}>QUALIFIED</div>
            <div style={{ fontSize: 14, color: "#e8ddd0", fontFamily: "var(--font-display)", fontWeight: 600, marginTop: 2 }}>Furnace · No heat</div>
          </div>
          <div style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 6, padding: "10px 12px" }}>
            <div style={{ fontSize: 9, color: "#6A7D8E", letterSpacing: "0.1em", fontWeight: 700 }}>BOOKED</div>
            <div style={{ fontSize: 14, color: "#E8934A", fontFamily: "var(--font-display)", fontWeight: 600, marginTop: 2 }}>Tomorrow · 8am</div>
          </div>
        </div>
      </div>
    </div>
  </MockShellBase>
);

/* ---------------- 3. BOOKING (waitlist fill) ---------------- */
const BookingMockup = ({ businessName }) => (
  <MockShellBase businessName={businessName}>
    <div style={{ padding: "20px 18px", display: "flex", flexDirection: "column", gap: 12, minHeight: 330 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 9.5, color: "#E8934A", fontWeight: 700, letterSpacing: "0.12em" }}>SLOT REOPENED · WAITLIST FIRING</div>
        <div style={{ fontSize: 10, color: "#3d5268", fontFamily: "var(--font-mono)" }}>9:14am</div>
      </div>

      {/* Cancelled */}
      <div style={{ background: "rgba(232,90,74,0.05)", border: "1px solid rgba(232,90,74,0.15)", borderRadius: 8, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 10, color: "#E85A4A", fontWeight: 600, marginBottom: 3 }}>Cancelled</div>
          <div style={{ fontSize: 12, color: "#6A7D8E", textDecoration: "line-through" }}>Davis · AC inspection · 2pm</div>
        </div>
        <span style={{ fontSize: 10, color: "#3d5268", fontFamily: "var(--font-mono)" }}>9:12am</span>
      </div>

      {/* Waitlist cascade */}
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {[
          { name: "Patel · Maintenance", status: "Texted", color: "#6A7D8E" },
          { name: "Romero · No heat upstairs", status: "Confirmed", color: "#4ade80" },
          { name: "Chen · Annual tune-up", status: "Standby", color: "#3d5268" },
        ].map((row, i) => (
          <div key={i} style={{ background: i === 1 ? "#0b1a2a" : "rgba(255,255,255,0.02)", borderLeft: i === 1 ? "3px solid #4ade80" : "3px solid transparent", border: i === 1 ? "1px solid rgba(74,222,128,0.25)" : "1px solid rgba(255,255,255,0.04)", borderRadius: 6, padding: "10px 12px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 12, color: i === 1 ? "#e8ddd0" : "#9AAABB", fontWeight: i === 1 ? 600 : 400 }}>{row.name}</span>
            <span style={{ fontSize: 10, color: row.color, fontWeight: 600, letterSpacing: "0.05em" }}>{row.status}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 4 }}>
        <span style={{ fontSize: 10, color: "#3d5268" }}>Slot filled in 4 minutes.</span>
        <span style={{ fontSize: 11, color: "#E8934A", fontWeight: 600 }}>+$340 recovered</span>
      </div>
    </div>
  </MockShellBase>
);

/* ---------------- 4. TRACKING (live ops) ---------------- */
const TrackingMockup = ({ businessName }) => (
  <MockShellBase businessName={businessName}>
    <div style={{ padding: "20px 18px", display: "flex", flexDirection: "column", gap: 14, minHeight: 330 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 9.5, color: "#9AAABB", fontWeight: 700, letterSpacing: "0.12em" }}>TODAY · LIVE</div>
        <div style={{ fontSize: 10, color: "#3d5268", fontFamily: "var(--font-mono)" }}>3:27pm</div>
      </div>

      {/* Big stat */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
        {[
          { n: "14", label: "Inbound" },
          { n: "11", label: "Booked" },
          { n: "3", label: "Held for you" },
        ].map((s, i) => (
          <div key={i} style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 8, padding: "12px 14px" }}>
            <div style={{ fontSize: 22, color: i === 2 ? "#E8934A" : "#e8ddd0", fontFamily: "var(--font-display)", fontWeight: 800, lineHeight: 1, letterSpacing: "-0.02em" }}>{s.n}</div>
            <div style={{ fontSize: 9.5, color: "#6A7D8E", letterSpacing: "0.1em", fontWeight: 600, marginTop: 4 }}>{s.label.toUpperCase()}</div>
          </div>
        ))}
      </div>

      {/* Activity feed */}
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {[
          { t: "3:24p", c: "#4ade80", text: "Booked · Lopez tune-up · Thu 10a" },
          { t: "3:18p", c: "#E8934A", text: "Holding · After-hours quote $1,240" },
          { t: "3:11p", c: "#60a5fa", text: "Synced to ServiceTitan · 2 jobs" },
          { t: "3:02p", c: "#4ade80", text: "Recovered · Missed call → booked" },
        ].map((row, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11, color: "#9AAABB", padding: "4px 0" }}>
            <span style={{ width: 5, height: 5, borderRadius: "50%", background: row.c, flexShrink: 0 }} />
            <span style={{ fontFamily: "var(--font-mono)", color: "#3d5268", fontSize: 10 }}>{row.t}</span>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 500 }}>{row.text}</span>
          </div>
        ))}
      </div>
    </div>
  </MockShellBase>
);

/* ---------------- 5. MORNING REPORT ---------------- */
const MorningReportMockup = ({ businessName }) => (
  <MockShellBase businessName={businessName}>
    <div style={{ padding: "20px 18px", display: "flex", flexDirection: "column", gap: 14, minHeight: 330 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <div style={{ fontSize: 9.5, color: "#E8934A", fontWeight: 700, letterSpacing: "0.14em" }}>MORNING REPORT</div>
          <div style={{ fontSize: 16, color: "#F5F3EE", fontFamily: "var(--font-display)", fontWeight: 700, marginTop: 4, letterSpacing: "-0.01em" }}>Tuesday · 6:48am</div>
        </div>
        <div style={{ fontSize: 10, color: "#3d5268", fontFamily: "var(--font-mono)" }}>From: your system</div>
      </div>

      {/* Body — like a text */}
      <div style={{ background: "#0b1a2a", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 10, padding: "14px 16px", fontSize: 12.5, lineHeight: 1.7, color: "#c8c0b8", fontFamily: "var(--font-display)", fontWeight: 400 }}>
        Last night we picked up <span style={{ color: "#E8934A", fontWeight: 600 }}>4 after-hours leads</span>. Two are booked for today (Williams 10am, Patel 2pm), one is on the morning callback list, one declined our quote.
        <br /><br />
        The Henderson cancellation at 2pm was filled from the waitlist. <span style={{ color: "#4ade80", fontWeight: 600 }}>+$340.</span>
        <br /><br />
        Nothing needs your input.
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: "auto" }}>
        {[{ n: "+4", l: "Recovered" }, { n: "$1,920", l: "Captured" }, { n: "0", l: "Action items" }].map((s, i) => (
          <div key={i} style={{ textAlign: "center", padding: "8px 4px", borderRight: i < 2 ? "1px solid rgba(255,255,255,0.04)" : "none" }}>
            <div style={{ fontSize: 16, color: "#E8934A", fontFamily: "var(--font-display)", fontWeight: 700, lineHeight: 1 }}>{s.n}</div>
            <div style={{ fontSize: 9, color: "#6A7D8E", letterSpacing: "0.1em", fontWeight: 600, marginTop: 4 }}>{s.l.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </div>
  </MockShellBase>
);

/* Registry — keys map to mockup components for the Tweaks selector */
const MOCKUPS = {
  approval: { label: "Approval queue", desc: "The system holds high-stakes actions for owner approval before acting.", Comp: ApprovalMockup },
  missed: { label: "Missed-call recovery", desc: "Every missed call gets a response in under 60 seconds.", Comp: MissedCallMockup },
  booking: { label: "Waitlist fill", desc: "Cancelled slots get filled from the waitlist, automatically.", Comp: BookingMockup },
  tracking: { label: "Live tracking", desc: "Real-time view of inbound, booked, and held — without managing it.", Comp: TrackingMockup },
  morning: { label: "Morning report", desc: "Plain-English overnight summary on your phone by 7am.", Comp: MorningReportMockup },
};

Object.assign(window, { Mark, ChromeBar, ApprovalMockup, MissedCallMockup, BookingMockup, TrackingMockup, MorningReportMockup, MOCKUPS });