// Shared primitives — dark, minimal, lighter weights

const { ArrowRight, ArrowDown, Plus } = window.Icons;

const Container = ({children, style, className=""}) => (
  <div className={className} style={{maxWidth:1280, margin:'0 auto', padding:'0 40px', ...style}}>
    {children}
  </div>
);

const Eyebrow = ({children, color='var(--pink)'}) => (
  <div className="mono" style={{
    fontSize:10.5, letterSpacing:'0.22em', textTransform:'uppercase',
    color, display:'inline-flex', alignItems:'center'
  }}>
    <span style={{color:'var(--fg-2)', fontWeight:500}}>{children}</span>
  </div>
);

const Btn = ({children, variant='primary', href='#', icon=true, size='md', onClick}) => {
  const sizes = {
    sm: {padding:'9px 18px', fontSize:12.5, gap:8},
    md: {padding:'13px 24px', fontSize:13, gap:10},
    lg: {padding:'17px 30px', fontSize:14, gap:12}
  }[size];
  const base = {
    display:'inline-flex', alignItems:'center', ...sizes,
    borderRadius:99, fontWeight:500, letterSpacing:'0.005em',
    textDecoration:'none', border:'1px solid transparent',
    transition:'all .35s cubic-bezier(.2,.8,.2,1)', cursor:'pointer',
    whiteSpace:'nowrap',
    position:'relative',
    // Isolate so body film-grain / hero radial gradients can't bleed through via mix-blend-mode
    isolation:'isolate',
    transform:'translateZ(0)',
    backfaceVisibility:'hidden',
  };
  const variants = {
    primary: {
      background:'linear-gradient(180deg, #FFA8CC 0%, #F47AAE 100%)',
      color:'#240914',
      border:'1px solid rgba(255,255,255,0.22)',
      boxShadow:'inset 0 1px 0 rgba(255,255,255,0.42), 0 10px 26px -10px rgba(255,127,181,0.55)',
    },
    indigo:  {
      background:'linear-gradient(180deg, #A797FF 0%, #7B5BF0 100%)',
      color:'#fff',
      border:'1px solid rgba(255,255,255,0.20)',
      boxShadow:'inset 0 1px 0 rgba(255,255,255,0.32), 0 10px 26px -10px rgba(138,107,255,0.55)',
    },
    pink:    {
      background:'linear-gradient(180deg, #FFA8CC 0%, #F47AAE 100%)',
      color:'#240914',
      border:'1px solid rgba(255,255,255,0.22)',
      boxShadow:'inset 0 1px 0 rgba(255,255,255,0.42), 0 10px 26px -10px rgba(255,127,181,0.55)',
    },
    ghost:   {
      background:'rgba(245,241,230,0.02)', color:'var(--fg)',
      border:'1px solid var(--line-strong)',
      boxShadow:'inset 0 1px 0 rgba(255,255,255,0.04)',
    },
    dark:    {background:'var(--bg-3)', color:'var(--fg)', border:'1px solid var(--line)'},
    light:   {background:'var(--fg)', color:'var(--bg)'},
  }[variant];
  return (
    <a href={href} onClick={onClick} className="mag" style={{...base, ...variants}}
       onMouseMove={e=>{
         const r = e.currentTarget.getBoundingClientRect();
         const x = (e.clientX - r.left - r.width/2) * 0.12;
         const y = (e.clientY - r.top - r.height/2) * 0.12;
         e.currentTarget.style.transform = `translate(${x}px, ${y}px)`;
       }}
       onMouseLeave={e=>{e.currentTarget.style.transform = 'translate(0,0)';}}>
      {children}
      {icon && <ArrowRight size={13}/>}
    </a>
  );
};

