// ProductIntroSlide.jsx — split product introduction layout.
//   Left: subtitle + eyebrow + headline + 6 numbered key points + optional badge
//   Right: product UI mockup — desktop browser frame + phone frame overlay.
//
// The right column uses a canonical device-mockup pattern so every product
// chapter opens with the same scale and visual rhythm:
//   • desktop  — Mac-style browser chrome (traffic-light dots + URL chip),
//                content area takes the full body, soft elevated shadow.
//   • phone    — rounded notched device, overlapping the desktop's lower-right
//                corner so both surfaces read as a single product story.
// Pass `desktop` / `phone` URLs to fill them; otherwise grey placeholders.
//
// Use frameless={true} when wrapped in <ContentFrame>.
const ProductIntroSlide = ({
  label = "Product",
  eyebrow = "softXspace Platform",
  subtitle = null,
  headline = "All-in-one platform for documents, workflows and digital workspace — without switching tools.",
  points = [],
  // Optional product mark (icon-only) shown above the title.
  productMark = null,
  // Device mockup sources (any combination optional).
  desktop = null,
  phone = null,
  // Back-compat: previous `screenshot` prop maps to desktop image.
  screenshot = null,
  // Browser URL chip text (shown in desktop chrome).
  url = "softxspace.app",
  badge = null,
  accent = "#004495",
  frameless = false,
}) => {
  const T = window.SX;
  const desktopSrc = desktop || screenshot;
  const Wrapper = frameless ? "div" : "section";
  const wrapperStyle = frameless
    ? { flex: 1, minHeight: 0,
        display: "grid", gridTemplateColumns: "34fr 66fr", gap: 56, alignItems: "start" }
    : { width: T.W, height: T.H, background: T.WHITE, color: T.BLACK,
        padding: T.PAD, boxSizing: "border-box",
        display: "grid", gridTemplateColumns: "34fr 66fr", gap: 56, alignItems: "start" };
  return (
  <Wrapper {...(frameless ? {} : { "data-screen-label": label })} style={wrapperStyle}>
    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
      {productMark ? (
        <div style={{ alignSelf: "flex-start", marginBottom: -16 }}>
          <img src={productMark} alt={eyebrow} style={{
            height: 84, width: "auto", maxWidth: "none",
            display: "block",
          }}/>
        </div>
      ) : (
        <h2 style={{
          font: '700 72px/76px "Closer", sans-serif',
          margin: 0, letterSpacing: "-0.02em",
        }}>{eyebrow}</h2>
      )}
      <p style={{
        font: '600 22px/30px "Closer", sans-serif',
        margin: 0, color: T.BLACK, maxWidth: 720,
      }}>{headline}</p>
      <ul style={{
        listStyle: "none", padding: 0, margin: 0,
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px 32px",
      }}>
        {points.map((p, i) => (
          <li key={i}>
            <div style={{
              font: '700 13px/18px "IBM Plex Mono", monospace',
              color: accent, marginBottom: 6,
              fontVariantNumeric: "tabular-nums",
            }}>{String(i+1).padStart(2,"0")}</div>
            <div style={{ font: '600 18px/24px "Closer", sans-serif', marginBottom: 4 }}>
              {p.title}
            </div>
            <div style={{ font: '500 15px/22px "Closer", sans-serif', opacity: 0.65 }}>
              {p.body}
            </div>
          </li>
        ))}
      </ul>
      {badge && (
        <div style={{
          display: "flex", flexWrap: "wrap", alignSelf: "flex-start", gap: 10,
        }}>
          {(Array.isArray(badge) ? badge : [badge]).map((b, i) => (
            <div key={i} style={{
              display: "inline-flex", alignItems: "center",
              padding: "14px 22px", borderRadius: 999,
              background: T.BLACK, color: T.WHITE,
              font: '700 16px/22px "Closer", sans-serif',
              letterSpacing: "0.04em",
            }}>{b}</div>
          ))}
        </div>
      )}
    </div>

    {/* ===== Device mockup pattern (desktop + phone) ===== */}
    <div style={{ position: "relative", paddingBottom: 110, paddingRight: 0 }}>
      {/* Desktop — browser-chrome frame */}
      <div style={{
        borderRadius: 16, overflow: "hidden",
        background: T.WHITE,
        border: "1px solid rgba(0,0,0,0.10)",
        boxShadow: `0 40px 100px -20px ${accent}30, 0 12px 30px rgba(0,0,0,0.08)`,
      }}>
        {/* Minimal address bar */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "center",
          padding: "10px 16px",
          background: "#F5F6F8",
          borderBottom: "1px solid rgba(0,0,0,0.06)",
        }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            font: '500 13px/18px "IBM Plex Mono", monospace',
            color: "rgba(0,0,0,0.50)",
          }}>
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              <rect x="5" y="11" width="14" height="9" rx="2"/>
              <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
            </svg>
            {url}
          </div>
        </div>
        {/* Desktop body */}
        <div style={{
          aspectRatio: "16 / 10",
          background: desktopSrc ? T.WHITE : "#EEF0F4",
          backgroundImage: desktopSrc ? undefined :
            "linear-gradient(180deg, #EEF0F4 0%, #E5E8ED 100%)",
        }}>
          {desktopSrc && (
            <img src={desktopSrc} alt="" style={{
              width: "100%", height: "100%", objectFit: "cover", display: "block",
            }}/>
          )}
        </div>
      </div>

      {/* Phone — overlapping bottom-right, nudged inward from desktop edge */}
      <div style={{
        position: "absolute", right: 100, bottom: 0,
        width: 220, aspectRatio: "9 / 19.5",
        borderRadius: 36, padding: 4,
        background: "#D8DBDF",
        border: "1px solid rgba(0,0,0,0.10)",
        boxShadow: "0 32px 64px -12px rgba(0,0,0,0.18), 0 12px 24px rgba(0,0,0,0.06)",
      }}>
        <div style={{
          width: "100%", height: "100%",
          borderRadius: 32, overflow: "hidden",
          position: "relative",
          background: phone ? T.WHITE : "linear-gradient(180deg, #EEF0F4 0%, #E5E8ED 100%)",
        }}>
          {/* Notch / dynamic island */}
          <div style={{
            position: "absolute", top: 8, left: "50%",
            transform: "translateX(-50%)",
            width: 64, height: 18, borderRadius: 999,
            background: "#D8DBDF", zIndex: 2,
          }}/>
          {phone && (
            <img src={phone} alt="" style={{
              width: "100%", height: "100%", objectFit: "cover", display: "block",
            }}/>
          )}
        </div>
      </div>
    </div>
  </Wrapper>
  );
};
window.ProductIntroSlide = ProductIntroSlide;