// ZIADFILMING — Page: Home

const IMGS = {
  hero: 'assets/hero-wide.webp',
  portrait: 'assets/ziad-portrait.webp',
};

const FEATURED = window.FILMS.map((film, index) => ({
  ...film,
  num: String(index + 1).padStart(2, '0'),
  category: film.type,
  tag: film.location,
}));
const hs = {
  hero: { position:'relative', height:'100vh', minHeight:640, display:'flex',
          alignItems:'center', justifyContent:'center', overflow:'hidden' },
  heroBg: { position:'absolute', inset:0, zIndex:0 },
  // Image filter + scale now live in CSS (.zf-hero-bg-img) so they can adapt
  // to viewport size and prefers-reduced-motion without fighting inline styles.
  heroImg: {},
  heroGrad: { position:'absolute', inset:0,
              background:'linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 45%, #000)' },
  heroInner: { position:'relative', zIndex:10, textAlign:'center',
               maxWidth:1200, padding:'0 48px', display:'flex', flexDirection:'column', alignItems:'center' },
  kicker: { color:'#a1a1aa', textTransform:'uppercase', letterSpacing:'0.3em', fontSize:13, marginBottom:24 },
  hero1: { fontFamily:'var(--font-display)', fontWeight:800,
           fontSize:'clamp(56px, 11vw, 168px)', color:'#fff',
           textTransform:'uppercase', letterSpacing:'-0.04em', lineHeight:0.9, margin:'0 0 32px' },
  heroSub: { fontSize:20, color:'#a1a1aa', fontWeight:300, maxWidth:640, marginBottom:48, lineHeight:1.6 },
  ctas: { display:'flex', gap:24, flexWrap:'wrap', justifyContent:'center' },

  inner: { maxWidth:1440, margin:'0 auto', padding:'0 48px' },
  eyebrow: { color:'#a1a1aa', textTransform:'uppercase', letterSpacing:'0.1em',
             fontSize:12, marginBottom:16, display:'block' },
  h2: { fontFamily:'var(--font-display)', fontWeight:700, fontSize:'clamp(36px,5vw,60px)',
        color:'#fff', textTransform:'uppercase', letterSpacing:'-0.025em', margin:0 },

  aboutSection: { padding:'160px 0', background:'rgba(9,9,11,0.3)',
                  borderTop:'1px solid #18181b', borderBottom:'1px solid #18181b' },
  aboutGrid: { display:'grid', gridTemplateColumns:'7fr 5fr', gap:64, alignItems:'center' },
  aboutH3: { fontFamily:'var(--font-sans)', textTransform:'none', letterSpacing:'-0.02em', fontSize:'clamp(24px,3vw,44px)', fontWeight:300, color:'#f4f4f5',
             lineHeight:1.3, margin:'0 0 32px' },
  aboutEm: { color:'#fff', fontStyle:'italic', fontWeight:500 },
  aboutP: { color:'#a1a1aa', fontSize:18, maxWidth:560, marginBottom:48, lineHeight:1.7 },
  portraitWrap: { position:'relative', aspectRatio:'4/5' },
  portraitBg: { position:'absolute', inset:-16, background:'rgba(255,255,255,0.05)',
                borderRadius:24, transition:'inset 700ms var(--ease-standard)' },
  portrait: { position:'relative', width:'100%', height:'100%', objectFit:'cover', objectPosition:'50% 30%', borderRadius:16 },
  chips: { display:'flex', gap:16, flexWrap:'wrap' },

  ctaSection: { padding:'192px 0', background:'#000', position:'relative', overflow:'hidden' },
  ctaVert: { position:'absolute', top:0, left:'50%', width:1, height:'100%', background:'#18181b', zIndex:0 },
  ctaHorz: { position:'absolute', top:'50%', left:0, width:'100%', height:1, background:'#18181b', zIndex:0 },
  ctaInner: { position:'relative', zIndex:10, textAlign:'center' },
  ctaH2: { fontFamily:'var(--font-display)', fontWeight:800, fontSize:'clamp(60px,10vw,168px)',
           color:'#fff', textTransform:'uppercase', letterSpacing:'-0.04em', lineHeight:0.9,
           margin:'0 0 48px', opacity:0.92 },
};

function splitName(name) {
  const words = name.split(' ');
  let i = 0;
  return words.map((word, wi) => (
    <span key={wi} style={{ display:'inline-block', whiteSpace:'nowrap' }}>
      {Array.from(word).map((ch, ci) => {
        const delay = 0.55 + (i++) * 0.06;
        return <span key={ci} className="zf-letter" style={{ animationDelay: delay + 's' }}>{ch}</span>;
      })}
      {wi < words.length - 1 && <span style={{ display:'inline-block', width:'0.35em' }}/>}
    </span>
  ));
}