// Soft tinted image placeholder
const Placeholder = ({ratio='4/5', label='image', accent='indigo', style={}, children}) => {
  const colors = {
    indigo: ['#3A2E78','#231C49'],
    pink:   ['#7A2C53','#4B1B33'],
    cream:  ['#2A2538','#1F1B2A'],
    ink:    ['#27232f','#1a1722'],
  }[accent];
  return (
    <div className="card-lift" style={{
      aspectRatio: ratio,
      background: `linear-gradient(135deg, ${colors[0]}, ${colors[1]})`,
      borderRadius: 14,
      position:'relative',
      overflow:'hidden',
      border:'1px solid var(--line)',
      ...style
    }}>
      <div className="mono" style={{
        position:'absolute', left:14, bottom:12,
        fontSize:10, letterSpacing:'0.10em', textTransform:'uppercase',
        color:'rgba(255,255,255,0.78)',
      }}>
        ◐ {label}
      </div>
      {children}
    </div>
  );
};

// Tag pill — subtler
const Tag = ({children, tone='indigo'}) => {
  const tones = {
    indigo: {bg:'rgba(107,83,255,0.10)', fg:'#B8AAFF', bd:'rgba(107,83,255,0.24)'},
    pink:   {bg:'rgba(255,111,168,0.10)', fg:'#FFC2D8', bd:'rgba(255,111,168,0.24)'},
    ink:    {bg:'rgba(239,234,224,0.04)', fg:'var(--fg-2)', bd:'var(--line)'},
  }[tone];
  return (
    <span className="mono" style={{
      display:'inline-block', padding:'4px 9px', borderRadius:99,
      background:tones.bg, color:tones.fg, border:`1px solid ${tones.bd}`,
      fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase'
    }}>{children}</span>
  );
};

// Reveal-on-scroll wrapper — refined for smooth motion across all pages.
// - Triggers slightly before fully entering view (rootMargin) for a natural feel
// - On mount, anything already fully visible reveals immediately (no flash on reload mid-page)
// - Once revealed, stays revealed (no re-trigger jitter when scrolling back up)
const Reveal = ({children, delay=0, kind='reveal-up', as='div', style={}}) => {
  const ref = React.useRef(null);
  React.useEffect(()=>{
    const el = ref.current; if(!el) return;

    // If reduce-motion preferred, just show immediately, no animation
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { el.classList.add('in', 'no-anim'); return; }

    // If already in viewport at mount (e.g. above the fold, or scroll position restored), reveal immediately
    const rect = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (rect.top < vh * 0.85 && rect.bottom > 0) {
      // small RAF so it transitions in cleanly even when immediate
      requestAnimationFrame(()=> setTimeout(()=> el.classList.add('in'), Math.min(delay, 200)));
      return;
    }

    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{
        if(e.isIntersecting){
          setTimeout(()=>el.classList.add('in'), delay);
          io.unobserve(el);
        }
      });
    }, {threshold:0.08, rootMargin: '0px 0px -8% 0px'});
    io.observe(el);
    return ()=>io.disconnect();
  }, [delay]);
  const Tag = as;
  return <Tag ref={ref} className={kind} style={style}>{children}</Tag>;
};

// Word-by-word reveal — same robustness as Reveal
const RevealWords = ({children, delay=0, gap=40}) => {
  const ref = React.useRef(null);
  React.useEffect(()=>{
    const el = ref.current; if(!el) return;

    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const trigger = () => {
      const words = el.querySelectorAll('.word');
      words.forEach((w,i)=>{ w.style.transitionDelay = `${delay + i*gap}ms`; });
      el.classList.add('in');
    };
    if (reduce) { el.classList.add('in', 'no-anim'); return; }

    const rect = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (rect.top < vh * 0.85 && rect.bottom > 0) {
      requestAnimationFrame(()=> setTimeout(trigger, 50));
      return;
    }

    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{
        if(e.isIntersecting){
          trigger();
          io.unobserve(el);
        }
      });
    }, {threshold:0.1, rootMargin:'0px 0px -6% 0px'});
    io.observe(el);
    return ()=>io.disconnect();
  }, [delay,gap]);
  const splitText = (s) => s.split(/(\s+)/).map((p,i) => /\s/.test(p) ? p : <span key={i} className="word">{p}</span>);
  const process = (node) => {
    if (typeof node === 'string') return splitText(node);
    if (Array.isArray(node)) return node.map(process);
    if (React.isValidElement(node)) {
      const newChildren = React.Children.map(node.props.children, ch =>
        typeof ch === 'string' ? splitText(ch) : ch
      );
      return React.cloneElement(node, {key: node.key}, newChildren);
    }
    return node;
  };
  return <span ref={ref}>{process(children)}</span>;
};

