// sections.jsx — section components

const { PHOTOS, NAV: NAV_RU, CONTACT, PRESS_TAPE } = window.SITE;

// Hand-drawn scribble loop — Sequoia-style hover marker.
// Three subtly different paths so adjacent links don't look identical.
const SCRIBBLE_PATHS = [
  // loose oval with a tail
  "M 88 38 C 70 20, 30 22, 18 40 C 8 56, 22 70, 50 72 C 80 74, 100 60, 96 44 C 92 30, 70 26, 50 32 L 18 60",
  // tighter oval, longer tail
  "M 90 36 C 76 18, 28 18, 14 36 C 4 52, 16 70, 50 72 C 86 74, 102 56, 96 40 C 90 28, 64 24, 40 32 L 8 56",
  // wider, more enthusiastic
  "M 92 32 C 72 12, 22 18, 12 38 C 4 58, 24 74, 56 72 C 86 70, 104 52, 96 36 C 88 22, 60 22, 36 30 L 4 54",
];

function Scribble({ children, variant = 0, className = '', ...rest }) {
  const d = SCRIBBLE_PATHS[variant % SCRIBBLE_PATHS.length];
  return (
    <span className={`scribble ${className}`} {...rest}>
      <svg className="scribble__svg" viewBox="0 0 110 90" aria-hidden="true" preserveAspectRatio="none">
        <path d={d} style={{ ['--scrib-len']: 380 }} />
      </svg>
      {children}
    </span>
  );
}
const I18N = window.I18N;
const CATEGORIES_I18N = window.CATEGORIES_I18N;
const SERVICES_I18N = window.SERVICES_I18N;
const PRESS_GROUPS_I18N = window.PRESS_GROUPS_I18N;
const REVIEWS_I18N = window.REVIEWS_I18N;
const FAQ_I18N = window.FAQ_I18N;

// Build photo-bound categories per language
function buildCategories(lang) {
  const ru = window.SITE.CATEGORIES;
  const meta = CATEGORIES_I18N[lang];
  return ru.map((c, i) => ({ ...c, title: meta[i].title, desc: meta[i].desc }));
}
function buildNav(lang) {
  const t = I18N[lang].nav;
  return [
    { label: t.portfolio, href: '#portfolio' },
    { label: t.services, href: '#services' },
    { label: t.press, href: '#press' },
    { label: t.reviews, href: '#reviews' },
    { label: t.contact, href: '#contact' },
  ];
}

function Header({ lang, setLang, dark, setDark }) {
  const t = I18N[lang];
  const nav = buildNav(lang);
  return (
    <header className="site-header" data-screen-label="Header">
      <div className="site-header__inner">
        <nav className="site-nav">
          {nav.slice(0, 3).map((n, i) => (
            <a key={n.href} href={n.href} className="site-nav__link">
              <Scribble variant={i}>{n.label}</Scribble>
            </a>
          ))}
        </nav>
        <a href="#top" className="wordmark">Zakhar <em>Grinov</em></a>
        <div className="site-header__cta">
          <div className="seg" role="group" aria-label="language">
            <button className={`seg__btn ${lang==='ru'?'is-on':''}`} onClick={()=>setLang('ru')}>RU</button>
            <button className={`seg__btn ${lang==='en'?'is-on':''}`} onClick={()=>setLang('en')}>EN</button>
          </div>
          <button className="theme-toggle" onClick={()=>setDark(!dark)} aria-label="toggle theme" title={dark? 'Light' : 'Dark'}>
            <span className="theme-toggle__dot" />
          </button>
          <a href="#contact" className="site-nav__link site-nav__link--cta"><Scribble variant={2}>{t.headerCta.contact}</Scribble></a>
        </div>
      </div>
    </header>
  );
}

