// Book cover placeholder — gradient fake covers by hue
function Cover({ title, subtitle, hue = 20, dark = true, style = {} }) {
  const bg = dark
    ? `linear-gradient(140deg, hsl(${hue}, 30%, 12%), hsl(${hue}, 45%, 28%) 55%, hsl(${hue}, 55%, 55%))`
    : `linear-gradient(140deg, hsl(${hue}, 40%, 75%), hsl(${hue}, 60%, 55%) 55%, hsl(${hue}, 55%, 30%))`;
  return (
    <div style={{
      width: "100%", aspectRatio: "2/3", borderRadius: 8,
      boxShadow: "0 2px 6px rgba(20,20,20,0.18), 0 8px 20px rgba(20,20,20,0.12)",
      background: bg, color: "#fff", padding: 8,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      fontFamily: "'Nunito',sans-serif", fontWeight: 900,
      textShadow: "0 1px 3px #0009", position: "relative", overflow: "hidden",
      ...style
    }}>
      <div style={{ fontSize: 10, opacity: 0.85, textTransform: "uppercase", letterSpacing: "0.08em" }}>{subtitle}</div>
      <div style={{ fontSize: 13, lineHeight: 1.1, textTransform: "uppercase" }}>{title}</div>
    </div>
  );
}

function Tag({ children, color = "#FF7A1A" }) {
  return <span style={{
    background: color, color: "#fff", fontSize: 10, fontWeight: 800,
    padding: "2px 7px", borderRadius: 4, letterSpacing: "0.04em",
    display: "inline-block"
  }}>{children}</span>;
}

function FolderTabs({ tabs, active, onChange }) {
  return (
    <div style={{ background: "#FED605", display: "flex", padding: "8px 12px 0", gap: 2 }}>
      {tabs.map(t => (
        <div key={t} onClick={() => onChange(t)} style={{
          padding: "10px 16px", fontWeight: 800, fontSize: 15, cursor: "pointer",
          color: active === t ? "#0A0A0A" : "rgba(10,10,10,0.55)",
          background: active === t ? "#fff" : "transparent",
          borderRadius: "14px 14px 0 0",
          boxShadow: active === t ? "0 -2px 6px rgba(0,0,0,.04)" : "none",
          position: "relative", top: active === t ? 1 : 0,
        }}>{t}</div>
      ))}
    </div>
  );
}

function SearchPill({ placeholder = "Story name" }) {
  return (
    <div style={{
      background: "#F5F5F5", borderRadius: 14, padding: "11px 14px",
      margin: "10px 16px 14px", color: "#A3A3A3", fontSize: 14,
      display: "flex", alignItems: "center", gap: 8,
    }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
        <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
      </svg>
      {placeholder}
    </div>
  );
}

function HeroBanner({ title, italic, badge, subtitle, hue = 28 }) {
  return (
    <div style={{
      height: 170, borderRadius: 16, margin: "0 16px 14px", overflow: "hidden",
      boxShadow: "0 1px 2px rgba(20,20,20,0.04), 0 4px 16px rgba(20,20,20,0.06)",
      background: `linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%), linear-gradient(135deg, hsl(${hue},30%,15%), hsl(${hue},45%,35%) 40%, hsl(${hue},60%,60%))`,
      position: "relative", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: 14,
    }}>
      <div style={{
        fontFamily: "Georgia,serif", fontWeight: 800, color: "#F5E1A8",
        textShadow: "0 2px 6px #0009", lineHeight: 1, letterSpacing: ".04em"
      }}>
        <div style={{ fontSize: 30 }}>{title}</div>
        <div style={{ fontSize: 20, fontStyle: "italic", margin: "2px 0" }}>{italic}</div>
      </div>
      <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 8 }}>
        <Tag>{badge}</Tag>
        <span style={{ color: "#fff", fontSize: 13, fontWeight: 700 }}>{subtitle}</span>
      </div>
    </div>
  );
}

