// Placeholder pages — Publications & Marketplace. Filler content for now;
// wired into the router/nav. Lorem-ipsum copy stands in for real listings.
(function(){
  const { useState } = React;

  const LOREM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.";

  function SubpageHero({ eyebrow, title, lede }){
    return (
      <section className="subpage-hero">
        <div className="subpage-hero-inner">
          <div className="subpage-eyebrow"><span className="dot"/>{eyebrow}</div>
          <h1 className="subpage-h1">{title}</h1>
          <p className="subpage-lede">{lede}</p>
        </div>
      </section>
    );
  }

  // ─────────────────────────── Publications ───────────────────────────
  const PUB_SECTIONS = [
    {
      name: "VivaMed Research",
      blurb: "Peer-reviewed studies and white papers authored by the VivaMed team.",
      items: [
        { tag:"White paper", title:"Endotype stratification improves response prediction in postural orthostatic tachycardia syndrome", meta:"A. Chambers, R. Patel, et al. · VivaMed Research · March 2026" },
        { tag:"Methods",     title:"A mechanism-first taxonomy for drug repurposing across 15,493 diseases", meta:"VivaMed BioAtlas Team · Preprint · January 2026" },
        { tag:"Trial design", title:"Biomarker-enriched trial design reduces required cohort size in rare disease", meta:"L. Nguyen, S. Okafor, et al. · VivaMed Research · November 2025" },
      ],
    },
    {
      name: "Partner Publications",
      blurb: "Collaborative work co-authored with our academic and clinical partners.",
      items: [
        { tag:"Nature Comms", title:"Multi-omic validation of NET transporter loss-of-function endotypes", meta:"Stanford Neurovascular Lab · Nature Communications · 2026" },
        { tag:"Lancet Neuro", title:"Anti-CHRNA3 autoantibody profiling in autoimmune dysautonomia", meta:"Karolinska Institutet · The Lancet Neurology · 2025" },
        { tag:"Cell Rep Med", title:"Repurposing failed Phase II compounds: a collaborative framework", meta:"Oxford Drug Discovery · Cell Reports Medicine · 2025" },
      ],
    },
    {
      name: "News",
      blurb: "Announcements, press, and updates from across VivaMed.",
      items: [
        { tag:"Company", title:"VivaMed expands BioAtlas to 79,000 molecular endotypes", meta:"Company News · April 2026" },
        { tag:"Press",   title:"New partnership accelerates rare-disease asset development", meta:"Press Release · February 2026" },
        { tag:"Event",   title:"VivaMed presents at the Precision Medicine Summit", meta:"Event · December 2025" },
      ],
    },
  ];

  window.PublicationsApp = function PublicationsApp(){
    return (
      <>
        <SubpageHero
          eyebrow="Publications"
          title="Peer-reviewed research & white papers."
          lede="Published studies, platform-validation work, and scientific white papers from the VivaMed team and our partners — collected in one place."
        />
        <section className="section ph-section">
          <div className="section-inner">
            {PUB_SECTIONS.map(sec => (
              <div className="pub-block" key={sec.name}>
                <div className="pub-block-head">
                  <h2 className="pub-block-title">{sec.name}</h2>
                  <p className="pub-block-blurb">{sec.blurb}</p>
                </div>
                <div className="pub-list">
                  {sec.items.map((it,i) => (
                    <a className="pub-row" href="#" key={i} onClick={e=>e.preventDefault()}>
                      <div className="pub-row-tag">{it.tag}</div>
                      <div className="pub-row-main">
                        <div className="pub-row-title">{it.title}</div>
                        <div className="pub-row-meta">{it.meta}</div>
                        <p className="pub-row-excerpt">{LOREM}</p>
                      </div>
                      <div className="pub-row-cta">Read →</div>
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </section>
        <SiteFooter/>
        <PlaceholderStyles/>
      </>
    );
  };

  // ─────────────────────────── Marketplace ───────────────────────────
  const LISTINGS = [
    { id:"VM-1042", area:"Neurology",     phase:"Phase 2",     mech:"Selective β1-adrenoceptor modulation" },
    { id:"VM-0887", area:"Pain",          phase:"Phase 1",     mech:"Nav1.7 voltage-gated sodium channel blocker" },
    { id:"VM-2310", area:"Immunology",    phase:"Preclinical", mech:"Ganglionic nAChR autoantibody neutralization" },
    { id:"VM-0556", area:"Pulmonology",   phase:"Phase 2",     mech:"Endothelial NO pathway restoration" },
    { id:"VM-1875", area:"Psychiatry",    phase:"Phase 1",     mech:"Mast-cell tryptase stabilization" },
    { id:"VM-0420", area:"Rheumatology",  phase:"Preclinical", mech:"cAMP/PKA cascade inhibition" },
    { id:"VM-1198", area:"Neurology",     phase:"Phase 3",     mech:"HCN4 funny-current rate control" },
    { id:"VM-0733", area:"Rare disease",  phase:"Preclinical", mech:"FcRn-targeted antibody recycling blockade" },
  ];

  window.MarketplaceApp = function MarketplaceApp(){
    const [q, setQ] = useState("");
    const needle = q.trim().toLowerCase();
    const rows = needle
      ? LISTINGS.filter(l => (l.id+" "+l.area+" "+l.phase+" "+l.mech).toLowerCase().includes(needle))
      : LISTINGS;
    return (
      <>
        <SubpageHero
          eyebrow="Marketplace"
          title="De-risked drug assets, ready to license."
          lede="Browse mechanism-stratified, biomarker-enriched drug assets and revival opportunities surfaced by the BioAtlas platform."
        />
        <section className="section ph-section">
          <div className="section-inner">
            <div className="mkt-searchbar">
              <svg className="mkt-search-ico" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
                <circle cx="9" cy="9" r="6"/><path d="M14 14l4 4" strokeLinecap="round"/>
              </svg>
              <input
                className="mkt-search-input"
                type="search"
                value={q}
                onChange={e=>setQ(e.target.value)}
                placeholder="Search assets by name, area, phase, or mechanism…"
                aria-label="Search marketplace listings"
              />
              <span className="mkt-search-count">{rows.length} listing{rows.length===1?"":"s"}</span>
            </div>

            <div className="mkt-list">
              {rows.map(l => (
                <div className="mkt-listing" key={l.id}>
                  <div className="mkt-listing-main">
                    <div className="mkt-listing-head">
                      <span className="mkt-listing-id">{l.id}</span>
                      <span className="mkt-tag">{l.area}</span>
                      <span className="mkt-tag mkt-tag-phase">{l.phase}</span>
                    </div>
                    <div className="mkt-listing-mech">{l.mech}</div>
                    <p className="mkt-listing-blurb">{LOREM}</p>
                  </div>
                  <div className="mkt-listing-action">
                    <a className="btn btn-primary mkt-contact" href={`mailto:info@vivamed.com?subject=${encodeURIComponent("Asset inquiry: "+l.id)}`}>
                      Contact VivaMed about this Asset
                    </a>
                  </div>
                </div>
              ))}
              {rows.length === 0 && (
                <div className="mkt-empty">No assets match “{q}”. Try a different search.</div>
              )}
            </div>
          </div>
        </section>
        <SiteFooter/>
        <PlaceholderStyles/>
      </>
    );
  };

  // ─────────────────────────── Shared styles ───────────────────────────
  function PlaceholderStyles(){
    return (
      <style>{`
        .ph-section{ background:#F7F9FC; }
        .ph-section .section-inner{ max-width:980px; }

        /* Publications */
        .pub-block{ margin-bottom:56px; }
        .pub-block:last-child{ margin-bottom:0; }
        .pub-block-head{ margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid rgba(0,74,173,.12); }
        .pub-block-title{ font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--navy,#153145); margin:0 0 6px; }
        .pub-block-blurb{ font-size:14.5px; color:var(--muted,#5C6773); margin:0; }
        .pub-list{ display:flex; flex-direction:column; gap:12px; }
        .pub-row{
          display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:start;
          background:#fff; border:1px solid #e6edf5; border-radius:12px; padding:20px 22px;
          text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s;
        }
        .pub-row:hover{ border-color:rgba(0,74,173,.28); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,74,173,.35); }
        .pub-row-tag{
          font-family:var(--mono,"IBM Plex Mono",monospace); font-size:10.5px; letter-spacing:.04em;
          text-transform:uppercase; color:var(--primary,#004AAD); background:rgba(0,74,173,.07);
          border:1px solid rgba(0,74,173,.16); border-radius:6px; padding:5px 8px; text-align:center;
          align-self:start;
        }
        .pub-row-title{ font-size:16px; font-weight:600; color:var(--navy,#153145); line-height:1.35; margin-bottom:5px; }
        .pub-row-meta{ font-size:12.5px; color:#6B8AAB; font-family:var(--mono,"IBM Plex Mono",monospace); margin-bottom:10px; }
        .pub-row-excerpt{ font-size:14px; line-height:1.6; color:var(--muted,#5C6773); margin:0; }
        .pub-row-cta{ font-size:13px; font-weight:600; color:var(--primary,#004AAD); white-space:nowrap; align-self:center; }

        /* Marketplace */
        .mkt-searchbar{
          display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #dce6f1;
          border-radius:12px; padding:4px 16px; margin-bottom:24px; box-shadow:0 1px 2px rgba(21,49,69,.04);
        }
        .mkt-searchbar:focus-within{ border-color:var(--primary,#004AAD); box-shadow:0 0 0 3px rgba(0,74,173,.12); }
        .mkt-search-ico{ color:#7D94AB; flex-shrink:0; }
        .mkt-search-input{ flex:1; border:none; outline:none; background:transparent; font-size:15px; color:var(--navy,#153145); padding:13px 0; font-family:inherit; }
        .mkt-search-count{ font-family:var(--mono,"IBM Plex Mono",monospace); font-size:11.5px; color:var(--muted,#5C6773); white-space:nowrap; }
        .mkt-list{ display:flex; flex-direction:column; gap:12px; }
        .mkt-listing{
          display:flex; align-items:center; gap:24px; justify-content:space-between;
          background:#fff; border:1px solid #e6edf5; border-radius:12px; padding:22px 24px;
          transition:border-color .15s, box-shadow .15s;
        }
        .mkt-listing:hover{ border-color:rgba(0,74,173,.22); box-shadow:0 12px 28px -20px rgba(0,74,173,.3); }
        .mkt-listing-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
        .mkt-listing-id{ font-family:var(--mono,"IBM Plex Mono",monospace); font-size:15px; font-weight:600; color:var(--navy,#153145); letter-spacing:.02em; }
        .mkt-tag{
          font-family:var(--mono,"IBM Plex Mono",monospace); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
          color:#5C6773; background:#eef3f9; border:1px solid #dde6f0; border-radius:999px; padding:3px 9px;
        }
        .mkt-tag-phase{ color:var(--primary,#004AAD); background:rgba(0,74,173,.07); border-color:rgba(0,74,173,.16); }
        .mkt-listing-mech{ font-size:15px; font-weight:600; color:var(--navy,#153145); margin-bottom:6px; }
        .mkt-listing-blurb{ font-size:13.5px; line-height:1.55; color:var(--muted,#5C6773); margin:0; max-width:60ch; }
        .mkt-listing-action{ flex-shrink:0; }
        .mkt-contact{ white-space:nowrap; }
        .mkt-empty{ text-align:center; color:var(--muted,#5C6773); padding:48px 0; font-size:15px; }

        @media (max-width:720px){
          .pub-row{ grid-template-columns:1fr; gap:10px; }
          .pub-row-cta{ align-self:start; }
          .mkt-listing{ flex-direction:column; align-items:stretch; gap:16px; }
          .mkt-contact{ display:block; text-align:center; }
        }
      `}</style>
    );
  }

})();