// HeroPhone.jsx — Code-rendered Never Forget app screen, modern iOS-26-era look.
// Uses the original hero tasks: Intro to Stoicism, Cardinal Marks, Neural Networks, Pizza Recipe.

const HP_TASKS_TODAY = [
  {
    title: "Intro to Stoicism",
    emoji: "🤔",
    time: "07:10:28 left",
    timerStyle: true,
    bg: "#B79CE8", // soft purple
    bgGrad: "linear-gradient(135deg, #C0A6EE 0%, #A98BDF 100%)",
  },
  {
    title: "Cardinal Marks",
    emoji: "🚧",
    time: "22:15:49 left",
    timerStyle: true,
    bg: "#3FB6D6",
    bgGrad: "linear-gradient(135deg, #4CC0DB 0%, #2FA8CC 100%)",
  },
];

const HP_TASKS_REPEAT = [
  {
    title: "Neural Networks",
    emoji: "🤖",
    time: "11:00 AM",
    pill: "Classic",
    bg: "#1D8E78",
    bgGrad: "linear-gradient(135deg, #2AA088 0%, #157A66 100%)",
  },
  {
    title: "Pizza Recipe",
    emoji: "🍕",
    time: "02:30 PM",
    pill: "Classic",
    bg: "#F26D6D",
    bgGrad: "linear-gradient(135deg, #F47A7A 0%, #EA5C5C 100%)",
  },
];

// ─── small icon set (original strokes, generic line glyphs) ───
const HPIcon = ({ name, size = 18, color = "currentColor", strokeWidth = 2 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "gear":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="3" />
          <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
        </svg>
      );
    case "plus":
      return (
        <svg {...common}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case "calendar":
      return (
        <svg {...common}>
          <rect x="3" y="4.5" width="18" height="17" rx="2.5" />
          <path d="M3 9.5h18M8 2.5v4M16 2.5v4" />
        </svg>
      );
    case "calendar-dot":
      return (
        <svg {...common}>
          <rect x="3" y="4.5" width="18" height="17" rx="2.5" />
          <path d="M3 9.5h18M8 2.5v4M16 2.5v4" />
          <circle cx="17" cy="17" r="3.2" fill={color} stroke="none" />
        </svg>
      );
    case "filter":
      return (
        <svg {...common}>
          <path d="M4 7h16M7 12h10M10 17h4" />
        </svg>
      );
    case "more":
      return (
        <svg {...common}>
          <circle cx="5.5" cy="12" r="1.4" fill={color} stroke="none" />
          <circle cx="12" cy="12" r="1.4" fill={color} stroke="none" />
          <circle cx="18.5" cy="12" r="1.4" fill={color} stroke="none" />
        </svg>
      );
    case "chevron":
      return (
        <svg {...common}>
          <path d="M9 6l6 6-6 6" />
        </svg>
      );
    case "search":
      return (
        <svg {...common}>
          <circle cx="11" cy="11" r="7" />
          <path d="M21 21l-4.3-4.3" />
        </svg>
      );
    case "sun":
      return (
        <svg {...common}>
          <circle cx="12" cy="12" r="4" />
          <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
        </svg>
      );
    case "grid":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <rect x="3.5" y="3.5" width="7" height="7" rx="1.6" fill={color} />
          <rect x="13.5" y="3.5" width="7" height="7" rx="1.6" fill={color} />
          <rect x="3.5" y="13.5" width="7" height="7" rx="1.6" fill={color} />
          <rect x="13.5" y="13.5" width="7" height="7" rx="1.6" fill={color} />
        </svg>
      );
    case "bell-off":
      return (
        <svg {...common}>
          <path d="M3 3l18 18" />
          <path d="M9.4 4.6A6 6 0 0 1 18 10v4l1.5 2H8" />
          <path d="M6 6.5V10c0 2.4-1 4-1.5 4.5H15" />
          <path d="M10.3 19a2 2 0 0 0 3.4 0" />
        </svg>
      );
    case "bell-fill":
      return (
        <svg width={size} height={size} viewBox="0 0 24 24">
          <path d="M12 2.5a5.5 5.5 0 0 0-5.5 5.5v3.6c0 .9-.4 1.7-1 2.4l-.9 1A1 1 0 0 0 5.3 16.5h13.4a1 1 0 0 0 .7-1.5l-.9-1c-.6-.7-1-1.5-1-2.4V8A5.5 5.5 0 0 0 12 2.5zM10.3 19a2 2 0 0 0 3.4 0z" fill={color} />
        </svg>
      );
    default:
      return null;
  }
};