function AvatarRow({ name }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10, margin: "0 16px 14px",
      padding: "10px 14px", background: "#fff", borderRadius: 14,
      boxShadow: "0 1px 2px rgba(20,20,20,0.04), 0 4px 16px rgba(20,20,20,0.06)"
    }}>
      <div style={{ width: 36, height: 36, borderRadius: "50%", background: "linear-gradient(135deg,#FFB800,#FF7A1A)" }} />
      <div>
        <div style={{ fontSize: 14, fontWeight: 700, color: "#0A0A0A" }}>Who Are You, My Husband</div>
        <div style={{ fontSize: 11, color: "#737373", display: "flex", alignItems: "center", gap: 4 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#FED605", display: "inline-block" }} />
          MatanguihanHeide
        </div>
      </div>
    </div>
  );
}

function SectionHeader({ title, rightAction }) {
  return (
    <div style={{ display: "flex", flexWrap: "nowrap", alignItems: "center", justifyContent: "space-between", gap: 10, margin: "14px 16px 10px" }}>
      <div style={{ fontSize: 18, fontWeight: 800, color: "#0A0A0A", minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</div>
      {rightAction && <div style={{ fontSize: 12, color: "#737373", fontWeight: 600, whiteSpace: "nowrap", flex: "none" }}>{rightAction}</div>}
    </div>
  );
}

function BookCell({ title, chapter, hue }) {
  return (
    <div style={{ display:"flex", flexDirection:"column" }}>
      <Cover title={title} subtitle="" hue={hue} />
      <div style={{ fontSize: 12, fontWeight: 700, color: "#0A0A0A", marginTop: 8, lineHeight: 1.25,
        display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
        height: `${Math.round(12*1.25*2)}px` }}>{title}</div>
      <div style={{ fontSize: 11, color: "#737373", marginTop: 2, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis" }}>{chapter}</div>
    </div>
  );
}

// Bottom tab bar
function TabBar({ active, onChange }) {
  const tabs = [
    { id: "discover", label: "Discover", icon: "compass" },
    { id: "library",  label: "Library",  icon: "book" },
    { id: "rewards",  label: "Rewards",  icon: "gift" },
    { id: "me",       label: "Me",       icon: "user" },
  ];
  return (
    <div style={{
      height: 56, borderTop: "1px solid #EFEFEF", background: "#fff",
      display: "flex", alignItems: "stretch",
    }}>
      {tabs.map(t => (
        <div key={t.id} onClick={() => onChange(t.id)} style={{
          flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          gap: 2, cursor: "pointer",
          color: active === t.id ? "#0A0A0A" : "#A3A3A3",
        }}>
          <TabIcon name={t.icon} active={active === t.id} />
          <div style={{ fontSize: 10, fontWeight: active === t.id ? 800 : 600 }}>{t.label}</div>
        </div>
      ))}
    </div>
  );
}

function TabIcon({ name, active }) {
  const stroke = active ? "#0A0A0A" : "#A3A3A3";
  const fill = active ? "#FED605" : "none";
  const common = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "compass") return (
    <svg {...common}><circle cx="12" cy="12" r="9" fill={fill}/><path d="M16 8l-2.5 5.5L8 16l2.5-5.5z" stroke={active?"#0A0A0A":stroke} fill={active?"#0A0A0A":"none"}/></svg>
  );
  if (name === "book") return (
    <svg {...common}><path d="M4 5a2 2 0 012-2h11v16H6a2 2 0 00-2 2V5z" fill={fill}/><path d="M17 3v18"/></svg>
  );
  if (name === "gift") return (
    <svg {...common}><rect x="3" y="8" width="18" height="12" rx="2" fill={fill}/><path d="M12 8v12M3 12h18M7 8c0-2 2-4 5-4s5 2 5 4"/></svg>
  );
  if (name === "user") return (
    <svg {...common}><circle cx="12" cy="8" r="4" fill={fill}/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>
  );
  return null;
}

// Expose
Object.assign(window, { Cover, Tag, FolderTabs, SearchPill, HeroBanner, AvatarRow, SectionHeader, BookCell, TabBar });