function HeroBleed({ lang }) {
  const t = I18N[lang].hero;
  return (
    <section className="hero hero--bleed" data-screen-label="Hero · Full-bleed">
      <div className="hero__media"><img src={PHOTOS.hero} alt="Студийный портрет — красная помада" /></div>
      <div className="hero__content">
        <div className="hero__top">
          <span className="label" style={{color: 'var(--paper)', mixBlendMode: 'difference'}}>{t.pro}</span>
          <span className="label" style={{color: 'var(--paper)', mixBlendMode: 'difference'}}>{t.where}</span>
        </div>
        <div>
          <h1 className="display">Zakhar<br/><em>Grinov</em></h1>
          <div className="hero__bottom" style={{marginTop: 'var(--s-4)'}}>
            <p className="label" style={{maxWidth: '36ch', lineHeight: 1.6}}>{t.phrase}</p>
            <a href="#contact" className="btn">{t.cta} <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ lang }) {
  const t = I18N[lang].hero;
  return (
    <section className="hero hero--split" data-screen-label="Hero · Split">
      <div className="hero__grid">
        <div className="hero__media"><img src={PHOTOS.hero} alt="Студийный портрет — красная помада" /></div>
        <div className="hero__text">
          <span className="label">{t.pro}</span>
          <h1 className="display">Zakhar<br/><em>Grinov</em></h1>
          <p className="body" style={{maxWidth: '38ch', fontSize: 19}}>{t.phrase}</p>
          <div style={{display: 'flex', gap: 16, alignItems: 'center', marginTop: 8}}>
            <a href="#contact" className="btn">{t.cta} <span className="arrow">→</span></a>
            <a href="#portfolio" className="linkish">{t.portfolioLink}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroType({ lang }) {
  const t = I18N[lang].hero;
  return (
    <section className="hero hero--type" data-screen-label="Hero · Type">
      <div className="hero__type">
        <span className="label">Pro MUA · {t.meta}</span>
        <h1 className="display">Zakhar <em>Grinov</em></h1>
        <div className="hero__type-meta">
          <p className="body" style={{maxWidth: '40ch', margin: 0}}>{t.phrase}</p>
          <a href="#contact" className="btn">{t.cta} <span className="arrow">→</span></a>
        </div>
      </div>
      <div className="hero__strip">
        {[PHOTOS.hero, PHOTOS.bw1, PHOTOS.feathers, PHOTOS.p4503].map((src, i) => (
          <div className="frame" key={i}><img src={src} alt={`Работа ${i+1}`} /></div>
        ))}
      </div>
    </section>
  );
}

function Intro({ lang }) {
  const t = I18N[lang].intro;
  return (
    <section className="section section--dense" id="about">
      <div className="container">
        <div className="intro">
          <span className="label">{t.label}</span>
          <div>
            <p className="intro__lede">{t.lede}</p>
            <div className="intro__body">
              {t.body.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['Lancôme', 'Sisley', 'NARS', 'By Terry', 'Vichy', 'Elle', 'Tatler', 'Harper’s Bazaar', 'Cosmopolitan', 'L’Officiel', 'La Roche-Posay', 'Erborian'];
  const row = [...items, ...items, ...items];
  const trackRef = React.useRef(null);
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const el = trackRef.current; if (!el) return;
        // base ambient drift + scroll-driven offset
        const offset = window.scrollY * 0.6;
        el.style.transform = `translate3d(${-offset % (el.scrollWidth / 3)}px, 0, 0)`;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);
  return (
    <div className="marquee marquee--scroll" aria-hidden="true">
      <div className="marquee__track" ref={trackRef}>
        {row.map((n, i) => (
          <React.Fragment key={i}>
            <span>{n}</span>
            <span className="marquee__star">✦</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Categories({ density, lang }) {
  const t = I18N[lang].portfolio;
  const cats = buildCategories(lang);
  return (
    <section className="section" id="portfolio">
      <div className="container">
        <div className="section-head">
          <span className="label">{t.label}</span>
          <div>
            <h2 className="h2 section-head__title">{t.title}</h2>
            <p className="section-head__lede">{t.lede}</p>
          </div>
        </div>
        <div className="cats">
          {cats.map((c) => (
            <article className="cat" key={c.id} id={c.id}>
              <div className="cat__meta">
                <span className="cat__num">{t.catLabel(c.num)}</span>
                <h3 className="cat__title">{c.title}</h3>
                <p className="body" style={{margin: 0}}>{c.desc}</p>
                <a href={`#${c.id}`} className="linkish cat__more" style={{alignSelf: 'start'}}><Scribble variant={1}>{t.more}</Scribble></a>
              </div>
              <div className={`cat__grid ${density}`}>
                {c.photos.map((src, i) => (
                  <a className="cat__cell" key={i} href={`#${c.id}`}>
                    <img src={src} alt={`${c.title} — ${i+1}`} loading="lazy" />
                  </a>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ lang }) {
  const t = I18N[lang].services;
  const items = SERVICES_I18N[lang];
  return (
    <section className="section section--dense" id="services" style={{background: 'var(--paper-2)'}}>
      <div className="container">
        <div className="services">
          <div className="services__head">
            <span className="label">{t.label}</span>
            <h2 className="h2">{t.title[0]}<br/><em>{t.title[1]}</em></h2>
            <p className="body" style={{maxWidth: '32ch', margin: 0}}>{t.note}</p>
          </div>
          <div className="services__list">
            {items.map((s) => (
              <div className="service" key={s.num}>
                <span className="service__num">{s.num}</span>
                <span className="service__name">{s.name}</span>
                <span className="service__tag">{s.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PressTape({ lang }) {
  const t = I18N[lang].press;
  return (
    <section className="press-tape" id="press" data-screen-label="Press">
      <div className="press-tape__head">
        <span className="label">{t.label}</span>
        <a href="#contact" className="linkish"><Scribble variant={0}>{t.request}</Scribble></a>
      </div>
      <div className="press-tape__row">
        {PRESS_TAPE.map((src, i) => (
          <a key={i} className="frame" href="#press"><img src={src} alt={`Публикация ${i+1}`} loading="lazy"/></a>
        ))}
      </div>
    </section>
  );
}

function PressList({ lang }) {
  const groups = PRESS_GROUPS_I18N[lang];
  const t = I18N[lang].press;
  return (
    <section className="section section--dense">
      <div className="container">
        <div className="press">
          <span className="label">{t.brandsLabel}</span>
          <div className="press__cols">
            {groups.map((g, i) => (
              <div className="press__group" key={i}>
                <span className="label">{g.label}</span>
                {g.items.map((it, j) => <p key={j}>{it}</p>)}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Reviews({ lang }) {
  const t = I18N[lang].reviews;
  const items = REVIEWS_I18N[lang];
  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="section-head">
          <span className="label">{t.label}</span>
          <div>
            <h2 className="h2 section-head__title">{t.title[0]}<br/><em>{t.title[1]}</em></h2>
          </div>
        </div>
        <div className="reviews">
          {items.map((r, i) => (
            <article className="review" key={i}>
              <div className="review__author">
                <span className="review__name">{r.name}</span>
                <span className="review__role">{r.role}</span>
              </div>
              <p className="review__body">{r.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ lang }) {
  const t = I18N[lang].contact;
  const big = t.big;
  const em = t.bigEm;
  const parts = big.split(em);
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="contact">
          <div>
            <span className="label">{t.label}</span>
            <h2 className="contact__big" style={{marginTop: 'var(--s-3)'}}>
              {parts.map((p, i, a) => i < a.length - 1 ? <React.Fragment key={i}>{p}<em>{em}</em></React.Fragment> : p)}
            </h2>
            <p className="body" style={{marginTop: 'var(--s-4)', maxWidth: '40ch'}}>{t.note}</p>
          </div>
          <div className="contact__channels">
            {CONTACT.channels.map((c, i) => (
              <a key={c.platform} href={c.url} target="_blank" rel="noopener noreferrer" className="channel">
                <span className="channel__platform">{c.platform}</span>
                <span className="channel__handle"><Scribble variant={i % 3}>{c.handle}</Scribble></span>
                <span className="channel__cta">{c.cta} →</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Faq({ lang }) {
  const [open, setOpen] = React.useState(0);
  const t = I18N[lang].faq;
  const items = FAQ_I18N[lang];
  return (
    <section className="section section--dense" id="faq" style={{background: 'var(--paper-2)'}}>
      <div className="container">
        <div className="section-head">
          <span className="label">{t.label}</span>
          <h2 className="h2 section-head__title">{t.title[0]} <em>{t.title[1]}</em></h2>
        </div>
        <div className="faq__list">
          {items.map((f, i) => (
            <div key={i} className={`faq__item ${open === i ? 'open' : ''}`}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="num">{String(i+1).padStart(2,'0')}</span>
                <span>{f.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="faq__a"><div className="faq__a-inner"><p>{f.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  const t = I18N[lang].footer;
  const nav = buildNav(lang);
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__wordmark">Zakhar <em>Grinov</em></div>
        <div>
          <h4>{t.connect}</h4>
          <ul>
            {CONTACT.channels.map((c) => (
              <li key={c.platform}><a href={c.url} target="_blank" rel="noopener noreferrer">{c.platform}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <h4>{t.sections}</h4>
          <ul>{nav.map(n => <li key={n.href}><a href={n.href}>{n.label}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.base}</h4>
          <ul>{t.baseItems.map((it, i) => <li key={i}>{it}</li>)}</ul>
        </div>
      </div>
      <div className="site-footer__copy">
        <span>{t.copy}</span>
        <span>made with care · v 0.2</span>
      </div>
    </footer>
  );
}

function CursorBlob() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    let x = window.innerWidth/2, y = window.innerHeight/2;
    let tx = x, ty = y;
    let raf = 0;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; el.classList.add('is-active'); };
    const onLeave = () => el.classList.remove('is-active');
    const onOverInteractive = (e) => {
      const a = e.target.closest('a, button');
      el.classList.toggle('is-hot', !!a);
    };
    const tick = () => {
      x += (tx - x) * 0.14;
      y += (ty - y) * 0.14;
      el.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mousemove', onOverInteractive);
    window.addEventListener('mouseleave', onLeave);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mousemove', onOverInteractive);
      window.removeEventListener('mouseleave', onLeave);
      cancelAnimationFrame(raf);
    };
  }, []);
  return <div className="cursor-blob" ref={ref} aria-hidden="true" />;
}

Object.assign(window, { Header, HeroBleed, HeroSplit, HeroType, Intro, Marquee, Categories, Services, PressTape, PressList, Reviews, Contact, Faq, Footer, CursorBlob, Scribble });