/* global React */
const { useState: usePh } = React;

// Shared portrait component — 140×140 rounded square
function Portrait140({ initials = "MC", bg = "slate", showImg = true, size = 140, radius = 12 }) {
  const bgGrad = {
    slate:   "linear-gradient(180deg, oklch(0.32 0.02 250), oklch(0.20 0.02 250))",
    sage:    "linear-gradient(180deg, oklch(0.34 0.04 140), oklch(0.22 0.04 140))",
    oxblood: "linear-gradient(180deg, oklch(0.34 0.04 25), oklch(0.22 0.04 25))",
    sand:    "linear-gradient(180deg, oklch(0.36 0.03 80), oklch(0.24 0.03 80))",
  }[bg] || "linear-gradient(180deg, oklch(0.32 0.02 250), oklch(0.20 0.02 250))";
  return (
    <div style={{ width: size, height: size, borderRadius: radius, overflow: "hidden", border: "1px solid rgba(245,241,234,0.18)", background: bgGrad, position: "relative", flexShrink: 0 }}>
      {showImg ? (
        <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
          <circle cx="50" cy="38" r="14" fill="rgba(245,241,234,0.28)"/>
          <ellipse cx="50" cy="84" rx="28" ry="26" fill="rgba(245,241,234,0.22)"/>
        </svg>
      ) : (
        <div style={{ width: "100%", height: "100%", display: "grid", placeItems: "center" }}>
          <div className="serif-i" style={{ fontSize: size * 0.42, color: "rgba(245,241,234,0.92)", letterSpacing: "-0.02em", lineHeight: 1 }}>{initials}</div>
        </div>
      )}
    </div>
  );
}

// ==================================================================== 
// B1 — Photo source selection
// ====================================================================
function PhotoSelect() {
  const { MScreen, MTopBar, MStickyCTA, SagePill, Eyebrow } = window.M;
  const [pick, setPick] = usePh("linkedin"); // linkedin | upload | initials | null

  return (
    <MScreen footer={
      <MStickyCTA>
        <button disabled={!pick} style={{
          width: "100%", height: 52, borderRadius: 999,
          background: pick ? "var(--accent)" : "var(--surface-3)",
          color: pick ? "#0E0D0B" : "var(--text-3)",
          border: "none", fontFamily: "var(--sans)", fontSize: 15, fontWeight: 600,
          cursor: pick ? "pointer" : "not-allowed",
        }}>Continue</button>
        <div style={{ textAlign: "center", marginTop: 10 }}>
          <button onClick={() => setPick("initials")} style={{ background: "transparent", border: "none", color: "var(--text-3)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", cursor: "pointer" }}>USE MY INITIALS INSTEAD</button>
        </div>
      </MStickyCTA>
    }>
      <MTopBar label="01a · Your photo"/>
      <div style={{ padding: "8px 28px 28px" }}>
        <Eyebrow>Your photo</Eyebrow>
        <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "12px 0 0", textWrap: "pretty" }}>
          Pick the version of <span className="serif-i" style={{ color: "var(--accent)" }}>you</span> people will meet.
        </h1>
        <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--text-2)", marginTop: 18, textWrap: "pretty" }}>
          Your Meet Sheet leads with a photo. We've pulled your LinkedIn one — it's fine, but most people prefer to use a sharper image of themselves.
        </p>

        {/* LinkedIn option */}
        <button onClick={() => setPick("linkedin")} style={{
          marginTop: 24, width: "100%", padding: 18, borderRadius: 14,
          border: "1px solid " + (pick === "linkedin" ? "var(--accent)" : "var(--border)"),
          background: pick === "linkedin" ? "var(--accent-soft)" : "var(--surface)",
          color: "var(--text)", textAlign: "left", cursor: "pointer", display: "flex", gap: 16, alignItems: "center",
        }}>
          <Portrait140 size={86} radius={10}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>FROM LINKEDIN</div>
            <div className="serif" style={{ fontSize: 19, marginTop: 6, letterSpacing: "-0.005em" }}>Use my LinkedIn photo</div>
            <div style={{ fontSize: 12.5, color: "var(--text-2)", marginTop: 4 }}>Imported · 800 × 800px</div>
          </div>
          <div style={{ width: 22, height: 22, borderRadius: 11, border: "1.5px solid " + (pick === "linkedin" ? "var(--accent)" : "var(--border)"), display: "grid", placeItems: "center", flexShrink: 0 }}>
            {pick === "linkedin" && <div style={{ width: 10, height: 10, borderRadius: 5, background: "var(--accent)" }}/>}
          </div>
        </button>

        {/* Upload option */}
        <button onClick={() => setPick("upload")} style={{
          marginTop: 14, width: "100%", padding: 18, borderRadius: 14,
          border: "1px solid " + (pick === "upload" ? "var(--accent)" : "var(--border)"),
          background: pick === "upload" ? "var(--accent-soft)" : "var(--surface)",
          color: "var(--text)", textAlign: "left", cursor: "pointer",
        }}>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <div style={{ width: 86, height: 86, borderRadius: 10, border: "1px dashed var(--border)", display: "grid", placeItems: "center", color: "var(--text-3)" }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 7h4l2-3h6l2 3h4v12H3z"/>
                <circle cx="12" cy="13" r="4"/>
              </svg>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>RECOMMENDED</div>
              <div className="serif" style={{ fontSize: 19, marginTop: 6, letterSpacing: "-0.005em" }}>Upload a different photo</div>
              <div style={{ fontSize: 12.5, color: "var(--text-2)", marginTop: 4 }}>A sharper version of yourself.</div>
            </div>
            <div style={{ width: 22, height: 22, borderRadius: 11, border: "1.5px solid " + (pick === "upload" ? "var(--accent)" : "var(--border)"), display: "grid", placeItems: "center", flexShrink: 0 }}>
              {pick === "upload" && <div style={{ width: 10, height: 10, borderRadius: 5, background: "var(--accent)" }}/>}
            </div>
          </div>
          {pick === "upload" && (
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--accent-soft)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              <div style={{ padding: "11px 12px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", textAlign: "center", fontSize: 13 }}>Choose from Photos</div>
              <div style={{ padding: "11px 12px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", textAlign: "center", fontSize: 13 }}>Take a photo</div>
            </div>
          )}
        </button>

        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", marginTop: 22, textAlign: "center" }}>
          PHOTOS APPEAR AT 140 × 140 ON YOUR MEET SHEET
        </div>
      </div>
    </MScreen>
  );
}

