// Shared UI: logo, device frames, watercolor backdrops, ornaments.

function FishLogo({ size = 56, color = "#7c1f1f" }) {
  // Stylized koi/fish in a yin-yang loop — matches the seal style in the reference login.
  return (
    <svg className="fish-logo" width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden>
      <g stroke={color} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" fill="none">
        {/* outer circle suggestion */}
        <path d="M50 8 C72 8, 92 28, 92 50 C92 72, 72 92, 50 92 C28 92, 8 72, 8 50 C8 28, 28 8, 50 8 Z"
              strokeOpacity=".15" />
        {/* fish body */}
        <path d="M22 56 C28 36, 52 30, 68 40 C82 49, 78 66, 60 70 C46 73, 32 68, 28 60"
              fill={color} fillOpacity=".92" stroke="none"/>
        {/* tail */}
        <path d="M22 56 C16 50, 12 60, 8 56 C12 64, 14 70, 22 64 Z" fill={color}/>
        {/* eye */}
        <circle cx="62" cy="46" r="2.2" fill="#fbf6ea" stroke="none"/>
        {/* flame curl on back */}
        <path d="M40 38 C46 30, 56 30, 60 36 M44 42 C48 36, 54 36, 58 40"
              stroke={color} strokeOpacity=".7" fill="none"/>
      </g>
    </svg>
  );
}

function BrandMark({ size = 56, subtitle = "Steven Yu Art" }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap: 10 }}>
      <FishLogo size={size} />
      <div style={{
        fontFamily: "var(--serif)",
        fontSize: subtitle.length > 16 ? 16 : 18,
        letterSpacing: ".06em",
        color: "var(--ink)",
        fontWeight: 500,
      }}>{subtitle}</div>
    </div>
  );
}

// Compact top-bar logo for landing page
function BrandBar({ onRestart }) {
  return (
    <div style={{
      position:"absolute", top:0, left:0, right:0, height:64,
      display:"flex", alignItems:"center", justifyContent:"space-between",
      padding:"0 28px", zIndex:30,
    }}>
      <div style={{ display:"flex", alignItems:"center", gap:10 }}>
        <FishLogo size={28} />
        <div style={{ fontFamily:"var(--serif)", fontSize:15, letterSpacing:".08em", color:"#fbf6ea", opacity:.92 }}>STEVEN YU ART</div>
      </div>
      <div style={{ display:"flex", gap:18, fontFamily:"var(--serif)", fontSize:14, letterSpacing:".06em", color:"#fbf6ea", opacity:.78 }}>
        <span>Gallery</span>
        <span>About</span>
        <span style={{ cursor:"pointer", textDecoration:"underline", textUnderlineOffset:4 }} onClick={onRestart}>Begin again</span>
      </div>
    </div>
  );
}

// Decorative thin gold rule with center diamond
function Rule({ color = "rgba(42,36,24,.35)", width = 120 }) {
  return (
    <div style={{ display:"flex", alignItems:"center", gap:8, color }}>
      <span style={{ display:"inline-block", width, height:1, background:"currentColor" }}></span>
      <span style={{ display:"inline-block", width:6, height:6, transform:"rotate(45deg)", background:"currentColor" }}></span>
      <span style={{ display:"inline-block", width, height:1, background:"currentColor" }}></span>
    </div>
  );
}

// Device frames ────────────────────────────────────────────────────────────

function BrowserFrame({ url = "stevenyu.art/discover", children }) {
  return (
    <div className="browser-frame">
      <div className="browser-bar">
        <span className="dot r" /><span className="dot y" /><span className="dot g" />
        <div style={{ width:14 }} />
        <div className="browser-url">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" style={{marginRight:6, opacity:.7}}>
            <path d="M6 10V8a6 6 0 1 1 12 0v2" stroke="#b8a87d" strokeWidth="2"/>
            <rect x="4" y="10" width="16" height="11" rx="2" stroke="#b8a87d" strokeWidth="2"/>
          </svg>
          {url}
        </div>
      </div>
      <div className="browser-body">{children}</div>
    </div>
  );
}