// ─── status bar (generic; not Apple-branded) ───
const HPStatusBar = ({ time = "9:41" }) => (
  <div style={{
    height: 54, padding: "16px 32px 0", display: "flex",
    alignItems: "center", justifyContent: "space-between",
    fontFamily: "-apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif",
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
      <span style={{ fontSize: 17, fontWeight: 600, color: "#111", letterSpacing: -0.2 }}>{time}</span>
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
      {/* Signal */}
      <svg width="18" height="11" viewBox="0 0 18 11">
        <rect x="0" y="7" width="3" height="4" rx="0.6" fill="#111" />
        <rect x="5" y="5" width="3" height="6" rx="0.6" fill="#111" />
        <rect x="10" y="3" width="3" height="8" rx="0.6" fill="#111" />
        <rect x="15" y="0" width="3" height="11" rx="0.6" fill="#bcbcbc" />
      </svg>
      {/* Wifi */}
      <svg width="16" height="11" viewBox="0 0 16 11">
        <path d="M8 2.6c2.2 0 4.2.9 5.6 2.3l1.1-1.1A8.6 8.6 0 0 0 8 1.2 8.6 8.6 0 0 0 1.3 3.8l1.1 1.1A7.8 7.8 0 0 1 8 2.6z" fill="#111" />
        <path d="M8 6.1a4.5 4.5 0 0 1 3.2 1.3l1.1-1.1A6 6 0 0 0 8 4.6a6 6 0 0 0-4.3 1.7l1.1 1.1A4.5 4.5 0 0 1 8 6.1z" fill="#111" />
        <circle cx="8" cy="9.6" r="1.4" fill="#111" />
      </svg>
      {/* Battery */}
      <svg width="26" height="12" viewBox="0 0 26 12">
        <rect x="0.5" y="0.5" width="22" height="11" rx="3" fill="none" stroke="#111" strokeOpacity="0.4" />
        <rect x="2" y="2" width="16" height="8" rx="1.6" fill="#111" />
        <path d="M24 4.2v3.6c.7-.3 1.3-1 1.3-1.8s-.6-1.5-1.3-1.8z" fill="#111" fillOpacity="0.4" />
      </svg>
    </div>
  </div>
);

// ─── card ───
const HPTaskCard = ({ task }) => (
  <div style={{
    position: "relative",
    background: task.bgGrad || task.bg,
    borderRadius: 24,
    padding: "16px 18px 16px 16px",
    minHeight: 76,
    color: "#fff",
    boxShadow: `0 10px 24px -10px ${task.bg}80, 0 2px 4px rgba(0,0,0,0.06)`,
    display: "flex",
    alignItems: "center",
    gap: 14,
  }}>
    <div style={{
      width: 38, height: 38, borderRadius: 12,
      display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: 24, lineHeight: 1, flexShrink: 0,
      filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.18))",
    }}>{task.emoji}</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{
        fontSize: 19, fontWeight: 700, letterSpacing: -0.3,
        marginBottom: 4, lineHeight: 1.15,
      }}>{task.title}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, fontWeight: 500 }}>
        {task.timerStyle ? (
          <span style={{
            width: 8, height: 8, borderRadius: "50%",
            background: "rgba(255,255,255,0.85)",
            boxShadow: "0 0 0 2px rgba(255,255,255,0.25)",
          }} />
        ) : (
          <HPIcon name="bell-fill" size={14} color="#FFD24A" />
        )}
        <span style={{ opacity: 0.95 }}>{task.time}</span>
        {task.pill && (
          <span style={{
            background: "rgba(0,0,0,0.18)",
            borderRadius: 8,
            padding: "2px 8px 3px",
            fontSize: 11.5,
            fontWeight: 600,
            letterSpacing: 0.1,
          }}>{task.pill}</span>
        )}
      </div>
    </div>
    <div style={{ opacity: 0.85, marginRight: 2 }}>
      <HPIcon name="chevron" size={20} color="#fff" strokeWidth={2.4} />
    </div>
  </div>
);

// ─── circular glyph button ───
const HPCircle = ({ children, size = 44, bg = "#F2F2F4" }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%",
    background: bg,
    display: "flex", alignItems: "center", justifyContent: "center",
    boxShadow: "0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04)",
  }}>{children}</div>
);

// ─── pill (filter / more) ───
const HPPill = ({ children }) => (
  <div style={{
    height: 36, padding: "0 12px", borderRadius: 9999,
    background: "#F2F2F4",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
  }}>{children}</div>
);

const HPSectionHeader = ({ children }) => (
  <div style={{
    fontSize: 17, fontWeight: 700, color: "#111",
    letterSpacing: -0.3, margin: "18px 0 10px 4px",
  }}>{children}</div>
);