// ====================================================================
// B2 — Crop / position
// ====================================================================
function PhotoCrop() {
  const { MScreen, MTopBar, MStickyCTA, Eyebrow } = window.M;
  const [zoom, setZoom] = usePh(1.1);

  return (
    <MScreen footer={
      <MStickyCTA>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <button style={{ height: 52, borderRadius: 999, background: "transparent", border: "1px solid var(--border)", color: "var(--text)", fontSize: 14.5, fontWeight: 500, cursor: "pointer" }}>Choose another</button>
          <button style={{ height: 52, borderRadius: 999, background: "var(--accent)", color: "#0E0D0B", border: "none", fontSize: 14.5, fontWeight: 600, cursor: "pointer" }}>Save photo</button>
        </div>
      </MStickyCTA>
    }>
      <MTopBar label="01b · Crop"/>
      <div style={{ padding: "8px 28px 24px" }}>
        <Eyebrow>Position your photo</Eyebrow>
        <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "12px 0 0" }}>
          Frame yourself <span className="serif-i" style={{ color: "var(--accent)" }}>well.</span>
        </h1>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-2)", marginTop: 14 }}>
          Drag to reposition. Pinch to zoom.
        </p>
      </div>

      {/* Crop area — square 1:1 */}
      <div style={{ padding: "0 20px" }}>
        <div style={{ position: "relative", width: "100%", aspectRatio: "1/1", borderRadius: 4, overflow: "hidden", background: "#000" }}>
          {/* Dimmed photo backdrop */}
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, oklch(0.32 0.02 250), oklch(0.20 0.02 250))", opacity: 0.45 }}>
            <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
              <circle cx="50" cy="38" r="14" fill="rgba(245,241,234,0.28)"/>
              <ellipse cx="50" cy="84" rx="28" ry="26" fill="rgba(245,241,234,0.22)"/>
            </svg>
          </div>
          {/* Crop frame */}
          <div style={{ position: "absolute", inset: "12% 12%", border: "1px solid var(--accent)", borderRadius: 12, overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, oklch(0.32 0.02 250), oklch(0.20 0.02 250))", transform: `scale(${zoom})` }}>
              <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
                <circle cx="50" cy="38" r="14" fill="rgba(245,241,234,0.28)"/>
                <ellipse cx="50" cy="84" rx="28" ry="26" fill="rgba(245,241,234,0.22)"/>
              </svg>
            </div>
            {/* corner ticks */}
            {["tl","tr","bl","br"].map(c => {
              const pos = { tl:{top:-1,left:-1}, tr:{top:-1,right:-1}, bl:{bottom:-1,left:-1}, br:{bottom:-1,right:-1} }[c];
              const dirs = c[0]==="t" ? { borderTop: "2px solid var(--accent)" } : { borderBottom: "2px solid var(--accent)" };
              const dirs2 = c[1]==="l" ? { borderLeft: "2px solid var(--accent)" } : { borderRight: "2px solid var(--accent)" };
              return <div key={c} style={{ position: "absolute", width: 16, height: 16, ...pos, ...dirs, ...dirs2 }}/>;
            })}
          </div>
          <div className="mono" style={{ position: "absolute", top: 12, left: 14, fontSize: 9.5, letterSpacing: "0.14em", color: "rgba(245,241,234,0.6)" }}>1:1 · 1080 × 1080</div>
        </div>

        {/* Zoom slider */}
        <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 14 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>ZOOM</span>
          <input type="range" min="1" max="2" step="0.01" value={zoom} onChange={(e) => setZoom(parseFloat(e.target.value))} style={{ flex: 1, accentColor: "var(--accent)" }}/>
          <span className="mono" style={{ fontSize: 11, color: "var(--text-2)", minWidth: 36, textAlign: "right" }}>{zoom.toFixed(2)}×</span>
        </div>
      </div>

      {/* Live preview */}
      <div style={{ padding: "28px 28px 20px", display: "flex", alignItems: "center", gap: 18, borderTop: "1px solid var(--border-soft)", marginTop: 22 }}>
        <Portrait140 size={84} radius={10}/>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)" }}>LIVE PREVIEW</div>
          <div className="serif" style={{ fontSize: 18, marginTop: 6, letterSpacing: "-0.005em" }}>How it'll appear on your Meet Sheet.</div>
        </div>
      </div>
    </MScreen>
  );
}

