// Mobile preview — floating iPhone in the bottom-right showing the same hero
// + sticky Order Pickup button. Pure mock for handoff context. Collapsible.

function MobilePreview({ visible }) {
  const [open, setOpen] = React.useState(true);
  if (!visible) return null;

  const D = "var(--c-dark-green)";
  const C = "var(--c-cream)";
  const S = "var(--c-sea-green)";
  const Y = "var(--c-yellow)";

  return (
    <div style={{
      position: "fixed", right: 24, bottom: 24, zIndex: 100,
      display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 10,
    }}>
      {open && (
        <div style={{
          width: 290,
          background: D, borderRadius: 32, padding: 8,
          boxShadow: "0 22px 60px rgba(31,77,58,.30)",
        }}>
          <div style={{
            background: C, borderRadius: 26, overflow: "hidden",
            aspectRatio: "9 / 19", position: "relative",
            display: "flex", flexDirection: "column",
          }}>
            {/* Status bar */}
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "14px 22px 0",
              fontFamily: "var(--font-mono)", fontSize: 10, color: D,
            }}>
              <span>9:41</span>
              <span style={{ width: 60, height: 18, background: D, borderRadius: 999 }} />
              <span>100%</span>
            </div>

            {/* Header */}
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "12px 18px 8px",
              borderBottom: "1px solid color-mix(in oklab, " + D + " 12%, transparent)",
            }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <img src="assets/basket-mark.png" alt="" style={{ width: 22, height: 22 }} />
                <span style={{ fontFamily: "var(--font-wordmark)", fontSize: 10, color: D,
                                letterSpacing: "-0.01em", textTransform: "uppercase",
                                lineHeight: 0.9 }}>
                  EVERYDAY<br/>WORKS
                </span>
              </div>
              <div style={{
                width: 18, height: 14, display: "flex", flexDirection: "column",
                justifyContent: "space-between",
              }}>
                {[0,1,2].map(i => <i key={i} style={{ height: 2, background: D, borderRadius: 1 }} />)}
              </div>
            </div>

            {/* Body */}
            <div style={{ padding: "16px 18px", color: D, flex: 1, overflow: "hidden",
                            display: "flex", flexDirection: "column", gap: 10 }}>
              <div className="mono" style={{ fontSize: 7, color: S, opacity: 0.9 }}>
                ★ Open today · 6 am – 4 pm
              </div>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 40, lineHeight: 0.9,
                letterSpacing: "-0.025em",
              }}>
                Coffee.<br/>Market.<br/>
                <em style={{ fontStyle: "italic", color: S }}>Purpose.</em>
              </div>
              <div style={{ fontSize: 10, lineHeight: 1.4,
                             color: "color-mix(in oklab, " + D + " 80%, transparent)",
                             maxWidth: "26ch" }}>
                Built in Oak Cliff for better everyday choices.
              </div>
              <div className="photo" style={{ marginTop: 4, height: 110, borderRadius: 6 }}>
                <div className="tag" style={{ fontSize: 6, padding: "3px 6px" }}>BAR · 9 AM</div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginTop: 4 }}>
                {[
                  { l: "Order pickup", s: "Clover", p: true },
                  { l: "Order delivery", s: "DoorDash · Uber" },
                  { l: "View menu", s: "Coffee · kitchen" },
                  { l: "Visit us", s: "Hampton Rd" },
                ].map((c, i) => (
                  <div key={i} style={{
                    background: c.p ? S : "transparent", color: c.p ? C : D,
                    border: c.p ? "0" : "1px solid color-mix(in oklab, " + D + " 22%, transparent)",
                    padding: "7px 9px", borderRadius: 5,
                    display: "flex", flexDirection: "column", gap: 1, fontSize: 9,
                    fontWeight: 600,
                  }}>
                    <span>{c.l}</span>
                    <span className="mono" style={{ fontSize: 6, opacity: c.p ? 0.85 : 0.7,
                                                       letterSpacing: "0.08em" }}>{c.s}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Sticky CTA */}
            <div style={{
              padding: "10px 14px 14px",
              borderTop: "1px solid color-mix(in oklab, " + D + " 10%, transparent)",
              background: C,
            }}>
              <div style={{
                background: S, color: C, borderRadius: 999,
                padding: "10px 0", textAlign: "center",
                fontSize: 11, fontWeight: 700,
              }}>Order pickup →</div>
            </div>

            {/* Home indicator */}
            <div style={{ padding: "6px 0 8px", display: "flex", justifyContent: "center" }}>
              <span style={{ width: 88, height: 3, background: D, borderRadius: 2, opacity: 0.6 }} />
            </div>
          </div>
        </div>
      )}

      <button onClick={() => setOpen(o => !o)}
              style={{
                background: D, color: C, border: 0, borderRadius: 999,
                padding: "10px 16px", cursor: "default",
                fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em",
                textTransform: "uppercase",
                boxShadow: "0 8px 22px rgba(31,77,58,.25)",
              }}>
        {open ? "Hide mobile" : "Show mobile"}
      </button>
    </div>
  );
}

window.MobilePreview = MobilePreview;