/* Sanjab Studio website — top sections (Nav, Hero, Services, YouTube, Studios, AI).
   Composes the design-system primitives from the bundle; section layout via kit.css. */
const { Button, Eyebrow, Badge, Icon, Card, Tag, TagRow } = window.DesignSystem_7abc08;

function Logo({ sub = true }) {
  const { T } = window.useLang();
  return (
    <a href="#/" className="logo">
      <span className="logo-mark"><img src="/custom/sanjab/assets/sanjab-squirrel.png" alt="سنجاب استودیو" /></span>
      <span>
        <span className="logo-name">{T('سنجاب استودیو')}</span>
        {sub && <small className="logo-sub">{T('از خانوادهٔ')} <span className="logo-wbc">{T('وبکستینگ')}</span></small>}
      </span>
    </a>
  );
}

function Nav({ menu }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [route, setRoute] = React.useState(() => location.hash.replace(/^#\/?/, '') || 'home');
  const { T, lang, toggle } = window.useLang();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    const onHash = () => setRoute(location.hash.replace(/^#\/?/, '') || 'home');
    window.addEventListener('scroll', onScroll);
    window.addEventListener('hashchange', onHash);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('hashchange', onHash); };
  }, []);
  const fallback = [['services','خدمات'],['youtube','یوتیوب'],['studios','استودیوها'],['ai','هوش مصنوعی'],['portfolio','نمونه‌کارها'],['about','درباره'],['contact','تماس']];
  const items = (menu && menu.length)
    ? menu.filter(m => m.visible !== false).map(m => [m.slug, m.label])
    : fallback;
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="container nav-inner">
        <Logo />
        <ul className={'nav-menu' + (open ? ' open' : '')}>
          {items.map(([slug, label]) => (
            <li key={slug}><a href={'#/' + slug} className={route === slug ? 'active' : ''} onClick={() => setOpen(false)}>{T(label)}</a></li>
          ))}
          <li><a href="#" className="nav-consult" onClick={(e)=>{e.preventDefault(); setOpen(false); window.SJ_AUTH.openConsult();}}>{T('مشاورهٔ رایگان')}</a></li>
        </ul>
        <button className="lang-toggle" onClick={toggle} aria-label="language">{lang === 'fa' ? 'EN' : 'فا'}</button>
        <a href="#" className="sj-btn sj-btn--primary sj-btn--sm nav-cta" onClick={(e)=>{e.preventDefault(); window.SJ_AUTH.openLogin();}}>{T('ورود / ثبت‌نام')}</a>
        <button className="menu-toggle" onClick={() => setOpen(o => !o)} aria-label="منو"><Icon name="menu" /></button>
      </div>
    </nav>
  );
}

