/* global React, COPY, LANGS, PhoneFrame, HeroChat, DemoChat, Icon, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState, useEffect } = React;

const ACCENT_PRESETS = [
  { id: "blue", label: "Blue", color: "oklch(0.74 0.16 235)" },
  { id: "green", label: "Lime", color: "oklch(0.82 0.18 145)" },
  { id: "violet", label: "Violet", color: "oklch(0.7 0.2 305)" },
  { id: "amber", label: "Amber", color: "oklch(0.78 0.16 70)" },
  { id: "rose", label: "Rose", color: "oklch(0.7 0.18 15)" },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "blue",
  "lang": "ru"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(tweaks.lang || "ru");

  useEffect(() => { setLang(tweaks.lang || "ru"); }, [tweaks.lang]);

  // Apply theme
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme || "light");
  }, [tweaks.theme]);

  // Apply accent color
  useEffect(() => {
    const preset = ACCENT_PRESETS.find(p => p.id === tweaks.accent) || ACCENT_PRESETS[0];
    document.documentElement.style.setProperty("--accent", preset.color);
    // generate soft variant
    const soft = preset.color.replace(")", " / 0.12)");
    document.documentElement.style.setProperty("--accent-soft", soft);
  }, [tweaks.accent]);

  const accentColor = (ACCENT_PRESETS.find(p => p.id === tweaks.accent) || ACCENT_PRESETS[0]).color;
  const t = COPY[lang];

  return (
    <>
      <Nav lang={lang} setLang={(l) => { setLang(l); setTweak("lang", l); }} t={t}/>
      <Hero t={t} lang={lang} accent={accentColor}/>
      <Features t={t}/>
      <Demo t={t} lang={lang} accent={accentColor}/>
      <Languages t={t}/>
      <Audience t={t}/>
      <Steps t={t}/>
      <Final t={t}/>
      <Footer t={t}/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Appearance">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            options={ACCENT_PRESETS.map(p => ({ value: p.id, label: p.label }))}
            onChange={(v) => setTweak("accent", v)}
          />
          <TweakRadio
            label="Language"
            value={tweaks.lang}
            options={[{ value: "ru", label: "RU" }, { value: "en", label: "EN" }]}
            onChange={(v) => setTweak("lang", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function Nav({ lang, setLang, t }) {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="brand">
          <div className="brand-mark">T</div>
          <span>translate.me</span>
        </a>
        <div className="nav-links">
          <a href="#features">{t.nav.features}</a>
          <a href="#demo">{t.nav.demo}</a>
          <a href="#languages">{t.nav.languages}</a>
          <a href="#audience">{t.nav.audience}</a>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <div className="lang-toggle">
            <button className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")}>RU</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a className="nav-cta" href="https://t.me/ai_translateme_bot" target="_blank" rel="noreferrer">
            {t.nav.start} <Icon.arrow/>
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ t, lang, accent }) {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="dot">★</span>
            <span>{t.hero.eyebrow}</span>
          </div>
          <h1>
            {t.hero.title1}<br/>
            {t.hero.title2}<br/>
            <span className="accent">{t.hero.titleAccent}</span>
          </h1>
          <p className="lead">{t.hero.lead}</p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="https://t.me/ai_translateme_bot" target="_blank" rel="noreferrer">
              {t.hero.cta} <Icon.arrow/>
            </a>
            <a className="btn btn-ghost" href="#features">{t.hero.ctaSecondary}</a>
          </div>
          <div className="hero-meta">
            {t.hero.meta.map(([n, l], i) => (
              <div key={i}>
                <strong>{n}</strong> · {l}
              </div>
            ))}
          </div>
        </div>
        <div className="hero-phone-wrap">
          <div style={{ position: "relative", zIndex: 1 }}>
            <PhoneFrame scale={0.9}>
              <HeroChat lang={lang} accent={accent}/>
            </PhoneFrame>
          </div>
        </div>
      </div>
    </section>
  );
}

function Features({ t }) {
  const f = t.features.list;
  return (
    <section className="block" id="features">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.features.eyebrow}</div>
            <h2 className="section-title">{t.features.title1} <em>{t.features.titleAccent}</em></h2>
          </div>
          <p className="section-sub">{t.features.sub}</p>
        </div>

        <div className="features">
          {/* Hero feature: auto-detect */}
          <div className="feature span-8 hero-feat">
            <span className="badge">{f.autoBadge}</span>
            <div className="feature-icon"><Icon.auto/></div>
            <h3>{f.autoTitle}</h3>
            <p>{f.autoDesc}</p>
            <div className="feature-visual">
              <AutoDetectVisual/>
            </div>
          </div>

          {/* Free */}
          <div className="feature span-4 hero-feat">
            <div className="free-pill">FREE FOREVER</div>
            <div className="feature-icon" style={{ marginTop: 18 }}><Icon.free/></div>
            <h3>{f.freeTitle}</h3>
            <p>{f.freeDesc}</p>
          </div>

          {/* Photo */}
          <div className="feature span-4">
            <div className="feature-icon"><Icon.photo/></div>
            <h3>{f.photoTitle}</h3>
            <p>{f.photoDesc}</p>
            <div className="feature-visual">
              <div className="ocr-frame">
                <div className="scan-line"></div>
                <div>OPENING HOURS<br/>MON–FRI · 8–22<br/>SAT · 10–20</div>
              </div>
            </div>
          </div>

          {/* Dictionaries */}
          <div className="feature span-4">
            <div className="feature-icon"><Icon.dict/></div>
            <h3>{f.dictTitle}</h3>
            <p>{f.dictDesc}</p>
            <div className="feature-visual">
              <div className="dict-stack">
                <div className="dict-row"><span>📚 Books · ES</span><span className="meta">142</span></div>
                <div className="dict-row"><span>🎬 Series · EN</span><span className="meta">87</span></div>
                <div className="dict-row"><span>✈️ Travel · IT</span><span className="meta">23</span></div>
              </div>
            </div>
          </div>

          {/* Voice */}
          <div className="feature span-4">
            <span className="badge">{f.voiceBadge}</span>
            <div className="feature-icon"><Icon.voice/></div>
            <h3>{f.voiceTitle}</h3>
            <p>{f.voiceDesc}</p>
            <div className="feature-visual">
              <VoiceWave/>
            </div>
          </div>

          {/* Natural */}
          <div className="feature span-4">
            <div className="feature-icon"><Icon.natural/></div>
            <h3>{f.natTitle}</h3>
            <p>{f.natDesc}</p>
          </div>

          {/* Stats */}
          <div className="feature span-4">
            <div className="feature-icon"><Icon.stats/></div>
            <h3>{f.statsTitle}</h3>
            <p>{f.statsDesc}</p>
            <div className="feature-visual">
              <div style={{ width: "100%" }}>
                <div className="cefr-row">
                  {["A1", "A2", "B1", "B2", "C1", "C2"].map((l, i) => (
                    <div key={l} className={"cefr-bar" + (i === 3 ? " active" : "")} style={{ height: 8 + i * 4 }}>
                      {l}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Alts */}
          <div className="feature span-4">
            <div className="feature-icon"><Icon.alt/></div>
            <h3>{f.altTitle}</h3>
            <p>{f.altDesc}</p>
          </div>

          {/* Reverse */}
          <div className="feature span-4">
            <div className="feature-icon"><Icon.reverse/></div>
            <h3>{f.revTitle}</h3>
            <p>{f.revDesc}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function AutoDetectVisual() {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "1fr auto 1fr",
      gap: 16,
      alignItems: "center",
      width: "100%",
      marginTop: 8,
      fontFamily: "var(--font-mono)",
      fontSize: 12,
    }}>
      <div style={{
        padding: "10px 14px",
        border: "1px solid var(--line)",
        borderRadius: 10,
        background: "var(--bg-soft)",
        color: "var(--fg-mute)",
        display: "flex",
        flexDirection: "column",
        gap: 6,
      }}>
        <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--fg-dim)" }}>ANY LANGUAGE</div>
        <div>🇪🇸 ¿qué tal?</div>
        <div>🇯🇵 こんにちは</div>
        <div>🇩🇪 wie geht's?</div>
      </div>
      <div style={{
        width: 36, height: 36,
        borderRadius: "50%",
        background: "var(--accent)",
        color: "var(--accent-fg)",
        display: "grid", placeItems: "center",
        fontWeight: 700,
      }}>→</div>
      <div style={{
        padding: "10px 14px",
        border: "1px solid var(--accent)",
        borderRadius: 10,
        background: "var(--accent-soft)",
        color: "var(--fg)",
        display: "flex",
        flexDirection: "column",
        gap: 6,
      }}>
        <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--accent)" }}>YOUR TARGET 🇷🇺</div>
        <div>как дела?</div>
        <div>привет</div>
        <div>как настроение?</div>
      </div>
    </div>
  );
}

