/* research-hub-app.jsx — Standalone Research Hub page app */

/* Platform sign-in target (OnCourt platform, separate deploy on a subdomain). */
var PLATFORM_URL = 'https://app.oncourtdata.com';

/* ── Scroll reveal hook ────────────────────────────────────────── */
function useScrollReveal(threshold = 0.15) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
}

function RevealDiv({ children, style, delay = 0, ...rest }) {
  const [ref, vis] = useScrollReveal(0.12);
  return React.createElement('div', {
    ref,
    style: {
      ...style,
      opacity: vis ? 1 : 0,
      transform: vis ? 'translateY(0)' : 'translateY(28px)',
      transition: 'opacity 0.7s cubic-bezier(0.16,1,0.3,1) ' + delay + 's, transform 0.7s cubic-bezier(0.16,1,0.3,1) ' + delay + 's'
    },
    ...rest
  }, children);
}

/* ── Icons ─────────────────────────────────────────────────────── */
function DownloadIcon() {
  return React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
    React.createElement('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3' })
  );
}

function CalendarIcon() {
  return React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
    React.createElement('rect', { x: 3, y: 4, width: 18, height: 18, rx: 2 }),
    React.createElement('path', { d: 'M16 2v4M8 2v4M3 10h18' })
  );
}

/* ── Nav ────────────────────────────────────────────────────────── */
function ResearchNav() {
  const { Button } = window.OnCourtDesignSystem_dbd40f;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navStyles = {
    position: 'fixed',
    top: 0, left: 0, right: 0,
    zIndex: 100,
    padding: scrolled ? '14px var(--gutter)' : '22px var(--gutter)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    background: scrolled ? 'rgba(27,27,32,0.92)' : 'transparent',
    backdropFilter: scrolled ? 'blur(16px)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
    borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : '1px solid transparent',
    transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)'
  };

  const linkStyle = {
    fontFamily: 'var(--font-sans)',
    fontSize: 'var(--fs-body-sm)',
    fontWeight: 'var(--weight-medium)',
    color: 'var(--bone-200)',
    textDecoration: 'none',
    opacity: 0.8,
    transition: 'opacity 0.15s',
    cursor: 'pointer'
  };

  const activeLinkStyle = {
    ...linkStyle,
    opacity: 1,
    color: 'var(--flame-400)'
  };

  const links = [
    { label: 'About', href: 'index.html#about', active: false },
    { label: 'Services', href: 'index.html#services', active: false },
    { label: 'Research Hub', href: '#', active: true }
  ];

  return React.createElement('nav', { style: navStyles },
    React.createElement('a', { href: 'index.html' },
      React.createElement('img', {
        src: 'assets/oncourt-horizontal-reversed.png',
        alt: 'OnCourt',
        style: { height: scrolled ? 22 : 26, transition: 'height 0.35s ease' }
      })
    ),
    React.createElement('div', { className: 'oc-nav-desktop', style: { display: 'flex', alignItems: 'center', gap: 'var(--space-7)' } },
      React.createElement('div', { style: { display: 'flex', gap: 'var(--space-6)' } },
        links.map(l =>
          React.createElement('a', {
            key: l.label,
            href: l.href,
            style: l.active ? activeLinkStyle : linkStyle,
            onMouseEnter: e => { if (!l.active) e.target.style.opacity = 1; },
            onMouseLeave: e => { if (!l.active) e.target.style.opacity = 0.8; }
          }, l.label)
        )
      ),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-3)' } },
        // Download
        React.createElement('a', {
          href: '#', 'aria-label': 'Download App',
          style: {
            width: 36, height: 36, borderRadius: '50%',
            background: 'var(--flame-500)', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none', transition: 'opacity 0.15s', cursor: 'pointer'
          },
          onMouseEnter: function(e) { e.currentTarget.style.opacity = '0.85'; },
          onMouseLeave: function(e) { e.currentTarget.style.opacity = '1'; }
        }, React.createElement(DownloadIcon)),
        // Book Consultation
        React.createElement('a', {
          href: 'https://calendly.com/oncourtdata/30min', target: '_blank', rel: 'noopener noreferrer', 'aria-label': 'Book a Consultation',
          style: {
            width: 36, height: 36, borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.25)', background: 'transparent', color: 'var(--bone-200)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none', transition: 'all 0.15s', cursor: 'pointer'
          },
          onMouseEnter: function(e) { e.currentTarget.style.borderColor = 'var(--flame-500)'; e.currentTarget.style.color = 'var(--flame-500)'; },
          onMouseLeave: function(e) { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; e.currentTarget.style.color = 'var(--bone-200)'; }
        }, React.createElement(CalendarIcon)),
        // Control Panel Sign-In
        React.createElement('a', {
          href: PLATFORM_URL, target: '_blank', rel: 'noopener noreferrer', 'aria-label': 'Control Panel Sign-In',
          style: {
            height: 36, borderRadius: 18,
            border: '1px solid rgba(255,255,255,0.25)', background: 'transparent', color: 'var(--bone-200)',
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '0 14px',
            fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-caption)', fontWeight: 'var(--weight-medium)',
            letterSpacing: '0.02em',
            textDecoration: 'none', transition: 'all 0.15s', cursor: 'pointer', whiteSpace: 'nowrap'
          },
          onMouseEnter: function(e) { e.currentTarget.style.borderColor = 'var(--flame-500)'; e.currentTarget.style.color = 'var(--flame-500)'; },
          onMouseLeave: function(e) { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; e.currentTarget.style.color = 'var(--bone-200)'; }
        },
          React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
            React.createElement('rect', { x: 3, y: 3, width: 7, height: 7, rx: 1 }),
            React.createElement('rect', { x: 14, y: 3, width: 7, height: 7, rx: 1 }),
            React.createElement('rect', { x: 3, y: 14, width: 7, height: 7, rx: 1 }),
            React.createElement('rect', { x: 14, y: 14, width: 7, height: 7, rx: 1 })
          ),
          'Control Panel Sign-In'
        )
      )
    ),
    /* Burger (mobile only) */
    React.createElement('button', {
      className: 'oc-burger', 'aria-label': 'Open menu', onClick: () => setMenuOpen(true),
      style: {
        display: 'none', background: 'transparent', border: 'none', cursor: 'pointer',
        width: 42, height: 42, padding: 9, borderRadius: 10, alignItems: 'center', justifyContent: 'center'
      }
    },
      React.createElement('svg', { width: 26, height: 26, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--bone-100)', strokeWidth: 2, strokeLinecap: 'round' },
        React.createElement('path', { d: 'M3 6h18M3 12h18M3 18h18' })
      )
    ),
    /* Mobile drawer */
    React.createElement(ResearchMobileMenu, { open: menuOpen, onClose: () => setMenuOpen(false), links: links })
  );
}