// Single card in the scrolling strip
function FeaturedCard({ id, num, title, category, year, image, tag, onOpen, duplicate = false }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={'#/work/' + id}
      aria-hidden={duplicate || undefined}
      tabIndex={duplicate ? -1 : undefined}
      onClick={(e) => {
        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
        e.preventDefault(); onOpen(id);
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className={'zf-featured-card' + (duplicate ? ' zf-featured-duplicate' : '')}
      style={{
        position: 'relative',
        width: 380,
        height: 540,
        flexShrink: 0,
        borderRadius: 4,
        overflow: 'hidden',
        cursor: 'pointer',
        background: '#0a0a0a',
        textDecoration: 'none',
      }}
    >
      {/* Image */}
      <img
        src={image}
        alt={title}
        loading="lazy"
        decoding="async"
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          filter: hover ? 'brightness(0.65)' : 'brightness(0.45)',
          transform: hover ? 'scale(1.07)' : 'scale(1.0)',
          transition: 'transform 900ms cubic-bezier(.2,.8,.2,1), filter 600ms',
        }}
      />

      {/* Bottom gradient */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.95) 100%)',
      }}/>

      {/* Top row: number + year */}
      <div style={{
        position: 'absolute', top: 24, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 28, fontWeight: 500,
          color: hover ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.35)',
          letterSpacing: '-0.02em',
          transition: 'color 400ms',
        }}>{num}</span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'rgba(255,255,255,0.3)', letterSpacing: '0.1em',
        }}>{year}</span>
      </div>

      {/* Bottom content */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 28px 28px' }}>
        {/* "View Project" hint on hover */}
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.25em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)',
          margin: '0 0 10px',
          opacity: hover ? 1 : 0,
          transform: hover ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 350ms, transform 350ms',
        }}>View Project →</p>

        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 'clamp(22px, 2.2vw, 30px)', color: '#fff',
          textTransform: 'uppercase', letterSpacing: '-0.025em',
          lineHeight: 1.05, margin: '0 0 10px',
        }}>{title}</h3>

        <div className="zf-featured-meta" style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <span style={{
            fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.4)',
          }}>{category}</span>
          <span style={{ width: 3, height: 3, borderRadius: '50%', background: '#3f3f46', flexShrink: 0 }}/>
          <span style={{
            fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.3)',
          }}>{tag}</span>
        </div>
      </div>
    </a>
  );
}

// Featured Work: infinite horizontal scroll strip
function FeaturedScroll({ onOpen }) {
  // Duplicate items for seamless loop
  const doubled = [...FEATURED, ...FEATURED];

  return (
    <section className="zf-featured-section" style={{ padding: '120px 0 0', background: '#000' }}>

      {/* Section header */}
      <div className="zf-featured-head zf-section-inner" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px 64px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32,
      }}>
        <div>
          <span style={hs.eyebrow} className="zf-reveal">Selection · {FEATURED.length} Films</span>
          <h2 style={hs.h2} className="zf-reveal zf-reveal-delay-1">Featured Work</h2>
        </div>

        <a className="zf-film-link" href="#/work">View all films <Icon.ArrowRight size={16}/></a>
      </div>

      {/* Infinite scrolling strip */}
      <div className="zf-cards-overflow">
        <div className="zf-cards-track">
          {doubled.map((p, i) => (
            <FeaturedCard key={`${p.id}-${i}`} {...p} onOpen={onOpen} duplicate={i >= FEATURED.length}/>
          ))}
        </div>
      </div>

      {/* Bottom border / breathing room */}
      <div style={{ height: 120, borderBottom: '1px solid #18181b' }}/>
    </section>
  );
}

