/* Portfolio sections — part 2: Fesfori, Courses, Impact, Contact, Footer */
const DS2 = window.BassantZeidanFesforiDesignSystem_940ce5;
const ASSET2 = 'assets';

function Fesfori({ t, dir }) {
  const P = window.PORTFOLIO;
  const F = P.fesfori;
  return (
    <section id="fesfori" style={{ background: 'var(--navy-800)', color: 'var(--text-on-dark)', position: 'relative', overflow: 'hidden' }}>
      {/* starfield dots */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5, backgroundImage: 'radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent), radial-gradient(2px 2px at 70% 20%, rgba(144,197,65,.7), transparent), radial-gradient(2px 2px at 85% 65%, rgba(2,174,240,.7), transparent), radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.4), transparent)', pointerEvents: 'none' }} />
      <div className="pf-container pf-section" style={{ position: 'relative' }}>
        <div className="pf-fesfori-top" style={{ display: 'grid', gridTemplateColumns: '1fr 0.9fr', gap: 'var(--space-8)', alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <DS2.SectionHeading onDark eyebrow={t(F.eyebrow)} title={t(F.title)} />
            <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--green-400)' }}>{t(F.subtitle)}</p>
            <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-body)', color: 'var(--text-on-dark-muted)' }}>{t(F.body)}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginTop: 'var(--space-2)' }}>
              <span style={{ fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 'var(--fs-eyebrow)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--green-400)' }}>{t(F.factsTitle)}</span>
              {F.facts.map((fx, i) => (
                <div key={i} style={{ display: 'flex', gap: '0.6rem', alignItems: 'flex-start' }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 2 }}><circle cx="12" cy="12" r="11" fill="var(--green-500)"/><path d="M7 12.5l3.2 3.2L17 9" stroke="var(--navy-800)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-snug)', color: 'var(--text-on-dark)' }}>{t(fx)}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <img src={window.R(ASSET2 + '/brand/fesfori-mascot-badge.png')} alt="Fesfori mascot" style={{ width: '100%', maxWidth: 360, filter: 'drop-shadow(0 24px 48px rgba(0,0,0,0.35))' }} />
          </div>
        </div>

        <div style={{ marginTop: 'var(--space-8)' }}>
          <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 'var(--fs-eyebrow)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--green-400)', marginBottom: 'var(--space-4)' }}>{t(F.seasonsTitle)}</span>
          <div className="pf-grid-5">
            {F.seasons.map((s, i) => {
              const c = { green: 'var(--green-500)', sky: 'var(--sky-500)', sun: 'var(--sun-500)' }[s.tone];
              return (
                <div key={i} style={{ background: 'var(--navy-700)', border: '1px solid var(--navy-600)', borderRadius: 'var(--radius-card)', padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h2)', color: c, lineHeight: 1 }}>{s.n}</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'var(--fs-xs)', color: 'var(--text-on-dark-muted)' }}>{s.year}</span>
                  </div>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--text-on-dark)' }}>{t(s.title)}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', lineHeight: 'var(--lh-snug)', color: 'var(--text-on-dark-muted)' }}>{t(s.desc)}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function Courses({ t }) {
  const P = window.PORTFOLIO;
  const C = P.courses;
  return (
    <section id="courses" className="pf-section">
      <div className="pf-container">
        <DS2.SectionHeading align="center" eyebrow={t(C.eyebrow)} title={t(C.title)} intro={t(C.intro)} />
        <div className="pf-grid-3" style={{ marginTop: 'var(--space-7)' }}>
          {C.items.map((it, i) => (
            <DS2.CourseCard key={i} index={it.n} tone={it.tone}
              title={t(it.title)} duration={t(C.duration)} description={t(it.desc)}
              topics={t(it.topics)} />
          ))}
        </div>
        <div style={{ marginTop: 'var(--space-8)', background: 'var(--green-100)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)' }}>
          <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 'var(--fs-eyebrow)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--green-600)', marginBottom: 'var(--space-4)' }}>{t(C.outcomesTitle)}</span>
          <div className="pf-grid-3">
            {C.outcomes.map((o, i) => (
              <div key={i} style={{ display: 'flex', gap: '0.6rem', alignItems: 'flex-start' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0, marginTop: 1 }}><circle cx="12" cy="12" r="11" fill="var(--green-500)"/><path d="M7 12.5l3.2 3.2L17 9" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-snug)', color: 'var(--text-heading)', fontWeight: 600 }}>{t(o)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Impact({ t }) {
  const P = window.PORTFOLIO;
  const I = P.impact;
  return (
    <section id="impact" className="pf-section" style={{ paddingTop: 0 }}>
      <div className="pf-container">
        <div style={{ background: 'var(--navy-800)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', color: 'var(--text-on-dark)', position: 'relative', overflow: 'hidden' }}>
          <span style={{ position: 'absolute', top: '-80px', insetInlineEnd: '-40px', width: 260, height: 260, background: 'radial-gradient(circle, rgba(144,197,65,.25), transparent 70%)', borderRadius: '50%' }} />
          <div style={{ position: 'relative', textAlign: 'center', marginBottom: 'var(--space-7)' }}>
            <DS2.SectionHeading align="center" onDark eyebrow={t(I.eyebrow)} title={t(I.title)} />
          </div>
          <div className="pf-grid-4" style={{ position: 'relative', textAlign: 'center' }}>
            {I.stats.map((s, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <DS2.StatCard value={s.value} tone={s.tone} onDark label={t(s.label)} style={{ alignItems: 'center', textAlign: 'center' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  const P = window.PORTFOLIO;
  const K = P.contact;
  return (
    <section id="contact" className="pf-section" style={{ paddingTop: 0 }}>
      <div className="pf-container pf-contact" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <DS2.SectionHeading eyebrow={t(K.eyebrow)} title={t(K.title)} intro={t(K.body)} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <a href={'mailto:' + K.email} style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none' }}>
              <span style={{ fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 'var(--fs-eyebrow)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{t(K.emailLabel)}</span>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--fs-h4)', color: 'var(--text-heading)' }}>{K.email}</span>
            </a>
          </div>
        </div>
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-7)', boxShadow: 'var(--shadow-md)' }}>
          <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h4)', color: 'var(--text-heading)', marginBottom: 'var(--space-4)' }}>{t(K.followTitle)}</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            {K.socials.map((s, i) => (
              <a key={i} href={s.href} target={s.href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: '0.8rem', textDecoration: 'none', padding: '0.5rem', borderRadius: 'var(--radius-md)', transition: 'background var(--dur-fast)' }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--line-100)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                <DS2.SocialLinks links={[{ type: s.type, href: s.href }]} />
                <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 'var(--fs-body)', color: 'var(--text-body)', direction: 'ltr' }}>{s.label}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  const P = window.PORTFOLIO;
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'var(--text-on-dark)', paddingTop: 'var(--space-7)', paddingBottom: 'var(--space-7)' }}>
      <div className="pf-container" style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-5)', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
          <img src={window.R(ASSET2 + '/brand/fesfori-logo.png')} alt="Fesfori" style={{ width: 48, height: 48, borderRadius: 12 }} />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.15rem' }}>{t(P.brand)}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-on-dark-muted)' }}>{t(P.footer.tagline)}</span>
          </div>
        </div>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-on-dark-muted)' }}>{t(P.footer.rights)}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Fesfori, Courses, Impact, Contact, Footer });