/* global React */
const { useEffect: useEffectB, useRef: useRefB } = React;

/* ───────── inline icons ───────── */

function ArrowR(props) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function CloseX() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}
function CheckMark() {
  return (
    <svg width="34" height="34" viewBox="0 0 34 34" fill="none">
      <path d="M9 17l5 5 11-11" stroke="#1A1408" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function ShieldIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function GlobeIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 12h18M12 3c2.8 3.2 2.8 14.8 0 18M12 3c-2.8 3.2-2.8 14.8 0 18" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  );
}
function LayersIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M12 3l9 5-9 5-9-5 9-5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <path d="M3 13l9 5 9-5M3 17l9 5 9-5" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}
function ArchiveIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="4" width="18" height="4" rx="1" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M4 8h16v11a1 1 0 01-1 1H5a1 1 0 01-1-1V8z" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M10 13h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}
function InfoIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M12 8h.01M11 11h1v6h1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ───────── reveal-on-scroll ───────── */
function FadeUp({ children, delay = 0, as: As = "div", ...rest }) {
  const ref = useRefB(null);
  useEffectB(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setTimeout(() => el.classList.add("is-in"), delay);
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={"fade-up " + (rest.className || "")} {...rest}>{children}</As>;
}

/* ───────── topbar ───────── */
function Topbar({ onCTA }) {
  return (
    <header className="topbar">
      <div className="container topbar-inner">
        <a className="brand" href="#top">
          <div className="brand-mark" aria-hidden="true"/>
          <div className="brand-text">
            <span className="brand-name">GOLDRA</span>
            <span className="brand-sub">Информационный сервис</span>
          </div>
        </a>
        <button className="btn btn-ghost btn-sm top-cta" onClick={onCTA}>
          Получить информацию
        </button>
      </div>
    </header>
  );
}

/* ───────── hero (block 1) ───────── */
function Hero({ onStart }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <FadeUp className="hero-copy">
            <span className="eyebrow">Информационный материал · 2026</span>
            <h1>
              Современный подход<br/>
              к&nbsp;<em>инвестициям в&nbsp;золото</em>
            </h1>
            <p className="lede">
              Ознакомьтесь с&nbsp;доступными форматами инвестирования
              и&nbsp;получите бесплатную консультацию специалиста&nbsp;—
              без обязательств и&nbsp;скрытых платежей.
            </p>

            <div className="hero-cta-row">
              <button className="btn btn-primary" onClick={onStart}>
                Пройти короткий опрос
                <ArrowR className="btn-arrow"/>
              </button>
              <button className="btn btn-ghost" onClick={() => {
                const el = document.getElementById("form");
                if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
              }}>
                К&nbsp;форме обратной связи
              </button>
            </div>

            <div className="hero-meta-row">
              <span className="meta-pill">4&nbsp;вопроса</span>
              <span className="meta-dot"/>
              <span className="meta-pill">≈&nbsp;60&nbsp;секунд</span>
              <span className="meta-dot"/>
              <span className="meta-pill">бесплатно</span>
            </div>

            <div className="hero-trust">
              <span className="chip"><i className="dot"/> Без обязательств</span>
              <span className="chip"><i className="dot"/> Информационный характер</span>
              <span className="chip"><i className="dot"/> Консультация специалиста</span>
            </div>
          </FadeUp>

          <FadeUp delay={120}>
            <div className="hero-visual" aria-hidden="true">
              <span className="corner tl"/><span className="corner tr"/>
              <span className="corner bl"/><span className="corner br"/>

              <div className="label-tl">XAU<br/>Au · 999.9</div>
              <div className="label-tr">Информационный<br/>материал</div>

              <div className="bullion-stack">
                <span className="bullion-bar b3"/>
                <span className="bullion-bar b2"/>
                <span className="bullion-bar b1"/>
              </div>

              <div className="label-bl">№&nbsp;04<br/>Издание · 2026</div>
              <div className="label-br">Только для<br/>ознакомления</div>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}

/* ───────── block 2 — Почему люди рассматривают золото ───────── */
function BlockWhy() {
  const items = [
    { ico: <ShieldIcon/>,  ttl: "Долгосрочный интерес к защитным активам", sub: "Золото исторически входит в&nbsp;структуру резервов центральных банков и&nbsp;частных портфелей." },
    { ico: <GlobeIcon/>,   ttl: "Популярность среди инвесторов",            sub: "Один из&nbsp;наиболее обсуждаемых классов активов на&nbsp;финансовых рынках мира." },
    { ico: <LayersIcon/>,  ttl: "Возможность диверсификации",               sub: "Распределение средств между разными категориями активов&nbsp;— часть базового подхода." },
    { ico: <ArchiveIcon/>, ttl: "Интерес к сохранению капитала",            sub: "Тема физических и&nbsp;инвестиционных форм золота традиционно изучается частными инвесторами." },
  ];
  return (
    <section className="section">
      <div className="container">
        <FadeUp className="stack" style={{ marginBottom: 40 }}>
          <span className="eyebrow">Почему обращают внимание</span>
          <h2>Почему люди рассматривают золото</h2>
          <p className="lede">
            Ниже&nbsp;— общие причины, по которым тема инвестиций в&nbsp;золото обсуждается
            и&nbsp;изучается. Это не&nbsp;обещание результата, а&nbsp;контекст для собственного решения.
          </p>
        </FadeUp>

        <div className="why-grid">
          {items.map((it, i) => (
            <FadeUp key={i} delay={i * 80}>
              <div className="why-card">
                <span className="num">0{i + 1}</span>
                <div className="ico">{it.ico}</div>
                <h3 dangerouslySetInnerHTML={{ __html: it.ttl }}/>
                <p dangerouslySetInnerHTML={{ __html: it.sub }}/>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── block 3 — Информационный блок ───────── */
function BlockInfo() {
  const items = [
    [
      "Что такое инвестиции в золото",
      "Под темой объединяют разные форматы: физический металл, обезличенные металлические счета, биржевые инструменты, фонды. Каждый формат имеет свою специфику.",
    ],
    [
      "Какие существуют варианты",
      "Способы участия в&nbsp;рынке отличаются по&nbsp;доступности, затратам на&nbsp;хранение, налогообложению и&nbsp;ликвидности. Универсального варианта не&nbsp;существует.",
    ],
    [
      "Решения принимаются самостоятельно",
      "Сайт не&nbsp;даёт индивидуальных рекомендаций и&nbsp;не&nbsp;выступает финансовым консультантом. Окончательное решение всегда остаётся за&nbsp;пользователем.",
    ],
    [
      "Существуют риски",
      "Цена золота, как и&nbsp;любого инструмента, может расти и&nbsp;снижаться. Прошлая динамика не&nbsp;гарантирует будущей. Возможны потери средств.",
    ],
  ];
  return (
    <section className="section is-dark">
      <div className="container">
        <div className="info-grid">
          <FadeUp className="stack">
            <span className="eyebrow is-light">Базовая информация</span>
            <h2>Кратко о&nbsp;теме</h2>
            <p className="lede">
              Несколько ключевых тезисов, которые помогают сформировать собственное представление
              о&nbsp;рынке золота. Без обещаний и&nbsp;маркетинговых упрощений.
            </p>
            <div className="info-note">
              <div className="info-icon"><InfoIcon/></div>
              <div>
                Материалы носят исключительно информационный характер. Они не&nbsp;являются
                индивидуальной инвестиционной рекомендацией и&nbsp;не&nbsp;учитывают вашу
                персональную ситуацию.
              </div>
            </div>
          </FadeUp>

          <FadeUp delay={120}>
            <div className="info-list">
              {items.map(([t, s], i) => (
                <div className="row-item" key={i}>
                  <span className="n">{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div className="ttl" dangerouslySetInnerHTML={{ __html: t }}/>
                    <div className="sub" dangerouslySetInnerHTML={{ __html: s }}/>
                  </div>
                </div>
              ))}
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}

/* ───────── block 4 — Quiz invite ───────── */
function BlockQuizInvite({ onStart }) {
  return (
    <section className="section">
      <div className="container">
        <FadeUp>
          <div className="quiz-invite">
            <div className="stack">
              <span className="eyebrow">Короткий опрос</span>
              <h2>4&nbsp;вопроса, чтобы подобрать подходящий формат информации</h2>
              <p className="lede">
                Ответы помогают подготовить материал и&nbsp;консультацию, релевантные именно
                вашему уровню знаний и&nbsp;интересу. Пройти можно за&nbsp;минуту.
              </p>
              <div className="hero-cta-row">
                <button className="btn btn-primary" onClick={onStart}>
                  Пройти опрос
                  <ArrowR className="btn-arrow"/>
                </button>
                <span className="meta">Без регистрации</span>
              </div>
            </div>

            <div className="preview" aria-hidden="true">
              <div className="progress"><i/></div>
              <div className="pq">Есть ли у&nbsp;вас опыт инвестирования?</div>
              <div className="po is-on"><span className="radio"/>Да, есть опыт</div>
              <div className="po"><span className="radio"/>Только знакомлюсь с&nbsp;темой</div>
              <div className="po"><span className="radio"/>Пробовал(а), хочу разобраться глубже</div>
            </div>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

/* ───────── block 5 — Strong CTA + form ───────── */
function BlockCTA({ onSubmit }) {
  return (
    <section className="section">
      <div className="container">
        <FadeUp>
          <div className="strong-cta" id="form">
            <div className="strong-cta-grid">
              <div className="stack">
                <span className="eyebrow is-light">Консультация</span>
                <h2>Получите дополнительную информацию и&nbsp;консультацию</h2>
                <p className="lede">
                  Заполните форму и&nbsp;получите обратную связь. Специалист свяжется
                  в&nbsp;ближайшее рабочее время и&nbsp;ответит на&nbsp;ваши вопросы по&nbsp;теме.
                </p>
                <div className="strong-cta-features">
                  <div className="feat">
                    <span className="tick"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                    <span>Без обязательств и&nbsp;скрытых платежей</span>
                  </div>
                  <div className="feat">
                    <span className="tick"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                    <span>Только информационные материалы по&nbsp;теме рынка золота</span>
                  </div>
                  <div className="feat">
                    <span className="tick"><svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                    <span>Все&nbsp;решения вы&nbsp;принимаете самостоятельно</span>
                  </div>
                </div>
              </div>

              <InlineForm onSubmit={onSubmit}/>
            </div>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

function InlineForm({ onSubmit }) {
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [err, setErr] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);

  function formatPhone(raw) {
    const digits = raw.replace(/\D/g, "").slice(0, 11);
    let d = digits;
    if (d.length > 0) {
      if (d[0] === "8") d = "7" + d.slice(1);
      if (d[0] !== "7") d = "7" + d;
      d = d.slice(0, 11);
    }
    if (d.length === 0) return "";
    let out = "+7";
    if (d.length > 1) out += " (" + d.slice(1, 4);
    if (d.length >= 4) out += ") " + d.slice(4, 7);
    if (d.length >= 7) out += "-" + d.slice(7, 9);
    if (d.length >= 9) out += "-" + d.slice(9, 11);
    return out;
  }

  function handle(e) {
    e.preventDefault();
    const next = {};
    if (!name.trim() || name.trim().length < 2) next.name = "Укажите имя";
    if (phone.replace(/\D/g, "").length < 11) next.phone = "Введите номер полностью";
    setErr(next);
    if (Object.keys(next).length > 0) return;
    setSubmitting(true);

    // Классическая HTML-форма: скрытая <form> + native form.submit() →
    // обычный POST application/x-www-form-urlencoded на submit.php,
    // PHP пишет CSV + email и редиректит на success.html.
    const form = document.createElement("form");
    form.method = "POST";
    form.action = "submit.php";
    form.style.display = "none";

    const addField = (n, v) => {
      const inp = document.createElement("input");
      inp.type = "hidden";
      inp.name = n;
      inp.value = v;
      form.appendChild(inp);
    };

    addField("source", "offer_page");
    addField("name", name.trim());
    addField("phone", phone.replace(/\D/g, ""));

    document.body.appendChild(form);
    form.submit();
  }

  return (
    <form className="form-card" onSubmit={handle} noValidate>
      <div>
        <div className="form-title">Заполните форму</div>
        <div className="form-sub" style={{ marginTop: 6 }}>
          Свяжемся в&nbsp;рабочее время и&nbsp;поделимся информационными материалами.
        </div>
      </div>

      <div className={"field" + (err.name ? " is-error" : "")}>
        <span className="field-lbl">Имя</span>
        <input type="text"
               value={name}
               autoComplete="given-name"
               onChange={e => { setName(e.target.value); if (err.name) setErr({...err, name: undefined}); }}
               placeholder="Как к вам обращаться"/>
        {err.name && <span className="field-err">{err.name}</span>}
      </div>

      <div className={"field" + (err.phone ? " is-error" : "")}>
        <span className="field-lbl">Телефон</span>
        <input type="tel"
               inputMode="tel"
               value={phone}
               autoComplete="tel"
               onChange={e => { setPhone(formatPhone(e.target.value)); if (err.phone) setErr({...err, phone: undefined}); }}
               placeholder="+7 (___) ___-__-__"/>
        {err.phone && <span className="field-err">{err.phone}</span>}
      </div>

      <button type="submit" className="btn btn-primary btn-block" disabled={submitting}>
        {submitting ? "Отправка…" : "Получить консультацию"}
        {!submitting && <ArrowR className="btn-arrow"/>}
      </button>

      <p className="consent-note">
        Нажимая кнопку, пользователь соглашается с&nbsp;обработкой персональных данных
        согласно&nbsp;<a href="#privacy" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openPrivacy")); }}>политике конфиденциальности</a>.
      </p>
    </form>
  );
}

/* ───────── disclaimer strip (before footer) ───────── */
function DisclaimerStrip() {
  return (
    <section className="disclaimer">
      <div className="container">
        <div className="disclaimer-inner">
          <div className="icon"><InfoIcon/></div>
          <div className="text">
            <strong>Данный сайт носит исключительно информационный характер</strong> и&nbsp;не&nbsp;является
            инвестиционной рекомендацией. Мы&nbsp;не&nbsp;принимаем денежные средства, не&nbsp;осуществляем
            доверительное управление и&nbsp;не&nbsp;гарантируем получение дохода. Инвестиции связаны
            с&nbsp;рисками. Пользователь принимает решения самостоятельно.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── footer ───────── */
function Footer({ onPrivacy, onTerms }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a className="brand" href="#top" style={{ color: "#FAF6EA" }}>
              <div className="brand-mark"/>
              <div className="brand-text">
                <span className="brand-name">GOLDRA</span>
                <span className="brand-sub">Информационный сервис</span>
              </div>
            </a>
            <p className="footer-narr">
              Сервис предоставляет информационные материалы по&nbsp;теме рынка золота
              и&nbsp;инвестиций. Решения остаются за&nbsp;пользователем.
            </p>
          </div>

          <div>
            <h4>Документы</h4>
            <ul>
              <li><a href="#privacy" onClick={(e) => { e.preventDefault(); onPrivacy(); }}>Политика конфиденциальности</a></li>
              <li><a href="#terms"   onClick={(e) => { e.preventDefault(); onTerms(); }}>Пользовательское соглашение</a></li>
            </ul>
          </div>

          <div>
            <h4>Контакты</h4>
            <div className="contact-row">
              <span className="k">Email</span>
              <a href="mailto:info@goldra.ru">info@goldra.ru</a>
            </div>
          </div>
        </div>

        <div className="footer-discl">
          <strong>Информационный дисклеймер.</strong>&nbsp; Данный сайт носит исключительно
          информационный характер и&nbsp;не&nbsp;является инвестиционной рекомендацией.
          Мы&nbsp;не&nbsp;принимаем денежные средства, не&nbsp;осуществляем доверительное
          управление и&nbsp;не&nbsp;гарантируем получение дохода. Любые упоминания форматов
          инвестирования приведены в&nbsp;ознакомительных целях. Инвестиции связаны
          с&nbsp;рисками, в&nbsp;том числе с&nbsp;риском потери средств. Пользователь принимает
          решения самостоятельно. Прошлая динамика рынка не&nbsp;гарантирует будущей.
        </div>

        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} GOLDRA. Все&nbsp;права защищены.</span>
          <span className="legal-id">ИНН&nbsp;9705190653 · ОГРН&nbsp;1237700048850</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  ArrowR, CloseX, CheckMark, InfoIcon,
  FadeUp, Topbar, Hero, BlockWhy, BlockInfo, BlockQuizInvite,
  BlockCTA, DisclaimerStrip, Footer, InlineForm,
});