/* ── Mobile nav drawer ─────────────────────────────────────────── */
function ResearchMobileMenu({ open, onClose, links }) {
  const rowBase = {
    display: 'flex', alignItems: 'center', gap: 12, height: 50,
    padding: '0 16px', borderRadius: 12,
    fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-body)', fontWeight: 'var(--weight-medium)',
    textDecoration: 'none', cursor: 'pointer', transition: 'all 0.15s'
  };
  return React.createElement('div', {
    className: 'oc-mobile-menu' + (open ? ' open' : ''),
    style: { position: 'fixed', inset: 0, zIndex: 200, display: 'none' }
  },
    React.createElement('div', {
      onClick: onClose,
      style: { position: 'absolute', inset: 0, background: 'rgba(15,15,18,0.6)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' }
    }),
    React.createElement('div', {
      style: {
        position: 'absolute', top: 0, right: 0, bottom: 0,
        width: 'min(84vw, 320px)', background: 'var(--graphite-900)',
        borderLeft: '1px solid rgba(255,255,255,0.08)', boxShadow: '-12px 0 44px rgba(0,0,0,0.5)',
        display: 'flex', flexDirection: 'column', padding: '18px 18px 24px',
        transform: open ? 'translateX(0)' : 'translateX(100%)',
        transition: 'transform 0.32s cubic-bezier(0.16,1,0.3,1)'
      }
    },
      React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-6)' } },
        React.createElement('img', { src: 'assets/oncourt-horizontal-reversed.png', alt: 'OnCourt', style: { height: 22 } }),
        React.createElement('button', {
          'aria-label': 'Close menu', onClick: onClose,
          style: { background: 'transparent', border: 'none', cursor: 'pointer', width: 38, height: 38, padding: 7, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }
        },
          React.createElement('svg', { width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--bone-100)', strokeWidth: 2, strokeLinecap: 'round' },
            React.createElement('path', { d: 'M18 6L6 18M6 6l12 12' })
          )
        )
      ),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column' } },
        links.map(l =>
          React.createElement('a', {
            key: l.label, href: l.href, onClick: onClose,
            style: {
              fontFamily: 'var(--font-display)', fontSize: 'var(--fs-h4)', fontWeight: 'var(--weight-medium)',
              color: l.active ? 'var(--flame-400)' : 'var(--bone-100)', textDecoration: 'none',
              padding: '15px 2px', borderBottom: '1px solid rgba(255,255,255,0.07)'
            }
          }, l.label)
        )
      ),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginTop: 'auto' } },
        React.createElement('a', {
          href: '#', onClick: onClose,
          style: { ...rowBase, background: 'var(--flame-500)', color: '#fff' }
        }, React.createElement(DownloadIcon), 'Download the App'),
        React.createElement('a', {
          href: 'https://calendly.com/oncourtdata/30min', target: '_blank', rel: 'noopener noreferrer', onClick: onClose,
          style: { ...rowBase, border: '1px solid rgba(255,255,255,0.2)', color: 'var(--bone-100)' }
        }, React.createElement(CalendarIcon), 'Book a Consultation'),
        React.createElement('a', {
          href: PLATFORM_URL, target: '_blank', rel: 'noopener noreferrer', onClick: onClose,
          style: { ...rowBase, border: '1px solid rgba(255,255,255,0.2)', color: 'var(--bone-100)' }
        },
          React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
            React.createElement('rect', { x: 3, y: 3, width: 7, height: 7, rx: 1 }),
            React.createElement('rect', { x: 14, y: 3, width: 7, height: 7, rx: 1 }),
            React.createElement('rect', { x: 3, y: 14, width: 7, height: 7, rx: 1 }),
            React.createElement('rect', { x: 14, y: 14, width: 7, height: 7, rx: 1 })
          ),
          'Control Panel Sign-In'
        )
      )
    )
  );
}

