// About page — hero, story, stats, vision/mission, principles, journey, mentors, CTA.

const { useState: useState_A, useEffect: useEffect_A } = React;

const LINKEDIN_JOURNEY_POSTS = [
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7196544860089184257?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:6954800396183703553?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:6989983819797794816?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:6833746119902724096?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7075159982391873536?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7453443614019313664?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7232784795368329216?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7113277470107160576?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7444666513644556288?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7099791283631607808?collapsed=1', height: 565 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:7460583664255680512?collapsed=1', height: 565 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:6992486999425220608?collapsed=1', height: 565 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7395449141708955648?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:6664876549877178368?collapsed=1', height: 668 },
  { src: 'https://www.linkedin.com/embed/feed/update/urn:li:share:7176906838896979969?collapsed=1', height: 668 },
];

function getLinkedInPostsPerPage() {
  if (typeof window === 'undefined') return 3;
  if (window.innerWidth >= 1180) return 3;
  if (window.innerWidth >= 760) return 2;
  return 1;
}

function AboutHero() {
  return (
    <section className="relative overflow-hidden" style={{ background: 'var(--sa-purple)' }}>
      {/* Decorative motifs */}
      <PinkFan size={180} color="var(--sa-pink)" className="absolute" style={{ left: -50, bottom: -40, opacity: 0.85 }} />
      <Checker size={120} color="var(--sa-lime)" className="absolute hidden md:block" style={{ right: -10, top: 30, opacity: 0.95 }} />

      <div className="container-wide sec-x py-16 md:py-24 relative text-center">
        <Reveal>
          <h1 className="text-white font-bold mx-auto" style={{
            font: '700 clamp(36px, 7vw, 72px)/1.1 var(--sa-font-sans)',
            letterSpacing: '-2px', maxWidth: 920, margin: '0 auto', textAlign: 'center'
          }}>
            <span className="block">Learn + Grow With</span>{' '}
            <span className="block" style={{ color: 'var(--sa-yellow)' }}>Scholarly Affairs</span>
          </h1>
        </Reveal>
        <Reveal delay={120}>
          <p className="mt-6 mx-auto text-white/90 max-w-[760px]" style={{ font: '400 clamp(15px, 1.5vw, 18px)/1.55 var(--sa-font-sans)' }}>
            Discover who we are, what we stand for, and how we're shaping the future of learning.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div className="mt-7"><Btn href={DISCOVERY_CALL_HREF} size="lg">Book free 1:1 discovery call</Btn></div>
        </Reveal>
      </div>
    </section>
  );
}