// ====================================================================
// B3 — Initials fallback
// ====================================================================
function PhotoInitials() {
  const { MScreen, MTopBar, MStickyCTA, Eyebrow } = window.M;
  const [bg, setBg] = usePh("sage");
  const tones = [
    { v: "slate",   label: "Slate" },
    { v: "sage",    label: "Sage" },
    { v: "oxblood", label: "Oxblood" },
    { v: "sand",    label: "Sand" },
  ];

  return (
    <MScreen footer={
      <MStickyCTA>
        <button style={{ width: "100%", height: 52, borderRadius: 999, background: "var(--accent)", color: "#0E0D0B", border: "none", fontSize: 15, fontWeight: 600, cursor: "pointer" }}>Use this</button>
        <div style={{ textAlign: "center", marginTop: 10 }}>
          <button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 12, cursor: "pointer", textDecoration: "underline", textUnderlineOffset: 4, textDecorationColor: "var(--text-3)" }}>Try a photo instead</button>
        </div>
      </MStickyCTA>
    }>
      <MTopBar label="01c · Initials"/>
      <div style={{ padding: "8px 28px 28px" }}>
        <Eyebrow>Your initials</Eyebrow>
        <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "12px 0 0" }}>
          Keep it <span className="serif-i" style={{ color: "var(--accent)" }}>simple.</span>
        </h1>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-2)", marginTop: 14 }}>
          Sometimes the strongest mark is just a typeface and a tone.
        </p>

        {/* Live preview */}
        <div style={{ marginTop: 28, padding: 36, background: "var(--surface)", border: "1px solid var(--border-soft)", borderRadius: 14, display: "grid", placeItems: "center" }}>
          <Portrait140 initials="MC" bg={bg} showImg={false} size={140}/>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", marginTop: 18 }}>140 × 140 · MARCUS CHEN</div>
        </div>

        {/* Color choice row */}
        <div style={{ marginTop: 24 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--text-3)", marginBottom: 12 }}>BACKGROUND TONE</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
            {tones.map(t => (
              <button key={t.v} onClick={() => setBg(t.v)} style={{
                padding: 10, borderRadius: 12,
                border: "1px solid " + (bg === t.v ? "var(--accent)" : "var(--border-soft)"),
                background: bg === t.v ? "var(--accent-soft)" : "var(--surface)",
                color: "var(--text)", cursor: "pointer", textAlign: "center",
              }}>
                <Portrait140 initials="MC" bg={t.v} showImg={false} size={56} radius={8}/>
                <div style={{ fontSize: 11, color: "var(--text-2)", marginTop: 8 }}>{t.label}</div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </MScreen>
  );
}

window.PhotoSelect = PhotoSelect;
window.PhotoCrop = PhotoCrop;
window.PhotoInitials = PhotoInitials;
window.Portrait140 = Portrait140;