// Act XVI — REFERENCES
// Bibliography slide added 2026-04-29 at Svetlana's request. Sits between
// XV Numbers and XVII Thank You. Single beat — the audience sees the full
// citation list at once. Grouped by source kind:
//   1. Industry & accreditation       (McKinsey, NASAD, NCES)
//   2. Archive partnerships           (Drexel, JSTOR, ICHO)
//   3. Digital-archive platforms      (darchive · ThreadSpaceXR · Fashionic ·
//                                      Virtual Apparel Consulting)
//   4. Primary source                 (Shalumova, K.)
//
// Each entry is a clickable link — opens in a new tab so the deck position
// is preserved if a judge wants to verify a source live.

const REF_GROUPS = [
  {
    kicker: 'Industry · accreditation',
    tint: 'var(--gold)',
    items: [
      {
        cite: 'McKinsey & Company. (2022). State of Fashion Technology Report 2022.',
        host: 'mckinsey.com',
        href: 'https://www.mckinsey.com/industries/retail/our-insights/state-of-fashion-technology-report-2022',
      },
      {
        cite: 'National Association of Schools of Art and Design. (2026, March 17). NASAD.',
        host: 'nasad.arts-accredit.org',
        href: 'https://nasad.arts-accredit.org/',
      },
      {
        cite: 'National Center for Education Statistics (NCES). U.S. Department of Education, IES.',
        host: 'nces.ed.gov',
        href: 'https://nces.ed.gov/',
      },
    ],
  },
  {
    kicker: 'Archive partnerships',
    tint: 'var(--sage)',
    items: [
      {
        cite: 'Google Arts & Culture. The Robert and Penny Fox Historic Costume Collection at Drexel University.',
        host: 'artsandculture.google.com',
        href: 'https://artsandculture.google.com/partner/the-robert-and-penny-fox-historic-costume-collection-at-drexel-university',
      },
      {
        cite: 'JSTOR. community.29577735.',
        host: 'jstor.org',
        href: 'https://www.jstor.org/stable/community.29577735',
      },
      {
        cite: 'Intangible Cultural Heritage Office, Hong Kong. Funded Activities.',
        host: 'icho.hk',
        href: 'https://www.icho.hk/en/web/icho/funded-activities1.html',
      },
    ],
  },
  {
    kicker: 'Digital-archive platforms · comparable infrastructure',
    tint: 'var(--sage-deep)',
    items: [
      { cite: 'darchive.',                               host: 'darchive.io',                       href: 'https://darchive.io/' },
      { cite: 'ThreadSpaceXR.',                          host: 'threadspacexr.com',                  href: 'https://www.threadspacexr.com/' },
      { cite: 'Fashionic.',                              host: 'fashionic.ca',                       href: 'https://www.fashionic.ca/' },
      { cite: 'Virtual Apparel Consulting · Archive.',    host: 'virtualapparelconsulting.com',       href: 'https://www.virtualapparelconsulting.com/archive' },
    ],
  },
  {
    kicker: 'Primary source',
    tint: 'var(--rust)',
    items: [
      {
        cite: 'Shalumova, K. 100 Years of the Tennis Dress. Medium.',
        host: 'medium.com/@shalumova',
        href: 'https://medium.com/@shalumova/100-years-of-the-tennis-dress-f5da9e5d9e0c',
      },
    ],
  },
];

