// ============================================================
// WIDGETS — portfolio content rendered as iOS-style bento cards
// ============================================================
const { useState, useEffect, useMemo, useRef } = React;

// ---------- Primitives ----------
const widgetStyles = {
  card: {
    background: "var(--card)",
    borderRadius: "var(--radius-lg)",
    padding: "22px 22px",
    color: "var(--ink)",
    fontFamily: "var(--mono)",
    position: "relative",
    overflow: "hidden"
  },
  label: {
    fontSize: 11,
    letterSpacing: "0.12em",
    fontWeight: 600,
    color: "var(--ink)",
    textTransform: "uppercase"
  },
  mutedLabel: {
    fontSize: 11,
    letterSpacing: "0.1em",
    color: "var(--muted)",
    textTransform: "uppercase",
    fontWeight: 500
  },
  number: {
    fontFamily: "var(--serif)",
    fontSize: 56,
    lineHeight: 1,
    letterSpacing: "-0.02em"
  },
  body: {
    fontSize: 13,
    lineHeight: 1.5,
    color: "var(--ink-soft)"
  }
};

// ---------- ALERT / INTRO (replaces FLOOD ALERT) ----------
function IntroWidget() {
  return (
    <div style={{ ...widgetStyles.card, borderRadius: 36, padding: "18px 22px", display: "flex", gap: 16, alignItems: "center" }}>
      <div style={{
        width: 56, height: 56, borderRadius: "50%",
        background: "var(--accent)",
        display: "grid", placeItems: "center",
        flexShrink: 0
      }}>
        <span style={{ color: "var(--accent-ink)", fontFamily: "var(--serif)", fontSize: 36, fontStyle: "italic", lineHeight: 1, marginTop: -2 }}>L</span>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ ...widgetStyles.label, marginBottom: 4 }}>OPEN TO WORK</div>
        <div style={{ ...widgetStyles.body, fontSize: 12.5 }}>
          UX/Product Designer · 9 yrs · Seattle → remote.
        </div>
        <a href="mailto:li.lamorena@hotmail.com" style={{
          fontSize: 12.5, color: "var(--ink)", textDecoration: "underline",
          textUnderlineOffset: 3, fontWeight: 600
        }}>Get in touch</a>
      </div>
    </div>);

}

// ---------- NOW / HOURLY (5-day client status) ----------
function NowWidget() {
  const cols = [
  { label: "'16", icon: "doc", val: "CW" },
  { label: "'19", icon: "star", val: "AMX" },
  { label: "'22", icon: "play", val: "QLS" },
  { label: "'24", icon: "heart", val: "DIS" },
  { label: "NOW", icon: "sparkle", val: "DES" }];

  return (
    <div style={{ ...widgetStyles.card, padding: "18px 18px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
        {cols.map((c, i) =>
        <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <div style={{ fontSize: 10, letterSpacing: ".08em", color: i === cols.length - 1 ? "var(--ink)" : "var(--muted)", fontWeight: 600 }}>{c.label}</div>
            <PixelIcon name={c.icon} size={22} color="var(--ink)" />
            <div style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1 }}>{c.val}</div>
          </div>
        )}
      </div>
    </div>);

}

// ---------- TODAY / WEEKLY (project list compact) ----------
function WeekWidget({ onSelect }) {
  const days = [
  { day: "GAME", title: "Chalan Che'lu", sub: "Passion", icon: "star", hi: "'22", lo: "solo" },
  { day: "VR", title: "Don't Look Away", sub: "Passion", icon: "moon", hi: "'23", lo: "solo" },
  { day: "UX", title: "ESUS Calc", sub: "Passion", icon: "bolt", hi: "'23", lo: "solo" },
  { day: "MAT", title: "Media Tagging", sub: "Disney", icon: "play", hi: "'23", lo: "team" },
  { day: "EDS", title: "Design System", sub: "Disney", icon: "figma", hi: "'24", lo: "lead" }];

  return (
    <div style={{ ...widgetStyles.card, padding: "18px 14px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 4 }}>
        {days.map((d, i) =>
        <button key={i} onClick={() => onSelect && onSelect(d.title)}
        style={{
          all: "unset", cursor: "pointer",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
          padding: "4px 2px", borderRadius: 12,
          transition: "background .15s"
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = "var(--card-2)"}
        onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
          
            <div style={{ fontSize: 10, letterSpacing: ".08em", color: "var(--muted)", fontWeight: 600 }}>{d.day}</div>
            <PixelIcon name={d.icon} size={22} color="var(--ink)" />
            <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1 }}>{d.hi}</div>
            <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 500 }}>{d.lo}</div>
          </button>
        )}
      </div>
    </div>);

}