function VoiceWave() {
  const bars = Array.from({ length: 22 }, (_, i) => 4 + Math.abs(Math.sin(i * 0.7)) * 24 + (i % 3) * 6);
  return (
    <div style={{ display: "flex", gap: 3, alignItems: "center", height: 40, width: "100%" }}>
      {bars.map((h, i) => (
        <div key={i} style={{
          width: 3,
          height: h,
          background: i < 10 ? "var(--accent)" : "var(--line-strong)",
          borderRadius: 2,
        }}></div>
      ))}
    </div>
  );
}

function Demo({ t, lang, accent }) {
  return (
    <section className="block" id="demo">
      <div className="wrap demo-section">
        <div>
          <div className="section-eyebrow">{t.demo.eyebrow}</div>
          <h2 className="section-title">{t.demo.title1} <em>{t.demo.titleAccent}</em></h2>
          <p className="section-sub" style={{ marginTop: 24 }}>{t.demo.sub}</p>
          <div className="demo-points">
            {t.demo.points.map(([h, p], i) => (
              <div className="demo-point" key={i}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <h4>{h}</h4>
                  <p>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "grid", placeItems: "center", minHeight: 700, position: "relative" }}>
          <div style={{
            position: "absolute",
            inset: "10% 5%",
            background: "radial-gradient(closest-side, var(--accent-soft), transparent 70%)",
            filter: "blur(40px)",
            zIndex: 0,
          }}></div>
          <div style={{ position: "relative", zIndex: 1 }}>
            <PhoneFrame scale={0.9}>
              <DemoChat lang={lang} accent={accent}/>
            </PhoneFrame>
          </div>
        </div>
      </div>
    </section>
  );
}

function Languages({ t }) {
  return (
    <section className="block" id="languages">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.languages.eyebrow}</div>
            <h2 className="section-title">{t.languages.title1} <em>{t.languages.titleAccent}</em></h2>
          </div>
          <p className="section-sub">{t.languages.sub}</p>
        </div>
        <div className="langs">
          {LANGS.map(([flag, name, code]) => (
            <div key={code} className="lang-card">
              <span className="flag">{flag}</span>
              <span className="lang-name">{name}</span>
              <span className="lang-code">{code}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Audience({ t }) {
  return (
    <section className="block" id="audience">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.audience.eyebrow}</div>
            <h2 className="section-title">{t.audience.title1} <em>{t.audience.titleAccent}</em></h2>
          </div>
          <p className="section-sub">{t.audience.sub}</p>
        </div>
        <div className="audience-grid">
          {t.audience.cards.map((c, i) => (
            <div className="aud-card" key={i}>
              <div className="aud-icon">{c.icon}</div>
              <div className="aud-tag">{c.tag}</div>
              <div className="aud-pain">
                <span className="aud-label">—</span>
                <p>{c.pain}</p>
              </div>
              <div className="aud-fix">
                <span className="aud-label">+</span>
                <p>{c.fix}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Steps({ t }) {
  return (
    <section className="block" id="start">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{t.start.eyebrow}</div>
            <h2 className="section-title">{t.start.title1} <em>{t.start.titleAccent}</em></h2>
          </div>
        </div>
        <div className="steps">
          {t.start.steps.map(([h, p], i) => (
            <div className="step" key={i}>
              <div className="step-num">STEP / {String(i + 1).padStart(2, "0")}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Final({ t }) {
  return (
    <section className="final">
      <div className="wrap">
        <h2>{t.final.title1} <em>{t.final.titleAccent}</em></h2>
        <p>{t.final.sub}</p>
        <a className="btn btn-primary" href="https://t.me/ai_translateme_bot" target="_blank" rel="noreferrer">
          {t.final.cta} <Icon.arrow/>
        </a>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer>
      <div className="wrap foot-inner">
        <div className="mono">{t.footer.tag}</div>
        <div className="foot-links">
          {t.footer.links.map(([l, href], i) => (
            <a key={i} href={href} target="_blank" rel="noreferrer">{l}</a>
          ))}
        </div>
        <div className="muted mono">© 2025</div>
      </div>
    </footer>
  );
}

window.App = App;