function StoryBand() {
  return (
    <section className="bg-white">
      <div className="container-wide sec-x py-16 md:py-20">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-start">
          <Reveal direction="left">
            <Badge>Our Story</Badge>
            <h2 className="h-section mt-5">
              <span className="text-sa-purple">Gateway</span> To Personal <br className="hidden md:block" />
              And Professional <span className="text-sa-purple">Growth</span>
            </h2>
            <p className="body-lg mt-6 max-w-[560px]">
              Scholarly Affairs was founded with one goal: to make high-quality education accessible to everyone, everywhere. We believe learning should be flexible, affordable, and deeply impactful — empowering individuals to pursue their goals and adapt in an ever-changing world.
            </p>
          </Reveal>
          <Reveal direction="right" delay={120}>
            <div className="rounded-sa-md overflow-hidden bg-sa-lavender card-hover" style={{ aspectRatio: '5/4' }}>
              <img src={PHOTO.aboutStory} alt="Founders" className="w-full h-full object-cover" />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  const stats = [
    { value: 7, suffix: '+',  label: 'Years of Professional Mentoring' },
    { value: 80, suffix: '+', label: 'Learners Worldwide' },
    { value: 5,  prefix: '',  suffix: '/5', label: 'Student Rating' },
    { value: 100, suffix: '%', label: 'Learner Satisfaction Rate' },
  ];
  return (
    <section className="bg-white">
      <div className="container-wide sec-x py-10 md:py-12 border-y border-sa-border">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-8">
          {stats.map((s, i) => (
            <Reveal key={i} direction="up" delay={i * 90} className="text-center md:text-left">
              <div className="font-bold text-sa-ink" style={{ font: '700 clamp(36px, 5vw, 56px)/1 var(--sa-font-sans)', letterSpacing: '-2px' }}>
                {s.prefix || ''}<CountUp to={s.value} />{s.suffix || ''}
              </div>
              <div className="mt-2 text-sm text-sa-slate-2">{s.label}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function VisionMission() {
  return (
    <section className="bg-white relative">
      <Pinwheel size={80} color="var(--sa-lime)" className="absolute sa-spin hidden md:block" style={{ left: '6%', bottom: '12%' }} />
      <div className="container-wide sec-x about-vision__wrap">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-start">
          <Reveal direction="left">
            <Badge>Vision &amp; Mission</Badge>
            <h2 className="h-section mt-5">
              <span className="text-sa-purple">Defining</span> Our Purpose <Sparkle size={28} color="var(--sa-pink)" className="inline-block align-middle sa-pulse-soft" />
              <br/>And <span className="text-sa-purple">Direction</span>
            </h2>
          </Reveal>
          <Reveal direction="right" delay={100}>
            <div className="flex flex-col gap-6">
              <div>
                <h4 className="font-bold text-sa-purple mb-3" style={{ fontSize: 18 }}>Our Vision</h4>
                <p className="body-lg m-0">
                  Our Vision To become a global learning hub that empowers individuals to thrive through accessible and forward-thinking education.
                </p>
              </div>
              <div>
                <h4 className="font-bold text-sa-purple mb-3" style={{ fontSize: 18 }}>Our Mission</h4>
                <ul className="m-0 p-0 list-none flex flex-col">
                  {[
                    'Deliver expert-led, real-world learning experiences',
                    'Provide flexible, affordable access to skills that matter',
                    'Support learners with tools, mentorship, and a vibrant community',
                    'Continuously evolve with the latest industry trends',
                  ].map((t, i) => (
                    <li key={i} className="border-b border-sa-divider py-3 text-sa-slate-2" style={{ font: '400 16px/1.5 var(--sa-font-sans)' }}>{t}</li>
                  ))}
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PrinciplesBand() {
  const [active, setActive] = useState_A(1);
  const items = [
    { id: 0, icon: 'auto_stories',   title: 'Accessibility', body: 'Learning for everyone, anytime, anywhere — across devices and borders.' },
    { id: 1, icon: 'thumb_up_off_alt', title: 'Quality',       body: 'Learn from top-rated instructors through real-world tasks and projects.' },
    { id: 2, icon: 'sentiment_satisfied', title: 'Flexibility',  body: 'Self-paced, on-demand learning that fits your schedule and lifestyle.' },
    { id: 3, icon: 'trending_up',    title: 'Growth',        body: 'Practical skills and certifications that open doors in your career.' },
    { id: 4, icon: 'groups',         title: 'Community',     body: 'A vibrant global network of learners, mentors, and industry professionals.' },
    { id: 5, icon: 'favorite',       title: 'Support',       body: 'Personalized guidance, live sessions, and active discussion forums.' },
  ];
  return (
    <section className="bg-white">
      <div className="container-wide sec-x principles-band__outer">
        <div className="home-yellow-panel principles-band__panel relative overflow-hidden rounded-sa-lg">
          <div className="yellow-panel-glow yellow-panel-glow--top" aria-hidden="true" />
          <div className="yellow-panel-glow yellow-panel-glow--bottom" aria-hidden="true" />
          <div className="relative text-center principles-band__intro">
            <Reveal>
              <span className="yellow-panel-badge">
                <span className="yellow-panel-badge__dot" aria-hidden="true" />
                Our Value
              </span>
            </Reveal>
            <Reveal delay={80}>
              <h2 className="h-section yellow-panel-title">Built On <span className="text-sa-purple">Principles</span> That Matter</h2>
            </Reveal>
          </div>

          <div className="principles-band__grid grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
            {items.map((p, i) => (
              <Reveal key={p.id} direction="up" delay={i * 70}>
                <PrincipleCard {...p} active={active === p.id} onHover={() => setActive(p.id)} onLeave={() => setActive(1)} />
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function JourneyBand() {
  const [postsPerPage, setPostsPerPage] = useState_A(getLinkedInPostsPerPage);
  const postPages = [];
  for (let i = 0; i < LINKEDIN_JOURNEY_POSTS.length; i += postsPerPage) {
    postPages.push(LINKEDIN_JOURNEY_POSTS.slice(i, i + postsPerPage));
  }
  const [page, setPage] = useState_A(0);
  const lastPage = postPages.length - 1;

  useEffect_A(() => {
    const updatePostsPerPage = () => setPostsPerPage(getLinkedInPostsPerPage());
    updatePostsPerPage();
    window.addEventListener('resize', updatePostsPerPage);
    return () => window.removeEventListener('resize', updatePostsPerPage);
  }, []);

  useEffect_A(() => {
    setPage((currentPage) => Math.min(currentPage, lastPage));
  }, [lastPage]);

  return (
    <section className="bg-white">
      <div className="container-wide sec-x about-journey__wrap">
        <div className="text-center max-w-[920px] mx-auto">
          <Reveal><Badge>Our Journey</Badge></Reveal>
          <Reveal delay={80}><h2 className="h-section mt-5"><span className="text-sa-purple">Journey</span> Behind Scholarly Affairs</h2></Reveal>
          <Reveal delay={150}>
            <p className="body-lg mt-6 max-w-[760px] mx-auto">
              Explore a few moments from our journey, from fully funded scholarships and global university admits to mentoring students and building academic pathways that open real opportunities.
            </p>
          </Reveal>
        </div>

        <div className="linkedin-carousel" aria-label="Selected LinkedIn posts from Scholarly Affairs">
          <div className="linkedin-carousel__viewport">
            <div className="linkedin-carousel__track"
                 style={{ transform: `translateX(-${page * 100}%)` }}>
              {postPages.map((posts, pageIndex) => {
                const firstPost = pageIndex * postsPerPage + 1;
                const lastPost = firstPost + posts.length - 1;

                return (
                  <div className="linkedin-carousel__slide"
                       key={`linkedin-page-${pageIndex}`}
                       style={{ '--linkedin-columns': Math.min(posts.length, postsPerPage) }}
                       aria-label={`LinkedIn posts ${firstPost} to ${lastPost}`}>
                    {posts.map((post, index) => {
                      const postNumber = firstPost + index;
                      return (
                        <article className="linkedin-post-card" key={post.src}>
                          <iframe
                            className="linkedin-post-card__frame"
                            src={post.src}
                            height={post.height}
                            width="504"
                            frameBorder="0"
                            allowFullScreen
                            loading="lazy"
                            title={`Embedded LinkedIn post ${postNumber}`}
                          />
                        </article>
                      );
                    })}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="flex items-center justify-center gap-3 mt-6">
            <button
              className="w-11 h-11 rounded-full bg-white border border-sa-border text-sa-purple inline-flex items-center justify-center hover:bg-sa-lavender-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
              onClick={() => setPage(Math.max(0, page - 1))}
              disabled={page === 0}
              aria-label="Previous LinkedIn posts">
              <Icon name="arrow_back" size={22} />
            </button>
            <div className="flex gap-2">
              {postPages.map((_, i) => (
                <button key={i}
                  onClick={() => setPage(i)}
                  className="rounded-full transition-all"
                  style={{
                    width: i === page ? 24 : 8, height: 8,
                    background: i === page ? 'var(--sa-purple)' : 'var(--sa-border-2)',
                  }}
                  aria-current={i === page ? 'true' : undefined}
                  aria-label={`Go to LinkedIn posts ${i * postsPerPage + 1} to ${Math.min((i + 1) * postsPerPage, LINKEDIN_JOURNEY_POSTS.length)}`} />
              ))}
            </div>
            <button
              className="w-11 h-11 rounded-full bg-white border border-sa-border text-sa-purple inline-flex items-center justify-center hover:bg-sa-lavender-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
              onClick={() => setPage(Math.min(lastPage, page + 1))}
              disabled={page === lastPage}
              aria-label="Next LinkedIn posts">
              <Icon name="arrow_forward" size={22} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function MentorRow({ mentor, flip }) {
  return (
    <Reveal direction={flip ? 'right' : 'left'}>
      <article className="rounded-sa-md bg-white border border-sa-border overflow-hidden card-hover">
        <div className="grid lg:grid-cols-[280px_1fr] gap-0 items-stretch">
          <div className="relative overflow-hidden flex items-end justify-center"
               style={{ background: 'var(--sa-lavender)', minHeight: 320 }}>
            <img src={mentor.img} alt={mentor.name}
                 className="w-full h-full object-cover object-top"
                 style={{ maxHeight: 420 }} />
          </div>
          <div className="p-6 md:p-8 flex flex-col gap-4">
            <div>
              <h3 className="h-sub" style={{ fontSize: 'clamp(24px, 2.4vw, 32px)' }}>{mentor.name}</h3>
              <div className="mt-1 text-sa-purple font-bold text-sm">{mentor.role}</div>
            </div>
            <p className="m-0 text-sm leading-relaxed text-sa-slate-2">{mentor.body}</p>

            {/* Credential tiles with institution logos */}
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mt-2">
              {mentor.creds.map((c, i) => (
                <div key={i} className="mentor-credential-card flex flex-col gap-2 p-3 rounded-md bg-white border border-sa-border transition-all hover:border-sa-purple hover:shadow-sa-card"
                     style={{ minHeight: 148 }}>
                  <span className="mentor-credential-card__logo" aria-hidden="true">
                    {c.logo ? (
                      <img src={c.logo} alt="" className="mentor-credential-card__img" loading="lazy" />
                    ) : (
                      <span className="mentor-credential-card__mono"
                            style={{ background: c.bg, color: c.tx || '#fff' }}>
                        {c.mono}
                      </span>
                    )}
                  </span>
                  <div className="mentor-credential-card__sub text-[10px] leading-tight text-sa-slate-3 mt-auto">{c.sub}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </article>
    </Reveal>
  );
}

function MentorsBand() {
  return (
    <section className="bg-white">
      <div className="container-wide sec-x about-mentors__wrap">
        <div className="text-center max-w-[920px] mx-auto">
          <Reveal><Badge>Mentors</Badge></Reveal>
          <Reveal delay={80}><h2 className="h-section mt-5"><span className="text-sa-purple">Meet</span> Our <span className="text-sa-purple">Mentors</span></h2></Reveal>
          <Reveal delay={150}>
            <p className="body-lg mt-6 max-w-[860px] mx-auto">
              Our mentors are experienced professionals, educators, and industry experts committed to delivering knowledge with passion and clarity.
            </p>
          </Reveal>
        </div>
        <div className="mt-10 flex flex-col gap-6">
          {MENTORS.map((m, i) => <MentorRow key={m.name} mentor={m} flip={i % 2 === 1} />)}
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <div data-screen-label="About" className="page-enter">
      <AboutHero />
      <StoryBand />
      <StatsBand />
      <VisionMission />
      <PrinciplesBand />
      <JourneyBand />
      <MentorsBand />
      <CTABand
        className="about-cta"
        badge="Learn from Top Experts"
        title={<>Join Hundreds Of <span className="text-sa-purple">Learners</span></>}
        body="Start your journey toward a smarter future with expert-led guidance, flexible learning, and career support."
      />
    </div>
  );
}

Object.assign(window, { AboutPage });