const DS=window.IonMediaDesignSystem_c5c366;
const {Button,Kicker,TextArrowLink,IconButton,Badge}=DS;
function LIcon({name,size=18,color='currentColor'}){
  const ref=React.useRef(null);
  React.useEffect(()=>{
    const pas=name.split('-').map(s=>s.charAt(0).toUpperCase()+s.slice(1)).join('');
    const ic=window.lucide&&(lucide.icons?.[pas]||lucide[pas]);
    if(ref.current&&ic){ref.current.innerHTML='';const el=lucide.createElement(ic);el.setAttribute('width',size);el.setAttribute('height',size);el.setAttribute('stroke-width','1.5');ref.current.appendChild(el);}
  },[name]);
  return <span ref={ref} style={{display:'inline-flex',color}}></span>;
}
const shell={maxWidth:'1280px',margin:'0 auto',paddingLeft:'64px',paddingRight:'64px',boxSizing:'border-box'};
function SectionHead({t}){
  return <div>
    <Kicker dash>{t.kicker}</Kicker>
    <h2 style={{fontSize:'40px',marginTop:'22px'}}>{t.title_a}<em>{t.title_em}</em>{t.title_b}</h2>
  </div>;
}
window.SectionHead=SectionHead;
function NavA({children,href,onClick}){
  const [h,setH]=React.useState(false);
  return <a href={href} onClick={onClick} style={{font:'600 12px var(--font-sans)',letterSpacing:'var(--tracking-caption)',textTransform:'uppercase',color:h?'var(--accent)':'var(--text-primary)',transition:'color var(--dur-fast) var(--ease-brand)'}} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}>{children}</a>;
}
function Header({t,lang,setLang}){
  return <header style={{position:'sticky',top:0,zIndex:50,background:'rgba(247,244,240,.92)',backdropFilter:'blur(8px)',borderBottom:'1px solid var(--border-hairline)'}}>
    <div className="shell" style={{...shell,display:'flex',alignItems:'center',justifyContent:'space-between',height:'80px'}}>
      <a href="#top"><img src="assets/logo-compact.png" alt="Ion Media" style={{height:'42px',display:'block'}}/></a>
      <nav style={{display:'flex',gap:'36px',alignItems:'center'}}>
        <span className="nav-links" style={{display:'flex',gap:'36px',alignItems:'center'}}>
        <NavA href="#work">{t.nav.work}</NavA>
        <NavA href="#packages">{t.nav.packages}</NavA>
        <NavA href="#studio">{t.nav.studio}</NavA>
        <NavA href="#contact">{t.nav.contact}</NavA>
        </span>
        <button onClick={()=>setLang(lang==='en'?'ar':'en')} style={{background:'none',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-pill)',padding:'7px 14px',cursor:'pointer',font:'600 11px var(--font-sans)',letterSpacing:'.08em',color:'var(--text-primary)'}}>{lang==='en'?'عربي':'EN'}</button>
        <Button size="sm" onClick={()=>document.getElementById('assistant').scrollIntoView===undefined?null:window.scrollTo({top:document.getElementById('assistant').offsetTop-80,behavior:'smooth'})}>{t.nav.quote}</Button>
      </nav>
    </div>
  </header>;
}
function Hero({t}){
  return <section id="top" data-screen-label="Hero" style={{borderBottom:'1px solid var(--border-hairline)'}}>
    <div className="shell rgrid" style={{...shell,display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(0,1.15fr)',gap:'56px',alignItems:'center',paddingTop:'72px',paddingBottom:'72px'}}>
      <div>
        <Kicker dash>{t.hero.kicker}</Kicker>
        <h1 style={{fontSize:'clamp(44px,4.6vw,62px)',margin:'26px 0 22px'}}>{t.hero.title_a}<em>{t.hero.title_em}</em>{t.hero.title_b}</h1>
        <p style={{margin:'0 0 32px',fontSize:'16px',lineHeight:1.7,color:'var(--text-secondary)',maxWidth:'400px'}}>{t.hero.body}</p>
        <div style={{display:'flex',gap:'22px',alignItems:'center'}}>
          <Button onClick={()=>window.scrollTo({top:document.getElementById('assistant').offsetTop-80,behavior:'smooth'})}>{t.hero.cta}</Button>
          <TextArrowLink href="#packages">{t.hero.cta2}</TextArrowLink>
        </div>
      </div>
      <div className="hero-img" style={{position:'relative',height:'440px'}}>
        <image-slot id="hero" shape="rounded" radius="16" src="assets/photo-hero-portrait.jpg" placeholder="Drop your signature shot"></image-slot>
      </div>
    </div>
  </section>;
}
function Work({t}){
  const fallback=['assets/photo-wedding-trio.jpg','assets/photo-education-lab.jpg','assets/photo-sports-coach.jpg','assets/photo-hero-team.jpg'];
  return <section id="work" data-screen-label="Selected work" style={{borderBottom:'1px solid var(--border-hairline)'}}>
    <div className="shell" style={{...shell,paddingTop:'88px',paddingBottom:'88px'}}>
      <SectionHead t={t.work}/>
      <div className="trusted-row" style={{marginTop:'34px',paddingTop:'26px',borderTop:'1px solid var(--border-hairline)',display:'flex',gap:'32px',alignItems:'baseline',flexWrap:'wrap'}}>
        <span style={{font:'600 10px var(--font-sans)',letterSpacing:'.18em',textTransform:'uppercase',color:'var(--text-tertiary)'}}>{t.work.trusted}</span>
        {t.work.clients.map(c=><span key={c} style={{fontFamily:'var(--font-display)',fontSize:'18px',letterSpacing:'.06em',color:'var(--text-secondary)'}}>{c}</span>)}
      </div>
      <div className="rgrid" style={{display:'grid',gridTemplateColumns:'repeat(2,minmax(0,1fr))',gap:'22px',marginTop:'44px'}}>
        {t.work.cats.map((c,i)=><figure key={i} style={{margin:0}}>
          <div className="tile" style={{height:'340px'}}>
            <image-slot id={'work-'+i} shape="rounded" radius="12" src={fallback[i]} placeholder={'Drop: '+c}></image-slot>
          </div>
          <figcaption style={{marginTop:'12px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{font:'600 11px var(--font-sans)',letterSpacing:'.14em',textTransform:'uppercase'}}>{c}</span>
            <span style={{font:'10px var(--font-mono)',letterSpacing:'.1em',color:'var(--text-tertiary)'}}>0{i+1}</span>
          </figcaption>
        </figure>)}
      </div>
    </div>
  </section>;
}
function PackCard({p,t,featured}){
  const [h,setH]=React.useState(false);
  return <div style={{background:'var(--surface-card)',border:featured?'1px solid var(--accent)':'1px solid var(--border-soft)',borderRadius:'var(--radius-md)',padding:'30px',display:'flex',flexDirection:'column',gap:'14px',boxShadow:h?'var(--shadow-lift)':'none',transform:h?'translateY(-2px)':'none',transition:'all var(--dur-med) var(--ease-brand)',position:'relative'}} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}>
    {featured&&<Badge style={{position:'absolute',top:'-11px',insetInlineStart:'26px'}}>{t.pack.kicker}</Badge>}
    <h3 style={{fontSize:'22px'}}>{p.n}</h3>
    <div style={{display:'flex',alignItems:'baseline',gap:'8px'}}>
      <span style={{font:'11px var(--font-mono)',letterSpacing:'.1em',color:'var(--text-tertiary)'}}>{t.pack.from.toUpperCase()}</span>
      <span style={{fontFamily:'var(--font-display)',fontSize:'34px',color:'var(--accent)'}}>{p.pr}</span>
      <span style={{font:'600 12px var(--font-sans)',color:'var(--text-secondary)'}}>{t.pack.kd}</span>
    </div>
    <div style={{width:'26px',borderTop:'1.5px solid var(--accent)'}}></div>
    <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:'9px'}}>
      {p.f.map((f,i)=><li key={i} style={{display:'flex',gap:'10px',alignItems:'flex-start',fontSize:'13.5px',lineHeight:1.55,color:'var(--text-secondary)'}}><span style={{width:'5px',height:'5px',borderRadius:'50%',background:'var(--accent)',marginTop:'7px',flexShrink:0}}></span>{f}</li>)}
    </ul>
    <button onClick={()=>window.scrollTo({top:document.getElementById('assistant').offsetTop-80,behavior:'smooth'})} style={{marginTop:'auto',alignSelf:'flex-start',background:'none',border:'none',padding:0,cursor:'pointer',font:'600 12px var(--font-sans)',letterSpacing:'.12em',textTransform:'uppercase',color:'var(--accent)'}}>{t.pack.choose} <span className="flip" style={{display:'inline-block'}}>→</span></button>
  </div>;
}
function Packages({t}){
  return <section id="packages" data-screen-label="Packages" style={{borderBottom:'1px solid var(--border-hairline)',background:'var(--surface-raised)'}}>
    <div className="shell" style={{...shell,paddingTop:'88px',paddingBottom:'88px'}}>
      <div className="rgrid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'40px',alignItems:'end'}}>
        <SectionHead t={t.pack}/>
        <p style={{margin:0,fontSize:'14px',lineHeight:1.7,color:'var(--text-secondary)',maxWidth:'380px',justifySelf:'end'}}>{t.pack.note}</p>
      </div>
      <div style={{marginTop:'48px'}}>
        <div style={{font:'600 12px var(--font-sans)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--text-secondary)',marginBottom:'18px'}}>{t.pack.portraits}</div>
        <div className="rgrid" style={{display:'grid',gridTemplateColumns:'repeat(3,minmax(0,1fr))',gap:'20px'}}>
          {t.pack.p.map((p,i)=><PackCard key={i} p={p} t={t} featured={i===1}/>)}
        </div>
      </div>
      <div style={{marginTop:'44px'}}>
        <div style={{font:'600 12px var(--font-sans)',letterSpacing:'.16em',textTransform:'uppercase',color:'var(--text-secondary)',marginBottom:'18px'}}>{t.pack.events}</div>
        <div className="rgrid" style={{display:'grid',gridTemplateColumns:'repeat(3,minmax(0,1fr))',gap:'20px'}}>
          {t.pack.e.map((p,i)=><PackCard key={i} p={p} t={t} featured={i===1}/>)}
        </div>
      </div>
      <div className="rgrid" style={{marginTop:'44px',border:'1px solid var(--border-soft)',borderRadius:'var(--radius-md)',background:'var(--surface-card)',padding:'28px 32px',display:'grid',gridTemplateColumns:'auto 1fr auto',gap:'26px',alignItems:'center'}}>
        <span style={{width:'52px',height:'52px',borderRadius:'50%',border:'1px solid var(--border-hairline)',display:'inline-flex',alignItems:'center',justifyContent:'center',color:'var(--accent)'}}><LIcon name="megaphone" size={22}/></span>
        <div>
          <h3 style={{fontSize:'20px',marginBottom:'6px'}}>{t.pack.smm_t}</h3>
          <p style={{margin:0,fontSize:'14px',lineHeight:1.65,color:'var(--text-secondary)',maxWidth:'560px'}}>{t.pack.smm_b}</p>
        </div>
        <TextArrowLink color="red" href="#assistant">{t.pack.smm_c}</TextArrowLink>
      </div>
    </div>
  </section>;
}
function About({t}){
  return <section id="studio" data-screen-label="About Sulaiman" style={{borderBottom:'1px solid var(--border-hairline)'}}>
    <div className="shell rgrid" style={{...shell,display:'grid',gridTemplateColumns:'380px minmax(0,1fr)',gap:'64px',alignItems:'center',paddingTop:'88px',paddingBottom:'88px'}}>
      <div className="tile-tall" style={{height:'440px'}}>
        <image-slot id="sulaiman" shape="rounded" radius="16" src="assets/photo-sulaiman.jpg" placeholder="Drop Sulaiman's portrait"></image-slot>
      </div>
      <div>
        <SectionHead t={t.about}/>
        <p style={{margin:'22px 0 26px',fontSize:'15.5px',lineHeight:1.8,color:'var(--text-secondary)',maxWidth:'520px'}}>{t.about.bio}</p>
        <a href="https://instagram.com/ionmediastudio" target="_blank" rel="noopener" style={{display:'inline-flex',alignItems:'center',gap:'10px',font:'600 12px var(--font-sans)',letterSpacing:'.12em',color:'var(--text-primary)'}}><LIcon name="instagram" size={16} color="var(--accent)"/>{t.about.ig}</a>
      </div>
    </div>
  </section>;
}
function Footer({t,lang}){
  return <footer id="contact" data-screen-label="Footer">
    <div className="shell rgrid" style={{...shell,display:'grid',gridTemplateColumns:'1.2fr 1fr 1fr',gap:'32px',paddingTop:'56px',paddingBottom:'48px'}}>
      <div>
        <img src="assets/logo-primary.png" alt="Ion Media" style={{height:'86px',display:'block'}}/>
        <p style={{margin:'16px 0 0',font:'11px var(--font-mono)',letterSpacing:'.14em',color:'var(--text-tertiary)'}}>{t.foot.domain.toUpperCase()}</p>
      </div>
      <div>
        <div style={{font:'600 11px var(--font-sans)',letterSpacing:'var(--tracking-kicker)',textTransform:'uppercase',color:'var(--accent)',marginBottom:'14px'}}>{t.foot.contact}</div>
        <div style={{fontSize:'14px',lineHeight:2.1}}>
          <a href="https://wa.me/96599300074" target="_blank" rel="noopener" style={{display:'block'}}>+965 9930 0074</a>
          <a href="mailto:sulaiman@ionmediastudio.com" style={{display:'block'}}>sulaiman@ionmediastudio.com</a>
          <span style={{color:'var(--text-secondary)'}}>{lang==='ar'?'الكويت':'Kuwait'}</span>
        </div>
      </div>
      <div>
        <div style={{font:'600 11px var(--font-sans)',letterSpacing:'var(--tracking-kicker)',textTransform:'uppercase',color:'var(--accent)',marginBottom:'14px'}}>{t.foot.follow}</div>
        <div style={{display:'flex',gap:'10px'}}>
          <IconButton label="Instagram" size={38} onClick={()=>window.open('https://instagram.com/ionmediastudio','_blank')}><LIcon name="instagram" size={15}/></IconButton>
          <IconButton label="WhatsApp" size={38} onClick={()=>window.open('https://wa.me/96599300074','_blank')}><LIcon name="message-circle" size={15}/></IconButton>
          <IconButton label="Email" size={38} onClick={()=>{location.href='mailto:sulaiman@ionmediastudio.com'}}><LIcon name="mail" size={15}/></IconButton>
        </div>
      </div>
    </div>
    <div style={{borderTop:'1px solid var(--border-hairline)'}}>
      <div className="shell" style={{...shell,display:'flex',justifyContent:'space-between',paddingTop:'18px',paddingBottom:'18px',font:'11px var(--font-mono)',letterSpacing:'.08em',color:'var(--text-tertiary)',gap:'12px',flexWrap:'wrap'}}>
        <span>{t.foot.tagline}</span>
        <span>{t.foot.rights}</span>
      </div>
    </div>
  </footer>;
}
function App(){
  const [lang,setLang]=React.useState(localStorage.getItem('ion-lang')||'en');
  const t=window.ION_I18N[lang];
  React.useEffect(()=>{
    localStorage.setItem('ion-lang',lang);
    document.documentElement.lang=lang;
    document.documentElement.dir=t.dir;
  },[lang]);
  return <div style={{background:'var(--surface-page)',fontFamily:lang==='ar'?'var(--font-arabic)':'var(--font-sans)'}}>
    <Header t={t} lang={lang} setLang={setLang}/>
    <Hero t={t}/>
    <Work t={t}/>
    <Packages t={t}/>
    <section id="assistant" data-screen-label="AI assistant" style={{borderBottom:'1px solid var(--border-hairline)',background:'var(--surface-tint)'}}>
      <div className="shell" style={{...shell,paddingTop:'88px',paddingBottom:'88px'}}>
        <window.AssistantSection t={t} lang={lang}/>
      </div>
    </section>
    <About t={t}/>
    <Footer t={t} lang={lang}/>
  </div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);