// ---------- SIGNAL / AIR QUALITY-style gauge (availability) ----------
function AvailabilityWidget() {
  // gauge at ~75%
  const angle = -90 + 180 * 0.78;
  return (
    <div style={widgetStyles.card}>
      <div style={widgetStyles.label}>AVAILABILITY</div>
      <div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>High</div>
      <div style={{ position: "relative", width: "100%", aspectRatio: "2 / 1", marginTop: 14 }}>
        <svg viewBox="0 0 200 100" width="100%" height="100%" style={{ overflow: "visible" }}>
          {/* gauge ticks */}
          {Array.from({ length: 21 }).map((_, i) => {
            const a = -Math.PI + Math.PI * i / 20;
            const r1 = 70,r2 = i % 5 === 0 ? 82 : 78;
            const x1 = 100 + Math.cos(a) * r1;
            const y1 = 100 + Math.sin(a) * r1;
            const x2 = 100 + Math.cos(a) * r2;
            const y2 = 100 + Math.sin(a) * r2;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--ink)" strokeWidth="1" />;
          })}
          {/* arc baseline */}
          <line x1="10" y1="100" x2="190" y2="100" stroke="var(--ink)" strokeWidth="1" />
          {/* needle */}
          <g transform={`rotate(${angle} 100 100)`}>
            <line x1="100" y1="100" x2="100" y2="35" stroke="var(--ink)" strokeWidth="1.5" />
            <polygon points="100,32 96,42 104,42" fill="var(--ink)" />
          </g>
          <circle cx="100" cy="100" r="3" fill="var(--ink)" />
        </svg>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1, marginTop: 6 }}>9<span style={{ fontSize: 22, verticalAlign: "baseline" }}>yr</span></div>
    </div>);

}

// ---------- HUMIDITY-style circular (response rate) ----------
function ResponseWidget() {
  return (
    <div style={widgetStyles.card}>
      <div style={widgetStyles.label}>RESPONSE</div>
      <div style={{ display: "grid", placeItems: "center", padding: "18px 0 10px" }}>
        <div style={{
          width: 120, height: 120, borderRadius: "50%",
          background: "var(--ink)",
          display: "grid", placeItems: "center",
          color: "var(--bg)"
        }}>
          <PixelIcon name="mail" size={44} color="var(--bg)" />
        </div>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1 }}>
        &lt;24<span style={{ fontSize: 22 }}>hr</span>
      </div>
    </div>);

}

// ---------- WIND-style compass (location) ----------
function LocationWidget({ tz }) {
  return (
    <div style={widgetStyles.card}>
      <div style={widgetStyles.label}>LOCATION</div>
      <div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>Seattle · Remote</div>
      <div style={{ display: "grid", placeItems: "center", padding: "12px 0" }}>
        <div style={{ position: "relative", width: 108, height: 108 }}>
          <div style={{
            position: "absolute", inset: 0, borderRadius: "50%",
            border: "1px solid var(--ink)"
          }} />
          <div style={{
            position: "absolute", top: 8, left: "50%", transform: "translateX(-50%)",
            fontSize: 10, color: "var(--ink-soft)", fontWeight: 600
          }}>N</div>
          <div style={{
            position: "absolute", top: "50%", left: "50%",
            transform: "translate(-50%, -50%)",
            width: 72, height: 72, borderRadius: "50%",
            background: "var(--ink)",
            display: "grid", placeItems: "center"
          }}>
            <svg width="22" height="58" viewBox="0 0 22 58">
              <polygon points="11,2 4,16 11,12 18,16" fill="var(--bg)" />
              <line x1="11" y1="12" x2="11" y2="56" stroke="var(--bg)" strokeWidth="1.5" />
            </svg>
          </div>
        </div>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 28, lineHeight: 1 }}>
        {tz} <span style={{ fontSize: 13, color: "var(--muted)" }}>PST</span>
      </div>
    </div>);

}