function Home({ onNavigate }) {
  const [portHover, setPortHover] = React.useState(false);
  const heroBackgroundRef = React.useRef(null);
  const heroContentRef = React.useRef(null);
  const [reduceMotion, setReduceMotion] = React.useState(() => window.matchMedia('(prefers-reduced-motion: reduce)').matches);

  React.useEffect(() => {
    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
    const update = () => setReduceMotion(media.matches);
    media.addEventListener('change', update);
    return () => media.removeEventListener('change', update);
  }, []);

  React.useEffect(() => {
    const background = heroBackgroundRef.current;
    const content = heroContentRef.current;
    if (reduceMotion) {
      background.style.transform = 'none';
      content.style.transform = 'none';
      content.style.opacity = '1';
      return;
    }
    let frame = 0;
    const update = () => {
      const y = window.scrollY;
      background.style.transform = `translateY(${Math.min(y * 0.35, 400)}px)`;
      content.style.transform = `translateY(${y * 0.15}px)`;
      content.style.opacity = Math.max(0, 1 - y / 600);
      frame = 0;
    };
    const onScroll = () => { if (!frame) frame = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(frame); };
  }, [reduceMotion]);

  const marqueeWords = ['Directing','Cinematography','Editing','Doha','Commercial','Documentary','Original'];

  return (
    <div style={{ width:'100%', overflowX:'hidden' }}>

      {/* Hero */}
      <section style={hs.hero} className="zf-hero">
        <div ref={heroBackgroundRef} style={hs.heroBg}>
          <img
            src={IMGS.hero}
            srcSet="assets/hero-mobile.webp 960w, assets/hero-wide.webp 2560w"
            sizes="100vw"
            alt=""
            style={hs.heroImg}
            className="zf-hero-bg-img"
            loading="eager"
            decoding="async"
            fetchPriority="high"
            draggable="false"
            width="3840"
            height="2160"
          />
          <div style={hs.heroGrad}/>
          <div className="zf-hero-scrim"/>
          <div className="zf-hero-vignette"/>
        </div>
        <div ref={heroContentRef} style={hs.heroInner} className="zf-hero-inner">
          <p style={hs.kicker}><span className="zf-hero-kicker">Qatar Based Filmmaker</span></p>
          <h1 style={hs.hero1} className="zf-hero-name">{splitName('Ziad Haissam')}</h1>
          <p style={hs.heroSub} className="zf-hero-sub">Crafting cinematic narratives through light, motion, and perspective.</p>
          <div style={hs.ctas} className="zf-hero-ctas">
            <PillPrimary size="lg" onClick={() => onNavigate('/work')}>
              View Work <Icon.ArrowRight size={18}/>
            </PillPrimary>
            <PillGhost onClick={() => onNavigate('/contact')}>Get in Touch</PillGhost>
          </div>
          <div className="zf-hero-scroll-hint" style={{
            position:'absolute', bottom:-140, left:'50%', transform:'translateX(-50%)',
            display:'flex', flexDirection:'column', alignItems:'center', gap:12,
            animation:'zfFadeIn 1s ease-out 2.4s both',
          }}>
            <span style={{ color:'#71717a', fontSize:10, letterSpacing:'0.3em', textTransform:'uppercase' }}>Scroll</span>
            <div className="zf-scroll-line"/>
          </div>
        </div>
      </section>

      {/* Marquee divider */}
      <div className="zf-marquee" aria-hidden="true">
        <div className="zf-marquee-track">
          {Array.from({length: 4}).map((_, k) => (
            <span key={k} className="zf-marquee-group">
              {marqueeWords.map((w, i) => (
                <React.Fragment key={i}>
                  <span>{w}</span>
                  <span className="zf-marquee-dot">✦</span>
                </React.Fragment>
              ))}
            </span>
          ))}
        </div>
      </div>

      {/* Featured Work — infinite scroll strip */}
      <FeaturedScroll onOpen={(id) => onNavigate('/work/' + id)} />

      {/* About strip */}
      <section style={hs.aboutSection} className="zf-about-section">
        <div style={{ ...hs.inner }} className="zf-section-inner">
          <div style={hs.aboutGrid} className="zf-about-grid">
            <div>
              <span style={hs.eyebrow} className="zf-reveal">The Filmmaker</span>
              <h2 style={hs.aboutH3} className="zf-reveal zf-reveal-delay-1 zf-about-h3">
                I’m Ziad, a filmmaker drawn to <span style={hs.aboutEm}>light, movement, and the stories in between.</span>
              </h2>
              <p style={hs.aboutP} className="zf-reveal zf-reveal-delay-2 zf-about-p">Based in Doha, Qatar, I work across commercial films, documentary storytelling, and independent projects—from the first idea to the final edit.</p>
              <div style={hs.chips} className="zf-reveal zf-reveal-delay-3">
                {['Directing','Cinematography','Editing','Creative Strategy'].map(t =>
                  <Chip key={t}>{t}</Chip>
                )}
              </div>
            </div>
            <div style={hs.portraitWrap} className="zf-portrait-wrap"
                 onMouseEnter={() => setPortHover(true)} onMouseLeave={() => setPortHover(false)}>
              <div style={{ ...hs.portraitBg, inset: portHover ? -24 : -16 }}/>
              <img src={IMGS.portrait} alt="Portrait of Ziad Haissam" style={hs.portrait} width="1134" height="1600" loading="lazy" decoding="async"/>
              <div style={{
                position:'absolute', left:16, bottom:16, padding:'10px 16px',
                background:'rgba(0,0,0,0.8)', backdropFilter:'blur(8px)',
                border:'1px solid #27272a', borderRadius:999,
                color:'#fff', fontSize:10, letterSpacing:'0.3em', textTransform:'uppercase',
                fontFamily:'var(--font-mono)',
              }}>● Doha · Qatar</div>
            </div>
          </div>
        </div>
      </section>

      {/* Let's Make History */}
      <section style={hs.ctaSection} className="zf-cta-section">
        <div style={hs.ctaVert}/><div style={hs.ctaHorz}/>
        <div style={{ ...hs.inner, ...hs.ctaInner }} className="zf-section-inner">
          <p style={{ color:'#52525b', fontSize:11, letterSpacing:'0.5em',
                      textTransform:'uppercase', marginBottom:24 }} className="zf-reveal">Collaborate</p>
          <h2 style={hs.ctaH2} className="zf-reveal zf-reveal-delay-1 zf-cta-h2">Let's Make <br/>History</h2>
          <div className="zf-reveal zf-reveal-delay-2">
            <PillPrimary size="lg" onClick={() => onNavigate('/contact')}>Start a Project</PillPrimary>
          </div>
        </div>
      </section>

    </div>
  );
}

window.Home = Home;