/* ── Legal Modal (shared) ──────────────────────────────────────── */
var LEGAL_CONTENT_HUB = {
  privacy: {
    title: 'Privacy Policy',
    effective: 'Effective date: 21 June 2026 · Last updated: 21 June 2026',
    body: [
      { h2: null, p: 'OnCourt is built to help athletes develop through objective performance assessment and longitudinal tracking. Protecting the people behind that data — especially young athletes and their families — is fundamental to how we operate. This Privacy Policy explains what data we collect, how we use it, how we keep sensitive data safe, and the rights you have. It is written to align with Egypt\'s Personal Data Protection Law No. 151 of 2020 and the EU General Data Protection Regulation (GDPR). If you have any questions about this policy or your data, contact us at oncourtdata@gmail.com.' },
      { h2: '1. Who we are', p: 'OnCourt operates the OnCourt platform and website at www.oncourtdata.com (the "Service") and is responsible for the personal data described in this policy. We are based in Egypt. If you are in the European Economic Area (EEA), you also have the right to contact your local data protection authority.' },
      { h2: '2. Who this policy covers', p: 'This policy covers account holders — the adults who create and manage accounts (parents/guardians, coaches, academy staff, technical directors); athletes, including minors under 18, whose performance and development data is held in the Service; and website visitors and prospective customers. OnCourt is not intended for a minor to open their own account. Where data about a minor is held, an account holder with parental responsibility must have provided consent.' },
      { h2: '3. The data we collect', p: 'We collect identity and account data (name, role, username, password stored hashed); contact data (email, phone, organisation/academy name); athlete profile data; performance and assessment data (physical, technical and fitness assessments, test scores, longitudinal progress); health-related and body metrics as sensitive data; media you choose to upload; payment and billing details; and usage and technical data. We collect only what we need to deliver and improve the Service.' },
      { h2: '4. Children\'s data and parental consent', p: 'Account holders must be adults (18+). A minor may not create or operate their own account. Before any minor\'s data is collected, the account holder must confirm they hold parental responsibility for the athlete and give explicit consent. Under Egyptian law, children\'s data is treated as sensitive personal data and requires explicit written guardian consent. We do not use minors\' data for advertising.' },
      { h2: '5. Sensitive data — and how we keep it safe', p: 'Sensitive data is processed only with explicit consent; it is never used in identifiable form for research, benchmarking, marketing or model development; and it is protected with stronger access controls, encryption and need-to-know restrictions.' },
      { h2: '6. How we use your data, and our legal basis', p: 'We use data to create and manage accounts and deliver the Service (contract); record and display assessments and longitudinal progress (contract and explicit consent for sensitive data); process a minor\'s data (explicit parental/guardian consent); improve and secure the Service (legitimate interests); process billing and payments (contract and legal obligation); send service and security communications (contract/legitimate interests); and send marketing communications (consent, which you can withdraw at any time).' },
      { h2: '7. Purpose limitation', p: 'We collect data for the specified, legitimate purposes above and do not use it in incompatible ways. Using anonymised data for research, benchmarking and statistics is treated as compatible with the original purpose.' },
      { h2: '8. Anonymised and aggregated data for research and benchmarking', p: 'Before any personal data is used for research, benchmarking, or to develop and improve our models, we remove direct identifiers and combine it with data from many other athletes so that no individual can be identified, directly or indirectly. We do not sell personal data. Sensitive data is never used for research in identifiable form.' },
      { h2: '9. Who we share data with', p: 'We share personal data only with service providers who help us run the Service; your organisation where you joined via an academy or club; authorities where required by law; and a successor entity in a merger or acquisition. We do not sell personal data and do not share identifiable data for third-party advertising.' },
      { h2: '10. International data transfers', p: 'We may use trusted service providers located outside Egypt. Where we do, we make sure the data stays protected with appropriate safeguards consistent with applicable law.' },
      { h2: '11. How we keep data secure', p: 'We use technical and organisational measures to protect personal data — including encryption in transit and at rest, role-based access controls, hashed credentials, logging and monitoring, and staff confidentiality obligations. Sensitive data is subject to additional restrictions.' },
      { h2: '12. Your rights', p: 'Subject to applicable law, you can access the data we hold; correct inaccurate or incomplete data; delete data; restrict or object to processing; withdraw consent at any time; receive your data in a portable format; object to marketing; and complain to the relevant data protection authority. Contact us at oncourtdata@gmail.com.' },
      { h2: '13. Data retention', p: 'We keep personal data only as long as necessary for the purposes described in this policy or as required by law. Anonymised and aggregated data may be kept indefinitely.' },
      { h2: '14. Cookies and tracking', p: 'We use strictly necessary, functional and analytics cookies to operate and improve the Service. You can control cookies through your browser settings. We do not use advertising or tracking cookies on minors.' },
      { h2: '15. Changes to this policy', p: 'We may update this policy from time to time. We will notify you of material changes, and where a change relies on consent we will ask for fresh consent.' },
      { h2: '16. Contact', p: 'Questions about this policy or your data: oncourtdata@gmail.com. Phone: +20 127 168 6841.' }
    ]
  },
  terms: {
    title: 'Terms & Conditions',
    effective: 'Effective date: 21 June 2026 · Last updated: 21 June 2026',
    body: [
      { h2: null, p: 'These Terms & Conditions govern your use of the OnCourt platform and services. Please read them together with our Privacy Policy. They are written to align with Egyptian law and the EU GDPR.' },
      { h2: '1. Agreement to these Terms', p: 'These Terms & Conditions are a binding agreement between you and OnCourt, which operates the platform and website at www.oncourtdata.com (the "Service"). By creating an account or using the Service, you agree to these Terms and to our Privacy Policy. If you do not agree, do not use the Service.' },
      { h2: '2. Definitions', p: '"Account Holder" / "you" — the adult who registers for and operates an account. "Athlete" — an individual whose performance and development data is held in the Service, including minors under 18. "Athlete Data" — data you or your organisation submit about an Athlete. "Anonymised/Aggregated Data" — data processed so that no individual can be identified. "Content" — any data, text, assessment, image or material submitted to the Service.' },
      { h2: '3. Eligibility and parental consent', p: 'You must be at least 18 years old to hold an account. Minors may not register or operate their own account. Where you add or manage an Athlete who is a minor, you confirm that you hold parental responsibility for that Athlete, or have the verifiable written consent of the Athlete\'s parent or guardian, before submitting any of the Athlete\'s data.' },
      { h2: '4. Accounts and security', p: 'Provide accurate, current registration information and keep it up to date. Keep your login credentials confidential; you are responsible for activity under your account. Notify us immediately of any unauthorised use or security incident.' },
      { h2: '5. Licence to use the Service', p: 'Subject to these Terms, we grant you a limited, non-exclusive, non-transferable, revocable licence to access and use the Service for its intended purpose: objective athlete assessment, benchmarking and development tracking. We may update, change or discontinue features at any time.' },
      { h2: '6. Acceptable use', p: 'You agree not to submit Athlete Data without the required consent; upload unlawful, infringing or harmful content; attempt to re-identify any Anonymised/Aggregated Data; reverse engineer, scrape, overload or interfere with the Service; resell or provide the Service to third parties except as expressly permitted; or use the Service to make medical, diagnostic or clinical decisions.' },
      { h2: '7. Your Content and data ownership', p: 'You retain ownership of the Content and Athlete Data you submit. You grant us a licence to host, process and display your Content solely to provide and support the Service. You agree that we may anonymise and aggregate Content and Athlete Data and use the resulting data for research and benchmarking. We do not sell personal data, and sensitive or identifiable data is never used for research in identifiable form.' },
      { h2: '8. Intellectual property', p: 'The Service — including its software, models, benchmarks, design, methodology and brand — is owned by OnCourt and its licensors. Except for the licence in Section 5, no rights are granted to you. The OnCourt name and logo may not be used without our written permission.' },
      { h2: '9. How anonymised data works', p: 'Before any Content is used for research or product development, we remove direct identifiers and combine it with data from many other Athletes so that no individual can be identified, directly or indirectly. Where we instead use key-coded (pseudonymised) data internally, it remains protected and is handled under research safeguards.' },
      { h2: '10. Fees and subscriptions', p: 'Where the Service is offered on a paid basis, the applicable fees, billing cycle and renewal terms will be shown to you before you subscribe. Unless stated otherwise, subscriptions renew automatically until cancelled. Card data is handled by our payment processor and not stored by us.' },
      { h2: '11. Disclaimers — not medical advice or a guaranteed outcome', p: 'The Service provides objective performance assessment and development intelligence. It is not medical, diagnostic, clinical or physiotherapy advice and must not be relied on as such. Always consult a qualified professional for health, injury or medical decisions. Assessments, benchmarks and projections are analytical tools, not guarantees of athletic performance, selection, recruitment or development outcomes. The Service is provided "as is" and "as available", without warranties of any kind to the maximum extent permitted by law.' },
      { h2: '12. Limitation of liability', p: 'To the maximum extent permitted by applicable law, OnCourt is not liable for indirect, incidental, special, consequential or punitive damages, or for loss of data, profits or opportunity. Our total liability is limited to the amount you paid for the Service in the 12 months before the claim.' },
      { h2: '13. Indemnification', p: 'You agree to indemnify and hold OnCourt harmless from claims, losses and costs arising from your breach of these Terms; your Content or Athlete Data; your failure to obtain required consents; or your misuse of the Service.' },
      { h2: '14. Term, suspension and termination', p: 'These Terms apply while you use the Service. You may stop using the Service and close your account at any time. We may suspend or terminate access for breach, legal risk or non-payment. On termination, we handle your data as set out in the Privacy Policy.' },
      { h2: '15. Changes to these Terms or the Service', p: 'We may update these Terms. We will notify you of material changes, and continued use after the effective date constitutes acceptance. If you do not agree, stop using the Service.' },
      { h2: '16. Governing law and disputes', p: 'These Terms are governed by the laws of the Arab Republic of Egypt, without regard to conflict-of-law rules. The competent courts of Egypt have jurisdiction.' },
      { h2: '17. Refund policy', p: 'Where the Service is offered on a paid basis, fees are generally non-refundable except where a refund is required by applicable law, including the consumer-protection rights you hold under Egyptian law. If you believe you were charged in error, or a paid feature was materially unavailable, contact us within 14 days of the charge and we will review your request in good faith. Approved refunds are issued to the original payment method. You may cancel an active subscription at any time to stop future renewals; cancellation ends further billing but does not refund the current billing period unless applicable law requires otherwise.' },
      { h2: '18. Contact', p: 'Questions about these Terms: oncourtdata@gmail.com. Phone: +20 127 168 6841.' }
    ]
  }
};

