// Sections.jsx — Nav, Hero, About, CV, Contact, Footer for the rococo portfolio.
(function () {
  const RED_LOGO = "assets/eli_website_logo_red.png";
  const LOGO_W = 1180;                 // hero logo width (px)
  const LOGO_RATIO = 394 / 1204;       // logo height / width
  const LOGO_H = LOGO_W * LOGO_RATIO;  // ~176.7
  const BAR_H = 58;                    // topbar height
  const HERO_GAP = 72;                 // gap between bar and big logo
  // exported so App + Hero share the same geometry
  window.__logoGeom = { LOGO_W, LOGO_H, BAR_H, HERO_GAP, y0: BAR_H + HERO_GAP, y1: 14, s1: 30 / LOGO_H, TH: 300 };

  // ── Navigation ──────────────────────────────────────────────────────
  function NavLink({ label, onClick }) {
    const [h, setH] = React.useState(false);
    return (
      <a href="#" onClick={(e) => { e.preventDefault(); onClick(); }}
        className="eli-navlink" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{
          fontFamily: '"Suisse Neue", sans-serif', fontSize: 16,
          letterSpacing: "0.04em", color: "var(--ink)", textDecoration: "none",
          opacity: h ? 0.55 : 0.9, transition: "opacity 0.15s", cursor: "pointer",
          whiteSpace: "nowrap",
        }}>{label}</a>
    );
  }

  // Persistent pink topbar with a soft, faded bottom edge (no harsh line).
  function Nav({ go }) {
    const barPink = "rgba(240,208,203,0.92)";
    return (
      <header style={{
        position: "sticky", top: 0, zIndex: 80, height: BAR_H,
        background: barPink,
        backdropFilter: "blur(7px)", WebkitBackdropFilter: "blur(7px)",
      }}>
        <nav style={{
          maxWidth: 1260, margin: "0 auto", height: BAR_H, display: "flex",
          alignItems: "center", justifyContent: "space-between", padding: "0 40px",
        }}>
          <div style={{ display: "flex", gap: 28 }}>
            <NavLink label="Works" onClick={() => go("works")} />
            <NavLink label="About" onClick={() => go("about")} />
          </div>
          <div style={{ display: "flex", gap: 28 }}>
            <NavLink label="CV" onClick={() => go("cv")} />
            <NavLink label="Contact" onClick={() => go("contact")} />
          </div>
        </nav>
        {/* faded bottom edge — the bar dissolves into the page */}
        <div aria-hidden="true" style={{
          position: "absolute", left: 0, right: 0, bottom: -18, height: 18,
          background: `linear-gradient(to bottom, ${barPink} 0%, rgba(240,208,203,0) 100%)`,
          pointerEvents: "none",
        }}></div>
      </header>
    );
  }

  // ── The single travelling logo (fixed; transform driven by App rAF) ──
  function FloatingLogo({ innerRef, onClick }) {
    const g = window.__logoGeom;
    return (
      <div ref={innerRef} onClick={onClick} aria-label="Eli Bowles — home" role="button"
        style={{
          position: "fixed", left: "50%", top: 0, zIndex: 95,
          transformOrigin: "top center", willChange: "transform", cursor: "pointer",
          transform: `translateX(-50%) translateY(${g.y0}px) scale(1)`,
        }}>
        <img src={RED_LOGO} alt="eli bowles"
          style={{ width: LOGO_W, maxWidth: "94vw", height: "auto", display: "block", pointerEvents: "none" }} />
      </div>
    );
  }

  // ── Hero ────────────────────────────────────────────────────────────
  function Hero() {
    const isMobile = window.innerWidth <= 640;
    // On mobile the logo is capped at 94vw, so use the actual rendered height
    const mobileLogoW = Math.min(LOGO_W, window.innerWidth * 0.94);
    const mobileLogoH = mobileLogoW * LOGO_RATIO;
    const spacer = isMobile
      ? (HERO_GAP + mobileLogoH) * 0.74   // mobile: raise 20%
      : (HERO_GAP + LOGO_H) * 1.32;        // desktop: unchanged
    return (
      <section style={{ textAlign: "center", padding: "0 24px" }}>
        {/* reserves the space the big fixed logo occupies at the top */}
        <div aria-hidden="true" style={{ height: spacer }}></div>
      </section>
    );
  }

  // ── Section heading ─────────────────────────────────────────────────
  function Heading({ script, title }) {
    return (
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <div style={{
          fontFamily: '"Pinyon Script", cursive', fontSize: 46,
          color: "var(--gold-deep)", lineHeight: 1, marginBottom: 4,
        }}>{script}</div>
        <h2 style={{
          fontFamily: '"Suisse Neue", sans-serif', fontWeight: 500,
          fontSize: 19, letterSpacing: "0.34em", textTransform: "uppercase",
          color: "var(--ink)", margin: "0 0 14px",
        }}>{title}</h2>
        <div style={{ display: "flex", justifyContent: "center" }}><Flourish width={260} /></div>
      </div>
    );
  }

  // ── About ───────────────────────────────────────────────────────────
  const ABOUT = [
    "Eli Bowles is an artist originally from North Carolina, who is currently based in Philadelphia. She graduated from the Maryland Institute College of Art in 2020 with a degree in Fine Arts, where she honed her skillset in garment making, printmaking, and painting. Eli draws inspiration from her Korean-American identity, using it as a wellspring of inspiration for her diverse artistic practices.",
    "Her professional journey includes significant roles in art education, art therapy, and general fine arts. While attending her undergraduate program, Eli worked at the Baltimore Museum of Art in the office of education, leading workshops for adolescents on contemporary art movements. She also served as a guide at the Walters Art Museum, helping visitors navigate and appreciate the museum's rich collection. Additionally, Eli has pursued a masters education, earning her degree in Art Therapy and Counseling at Drexel University in 2024. Her practical experience in the field includes internships at Recovery Centers of America, with a focus on addiction services. Jefferson Health, where she provided behavioral psychology support for adolescents. And Wedge Medical Center, a community based outreach program. Currently Eli is a full time employee at Behavioral Wellness at Girard. Extending help to the psychiatric population of Philadelphia in three separate extended acute units- with a focus on schizophrenia and schizoid affective disorder.",
    "Her artistic work is characterized by a blend of styles and influences, particularly the aesthetics of the Pre-Raphaelites and vintage magazine editorials. Eli explores themes of childhood nostalgia, fashion, and women's narratives, weaving these elements into her stylized portraits. She believes in the transformative power of art and storytelling, using her dual role as an artist and therapist to foster emotional connections through her work.",
    "Eli's art has been exhibited in various art therapy spaces and galleries. She is committed to celebrating the complexity of femininity and the nostalgic threads that connect us all, marking her journey of healing, understanding, and connection with herself and others.",
    "In addition to her studies at the Maryland Institute College of Art and Drexel University, Eli has attended the University of North Carolina School of the Arts, Chapel Hill, Johns Hopkins University, University of Baltimore, Korea University, School of the Arts International in Italy, and the Rhode Island School of Design. As a passionate artist and therapist, Eli continues to explore the intersections of art, identity, and mental health.",
  ];
  function About() {
    return (
      <section style={{ maxWidth: 760, margin: "0 auto", padding: "120px 40px 0" }}>
        <Heading script="a few words" title="About" />
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          {ABOUT.map((p, i) => (
            <p key={i} style={{
              fontFamily: '"Suisse Neue", sans-serif', fontSize: 19,
              lineHeight: 1.65, color: "var(--ink)", margin: 0, textAlign: "justify",
              hyphens: "auto",
            }}>{p}</p>
          ))}
        </div>
      </section>
    );
  }

  // ── CV ──────────────────────────────────────────────────────────────
  const CV = {
    "Select Group Exhibitions": [
      ["2026", "Studio 116 Art Exhibition, Studio 116, East Flay Rock, NC"],
      ["2026", "The Secret Show, Era Contemporary, Jane Gallery, Philadelphia, PA"],
      ["2024", "Art Therapy Commemoration, Drexel University, Philadelphia, PA"],
      ["2023", "Group Gallery Show, The Cliffs at Callowhill, Philadelphia, PA"],
      ["2020", "The 2020 Show, Maryland Institute College of Art, Baltimore, MD"],
    ],
    "Education": [
      ["2024", "M.A., Art Therapy & Counseling, Drexel University, Philadelphia, PA"],
      ["2020", "B.F.A., General Fine Arts, Maryland Institute College of Art, Baltimore, MD"],
    ],
    "Publications": [
      ["2018", "The Artist’s Magazine, March Submission — Create Magazine"],
    ],
  };
  function CVSection() {
    return (
      <section style={{ maxWidth: 820, margin: "0 auto", padding: "120px 40px 0" }}>
        <Heading script="curriculum vitæ" title="CV" />
        <div style={{ display: "flex", flexDirection: "column", gap: 46 }}>
          {Object.entries(CV).map(([sec, rows]) => (
            <div key={sec}>
              <h3 style={{
                fontFamily: '"Suisse Neue", sans-serif', fontStyle: "italic",
                fontWeight: 600, fontSize: 25, color: "var(--gold-deep)",
                textAlign: "center", margin: "0 0 18px",
              }}>{sec}</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {rows.map(([yr, txt], i) => (
                  <div key={i} style={{
                    display: "grid", gridTemplateColumns: "64px 1fr", gap: 20,
                    alignItems: "baseline", paddingBottom: 12,
                    borderBottom: "1px solid rgba(184,146,78,0.22)",
                  }}>
                    <span style={{
                      fontFamily: '"Suisse Neue", sans-serif', fontSize: 15,
                      letterSpacing: "0.08em", color: "var(--gold-deep)",
                    }}>{yr}</span>
                    <span style={{
                      fontFamily: '"Suisse Neue", sans-serif', fontSize: 17,
                      lineHeight: 1.5, color: "var(--ink)",
                    }}>{txt}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  // ── Contact ─────────────────────────────────────────────────────────
  function ContactLink({ label, href }) {
    const [h, setH] = React.useState(false);
    return (
      <a href={href} className="contact-link" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{
          fontFamily: '"Suisse Neue", sans-serif', fontStyle: "italic",
          fontSize: 34, color: "var(--ink)", textDecoration: "none", className: "contact-link",
          opacity: h ? 0.55 : 1, transition: "opacity 0.15s",
          borderBottom: h ? "1px solid var(--gold)" : "1px solid transparent",
          paddingBottom: 2,
        }}>{label}</a>
    );
  }
  function Contact() {
    return (
      <section style={{ maxWidth: 760, margin: "0 auto", padding: "120px 40px 0", textAlign: "center" }}>
        <Heading script="say hello" title="Contact" />
        <div style={{ display: "flex", flexDirection: "column", gap: 18, alignItems: "center" }}>
          <ContactLink label="elibowlesart@gmail.com" href="mailto:elibowlesart@gmail.com" />
          <ContactLink label="LinkedIn" href="https://www.linkedin.com/in/elizabeth-bowles-ma-396681277" />
        </div>
      </section>
    );
  }

  function Footer() {
    return (
      <footer style={{ textAlign: "center", padding: "90px 40px 70px" }}>
        <Flourish width={200} />
        <div style={{
          fontFamily: '"Suisse Neue", sans-serif', fontStyle: "italic",
          fontSize: 17, color: "var(--gold-deep)", marginTop: 18, opacity: 0.8,
        }}>Eli Bowles · Philadelphia</div>
      </footer>
    );
  }

  Object.assign(window, { Nav, FloatingLogo, Hero, Heading, About, CVSection, Contact, Footer });
})();