// `ref` is a reserved React prop name (intercepted by ref-forwarding), so
// the entry comes in as `entry` instead.
function ReferenceItem({ entry }) {
  return (
    <a
      href={entry.href}
      target="_blank" rel="noopener noreferrer"
      style={{
        display: 'block',
        padding: '10px 14px',
        background: 'rgba(7,50,66,0.45)',
        border: '1px solid rgba(143,166,143,0.18)',
        borderLeft: '2px solid rgba(143,166,143,0.32)',
        textDecoration: 'none',
        transition: 'all 0.18s ease',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = 'rgba(201,168,76,0.06)';
        e.currentTarget.style.borderLeftColor = 'var(--gold)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = 'rgba(7,50,66,0.45)';
        e.currentTarget.style.borderLeftColor = 'rgba(143,166,143,0.32)';
      }}
    >
      <div className="font-editorial" style={{
        fontSize: 13,
        lineHeight: 1.45,
        color: 'var(--parchment)',
        textWrap: 'pretty',
      }}>{entry.cite}</div>
      <div style={{
        marginTop: 4,
        display: 'flex', alignItems: 'baseline', gap: 8,
      }}>
        <span style={{
          fontFamily: 'var(--font-ui)', fontSize: 9,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--gold)',
        }}>{entry.host}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, color: 'var(--gold)' }}>↗</span>
      </div>
    </a>
  );
}

function ActReferencesInner({ act, index, total }) {
  const [ref, visible] = useBeatReveal(0);
  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol-deep)">
      <div ref={ref} style={{
        paddingTop: 20,
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(14px)',
        transition: 'all 1.0s cubic-bezier(0.16,1,0.3,1)',
      }}>
        {/* Header */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 28,
        }}>
          <div>
            <span className="label-text" style={{ color: 'var(--sage)', letterSpacing: '0.36em' }}>
              References · sources &amp; data foundations
            </span>
            <h2 className="font-display" style={{
              fontSize: 'clamp(40px, 4.4vw, 64px)',
              lineHeight: 0.98, letterSpacing: '-0.02em',
              color: 'var(--parchment)', margin: '14px 0 0',
              textTransform: 'uppercase',
            }}>
              The argument <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>cites itself.</span>
            </h2>
          </div>
          <div style={{ textAlign: 'right', maxWidth: 360 }}>
            <span className="label-text" style={{ color: 'var(--taupe)' }}>APA-7 inspired · linked</span>
            <div className="font-editorial" style={{
              fontSize: 13, color: 'var(--parchment-dim)',
              marginTop: 8, fontStyle: 'italic', lineHeight: 1.5,
              textWrap: 'pretty',
            }}>
              Click any entry to open the source. Industry, accreditation,
              archive partnerships, digital-twin platforms, and the primary
              essay this work began with.
            </div>
          </div>
        </div>

        {/* Two-column reference list, grouped by category */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 24,
        }}>
          {/* Pack groups into two balanced columns: 1+2 left, 3+4 right */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {[REF_GROUPS[0], REF_GROUPS[1]].map((g) => (
              <div key={g.kicker}>
                <div className="label-text" style={{
                  color: g.tint,
                  letterSpacing: '0.32em',
                  marginBottom: 10,
                }}>{g.kicker}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {g.items.map((it) => <ReferenceItem key={it.href} entry={it} />)}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {[REF_GROUPS[2], REF_GROUPS[3]].map((g) => (
              <div key={g.kicker}>
                <div className="label-text" style={{
                  color: g.tint,
                  letterSpacing: '0.32em',
                  marginBottom: 10,
                }}>{g.kicker}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {g.items.map((it) => <ReferenceItem key={it.href} entry={it} />)}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Quiet footer */}
        <div style={{
          marginTop: 28, paddingTop: 16,
          borderTop: '1px solid rgba(143,166,143,0.2)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        }}>
          <span className="label-text" style={{ color: 'var(--taupe)' }}>
            Shalumova · Capstone · FIT GFM · 2026
          </span>
          <span className="label-text" style={{ color: 'var(--gold)' }}>
            Next · the curtain →
          </span>
        </div>
      </div>
    </ActFrame>
  );
}

function ActReferences({ index, total, act }) {
  return (
    <ScrollBeats beats={1} bg="var(--petrol-deep)">
      <ActReferencesInner act={act} index={index} total={total} />
    </ScrollBeats>
  );
}

window.ActReferences = ActReferences;