function LegalModalHub({ type, onClose }) {
  var content = LEGAL_CONTENT_HUB[type];
  if (!content) return null;

  React.useEffect(function() {
    var prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return function() { document.body.style.overflow = prev; };
  }, []);

  React.useEffect(function() {
    function handleKey(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('keydown', handleKey);
    return function() { document.removeEventListener('keydown', handleKey); };
  }, []);

  return React.createElement('div', {
    style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: '24px' },
    onClick: function(e) { if (e.target === e.currentTarget) onClose(); }
  },
    React.createElement('div', {
      style: { background: 'var(--graphite-900)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '12px', width: '100%', maxWidth: '680px', maxHeight: '80vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }
    },
      React.createElement('div', {
        style: { padding: '24px 28px 16px', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexShrink: 0 }
      },
        React.createElement('div', null,
          React.createElement('h2', { style: { fontFamily: 'var(--font-display)', fontSize: '1.25rem', color: 'var(--graphite-50)', margin: 0, fontWeight: 600 } }, content.title),
          React.createElement('p', { style: { fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-caption)', color: 'var(--graphite-500)', margin: '6px 0 0' } }, content.effective)
        ),
        React.createElement('button', {
          onClick: onClose,
          style: { background: 'none', border: 'none', color: 'var(--graphite-400)', fontSize: '1.5rem', cursor: 'pointer', lineHeight: 1, padding: '0 0 0 16px', flexShrink: 0 }
        }, '×')
      ),
      React.createElement('div', { style: { padding: '24px 28px', overflowY: 'auto', flex: 1 } },
        content.body.map(function(section, i) {
          return React.createElement('div', { key: i, style: { marginBottom: '20px' } },
            section.h2 && React.createElement('h3', { style: { fontFamily: 'var(--font-sans)', fontSize: '0.8rem', fontWeight: 700, color: 'var(--graphite-200)', textTransform: 'uppercase', letterSpacing: '0.05em', margin: '0 0 8px' } }, section.h2),
            React.createElement('p', { style: { fontFamily: 'var(--font-sans)', fontSize: '0.875rem', color: 'var(--graphite-400)', lineHeight: 1.7, margin: 0 } }, section.p)
          );
        })
      )
    )
  );
}

/* ── Footer ────────────────────────────────────────────────────── */
function ResearchFooter() {
  var [modal, setModal] = React.useState(null);

  const footerStyles = {
    footer: {
      background: 'var(--graphite-900)',
      padding: 'var(--space-6) 0',
      borderTop: '1px solid rgba(255,255,255,0.04)'
    },
    inner: {
      maxWidth: 'var(--container-wide)',
      margin: '0 auto',
      padding: '0 var(--gutter)',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: 'var(--space-5)'
    },
    copy: {
      fontFamily: 'var(--font-sans)',
      fontSize: 'var(--fs-caption)',
      color: 'var(--graphite-400)'
    },
    links: {
      display: 'flex',
      gap: 'var(--space-5)',
      flexWrap: 'wrap'
    },
    link: {
      fontFamily: 'var(--font-sans)',
      fontSize: 'var(--fs-caption)',
      color: 'var(--graphite-400)',
      textDecoration: 'none',
      transition: 'color 0.15s',
      cursor: 'pointer'
    }
  };

  return React.createElement(React.Fragment, null,
  React.createElement('footer', { style: footerStyles.footer },
    React.createElement('div', { style: footerStyles.inner },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-4)' } },
        React.createElement('a', { href: 'index.html' },
          React.createElement('img', {
            src: 'assets/oncourt-horizontal-reversed.png',
            alt: 'OnCourt',
            style: { height: 18, opacity: 0.6 }
          })
        ),
        React.createElement('span', { style: footerStyles.copy },
          '\u00A9 2026 OnCourt. All rights reserved.'
        ),
        React.createElement('span', { style: { color: 'var(--graphite-600)' } }, '\u00B7'),
        React.createElement('span', { style: footerStyles.copy },
          '5th Settlement, Cairo, Egypt'
        )
      ),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-4)' } },
        React.createElement('span', { style: {
          fontFamily: 'var(--font-label)',
          fontSize: 'var(--fs-caption)',
          letterSpacing: 'var(--tracking-label)',
          textTransform: 'uppercase',
          color: 'var(--graphite-500)'
        }}, 'Follow us'),
        /* Instagram */
        React.createElement('a', {
          href: 'https://www.instagram.com/oncourtdata?igsh=eHB3aDBvemZoZTB1&utm_source=qr',
          target: '_blank', rel: 'noopener noreferrer', 'aria-label': 'Instagram',
          style: {
            width: 34, height: 34, borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.1)', background: 'transparent',
            color: 'var(--graphite-400)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none', transition: 'all 0.15s'
          },
          onMouseEnter: function(e) { e.currentTarget.style.borderColor = 'var(--flame-500)'; e.currentTarget.style.color = 'var(--flame-400)'; },
          onMouseLeave: function(e) { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; e.currentTarget.style.color = 'var(--graphite-400)'; }
        },
          React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
            React.createElement('rect', { x: 2, y: 2, width: 20, height: 20, rx: 5 }),
            React.createElement('circle', { cx: 12, cy: 12, r: 5 }),
            React.createElement('circle', { cx: 17.5, cy: 6.5, r: 1.5, fill: 'currentColor', stroke: 'none' })
          )
        ),
        /* LinkedIn */
        React.createElement('a', {
          href: 'https://www.linkedin.com/company/oncourtdata/',
          target: '_blank', rel: 'noopener noreferrer', 'aria-label': 'LinkedIn',
          style: {
            width: 34, height: 34, borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.1)', background: 'transparent',
            color: 'var(--graphite-400)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none', transition: 'all 0.15s'
          },
          onMouseEnter: function(e) { e.currentTarget.style.borderColor = 'var(--flame-500)'; e.currentTarget.style.color = 'var(--flame-400)'; },
          onMouseLeave: function(e) { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; e.currentTarget.style.color = 'var(--graphite-400)'; }
        },
          React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' },
            React.createElement('path', { d: 'M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-4 0v7h-4v-7a6 6 0 016-6z' }),
            React.createElement('rect', { x: 2, y: 9, width: 4, height: 12 }),
            React.createElement('circle', { cx: 4, cy: 4, r: 2 })
          )
        ),
        /* TikTok */
        React.createElement('a', {
          href: 'https://www.tiktok.com/@oncourtdata?_r=1&_t=ZS-985GzEx177V', target: '_blank', rel: 'noopener noreferrer', 'aria-label': 'TikTok',
          style: {
            width: 34, height: 34, borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.1)', background: 'transparent',
            color: 'var(--graphite-400)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textDecoration: 'none', transition: 'all 0.15s'
          },
          onMouseEnter: function(e) { e.currentTarget.style.borderColor = 'var(--flame-500)'; e.currentTarget.style.color = 'var(--flame-400)'; },
          onMouseLeave: function(e) { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; e.currentTarget.style.color = 'var(--graphite-400)'; }
        },
          React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'currentColor' },
            React.createElement('path', { d: 'M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.76a4.85 4.85 0 0 1-1.01-.07z' })
          )
        ),
        React.createElement('span', { style: { width: 1, height: 20, background: 'rgba(255,255,255,0.08)', margin: '0 4px' } }),
        React.createElement('button', {
          style: { fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-caption)', color: 'var(--graphite-400)', background: 'none', border: 'none', padding: 0, cursor: 'pointer', textDecoration: 'none', transition: 'color 0.15s' },
          onClick: function() { setModal('privacy'); }
        }, 'Privacy Policy'),
        React.createElement('button', {
          style: { fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-caption)', color: 'var(--graphite-400)', background: 'none', border: 'none', padding: 0, cursor: 'pointer', textDecoration: 'none', transition: 'color 0.15s' },
          onClick: function() { setModal('terms'); }
        }, 'Terms & Conditions')
      )
    )
  ),
  modal && React.createElement(LegalModalHub, { type: modal, onClose: function() { setModal(null); } })
  );
}

