/* Wellpaged Builder Kit — bio.jsx
   The generated link-in-bio page (themed) + theme mini-thumbnails + social glyphs. */

const SOCIAL_PATHS = {
  tiktok: "M19.321 5.562a5.124 5.124 0 01-5.16-4.966h-3.364v13.74c0 1.628-1.327 2.953-2.957 2.953s-2.957-1.325-2.957-2.953 1.327-2.953 2.957-2.953c.306 0 .6.047.877.134v-3.44a6.4 6.4 0 00-.877-.06C4.315 7.017 1.5 9.828 1.5 13.336s2.815 6.319 6.34 6.319 6.34-2.811 6.34-6.319V9.482a8.48 8.48 0 005.14 1.74V7.864a5.13 5.13 0 01-.001-2.302z",
  instagram: "M12 2.163c3.204 0 3.584.012 4.849.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.849.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
  youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
  x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
  spotify: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.299z",
};
function SocialIcon({ name }) {
  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d={SOCIAL_PATHS[name]} /></svg>;
}

/* Infer a platform logo from a link's URL so highlight blocks show the right mark. */
function inferIcon(url) {
  const u = (url || "").toLowerCase();
  if (u.includes("tiktok.com")) return "tiktok";
  if (u.includes("instagram.com")) return "instagram";
  if (u.includes("youtube.com") || u.includes("youtu.be")) return "youtube";
  if (u.includes("x.com") || u.includes("twitter.com")) return "x";
  if (u.includes("spotify.com")) return "spotify";
  return null;
}

/* The generated landing page. data-theme drives the whole feeling.
   Renders a real mini landing page: category → name → tagline → about →
   featured highlights → only the socials the creator filled in. */
function BioPage({ theme, profile, links, socials }) {
  const shownSocials = (socials || []).filter((s) => s.on && s.handle);
  const fallback = !socials; // generated-page.html doesn't pass socials
  return (
    <div className="bio" data-theme={theme}>
      {theme === "soft" && <div className="bio-num" aria-hidden="true">01</div>}
      {theme === "pastel" && <React.Fragment><span className="blob p"></span><span className="blob b"></span></React.Fragment>}
      {theme === "velvet" && <React.Fragment><span className="orb r"></span><span className="orb g"></span></React.Fragment>}
      <div className="bio-inner">
        <div className="bio-avatar">{profile.initial}</div>
        {profile.category && <div className="bio-cat">{profile.category}</div>}
        <h1 className="bio-name">{profile.name}</h1>
        <div className="bio-handle">@{profile.handle}</div>
        <p className="bio-tag">{profile.tagline}</p>
        {profile.about && <p className="bio-about">{profile.about}</p>}
        <div className="bio-links">
          {links.map((l, i) => {
            const ic = l.icon || inferIcon(l.url);
            return (
              <a className={"bio-link" + (l.feat ? " feat" : "")} key={i}>
                {ic && <span className="ic"><SocialIcon name={ic} /></span>}
                <span className="lbl">{l.label}</span>
                <span className="arr">{l.feat ? "→" : "↗"}</span>
              </a>
            );
          })}
        </div>
        <div className="bio-socials">
          {fallback
            ? ["tiktok", "instagram", "youtube", "x"].map((p) => <a key={p} aria-label={p}><SocialIcon name={p} /></a>)
            : shownSocials.map((s) => <a key={s.platform} aria-label={s.platform}><SocialIcon name={s.platform} /></a>)}
        </div>
        <div className="bio-foot">Made with Wellpaged</div>
      </div>
    </div>
  );
}

/* Pick legible text for a background by luminance (some palettes are dark-on-dark,
   e.g. bold/pacman) so the thumbnail name never disappears. */
function readableOn(hex) {
  const h = (hex || "#ffffff").replace("#", "");
  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  const r = parseInt(v.slice(0, 2), 16), g = parseInt(v.slice(2, 4), 16), b = parseInt(v.slice(4, 6), 16);
  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6 ? "#0B0B12" : "#FFFFFF";
}

/* Theme picker thumbnail. `img` (a real template screenshot) wins when present;
   otherwise a typographic swatch (house themes). On image error, the theme bg shows. */
function ThemeThumb({ id, bg, fg, accent, name, img }) {
  if (img) {
    return (
      <div className="theme-thumb img" style={{ background: bg }}>
        <img src={img} alt={name + " preview"} loading="lazy" onError={(e) => { e.target.style.display = "none"; }} />
      </div>
    );
  }
  const txt = readableOn(bg);
  const fontFam = id === "neon" || id === "press" ? "'Anton',sans-serif"
    : (id === "velvet" || id === "pastel" ? "'Cormorant Garamond',serif" : "'Fraunces',serif");
  return (
    <div className="theme-thumb" style={{ background: bg, color: txt }}>
      <span className="mini-name" style={{ fontFamily: fontFam, fontStyle: id === "pastel" || id === "velvet" ? "italic" : "normal", textTransform: id === "neon" || id === "press" ? "uppercase" : "none" }}>{name}</span>
      <span style={{ position: "absolute", bottom: 12, left: 14, width: 60, height: 14, borderRadius: id === "press" ? 2 : 999, background: accent, border: "1.5px solid " + txt }}></span>
    </div>
  );
}

Object.assign(window, { BioPage, SocialIcon, ThemeThumb, inferIcon });