/* SOLGA — site components.
   Loaded as Babel script; components attached to window for cross-script use. */

const ASSETS = 'assets';

const SiteHeader = ({ active = 'works' }) =>
<header className="site-header">
    <a className="site-header__brand" href="#">SOLGA</a>
    <nav className="site-header__nav">
      <a href="#works" className={active === 'works' ? 'is-active' : ''}>Работы</a>
      <a href="#method" className={active === 'method' ? 'is-active' : ''}>Метод</a>
      <a href="#about" className={active === 'about' ? 'is-active' : ''}>О художнике</a>
      <a href="#contact" className={active === 'contact' ? 'is-active' : ''}>Контакты</a>
    </nav>
  </header>;


const Hero = ({ image, eyebrow, title, signature = true, wordmark = false, caption }) => {
  if (wordmark) {
    return (
      <section className="hero hero--wordmark" style={{ backgroundImage: `url('${image}')` }}>
        <img className="hero__wordmark" src={`${ASSETS}/logo/signature-white.png`} alt="Solga" />
        <div className="hero__wm-meta">
          {eyebrow && <div className="hero__wm-eyebrow">{eyebrow}</div>}
          {caption && <div className="hero__wm-caption" dangerouslySetInnerHTML={{ __html: caption }}>«Поляна Курандеро» · 120 × 70 см · 2025</div>}
        </div>
      </section>);

  }
  return (
    <section className="hero" style={{ backgroundImage: `url('${image}')`, backgroundSize: 'cover', backgroundPosition: 'center top' }}>
      <div className="hero__content">
        <div className="hero__eyebrow">{eyebrow}</div>
        <h1 className="hero__title" dangerouslySetInnerHTML={{ __html: title }} />
      </div>
      {signature && <img className="hero__sig" src={`${ASSETS}/logo/signature-white.png`} alt="Solga" />}
    </section>);

};

const OrnamentRule = () =>
<div className="ornament-rule"><div className="h"></div><div className="d"></div><div className="h"></div></div>;


const StatementBlock = () =>
<section className="statement" id="about">
    <div className="statement__inner">
      <OrnamentRule />
      <p className="statement__lede">«В детстве я мечтала писать иконы — такие, в которых можно было бы прикоснуться к Творцу.»</p>
      <p className="statement__body">Сейчас я пишу цветы и красоту Мира. Для меня Творец — это Природа. Это всё сущее на Земле в своём многообразии. И человек, который познал себя через любовь к Миру, должен творить и созидать по образу и подобию.</p>
      <p className="statement__body">Каждый холст я создаю без эскизов и без плана — как акт любви и душевного подъёма. Цвет, композиция, ритм рождаются в процессе — рука движется сама, интуитивно.</p>
      <div className="statement__sig">— Сольга</div>
    </div>
  </section>;


const Plate = ({ image, title, year, dim, tag, tondo }) =>
<article className="plate">
    <div className={`plate__img${tondo ? ' plate__img--tondo' : ''}`} style={{ backgroundImage: `url('${image}')` }} />
    <h3 className="plate__title">{title}</h3>
    <div className="plate__meta">{dim} · {year}</div>
    {tag && <span className={`plate__tag${tag === 'collected' ? ' plate__tag--collected' : ''}`}>
      {tag === 'collected' ? 'Частная коллекция' : 'В наличии'}
    </span>}
  </article>;