/* ── Upload icon ───────────────────────────────────────────────── */
function UploadIcon() {
  return React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
    React.createElement('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4' }),
    React.createElement('polyline', { points: '17 8 12 3 7 8' }),
    React.createElement('line', { x1: '12', y1: '3', x2: '12', y2: '15' })
  );
}

/* ── Contribute card ───────────────────────────────────────────── */
function ContributeCard() {
  const { Button } = window.OnCourtDesignSystem_dbd40f;
  const [hover, setHover] = React.useState(false);

  return React.createElement('div', {
    style: {
      border: hover ? '1px solid rgba(240,83,41,0.35)' : '1px solid rgba(255,255,255,0.08)',
      borderRadius: 'var(--radius-lg)',
      padding: '14px 18px',
      background: hover ? 'rgba(240,83,41,0.04)' : 'rgba(255,255,255,0.03)',
      transition: 'all 0.25s var(--ease-standard)',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      width: 380,
      height: '100%',
      boxSizing: 'border-box'
    },
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false)
  },
    /* Icon + title row */
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
      React.createElement('div', { style: {
        width: 26, height: 26, flexShrink: 0,
        borderRadius: 6,
        background: 'rgba(240,83,41,0.12)',
        border: '1px solid rgba(240,83,41,0.2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--flame-400)'
      }},
        React.createElement('svg', { width: 13, height: 13, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' },
          React.createElement('polyline', { points: '17 8 12 3 7 8' }),
          React.createElement('line', { x1: '12', y1: '3', x2: '12', y2: '15' }),
          React.createElement('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4' })
        )
      ),
      React.createElement('span', { style: {
        fontFamily: 'var(--font-display)',
        fontWeight: 'var(--weight-medium)',
        fontSize: 'var(--fs-h4)',
        letterSpacing: 'var(--tracking-tight)',
        color: 'var(--bone-50)',
        lineHeight: 1
      }}, 'Contribute Knowledge')
    ),

    /* One-line body */
    React.createElement('p', { style: {
      fontFamily: 'var(--font-sans)',
      fontSize: 'var(--fs-body-sm)',
      lineHeight: 1.45,
      color: 'var(--graphite-300)',
      margin: 0
    }}, 'Share research, methodologies, or evidence-based insights with the community.'),

    /* CTA button */
    React.createElement('div', { style: { display: 'flex', justifyContent: 'center' } },
      React.createElement(Button, {
        variant: 'inverse',
        size: 'sm',
        iconRight: React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' },
          React.createElement('polyline', { points: '17 8 12 3 7 8' }),
          React.createElement('line', { x1: '12', y1: '3', x2: '12', y2: '15' }),
          React.createElement('path', { d: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4' })
        ),
        onClick: () => window.open('https://forms.gle/WJ6cm8SsjwbUtpCC6', '_blank', 'noopener,noreferrer')
      }, 'Submit a Contribution')
    )
  );
}