// Section opener — used at the top of each non-home page
const PageOpener = ({eyebrow, title, accent, lead, bg, bgLabel}) => (
  <section style={{
    position:'relative', overflow:'hidden',
    borderBottom:'1px solid var(--line)',
    minHeight:'78vh',
    display:'flex', alignItems:'flex-end',
    padding:'160px 0 88px'
  }}>
    {bg && (
      <div style={{position:'absolute', inset:0, zIndex:0}}>
        {/* Base photograph, slow drift */}
        <div style={{
          position:'absolute', inset:0,
          backgroundImage:`url(${bg})`,
          backgroundSize:'cover', backgroundPosition:'center',
          transform:'scale(1.06)',
          filter:'contrast(1.05) saturate(0.82) brightness(0.78)',
          animation: 'kenburns 28s ease-in-out infinite alternate'
        }}/>
        {/* Cinematic gradient — bottom-heavy for type, dark sky at top */}
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(15,13,23,0.55) 0%, rgba(15,13,23,0.35) 38%, rgba(15,13,23,0.78) 78%, var(--bg) 100%)'}}/>
        {/* Magenta / violet film wash — gives the "Netflix India" cast */}
        <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at 18% 110%, rgba(255,127,181,0.22) 0%, transparent 55%), radial-gradient(ellipse at 88% -10%, rgba(138,107,255,0.20) 0%, transparent 55%)', mixBlendMode:'screen', pointerEvents:'none'}}/>
        {/* Tight vignette */}
        <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0,0,0,0.55) 100%)', pointerEvents:'none'}}/>
        {/* Soft film grain — heavier than before */}
        <div style={{
          position:'absolute', inset:0, opacity:0.14, mixBlendMode:'overlay', pointerEvents:'none',
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`
        }}/>
      </div>
    )}
    {!bg && (<>
      <div className="blob" style={{width:480, height:480, background:'rgba(107,83,255,0.18)', top:-100, left:-160}}/>
      <div className="blob" style={{width:380, height:380, background:'rgba(255,111,168,0.16)', top:40, right:-160}}/>
    </>)}
    <Container style={{position:'relative', zIndex:2, width:'100%'}}>
      <Reveal>
        <Eyebrow>{eyebrow}</Eyebrow>
      </Reveal>
      <h1 style={{
        fontSize:'clamp(40px, 5.2vw, 76px)',
        lineHeight:1.04, letterSpacing:'-0.025em',
        margin:'18px 0 0', fontWeight:500, maxWidth:1000,
        textShadow: bg ? '0 4px 30px rgba(0,0,0,0.45)' : 'none'
      }}>
        <RevealWords gap={42}>{title}</RevealWords>
      </h1>
      {lead && (
        <Reveal delay={400}>
          <p style={{fontSize:17, lineHeight:1.55, color:'var(--fg)', opacity: bg?0.88:0.7, maxWidth:680, margin:'28px 0 0', textShadow: bg?'0 2px 16px rgba(0,0,0,0.5)':'none'}}>{lead}</p>
        </Reveal>
      )}
      {false && bgLabel && (
        <div style={{position:'absolute', bottom:0, right:0}}>
          <span className="mono" style={{fontSize:10.5, letterSpacing:'0.18em', color:'var(--fg-2)', textTransform:'uppercase'}}>
            ◐ {bgLabel}
          </span>
        </div>
      )}
    </Container>
  </section>
);

window.Primitives = { Container, Eyebrow, Btn, Placeholder, Tag, Reveal, RevealWords, PageOpener };
