// portfolio-about.jsx — Portfolio carousel + About

// Static poster/video paths — media managed via deploy, not CMS
const REEL_MEDIA = [
  { src: 'images/posters/ashri.jpg',          video: 'videos/work/ashri.mp4'           },
  { src: 'images/posters/whoop-sleep.jpg',     video: 'videos/work/whoop-sleep.mp4'     },
  { src: 'images/posters/sculpted.jpg',        video: 'videos/work/sculpted.mp4'        },
  { src: 'images/posters/sephora.jpg',         video: 'videos/work/sephora.mp4'         },
  { src: 'images/posters/system-pro.jpg',      video: 'videos/work/system-pro.mp4'      },
  { src: 'images/posters/la-biosthetique.jpg', video: 'videos/work/la-biosthetique.mp4' },
  { src: 'images/posters/valentines.jpg',      video: 'videos/work/valentines.mp4'      },
  { src: 'images/posters/jude-wedding.jpg',    video: 'videos/work/jude-wedding.mp4'    },
  { src: 'images/posters/nyx-event.jpg',       video: 'videos/work/nyx-event.mp4'       },
  { src: 'images/posters/humantra.jpg',        video: 'videos/work/humantra.mp4'        },
  { src: 'images/posters/rite-burj.jpg',       video: 'videos/work/rite-burj.mp4'       },
  { src: 'images/posters/rite-taste.jpg',      video: 'videos/work/rite-taste.mp4'      },
  { src: 'images/posters/brau.jpg',            video: 'videos/work/brau.mp4'            },
  { src: 'images/posters/whoop-eid.jpg',       video: 'videos/work/whoop-eid.mp4'       },
];
// CMS overrides title/meta/label; media paths always come from REEL_MEDIA above
const CMS_PORTFOLIO = (window.CMS_DATA && window.CMS_DATA.portfolio) || [
  { title: 'Ashri',                 meta: 'UGC · Skincare',    label: 'UGC'          },
  { title: 'WHOOP — Sleep Campaign',meta: 'UGC · Wellness',    label: 'UGC'          },
  { title: 'Sculpted by Aimée',     meta: 'UGC · Beauty',      label: 'UGC'          },
  { title: 'Sephora — Collection',  meta: 'UGC · Campaign',    label: 'UGC'          },
  { title: 'System Professional',   meta: 'UGC · Haircare',    label: 'UGC'          },
  { title: 'La Biosthetique',       meta: 'Brand Content',     label: 'Brand Content'},
  { title: 'Valentines Drink',      meta: 'UGC · Lifestyle',   label: 'UGC'          },
  { title: 'Jude — Wedding',        meta: 'Event Coverage',    label: 'Events'       },
  { title: 'NYX — Event',           meta: 'Event Coverage',    label: 'Events'       },
  { title: 'Humantra — Highlight',  meta: 'Event · BTS',       label: 'Events'       },
  { title: 'Rite · Burj2Burj',      meta: 'Event Coverage',    label: 'Events'       },
  { title: 'Rite · Taste of Dubai', meta: 'Event Coverage',    label: 'Events'       },
  { title: 'Brau — BTS',            meta: 'BTS · Events',      label: 'Events'       },
  { title: 'WHOOP — Eid Campaign',  meta: 'Event · Campaign',  label: 'Events'       },
];
const REELS = REEL_MEDIA.map((m, i) => Object.assign({}, m, CMS_PORTFOLIO[i] || {}));

function Portfolio() {
  // Double the array so the CSS infinite-scroll loop is seamless
  const doubled = [...REELS, ...REELS];

  return (
    <section className="sec snap-section" id="work"
      data-screen-label="04 Work" data-comment-anchor="portfolio">
      <div className="sec-hd">
        <div className="num">(03)</div>
        <h2 className="title">Recent <em>work.</em></h2>
        <div className="aside">2024 — 2026</div>
      </div>

      <div className="reel-carousel">
        <div className="reel-carousel-track">
          {doubled.map((r, i) => (
            <div key={i} className="reel-car"
              onMouseEnter={e => { const v = e.currentTarget.querySelector('video'); if (v) v.play(); }}
              onMouseLeave={e => { const v = e.currentTarget.querySelector('video'); if (v) { v.pause(); v.currentTime = 0; } }}>
              <img src={r.src} alt={r.title} />
              {r.video && (
                <video src={r.video} muted loop playsInline preload="none"
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0, transition: 'opacity .3s' }}
                  onPlay={e => { e.currentTarget.style.opacity = '1'; }}
                  onPause={e => { e.currentTarget.style.opacity = '0'; }} />
              )}
              <div className="reel-car-overlay"><div className="reel-car-label">{r.label}</div></div>
              <div className="reel-car-bottom">
                <div className="reel-meta">{r.meta}</div>
                <div className="reel-title">{r.title}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

    </section>
  );
}

const CMS_ABOUT = (window.CMS_DATA && window.CMS_DATA.about) || {};
const ABOUT_EYEBROW = CMS_ABOUT.eyebrow || 'Dubai-Based ugc Creator';
const ABOUT_INTRO   = CMS_ABOUT.intro   || "Hey, I'm Lamia — a full-time content creator, and there's a good chance you've already come across some of my work while scrolling.";
const ABOUT_PARS    = CMS_ABOUT.paragraphs || [
  "What started as filming and editing content for fun quickly turned into a career. Today, I create content for brands, document events, and help aspiring creators develop the skills and confidence to create content of their own.",
  "Over the years, my approach has been refined by combining high-end visuals, creative editing, and organic storytelling. I believe it's often the smallest details and creative touches that transform content from something people simply watch into something they remember.",
  "When I'm not on iPhone duty, you'll usually find me chasing golden hour, planning my next trip, or appreciating the little details that inspire my work.",
];
const ABOUT_STATS = CMS_ABOUT.stats || [
  { value: '300+', label: 'Brands supported'        },
  { value: '650+', label: 'Social assets delivered' },
  { value: '3+yrs', label: 'Industry Experience'   },
];

function About() {
  return (
    <section className="sec snap-section" id="about"
      data-screen-label="05 About" data-comment-anchor="about">
      <div className="sec-hd">
        <div className="num">(04)</div>
        <h2 className="title">About <em>Lamia Lens.</em></h2>
        <div className="aside">Behind the lens</div>
      </div>
      <div className="about">
        <div className="about-img">
          <img src="images/lamia-portrait.jpg"
            alt="Lamia, founder & creative director" />
          <div className="caption">Lamia · Content Creator & Director · Dubai</div>
        </div>
        <div>
          <div className="eyebrow about-eyebrow">{ABOUT_EYEBROW}</div>
          <h3 className="about-name"><em>Hey,</em> {ABOUT_INTRO.replace(/^Hey,?\s*/i, '')}</h3>
          <div className="about-body">
            {ABOUT_PARS.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="about-stats">
            {ABOUT_STATS.map((s, i) => (
              <div key={i} className="stat">
                <div className="num">{s.value}</div>
                <div className="lbl">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio, About });