const PlateGrid = () =>
<section className="plates" id="works">
    <div className="plates__head">
      <h2 className="plates__title">Работы</h2>
      <div className="plates__count">11 работ · 2023–2026</div>
    </div>
    <div className="plates__grid">
      <Plate image={`${ASSETS}/paintings/vesna.jpg`} title="«Весна»" dim="80 × 100 см" year="2025" tag="available" />
      <Plate image={`${ASSETS}/paintings/inspiration.jpg`} title="«Вдохновение»" dim="80 × 100 см" year="2023" tag="collected" />
      <Plate image={`${ASSETS}/paintings/morning-bouquet.jpg`} title="«Утренний букет»" dim="80 × 100 см" year="2026" tag="available" />
      <Plate image={`${ASSETS}/paintings/tulips.jpg`} title="«Тюльпаны»" dim="80 × 100 см" year="2023" tag="collected" />
      <Plate image={`${ASSETS}/paintings/zhazhda.jpg`} title="«Жажда Жизни»" dim="80 × 80 см" year="2026" tag="available" tondo />
      <Plate image={`${ASSETS}/paintings/curandero-dreams.jpg`} title="«Сны Курандеро»" dim="120 × 70 см" year="2025" tag="available" />
      <Plate image={`${ASSETS}/paintings/firebird.jpg`} title="«Жар-Птица»" dim="160 × 160 см" year="2024" tag="collected" tondo />
      <Plate image={`${ASSETS}/paintings/phoenix.jpg`} title="«Феникс в садах Курандеро»" dim="160 × 160 см" year="2026" tag="available" tondo />
    </div>
  </section>;


const InSitu = () =>
<section className="in-situ" style={{ backgroundImage: `url('${ASSETS}/paintings/zhazhda-interior.jpg')` }}>
    <div className="in-situ__copy">
      <div className="in-situ__eyebrow">In situ</div>
      <h2 className="in-situ__title">«Жажда Жизни»<br />в&nbsp;частной коллекции</h2>
    </div>
    <div className="in-situ__closing">Передача картины происходит<br />через личный диалог.</div>
  </section>;


const MethodBlock = () =>
<section className="method" id="method">
    <div className="method__img" />
    <div className="method__copy">
      <div className="method__eyebrow">Метод</div>
      <h2 className="method__title">Energy <em>Impasto</em></h2>
      <ul className="method__list">
        <li><span className="num">01</span><span>Масло, мастихин — без кистей и предварительных эскизов.</span></li>
        <li><span className="num">02</span><span>Толщина рельефа — 7–10 мм. Из живописи рождается скульптурный объект.</span></li>
        <li><span className="num">03</span><span>Период полимеризации — от 6 до 12 месяцев.</span></li>
        <li><span className="num">04</span><span>Сессии — до 48 часов без перерыва. Каждое движение видимо и необратимо.</span></li>
      </ul>
    </div>
  </section>;


const Pullquote = () =>
<section className="pullquote">
    <div className="pullquote__inner">
      <OrnamentRule />
      <div className="pullquote__quote">«Я не изображаю цветок.<br />Я передаю его жизненную силу.»</div>
      <div className="pullquote__attr">— Сольга</div>
    </div>
  </section>;


const SiteFooter = () =>
<footer className="site-footer" id="contact">
    <div className="site-footer__brand">
      <div className="wm">SOLGA</div>
      <p>Работы доступны для передачи в&nbsp;частные коллекции. Организуем закрытый показ.</p>
    </div>
    <div className="site-footer__col">
      <h4>Связаться</h4>
      <a href="mailto:hello@solga.art">hello@solga.art</a>
      <a href="#">solga.art</a>
      <a href="#">instagram.com/solga_gallery</a>
    </div>
    <div className="site-footer__col">
      <h4>Director</h4>
      <p>Дмитрий Симаков</p>
      <a href="#">t.me/DmitriySimakov</a>
    </div>
    <div className="site-footer__col">
      <h4>Studio</h4>
      <p>Московская область<br />Россия</p>
    </div>
    <div className="site-footer__bottom">
      <span>© 2026 Ольга Симакова</span>
      <span>Каталог 2026 · 11 работ</span>
    </div>
  </footer>;


Object.assign(window, { SiteHeader, Hero, StatementBlock, PlateGrid, InSitu, MethodBlock, Pullquote, SiteFooter, OrnamentRule, Plate });