function Hero({ hero }) {
  const { T } = window.useLang();
  return (
    <header className="hero">
      <div className="container hero-grid">
        <div className="hero-text">
          <Badge>{T(hero.badge)}</Badge>
          <h1>{T(hero.titleLead)}<br/><span className="accent">{T(hero.titleAccent)}</span></h1>
          <p>{T(hero.subtitle)}</p>
          <div className="hero-actions">
            <Button href="#/contact" icon="arrow">{T(hero.ctaPrimary)}</Button>
            <Button href="#/services" variant="ghost">{T(hero.ctaGhost)}</Button>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-figure">
            <img src="/custom/sanjab/assets/sanjab-squirrel.png" className="hero-photo hero-squirrel" alt="سنجاب خوشحال با بلوط" />
            <div className="hero-statchips">
              {hero.stats.map((s, i) => (
                <div className="hstat" key={i}><strong>{s.value}</strong><span>{T(s.label)}</span></div>
              ))}
            </div>
          </div>
          <div className="hero-metrics">
            {hero.metrics.map((m, i) => (
              <div className="hmetric" key={i}>
                <span className="hmetric-ic"><Icon name={m.icon} size={18} /></span>
                <span className="hmetric-body"><b>{m.value}</b><small>{m.label}</small></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </header>
  );
}

function SectionHead({ tag, title, sub }) {
  return (
    <div className="section-head">
      <Eyebrow center>{tag}</Eyebrow>
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

function Services({ services }) {
  return (
    <section id="services">
      <div className="container">
        <SectionHead tag={services.tag} title={services.title} sub={services.subtitle} />
        <div className="grid-auto">
          {services.list.map((s, i) => (
            <Card key={i} accent={s.color} interactive className="service-card">
              <div className="card-icon"><Icon name={s.icon} size={26} /></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <TagRow className="tag-row">{(s.tags||[]).map((t, j) => <Tag key={j}>{t}</Tag>)}</TagRow>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function YouTube({ yt }) {
  return (
    <section id="youtube" className="youtube-section">
      <div className="container split">
        <div>
          <Eyebrow>{yt.tag}</Eyebrow>
          <h2>{yt.titleLead} <span className="accent">{yt.titleAccent}</span></h2>
          <p className="lead">{yt.desc}</p>
          <div className="yt-perks">
            {yt.perks.map((p, i) => (
              <div className="yt-perk" key={i}>
                <div className="yt-perk-ic"><Icon name={p.icon} /></div>
                <strong>{p.title}</strong><span>{p.desc}</span>
              </div>
            ))}
          </div>
          <Button href="#/contact" icon="arrow">{yt.cta}</Button>
        </div>
        <div>
          <div className="yt-player">
            <div className="yt-thumb">
              <div className="yt-play"><Icon name="play" size={26} /></div>
              <span className="yt-dur">{yt.video.duration}</span>
            </div>
            <div className="yt-info">
              <h4>{yt.video.title}</h4>
              <div className="yt-meta">
                <span className="ch"><span className="yt-ch-av"><Icon name="acorn" size={15} strokeWidth={1.9} /></span>{yt.video.channel}</span>
                <span>•</span><span>{yt.video.views}</span>
                <span>•</span><span>{yt.video.time}</span>
              </div>
              <div className="yt-statrow">
                {yt.video.stats.map((s, i) => (
                  <span key={i}><Icon name={s.icon} size={18} /><strong>{s.value}</strong></span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Studios({ studios }) {
  return (
    <section id="studios">
      <div className="container">
        <SectionHead tag={studios.tag} title={studios.title} sub={studios.subtitle} />
        <div className="studios-grid">
          {studios.list.map((s, i) => (
            <Card key={i} accent={s.color} interactive pad={false} className="studio-card">
              <div className="studio-banner"><span className="studio-num">{s.num}</span><Icon name={s.icon} className="studio-glyph" size={54} strokeWidth={1.6} /></div>
              <div className="studio-body">
                <h3>{s.title}</h3><p>{s.desc}</p>
                <ul className="check-list">
                  {(s.features||[]).map((f, j) => <li key={j}><Icon name="check" size={18} /><span>{f}</span></li>)}
                </ul>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function AI({ ai }) {
  return (
    <section id="ai" className="ai-section">
      <div className="container split">
        <div>
          <Eyebrow>{ai.tag}</Eyebrow>
          <h2>{ai.titleLead} <span className="accent">{ai.titleAccent}</span></h2>
          <p className="lead">{ai.desc}</p>
          <ul className="ai-features">
            {ai.features.map((f, i) => <li key={i}><Icon name="check" size={24} strokeWidth={2.4} /><span>{f}</span></li>)}
          </ul>
          <Button href="#/contact" icon="arrow">{ai.cta}</Button>
        </div>
        <div>
          <div className="ai-visual">
            <div className="ai-ring r1"></div><div className="ai-ring r2"></div><div className="ai-ring r3"></div>
            <img src="/custom/sanjab/assets/sanjab-squirrel.png" className="ai-photo ai-squirrel" alt="سنجاب با بلوط" />
            <div className="ai-chips">{ai.chips.map((c, i) => <div className="ai-chip" key={i}>{c}</div>)}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Services, YouTube, Studios, AI, SectionHead, Logo });