function PhoneFrame({ dark = false, children }) {
  const time = "9:41";
  return (
    <div className="phone-frame">
      <div className="phone-screen">
        <div className="phone-notch" />
        <div className={"phone-statusbar " + (dark ? "dark" : "")}>
          <span>{time}</span>
          <div style={{ display:"flex", gap:6, alignItems:"center" }}>
            {/* signal */}
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect x="0" y="7" width="3" height="4" rx="0.5"/><rect x="4.5" y="5" width="3" height="6" rx="0.5"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.5"/><rect x="13.5" y="0" width="3" height="11" rx="0.5"/></svg>
            {/* battery */}
            <svg width="25" height="11" viewBox="0 0 25 11" fill="none"><rect x="0.5" y="0.5" width="21" height="10" rx="2.5" stroke="currentColor"/><rect x="2" y="2" width="18" height="7" rx="1.5" fill="currentColor"/><rect x="22.5" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor"/></svg>
          </div>
        </div>
        {children}
      </div>
    </div>
  );
}

// Device selector wrapper used by App
function DeviceShell({ device, url, statusDark, reserveBottom = 96, children }) {
  // The actual stage that letterboxes one of the two device frames against the dark page background.
  // `reserveBottom` keeps space for the floating flow-nav so it can't overlap the device frame.
  return (
    <div style={{
      width:"100vw", height:"100vh", display:"flex",
      alignItems:"center", justifyContent:"center",
      background:"#1a1410",
      paddingBottom: reserveBottom,
    }}>
      {device === "mobile" ? (
        <PhoneFrame dark={statusDark}>{children}</PhoneFrame>
      ) : (
        <BrowserFrame url={url}>{children}</BrowserFrame>
      )}
    </div>
  );
}

// Watercolor stage ──────────────────────────────────────────────────────────
// Use inside the device's content area. Inset paper-bg + grain.

function PaperStage({ children, style }) {
  return (
    <div className="paper-bg" style={{
      position:"absolute", inset:0, overflow:"hidden",
      display:"flex", flexDirection:"column",
      ...style,
    }}>
      <div className="paper-grain" />
      {children}
    </div>
  );
}

// Vertical stack of glass fields like the login reference
function GlassField({ value, onChange, placeholder, type="text" }) {
  return (
    <div className="glass-input field-row">
      <input value={value} onChange={(e)=>onChange(e.target.value)} placeholder={placeholder} type={type} />
    </div>
  );
}

// Spirit beast catalog — names + traits + image paths.
const BEASTS = [
  { id:"fire-horse",  src:"art/fire-horse.jpg",  name:"Fire Horse",   element:"Fire",  trait:"Brave · Untamed · Generative",
    poem:"A horse of cinder and dawn, gallops the gold-leaf hour." },
  { id:"crane-moon",  src:"art/crane-moon.jpg",  name:"Moon Crane",   element:"Air",   trait:"Patient · Lucid · Returning",
    poem:"Twin cranes embroider the night, gilding the clouds." },
  { id:"qilin",       src:"art/qilin.jpg",       name:"Qilin",        element:"Earth", trait:"Auspicious · Guarded · Singular",
    poem:"On gold tides it rears, antlered against the maze." },
  { id:"koi",         src:"art/koi.jpg",         name:"Koi",          element:"Water", trait:"Fluid · Persistent · Becoming",
    poem:"Two koi turn the river, lotus opening to morning." },
  { id:"earth-deer",  src:"art/earth-deer.jpg",  name:"White Stag",   element:"Earth", trait:"Quiet · Knowing · Distant",
    poem:"White stag at the river-bend, watching the sky unwind." },
  { id:"soul-dragon", src:"art/soul-dragon.jpg", name:"Soul Dragon",  element:"Spirit",trait:"Coiled · Awakening · Wild",
    poem:"From an alley it rises, a dragon in the breath of a child." },
];

Object.assign(window, {
  FishLogo, BrandMark, BrandBar, Rule,
  BrowserFrame, PhoneFrame, DeviceShell,
  PaperStage, GlassField, BEASTS,
});