// ─── full screen content ───
const HeroPhoneScreen = () => (
  <div style={{
    width: "100%", height: "100%", background: "#fff",
    display: "flex", flexDirection: "column",
    fontFamily: "-apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif",
    color: "#111",
    position: "relative",
    overflow: "hidden",
  }}>
    <HPStatusBar />

    {/* Header row: gear + tasks count + plus */}
    <div style={{
      padding: "14px 22px 6px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <HPCircle>
        <HPIcon name="gear" size={20} color="#111" strokeWidth={2.2} />
      </HPCircle>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ fontSize: 13, color: "#9b9ba1", fontWeight: 500 }}>93 tasks</span>
        <HPCircle>
          <HPIcon name="plus" size={22} color="#111" strokeWidth={2.4} />
        </HPCircle>
      </div>
    </div>

    {/* Title */}
    <div style={{ padding: "6px 24px 0" }}>
      <h1 style={{
        fontSize: 30, fontWeight: 800, letterSpacing: -1,
        margin: 0, lineHeight: 1.05,
      }}>Never Forget</h1>
      <div style={{ fontSize: 13, color: "#9b9ba1", marginTop: 3, fontWeight: 500 }}>
        21 Feb 2026
      </div>
    </div>

    {/* Standalone calendar button */}
    <div style={{ padding: "14px 24px 0" }}>
      <HPCircle size={40}>
        <HPIcon name="calendar" size={18} color="#111" strokeWidth={2.2} />
      </HPCircle>
    </div>

    {/* Scroll content */}
    <div style={{ flex: 1, padding: "0 18px 120px", overflow: "hidden" }}>
      {/* Review in 24h header + filter pill on the right */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        margin: "10px 4px 10px",
      }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: "#111", letterSpacing: -0.3 }}>
          Review in 24h
        </div>
        <div style={{
          height: 32, padding: "0 4px", borderRadius: 9999,
          background: "#F2F2F4",
          display: "inline-flex", alignItems: "center", gap: 2,
          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
        }}>
          <div style={{
            width: 30, height: 28, display: "flex",
            alignItems: "center", justifyContent: "center",
          }}>
            <HPIcon name="filter" size={16} color="#111" strokeWidth={2.2} />
          </div>
          <div style={{ width: 1, height: 14, background: "#dcdce0" }} />
          <div style={{
            width: 30, height: 28, display: "flex",
            alignItems: "center", justifyContent: "center",
          }}>
            <HPIcon name="more" size={18} color="#111" strokeWidth={2.2} />
          </div>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {HP_TASKS_TODAY.map((t) => <HPTaskCard key={t.title} task={t} />)}
      </div>

      <div style={{ fontSize: 16, fontWeight: 700, color: "#111", letterSpacing: -0.3, margin: "16px 0 10px 4px" }}>
        Review today
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {HP_TASKS_REPEAT.map((t) => <HPTaskCard key={t.title} task={t} />)}
      </div>
    </div>

    {/* Floating bottom nav: segmented pill + search */}
    <div style={{
      position: "absolute", left: 0, right: 0, bottom: 24,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 18px", gap: 10,
    }}>
      <div style={{
        flex: 1,
        height: 56, borderRadius: 9999,
        background: "rgba(255,255,255,0.85)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        display: "flex", alignItems: "center",
        padding: "0 6px",
        boxShadow: "0 4px 14px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.06)",
      }}>
        {/* Today selected */}
        <div style={{
          flex: 1, height: 44,
          borderRadius: 9999,
          background: "#EAEAEC",
          display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", gap: 0,
        }}>
          <HPIcon name="sun" size={20} color="#111" strokeWidth={2.2} />
          <div style={{ fontSize: 9, fontWeight: 600, color: "#111", marginTop: 1 }}>Today</div>
        </div>
        <div style={{
          flex: 1, height: 44,
          display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center",
        }}>
          <HPIcon name="calendar-dot" size={20} color="#111" strokeWidth={2.2} />
          <div style={{ fontSize: 9, fontWeight: 600, color: "#111", marginTop: 1 }}>Upcoming</div>
        </div>
        <div style={{
          flex: 1, height: 44,
          display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center",
        }}>
          <HPIcon name="grid" size={18} color="#111" strokeWidth={2.2} />
          <div style={{ fontSize: 9, fontWeight: 600, color: "#111", marginTop: 2 }}>All</div>
        </div>
      </div>
      <HPCircle size={56} bg="rgba(255,255,255,0.85)">
        <HPIcon name="search" size={22} color="#111" strokeWidth={2.2} />
      </HPCircle>
    </div>

    {/* Home indicator */}
    <div style={{
      position: "absolute", left: "50%", bottom: 8,
      transform: "translateX(-50%)",
      width: 134, height: 5, borderRadius: 3, background: "#111",
    }} />
  </div>
);

// ─── full phone with bezel ───
const HeroPhone = ({ width = 360, height = 780 }) => {
  const bezel = 12;
  return (
    <div style={{
      width, height,
      borderRadius: 56,
      padding: bezel,
      background: "linear-gradient(180deg, #1f2226 0%, #0f1113 100%)",
      boxShadow: `
        0 50px 100px -20px rgba(15,30,55,0.28),
        0 30px 60px -25px rgba(15,30,55,0.18),
        0 0 0 1px rgba(0,0,0,0.6) inset,
        0 1px 0 rgba(255,255,255,0.06) inset
      `,
      position: "relative",
    }}>
      <div style={{
        width: "100%", height: "100%",
        borderRadius: 44,
        overflow: "hidden",
        position: "relative",
        background: "#fff",
      }}>
        {/* Dynamic-island-like pill */}
        <div style={{
          position: "absolute", top: 11, left: "50%", transform: "translateX(-50%)",
          width: 110, height: 32, borderRadius: 999, background: "#000",
          zIndex: 10,
        }} />
        <HeroPhoneScreen />
      </div>
    </div>
  );
};

Object.assign(window, { HeroPhone, HeroPhoneScreen });