/* ── Main Research Hub App ─────────────────────────────────────── */
function ResearchHubApp() {
  const heroStyles = {
    section: {
      background: 'var(--graphite-900)',
      paddingTop: 'clamp(96px, 12vh, 140px)',
      paddingBottom: 'clamp(1.5rem, 3vw, 2.5rem)',
      position: 'relative',
      overflow: 'hidden'
    },
    inner: {
      maxWidth: 'var(--container-wide)',
      margin: '0 auto',
      padding: '0 var(--gutter)',
      display: 'grid',
      gridTemplateColumns: '1fr auto',
      gap: 'clamp(var(--space-8), 6vw, var(--space-12))',
      alignItems: 'stretch'
    },
    left: {
      display: 'flex',
      flexDirection: 'column',
      gap: 'var(--space-4)'
    },
    eyebrow: {
      fontFamily: 'var(--font-label)',
      fontWeight: 'var(--weight-medium)',
      fontSize: 'var(--fs-eyebrow)',
      letterSpacing: 'var(--tracking-eyebrow)',
      textTransform: 'uppercase',
      color: 'var(--flame-400)',
      margin: 0
    },
    subtitle: {
      fontFamily: 'var(--font-sans)',
      fontSize: 'var(--fs-body-lg)',
      lineHeight: 'var(--leading-body)',
      color: 'var(--graphite-300)',
      maxWidth: 520,
      textWrap: 'pretty',
      margin: 0
    },
    glow: {
      position: 'absolute',
      top: '-30%',
      right: '-10%',
      width: '50%',
      height: '160%',
      background: 'radial-gradient(ellipse, rgba(240,83,41,0.06) 0%, transparent 70%)',
      pointerEvents: 'none'
    }
  };

  return React.createElement(React.Fragment, null,
    React.createElement(ResearchNav),

    /* ── Page hero ── */
    React.createElement('section', { style: heroStyles.section },
      React.createElement('div', { style: heroStyles.glow }),
      React.createElement('div', { style: heroStyles.inner },
        /* Left: eyebrow + subtitle */
        React.createElement('div', { style: heroStyles.left },
          React.createElement('p', { style: heroStyles.eyebrow }, 'Research Hub'),
          React.createElement('p', { style: heroStyles.subtitle },
            'A centralized repository of scientific literature, practical methodologies, and evidence-based insights from across the sports science community.'
          )
        ),
        /* Right: contribute CTA */
        React.createElement(ContributeCard)
      )
    ),

    /* ── Knowledge base content ── */
    React.createElement(window.KnowledgeBase),

    React.createElement(ResearchFooter)
  );
}

window.ResearchHubApp = ResearchHubApp;