// ---------- UV-style dome (currently working on) ----------
function NowPlayingWidget() {
  return (
    <div style={widgetStyles.card}>
      <div style={widgetStyles.label}>NOW BUILDING</div>
      <div style={{ fontWeight: 700, fontSize: 15, marginTop: 2 }}>Passion</div>
      <div style={{ display: "grid", placeItems: "center", padding: "18px 0 4px" }}>
        <svg width="120" height="80" viewBox="0 0 120 80">
          {/* dome stack like UV */}
          {[8, 18, 28, 38, 48, 58, 68].map((w, i) =>
          <ellipse key={i}
          cx="60" cy={70 - i * 4}
          rx={52 - i * 6} ry={6 - i * 0.4}
          fill="none" stroke="var(--ink)" strokeWidth="1" />

          )}
          <line x1="4" y1="72" x2="116" y2="72" stroke="var(--ink)" strokeWidth="1" />
        </svg>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1 }}>03</div>
      <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>projects in-flight</div>
    </div>);

}

// ---------- SUNSET-style (working hours) ----------
function HoursWidget({ timeStr }) {
  return (
    <div style={{ ...widgetStyles.card }}>
      <div style={widgetStyles.label}>LOCAL TIME</div>
      <div style={{ display: "grid", placeItems: "center", padding: "16px 0 6px" }}>
        <svg width="140" height="72" viewBox="0 0 140 72">
          <path d="M 10 60 A 60 60 0 0 1 130 60" fill="none" stroke="var(--ink)" strokeWidth="1" />
          <line x1="0" y1="60" x2="140" y2="60" stroke="var(--ink)" strokeWidth="1" />
          <line x1="0" y1="66" x2="140" y2="66" stroke="var(--ink)" strokeWidth="0.5" strokeDasharray="2 3" />
          {/* little sun glyph */}
          <g transform="translate(70 40)">
            <circle r="8" fill="none" stroke="var(--ink)" strokeWidth="1" />
            <line x1="0" y1="10" x2="0" y2="18" stroke="var(--ink)" strokeWidth="1" />
            <polygon points="-3,15 3,15 0,20" fill="var(--ink)" />
          </g>
        </svg>
      </div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 42, lineHeight: 1, letterSpacing: "-0.02em" }}>
        {timeStr}
      </div>
    </div>);

}

// ---------- REALFEEL big circle (years of exp) ----------
function ExperienceWidget() {
  return (
    <div style={{
      ...widgetStyles.card,
      background: "var(--ink)",
      color: "var(--bg)",
      borderRadius: "50%",
      aspectRatio: "1 / 1",
      display: "grid",
      placeItems: "center",
      padding: 24
    }}>
      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: 13, letterSpacing: ".06em", fontWeight: 500, opacity: .85 }}>
          Experience<sup style={{ fontSize: 8 }}>®</sup>
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 96, lineHeight: 1, letterSpacing: "-0.03em", marginTop: 8 }}>
          9<span style={{ fontSize: 48 }}>yr</span>
        </div>
      </div>
    </div>);

}

// ---------- Project hero card (full-width) ----------
function ProjectCard({ project }) {
  return (
    <div style={{ ...widgetStyles.card, padding: 0 }}>
      <div style={{
        aspectRatio: "16 / 9",
        background: project.bg || "var(--ink)",
        color: project.fg || "var(--bg)",
        display: "grid", placeItems: "center",
        position: "relative"
      }}>
        <div style={{ textAlign: "center", padding: 24 }}>
          <PixelIcon name={project.icon} size={64} color={project.fg || "var(--bg)"} />
          <div style={{
            fontFamily: "var(--serif)", fontSize: 42,
            marginTop: 14, letterSpacing: "-0.01em", lineHeight: 1.05
          }}>{project.title}</div>
        </div>
        <div style={{
          position: "absolute", top: 14, left: 18,
          fontSize: 10, letterSpacing: ".12em", fontWeight: 600,
          color: project.fg || "var(--bg)", opacity: .7
        }}>{project.tag}</div>
        <div style={{
          position: "absolute", top: 14, right: 18,
          fontSize: 10, letterSpacing: ".08em", fontWeight: 600,
          color: project.fg || "var(--bg)", opacity: .7
        }}>{project.year}</div>
      </div>
      <div style={{ padding: "18px 22px 22px" }}>
        <div style={{ fontSize: 13, lineHeight: 1.55, color: "var(--ink-soft)" }}>
          {project.desc}
        </div>
        <a href={project.href} target="_blank" rel="noreferrer" style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          marginTop: 14,
          fontSize: 12, fontWeight: 600,
          color: "var(--ink)", textDecoration: "underline",
          textUnderlineOffset: 3
        }}>
          Read case study
          <PixelIcon name="arrow" size={11} color="var(--ink)" style={{ transform: "rotate(90deg)" }} />
        </a>
      </div>
    </div>);

}

