// Partnerships — VivaMed Biopharma
// Aligned to the live vivamed.com/partnerships page.
window.PartnershipsApp = (function(){
const { useState, useEffect, useRef } = React;

// Partner logos consumed from window.PARTNER_LOGOS (see src/partners-data.jsx).
const PARTNER_LOGOS = window.PARTNER_LOGOS || [];

// ─────────── Hero ───────────
function PartnerHero(){
  return (
    <section className="home-hero" style={{minHeight:"72vh"}}>
      <div className="home-hero-tint" aria-hidden="true"/>
      <div className="home-hero-vignette" aria-hidden="true"/>

      <div className="home-hero-inner">
        <div className="home-pill-eyebrow hero-reveal-1">PARTNERSHIPS</div>
        <h1 className="home-h1 hero-reveal-2" style={{maxWidth:"1040px"}}>
          The Right Partners Make the Impossible Happen.
        </h1>
        <div className="home-hero-divider" aria-hidden="true"/>
        <p className="home-lede hero-reveal-3" style={{maxWidth:"780px"}}>
          At VivaMed BioPharma, partnerships are the driving force behind every breakthrough.
          We collaborate with leading academic institutions, biotech innovators, and
          forward-thinking investors to accelerate therapies that matter, because real
          progress demands more than just potential. It takes alignment, execution, and the
          right people at the table.
        </p>
        <div className="home-cta-row hero-reveal-4">
          <a className="home-cta-primary" href="mailto:info@vivamed.com">Partner with us</a>
          <a className="home-cta-secondary" href="#why">Why partner with us</a>
        </div>
      </div>
    </section>
  );
}

// ─────────── Stats strip ───────────
function PartnerStats(){
  const stats = [
    [30, "+", "University & research partners"],
    [13, "+", "Countries with active collaborations"],
    [39, "",  "Regulatory approvals supported"],
  ];
  return (
    <section className="section" style={{paddingTop:80, paddingBottom:80}}>
      <div className="section-inner">
        <div className="partner-stats">
          {stats.map(([v, suffix, l], i)=>(
            <div className="partner-stat tile-reveal" key={i} style={{"--i": i}}>
              <div className="v"><Counter value={v} suffix={suffix}/></div>
              <div className="l">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── Partner network globe ───────────
function PartnerGlobeSection(){
  // Responsive size: bigger on desktop, scaled to viewport on small screens.
  const [size, setSize] = useState(720);
  useEffect(() => {
    const onResize = () => {
      const w = window.innerWidth;
      if (w < 520) setSize(Math.min(w - 40, 420));
      else if (w < 900) setSize(560);
      else setSize(720);
    };
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return (
    <section className="section partner-globe-section" id="network">
      <div className="section-inner">
        <div className="partner-globe-head">
          <div className="section-eyebrow"><span className="line"/>OUR NETWORK</div>
          <h2 className="section-title">A global network<br/>routed through our offices.</h2>
          <p className="section-lede" style={{maxWidth:680}}>
            Every partner is connected to VivaMed HQ through the nearest of our five offices —
            so research and assets move along real relationships, not org charts.
          </p>
        </div>
        <div className="partner-globe-stage-outer">
          <window.PartnersGlobe size={size}/>
        </div>
      </div>
    </section>
  );
}

// ─────────── Why partner with us — 7 real bullets ───────────
function PartnerWhyUs(){
  const bullets = [
    "Deep operating experience across discovery, safety, and IP",
    "150+ assets developed or licensed",
    "50+ active programs in high-need categories",
    "39 regulatory approvals supported",
    "Academic collaborations across 13+ countries",
    "Flexible co-development and licensing structures",
    "A platform built for speed, not bureaucracy",
  ];
  return (
    <section className="section" id="why" style={{paddingTop:80, paddingBottom:100}}>
      <div className="section-inner">
        <div className="partner-whyus-grid">
          <div className="partner-whyus-copy">
            <div className="section-eyebrow">
              <span className="line"/>WHY PARTNER WITH US
            </div>
            <h2 className="section-title">Your science deserves more than a hopeful timeline.</h2>
            <p className="section-lede">
              At VivaMed, we know that promising therapies don't fail because the science is wrong.
              They fail because the system is slow, fragmented, and risk-averse. We built a model
              that eliminates the usual friction points: a deeply experienced operating team, real
              regulatory expertise, and the relationships needed to take ideas across the finish line.
            </p>
          </div>
          <ul className="partner-whyus-list">
            {bullets.map((b,i)=>(
              <li key={i}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#3393F0" strokeWidth="2.4" aria-hidden="true">
                  <path d="M3 8l3 3 7-7"/>
                </svg>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <style>{`
        .partner-whyus-grid {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: 72px;
          align-items: start;
        }
        @media (max-width: 900px) { .partner-whyus-grid { grid-template-columns: 1fr; gap: 40px; } }
        .partner-whyus-copy .section-eyebrow { margin-bottom: 12px; }
        .partner-whyus-copy .section-title { margin-bottom: 20px; }
        .partner-whyus-copy .section-lede { margin: 0; }
        .partner-whyus-list {
          list-style: none;
          padding: 32px 36px;
          margin: 0;
          background: #fff;
          border: 1px solid #e3ebf4;
          border-radius: 16px;
          box-shadow: 0 20px 50px -30px rgba(0, 74, 173, .22);
          display: grid;
          gap: 14px;
        }
        .partner-whyus-list li {
          display: flex;
          align-items: flex-start;
          gap: 14px;
          font-size: 16px;
          line-height: 1.55;
          color: #2a3e55;
        }
        .partner-whyus-list li svg {
          flex: 0 0 auto;
          margin-top: 4px;
        }
      `}</style>
    </section>
  );
}

// ─────────── Four value pillars (verbatim from live site) ───────────
function PartnerPillars(){
  const pillars = [
    {
      num:"01",
      title:"Deep Scientific Alignment",
      body:"We don't just license compounds — we understand them. Our team includes MDs, PhDs, patent agents, and operators who know how to evaluate, refine, and advance high-potential science.",
    },
    {
      num:"02",
      title:"Platform-Accelerated Development",
      body:"Modern tooling — including AI assistance for discovery, safety profiling, and regulatory documentation — paired with operator experience that knows when to use it. The result: years off traditional timelines, without trading away rigor.",
    },
    {
      num:"03",
      title:"Capital Formation",
      body:"VivaMed BioPharma is building a scalable capital formation model anchored in diversified drug asset portfolios and deep strategic partnerships that accelerate development while reducing risk.",
    },
    {
      num:"04",
      title:"Global Execution Infrastructure",
      body:"From regulatory support to commercialization strategy, we provide the operational power to scale science across borders. Our global partnerships span 30+ institutions in 13 countries.",
    },
  ];
  return (
    <section className="section surface" style={{paddingTop:120, paddingBottom:120}}>
      <div className="section-inner">
        <SectionHead
          eyebrow="WHAT MAKES US DIFFERENT"
          title="Four pillars, one operating model."
        />
        <div className="partner-pillars" style={{gap:28,marginTop:48}}>
          {pillars.map((p,i)=>(
            <div className="partner-pillar tile-reveal" key={i} style={{"--i": i}}>
              <div className="num">{p.num}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── Partner logo strip (18 real logos, no names, no categories) ───────────
function PartnerLogos(){
  return (
    <section className="section" style={{paddingTop:100, paddingBottom:100}}>
      <div className="section-inner">
        <SectionHead
          eyebrow="OUR PARTNERS"
          title="Collaborators advancing tomorrow's therapies."
        />
        <div className="partner-logo-strip" role="list" aria-label="VivaMed research and development partners">
          {PARTNER_LOGOS.map(p => (
            <div className="partner-logo-cell" role="listitem" key={p.file}>
              <img src={`assets/partner-logos/${p.file}`} alt={p.alt} loading="lazy"/>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .partner-logo-strip {
          margin-top: 56px;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 32px 40px;
          align-items: center;
          justify-items: center;
        }
        .partner-logo-cell {
          width: 100%;
          max-width: 180px;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .partner-logo-cell img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          filter: grayscale(1);
          opacity: 0.72;
          transition: filter 180ms ease, opacity 180ms ease;
        }
        .partner-logo-cell img:hover {
          filter: grayscale(0);
          opacity: 1;
        }
      `}</style>
    </section>
  );
}

// ─────────── Contact CTA ───────────
function PartnerCTA(){
  return (
    <section className="section" style={{paddingTop:100, paddingBottom:140, background:"#004AAD", color:"#fff"}}>
      <div className="section-inner" style={{textAlign:"center"}}>
        <h2 style={{fontSize:"clamp(36px, 5vw, 64px)", fontWeight:700, letterSpacing:"-.02em", lineHeight:1.05, margin:"0 auto 28px", maxWidth:900, color:"#fff"}}>
          Let's Connect.
        </h2>
        <p style={{fontSize:17, color:"rgba(255,255,255,.85)", maxWidth:640, margin:"0 auto 40px", lineHeight:1.65}}>
          Have a question, opportunity, or idea? Whether you're a researcher, investor, or
          potential partner, we'd love to hear from you.
        </p>
        <div style={{display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap"}}>
          <a className="home-cta-primary" style={{background:"#fff", color:"#004AAD", border:"1px solid #fff"}} href="mailto:info@vivamed.com">info@vivamed.com</a>
          <a className="home-cta-secondary" href="/people">Meet the team</a>
        </div>
      </div>
    </section>
  );
}

// ─────────── Asset screening questionnaire (compact band + modal) ───────────
function PartnerQuestionnaire(){
  const [open, setOpen] = useState(false);
  const FILE = "assets/VivaMed-TTO-Asset-Screening-Questionnaire.docx";
  const MAILTO = "mailto:info@vivamed.com?subject=" + encodeURIComponent("Asset Screening Questionnaire submission");

  useEffect(()=>{
    if(!open) return;
    const onKey = e => { if(e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return ()=>{ document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [open]);

  return (
    <section className="section surface" id="screening" style={{paddingTop:64, paddingBottom:64}}>
      <div className="section-inner">
        <div className="pq-band">
          <div className="pq-band-copy">
            <div className="section-eyebrow"><span className="line"/>FOR TECHNOLOGY TRANSFER OFFICES</div>
            <h2 className="pq-band-title">Have an asset? Start with a screening questionnaire.</h2>
          </div>
          <button className="btn btn-primary pq-open" onClick={()=>setOpen(true)}>
            Open the questionnaire
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M3 8h10M9 4l4 4-4 4"/>
            </svg>
          </button>
        </div>
      </div>

      {open && ReactDOM.createPortal(
        <div className="pq-overlay" onClick={e=>{ if(e.target === e.currentTarget) setOpen(false); }}>
          <div className="pq-modal" role="dialog" aria-modal="true" aria-labelledby="pq-modal-title">
            <button className="pq-close" onClick={()=>setOpen(false)} aria-label="Close">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"><path d="M4 4l10 10M14 4L4 14"/></svg>
            </button>
            <div className="pq-doc">
              <div className="pq-doc-ico" aria-hidden="true">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/>
                  <path d="M14 3v5h5M9 13h6M9 17h6"/>
                </svg>
              </div>
              <div>
                <div className="pq-doc-title" id="pq-modal-title">Asset Screening Questionnaire</div>
                <div className="pq-doc-meta">Fillable intake form · DOCX</div>
              </div>
            </div>
            <p className="pq-modal-lede">
              A compact intake form covering development readiness, program overview, and
              scientific &amp; translational evidence — so we can assess fit and prioritize quickly.
            </p>
            <ol className="pq-steps">
              <li><span className="pq-step-n">1</span><span>Download the fillable questionnaire.</span></li>
              <li><span className="pq-step-n">2</span><span>Complete it for your asset or program.</span></li>
              <li><span className="pq-step-n">3</span><span>Email the completed form to <a href={MAILTO}>info@vivamed.com</a>.</span></li>
            </ol>
            <a className="btn btn-primary pq-download" href={FILE} download onClick={()=>setOpen(false)}>
              Download the questionnaire
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M8 2v8m0 0l3-3m-3 3L5 7M3 13h10"/>
              </svg>
            </a>
            <div className="pq-note">Once complete, submit it to <a href={MAILTO}>info@vivamed.com</a>.</div>
          </div>
        </div>,
        document.body
      )}

      <style>{`
        .pq-band{
          display:flex; align-items:center; justify-content:space-between; gap:32px;
          background:#fff; border:1px solid #e3ebf4; border-radius:18px;
          padding:30px 36px; box-shadow:0 18px 50px -34px rgba(0,74,173,.3);
        }
        .pq-band-copy .section-eyebrow{ margin-bottom:10px; }
        .pq-band-title{ font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.02em; color:var(--navy); margin:0; line-height:1.2; max-width:30ch; }
        .pq-open{ flex:0 0 auto; }

        .pq-overlay{
          position:fixed; inset:0; z-index:120;
          background:rgba(8,20,36,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
          display:flex; align-items:center; justify-content:center; padding:24px;
          animation:pq-fade .18s ease;
        }
        @keyframes pq-fade{ from{opacity:0} to{opacity:1} }
        .pq-modal{
          position:relative; width:100%; max-width:520px;
          background:#fff; border-radius:20px; padding:36px 36px 30px;
          box-shadow:0 40px 100px -30px rgba(8,20,36,.5);
          animation:pq-rise .22s cubic-bezier(.2,.7,.2,1);
        }
        @keyframes pq-rise{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
        .pq-close{
          position:absolute; top:16px; right:16px; width:34px; height:34px;
          display:flex; align-items:center; justify-content:center;
          border:1px solid #e3ebf4; border-radius:50%; background:#fff; color:var(--muted);
          transition:background .15s, color .15s;
        }
        .pq-close:hover{ background:#f4f7fb; color:var(--navy); }
        .pq-doc{ display:flex; align-items:center; gap:16px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #eef2f7; }
        .pq-doc-ico{ flex:0 0 auto; width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,#004AAD,#3393F0); color:#fff; display:flex; align-items:center; justify-content:center; }
        .pq-doc-title{ font-size:18px; font-weight:600; color:var(--navy); letter-spacing:-.01em; }
        .pq-doc-meta{ font-family:var(--mono); font-size:11.5px; color:#6B8AAB; letter-spacing:.03em; margin-top:5px; }
        .pq-modal-lede{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0 0 22px; }
        .pq-steps{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:13px; }
        .pq-steps li{ display:flex; align-items:flex-start; gap:14px; font-size:14.5px; line-height:1.5; color:#2a3e55; }
        .pq-steps a{ color:var(--primary); font-weight:600; }
        .pq-step-n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(0,74,173,.08); color:var(--primary); border:1px solid rgba(0,74,173,.2); font-family:var(--mono); font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
        .pq-download{ width:100%; justify-content:center; font-size:15px; padding:15px 24px; }
        .pq-note{ text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }
        .pq-note a{ color:var(--primary); font-weight:600; }

        @media (max-width: 720px){
          .pq-band{ flex-direction:column; align-items:flex-start; gap:20px; padding:26px 24px; }
          .pq-open{ width:100%; justify-content:center; }
          .pq-modal{ padding:30px 22px 26px; }
        }
      `}</style>
    </section>
  );
}

// ─────────── App ───────────
function App(){
  return (
    <>
      <PartnerHero/>
      <PartnerQuestionnaire/>
      <PartnerStats/>
      <PartnerGlobeSection/>
      <PartnerWhyUs/>
      <PartnerPillars/>
      <PartnerLogos/>
      <PartnerCTA/>
      <PageFooter/>
    </>
  );
}

return App;
})();
