/* Pages: Home, Services, Contacts */
const { useState: useStateP } = React;

function Home({ navigate }) {
  const S = window.SITE;
  const tiles = ["people", "food", "predmet"].map((k) => S.galleries[k]);
  const heroList = [
    { src: "assets/photos/maria-portrait.png", cap: "Мария", meta: "автор" },
  ];
  return (
    <div className="page page-fade">
      <section className="home-hero">
        <Reveal><div className="kicker"><RoleCity /></div></Reveal>
        <Reveal delay={80}>
          <h1>Свет,<br />фактура,<br /><span className="it">история</span></h1>
        </Reveal>
        <Reveal delay={160}>
          <div className="hero-sub">
            <span className="hero-tag">Еда</span>
            <span className="hero-tag">Предметка</span>
            <span className="hero-tag">Люди</span>
            <span className="hero-tag">Репортаж</span>
            <span className="hero-tag">Нейроконтент</span>
          </div>
        </Reveal>
      </section>

      <section className="hero-row">
        <Reveal as="div" className="intro">
          <p className="greet">Привет! Я {S.name} — {S.role.toLowerCase()} из города {S.city}.</p>
          {S.intro.map((t, i) => <p key={i}>{t}</p>)}
          <div className="sign">Сочных нам кадров! =)</div>
        </Reveal>
        <Reveal img className="hero-portrait">
          <img src="assets/photos/maria-portrait.png" alt="Мария" />
        </Reveal>
      </section>

      <section className="section-head">
        <div>
          <Reveal><div className="kicker">Портфолио</div></Reveal>
          <Reveal delay={60}><h2>Выберите направление</h2></Reveal>
        </div>
        <Reveal delay={120}><div className="num">03 раздела · нажмите, чтобы открыть</div></Reveal>
      </section>

      <section className="tiles">
        {tiles.map((g, i) => (
          <Reveal img key={g.id} delay={i * 90}>
            <a className="tile" data-cursor data-cursor-label="Открыть" onClick={() => navigate(g.id)}>
              <span className="tile-acc" style={{ "--ln": g.accent }}></span>
              <img src={(g.photos[0] || {}).src} alt={g.title} />
              <span className="tile-cap">
                <span className="k">{g.mood}</span>
                <span className="t">{g.title}</span>
              </span>
            </a>
          </Reveal>
        ))}
      </section>

      <footer className="foot">
        <Reveal><div className="big">Снимем что-нибудь<br />красивое?</div></Reveal>
        <Reveal delay={80}><a href="#" data-cursor onClick={(e) => { e.preventDefault(); navigate("contacts"); }} className="hero-tag" style={{ fontSize: 14 }}>Связаться → {S.phone}</a></Reveal>
      </footer>
    </div>
  );
}

function Services({ navigate }) {
  const S = window.SITE;
  return (
    <div className="page page-fade">
      <section className="home-hero" style={{ paddingBottom: 0 }}>
        <Reveal><div className="kicker">Услуги и цены</div></Reveal>
        <Reveal delay={70}><h1 style={{ fontSize: "clamp(48px,8vw,120px)" }}>Стоимость<br /><span className="it">съёмки</span></h1></Reveal>
        <Reveal delay={140}><p className="lead" style={{ marginTop: 26 }}>Пакеты под разные задачи — от карточек для маркетплейса до полноценного репортажа.</p></Reveal>
      </section>
      <section className="svc" style={{ marginTop: "4vh" }}>
        {S.services.map((s, i) => (
          <article className="svc-row" key={i} style={{ "--accent": ["#c07a2c", "#b1453b", "#5d7079"][i] }}>
            <div>
              <Reveal><div className="num">{String(i + 1).padStart(2, "0")} / {String(S.services.length).padStart(2, "0")}</div></Reveal>
              <Reveal delay={50}><h3>{s.title}</h3></Reveal>
              <Reveal delay={90}><div className="svc-price"><span className="p">{s.price}</span><span className="u">{s.unit}</span></div></Reveal>
              <Reveal delay={120}>
                <ul>{s.points.map((p, j) => <li key={j}>{p}</li>)}</ul>
              </Reveal>
              <Reveal delay={150}><p className="svc-note">{s.note}</p></Reveal>
            </div>
            <Reveal img className="svc-photo">
              <img src={s.photo} alt={s.title} />
            </Reveal>
          </article>
        ))}
      </section>
      <footer className="foot" style={{ "--accent": "#b1453b" }}>
        <Reveal><div className="big">Обсудим вашу<br />задачу?</div></Reveal>
        <Reveal delay={80}><a data-cursor onClick={() => navigate("contacts")} className="hero-tag" style={{ fontSize: 14 }}>Написать мне →</a></Reveal>
      </footer>
    </div>
  );
}

function Contacts() {
  const S = window.SITE;
  const [sent, setSent] = useStateP(false);
  return (
    <div className="page page-fade" style={{ "--accent": "#b1453b" }}>
      <section className="contacts">
        <div>
          <Reveal><div className="city"><RoleCity /></div></Reveal>
          <Reveal delay={60}><h2>Давайте<br /><span style={{ fontStyle: "italic" }}>знакомиться</span></h2></Reveal>
          <div className="contact-list">
            <Reveal as="a" className="contact-item" {...{ href: S.phoneHref }}>
              <span className="k">Телефон</span><span className="v">{S.phone}</span>
            </Reveal>
            <Reveal as="a" className="contact-item" delay={40} {...{ href: S.instagram, target: "_blank" }}>
              <span className="k">Instagram</span><span className="v">@{S.handle}</span>
            </Reveal>
            <Reveal as="a" className="contact-item" delay={80} {...{ href: S.telegram, target: "_blank" }}>
              <span className="k">Telegram</span><span className="v">Написать</span>
            </Reveal>
            <Reveal as="a" className="contact-item" delay={120} {...{ href: S.vk, target: "_blank" }}>
              <span className="k">ВКонтакте</span><span className="v">Профиль</span>
            </Reveal>
          </div>
          <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            <div className="field"><input id="nm" placeholder=" " required /><label htmlFor="nm">Как вас зовут</label></div>
            <div className="field"><input id="ct" placeholder=" " required /><label htmlFor="ct">Телефон или ник</label></div>
            <div className="field"><textarea id="ms" placeholder=" "></textarea><label htmlFor="ms">Что хотите снять</label></div>
            <button className="btn" data-cursor type="submit">Отправить</button>
            <div className={"form-ok" + (sent ? " show" : "")}>Спасибо! Сообщение отправлено — отвечу в течение дня.</div>
          </form>
        </div>
        <Reveal img className="contacts-photo">
          <img src="assets/photos/maria-portrait.png" alt="Мария" />
        </Reveal>
      </section>
    </div>
  );
}

Object.assign(window, { Home, Services, Contacts });