// ---------- Résumé widget ----------
function ResumeWidget() {
  const rows = [
  { y: "'23 →", c: "Walt Disney Company", r: "UX Designer" },
  { y: "'20 '23", c: "American Express", r: "Lead UX Designer" },
  { y: "'20",    c: "Quill's", r: "UX Designer" },
  { y: "'19 '20", c: "Camping World", r: "Digital Designer" },
  { y: "'17 '19", c: "U. of Louisville", r: "UI/UX Designer" }];

  return (
    <div style={widgetStyles.card}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div style={widgetStyles.label}>RÉSUMÉ</div>
        <a href="/resume.html"
        style={{ fontSize: 11, color: "var(--muted)", textDecoration: "underline", textUnderlineOffset: 2 }}>
          Full PDF ↗
        </a>
      </div>
      <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 0 }}>
        {rows.map((row, i) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "80px 1fr auto",
          gap: 12, alignItems: "baseline",
          padding: "10px 0",
          borderTop: i > 0 ? "1px dashed var(--rule)" : "none"
        }}>
            <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600, letterSpacing: ".04em" }}>{row.y}</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.1 }}>{row.c}</div>
            <div style={{ fontSize: 11, color: "var(--ink-soft)", textAlign: "right" }}>{row.r}</div>
          </div>
        )}
      </div>
    </div>);

}

// ---------- Contact widget ----------
function ContactWidget() {
  const items = [
  { icon: "mail", label: "Email", href: "mailto:li.lamorena@hotmail.com", text: "li.lamorena@hotmail.com" },
  { icon: "linkedin", label: "LinkedIn", href: "https://linkedin.com", text: "/in/liannalamorena" },
  { icon: "figma", label: "Figma", href: "https://figma.com", text: "@lamorena" },
  { icon: "doc", label: "Résumé", href: "/resume.html", text: "PDF · 2 pages" }];

  return (
    <div style={widgetStyles.card}>
      <div style={widgetStyles.label}>CONTACT</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 14 }}>
        {items.map((it, i) =>
        <a key={i} href={it.href} target="_blank" rel="noreferrer" style={{
          display: "flex", gap: 10, alignItems: "center",
          padding: "10px 12px",
          background: "var(--card-2)",
          borderRadius: 14,
          textDecoration: "none",
          color: "var(--ink)",
          transition: "transform .15s"
        }}
        onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
          
            <div style={{
            width: 32, height: 32, borderRadius: "50%",
            background: "var(--ink)",
            display: "grid", placeItems: "center",
            flexShrink: 0
          }}>
              <PixelIcon name={it.icon} size={14} color="var(--bg)" />
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".08em", fontWeight: 600 }}>
                {it.label.toUpperCase()}
              </div>
              <div style={{ fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {it.text}
              </div>
            </div>
          </a>
        )}
      </div>
    </div>);

}

// ---------- Skills widget ----------
function SkillsWidget() {
  const skills = [
  "UX Strategy", "Design Systems", "AI Tools", "Prototyping",
  "UX Research", "Enterprise", "Workshops", "Game Design"];

  return (
    <div style={widgetStyles.card}>
      <div style={widgetStyles.label}>EXPERTISE</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
        {skills.map((s, i) =>
        <div key={i} style={{
          fontSize: 11, fontWeight: 500,
          padding: "5px 10px",
          borderRadius: 999,
          background: "var(--card-2)",
          color: "var(--ink)"
        }}>{s}</div>
        )}
      </div>
    </div>);

}

// ---------- Footer ----------
function FooterMark() {
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "center",
      gap: 8, padding: "20px 0",
      fontSize: 11, letterSpacing: ".12em", fontWeight: 600,
      color: "var(--muted)"
    }}>
      <PixelIcon name="sparkle" size={14} color="var(--muted)" />
      LAMORENA · 2026
    </div>);

}

Object.assign(window, {
  IntroWidget, NowWidget, WeekWidget, AvailabilityWidget,
  ResponseWidget, LocationWidget, NowPlayingWidget, HoursWidget,
  ExperienceWidget, ProjectCard, ResumeWidget, ContactWidget,
  SkillsWidget, FooterMark
});