// DataLoop landing — root app with Tweaks-controlled direction + accent + density + type.
const { useState, useEffect } = React;

// Curated accent palettes — keyed by hex (TweakColor uses hex as value)
const ACCENT_INK = {
  "#ff5b2e": "#1a0a04",
  "#c9f24a": "#0e1602",
  "#38e8d6": "#022119",
  "#ff4dc2": "#1f0414",
};
const ACCENT_NAMES = {
  "#ff5b2e": "коралл",
  "#c9f24a": "лайм",
  "#38e8d6": "циан",
  "#ff4dc2": "маджента",
};
const ACCENT_HEXES = Object.keys(ACCENT_INK);

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "a",
  "accent": "#ff5b2e",
  "density": "regular",
  "type": "display"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    const ink = ACCENT_INK[t.accent] || "#1a0a04";
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-ink", ink);
  }, [t.accent]);

  useEffect(() => {
    const dir = t.direction === "b" ? "dir-b" : "dir-a";
    const dens = `dens-${t.density || "regular"}`;
    const typ = `type-${t.type || "display"}`;
    document.body.className = `${dir} ${dens} ${typ}`;
  }, [t.direction, t.density, t.type]);

  return (
    <>
      <Nav direction={t.direction} />

      <Hero direction={t.direction}>
        <Saggest />
      </Hero>

      <Marquee />

      <section className="section" id="api-section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="section-tag">
                <span className="section-tag-num">01</span>
                API · /v1/suggest/address
              </div>
              <h2 className="section-title">
                Один <em style={{ fontStyle: "normal", color: "var(--accent)" }}>POST</em>{" "}
                — структурированный ответ.
              </h2>
            </div>
            <p className="section-lead">
              Простая схема: JSON-запрос, мгновенный ответ с 32 полями. SDK
              для cURL, Node.js, Python, Go, PHP и Ruby — выберите свой.
            </p>
          </div>
          <ApiBlock />
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="section-tag">
                <span className="section-tag-num">02</span>
                Геокодинг · топ-10 городов РФ
              </div>
              <h2 className="section-title">
                Покрытие от Калининграда{" "}
                <em style={{ fontStyle: "normal", color: "var(--accent)" }}>до Камчатки.</em>
              </h2>
            </div>
            <p className="section-lead">
              1.7 миллиона населённых пунктов в одной базе. Кликните любой пин — увидите
              структурированный ответ обратного геокодинга со всеми полями ФИАС.
            </p>
          </div>
          <MapBlock />
        </div>
      </section>

      <Stats />

      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="section-tag">
                <span className="section-tag-num">03</span>
                Возможности
              </div>
              <h2 className="section-title">
                Один токен —{" "}
                <em style={{ fontStyle: "normal", color: "var(--accent)" }}>девять API.</em>
              </h2>
            </div>
            <p className="section-lead">
              Подсказки, парсинг, геокодинг, иерархия ФИАС и пакетная обработка — без
              дополнительных подписок и мудрёных лицензий. Одна авторизация, одна цена за запрос.
            </p>
          </div>
          <FeaturesHub />
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="section-tag">
                <span className="section-tag-num">04</span>
                Калькулятор
              </div>
              <h2 className="section-title">
                Соберите свой план<br />
                <em style={{ fontStyle: "normal", color: "var(--accent)" }}>под нагрузку.</em>
              </h2>
            </div>
            <p className="section-lead">
              Включите нужные эндпоинты, прикиньте объём запросов в месяц — увидите итоговую
              сумму и рекомендованный тариф. Без скрытых платежей и привязки карты.
            </p>
          </div>
          <Calculator />
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <Cta />
        </div>
      </section>

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Направление">
          <TweakRadio
            label="Тема"
            value={t.direction}
            onChange={(v) => setTweak("direction", v)}
            options={[
              { value: "a", label: "Светлое" },
              { value: "b", label: "Тёмное" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Акцент">
          <TweakColor
            label="Цвет"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={ACCENT_HEXES}
          />
          <div style={{ fontSize: 11, color: "#888", fontFamily: "var(--mono)", marginTop: -4, marginLeft: 96 }}>
            {ACCENT_NAMES[t.accent] || ""}
          </div>
        </TweakSection>
        <TweakSection label="Плотность">
          <TweakRadio
            label="Воздух"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Плотно" },
              { value: "regular", label: "Норм" },
              { value: "comfy",   label: "Воздух" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Типографика">
          <TweakRadio
            label="Заголовки"
            value={t.type}
            onChange={(v) => setTweak("type", v)}
            options={[
              { value: "display", label: "Display" },
              { value: "mono",    label: "Mono" },
              { value: "system",  label: "Sans" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);