// All five main content sections + patch notes.

// Original stylized silhouette evoking a top-hatted sharpshooter archetype.
// Drawn from scratch in SVG — not a reproduction of any character artwork.
const ChampSilhouette = ({ size = 38 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
    <defs>
      <linearGradient id="champG" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#F0E6D2"/>
        <stop offset="100%" stopColor="#785A28"/>
      </linearGradient>
    </defs>
    {/* hat brim */}
    <path d="M6 16 L42 16 L38 18 L10 18 Z" fill="url(#champG)"/>
    {/* hat crown */}
    <path d="M14 4 L34 4 L32 16 L16 16 Z" fill="url(#champG)"/>
    {/* hat band */}
    <rect x="14" y="13" width="20" height="2" fill="#0A1428"/>
    {/* hair flowing down */}
    <path d="M11 18 Q9 30 12 44 L18 44 Q16 32 18 22 Z" fill="#C89B3C" opacity="0.85"/>
    <path d="M37 18 Q39 30 36 44 L30 44 Q32 32 30 22 Z" fill="#C89B3C" opacity="0.85"/>
    {/* face shape */}
    <path d="M18 18 Q18 30 24 36 Q30 30 30 18 Z" fill="none" stroke="#C89B3C" strokeWidth="1.1"/>
    {/* crosshair eye */}
    <circle cx="28" cy="24" r="2.2" fill="none" stroke="#0BC4E3" strokeWidth="0.9"/>
    <line x1="28" y1="21" x2="28" y2="27" stroke="#0BC4E3" strokeWidth="0.6"/>
    <line x1="25" y1="24" x2="31" y2="24" stroke="#0BC4E3" strokeWidth="0.6"/>
    {/* covered eye */}
    <line x1="18" y1="23" x2="22" y2="25" stroke="#C89B3C" strokeWidth="1"/>
  </svg>
);

const Particles = ({ count = 14 }) => {
  const items = Array.from({ length: count }).map((_, i) => {
    const left = 35 + Math.random() * 60;
    const top  = 5  + Math.random() * 90;
    const dur  = 4 + Math.random() * 5;
    const del  = Math.random() * 6;
    const sz   = 2 + Math.random() * 2.5;
    return (
      <span
        key={i}
        className="particle"
        style={{
          left: `${left}%`, top: `${top}%`,
          width: sz, height: sz,
          animationDuration: `${dur}s`,
          animationDelay: `${del}s`,
        }}
      />
    );
  });
  return <div className="particles">{items}</div>;
};

const Hero = ({ onCTA, particleCount }) => {
  const D = window.DATA;
  return (
    <div className="hero">
      <Particles count={particleCount} />
      <div className="hero-text">
        <div className="hero-eyebrow">About Me</div>
        <h1 className="hero-title">{D.name}</h1>
        <div className="hero-sub">{D.tagline}</div>
        <p className="hero-bio">{D.bio}</p>
        <div className="tag-row">
          {D.skills.map(s => <span key={s} className="tag">{s}</span>)}
        </div>
        <Brackets className="champ-card">
          <div className="champ-portrait">
            <img src={D.champion.image} alt={D.champion.name} />
          </div>
          <div className="champ-info">
            <div className="champ-label">Fav Champion</div>
            <div className="champ-name">{D.champion.name}</div>
            <div className="champ-sub">{D.champion.title}</div>
          </div>
        </Brackets>
      </div>
      <div className="hero-photo-wrap">
        <div className="hero-photo-frame">
          <img src={D.photo} alt="Connor Tan" />
        </div>
        <span className="frame-corner tl"></span>
        <span className="frame-corner tr"></span>
        <span className="frame-corner bl"></span>
        <span className="frame-corner br"></span>
      </div>
      <div className="hero-bottom">
        <div className="hero-bottom-left">
          <div className="meta">// SUMMONER · LV 19 · NA1 · WATERLOO</div>
          <a className="ugg-link" href={D.ugg.url} target="_blank" rel="noreferrer">
            ◈ {D.ugg.handle} → u.gg profile
          </a>
        </div>
        <button className="cta-btn" onClick={onCTA}>
          View My Work <I.arrow width="16" height="16"/>
        </button>
      </div>
    </div>
  );
};

const PageHead = ({ eyebrow, title, sub }) => (
  <div className="page-head">
    {eyebrow && <div className="eyebrow">{eyebrow}</div>}
    <div className="title">{title}</div>
    {sub && <div className="sub">{sub}</div>}
  </div>
);

const Experience = () => {
  const D = window.DATA;
  return (
    <div className="page">
      <PageHead title="Experience" />
      {D.experience.map((x, i) => (
        <Brackets key={i} className="xp-card">
          <div className="top">
            <div className="role">{x.role}</div>
            <div className="dates">{x.dates}</div>
          </div>
          <div className="org">{x.org}</div>
          <ul>{x.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
        </Brackets>
      ))}
    </div>
  );
};

const Projects = () => {
  const D = window.DATA;
  return (
    <div className="page">
      <PageHead title="Projects" />
      <div className="proj-grid">
        {D.projects.map((p) => (
          <Brackets key={p.name} className="proj-card">
            <div className="pname">{p.name}</div>
            <div className="ptags">
              {p.tags.map(t => <span key={t} className="ptag">{t}</span>)}
            </div>
            <div className="pdesc">{p.desc}</div>
            {p.link && (
              <div className="plinks">
                <a className="plink" href={p.link.url} target="_blank" rel="noreferrer">
                  {p.link.label}
                </a>
              </div>
            )}
          </Brackets>
        ))}
      </div>
    </div>
  );
};

const Resume = () => {
  const D = window.DATA;
  return (
    <div className="page resume-page">
      <PageHead title="Resume" />
      <Brackets className="resume-pdf-frame">
        <object
          data={`${D.resumeUrl}#toolbar=0&navpanes=0&view=FitH`}
          type="application/pdf"
          className="resume-pdf"
          aria-label="Connor Tan resume"
        >
          <iframe
            src={D.resumeUrl}
            className="resume-pdf"
            title="Connor Tan resume"
          />
          <div className="resume-pdf-fallback">
            Your browser can't display the PDF inline.{" "}
            <a href={D.resumeUrl} target="_blank" rel="noreferrer">Open it in a new tab</a>.
          </div>
        </object>
      </Brackets>
    </div>
  );
};

const Contact = () => {
  const D = window.DATA;
  const items = [
    { icon: I.github,   name: "GitHub",   handle: "github.com/ConnorXTan",      url: D.github },
    { icon: I.linkedin, name: "LinkedIn", handle: "linkedin.com/in/connorxtan", url: D.linkedin },
    { icon: I.mail,     name: "Email",    handle: D.email,                       url: `mailto:${D.email}` },
    { icon: I.shield,   name: "U.GG",     handle: D.ugg.handle,                  url: D.ugg.url },
  ];
  return (
    <div className="page">
      <PageHead title="Contact" />
      <div className="contact-list">
        {items.map(c => (
          <a key={c.name} href={c.url} target="_blank" rel="noreferrer" className="contact-row">
            <div className="avatar"><c.icon width="20" height="20" /></div>
            <div>
              <div className="name">{c.name}</div>
              <div className="handle">{c.handle}</div>
            </div>
            <span className="muted mono" style={{ fontSize: 11 }}>OPEN</span>
            <span className="arrow">→</span>
          </a>
        ))}
      </div>
    </div>
  );
};

const Journal = () => {
  const D = window.DATA;
  const entries = D.journal || [];
  const [openIdx, setOpenIdx] = React.useState(null);

  React.useEffect(() => {
    if (openIdx === null) return;
    const onKey = (e) => { if (e.key === "Escape") setOpenIdx(null); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [openIdx]);

  const open = openIdx !== null ? entries[openIdx] : null;

  return (
    <div className="page journal-page">
      <PageHead title="Journal" />
      <div className="journal-grid">
        {entries.map((e, i) => (
          <article
            key={i}
            className="journal-card"
            onClick={() => setOpenIdx(i)}
            onKeyDown={(ev) => { if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); setOpenIdx(i); } }}
            role="button"
            tabIndex={0}
          >
            <div className="jc-img">
              <img
                src={e.image}
                alt={e.title || ""}
                loading="lazy"
                style={e.objectPosition ? { objectPosition: e.objectPosition } : undefined}
              />
            </div>
            <div className="jc-body">
              {e.title && <div className="jc-title">{e.title}</div>}
              <p className="jc-desc">{e.desc}</p>
            </div>
          </article>
        ))}
      </div>

      {open && ReactDOM.createPortal(
        (
          <div
            className="journal-lightbox"
            role="dialog"
            aria-modal="true"
            onClick={() => setOpenIdx(null)}
          >
            <button
              type="button"
              className="jl-close"
              aria-label="Close"
              onClick={(ev) => { ev.stopPropagation(); setOpenIdx(null); }}
            >
              ×
            </button>
            <figure className="jl-figure" onClick={(ev) => ev.stopPropagation()}>
              <img src={open.image} alt={open.title || ""} className="jl-img" />
              {open.desc && <figcaption className="jl-caption">{open.desc}</figcaption>}
            </figure>
          </div>
        ),
        document.body
      )}
    </div>
  );
};

const PatchNotes = () => {
  const D = window.DATA;
  return (
    <div className="page">
      <PageHead eyebrow="PATCH NOTES" title="Recent Updates" />
      <div className="patch-list">
        {D.patchNotes.map((p, i) => (
          <Brackets key={i} className="patch-entry">
            <div className="pmeta">
              <div className="pver">PATCH {p.version}</div>
              <div className="pdate">{p.date}</div>
              <div className={`ptag-pill ${p.tag}`}>{p.tagLabel}</div>
            </div>
            <h4>{p.title}</h4>
            <p>{p.body}</p>
          </Brackets>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Hero, Experience, Projects, Resume, Contact, PatchNotes, Journal });