/* global React */
const { useState, useEffect } = React;

function Intro({ done }) {
  return (
    <div className={`intro ${done ? "is-done" : ""}`}>
      <div className="intro-blob b1"></div>
      <div className="intro-blob b2"></div>
      <div className="intro-blob b3"></div>
      <div className="intro-blob b4"></div>
      <div className="intro-blob b5"></div>
      <div className="intro-mark">
        <img src="/landing/design-system/assets/eoma-logo.svg" alt="eoma" />
      </div>
    </div>
  );
}

function Nav({ ctaLabel, t, lang, pricingHref, urls, onDemoClick }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <a className="nav-brand" href="#top">
        <Logomark width={28} />
        eoma
      </a>
      <div className="nav-links">
        <a className="nav-link is-home" href="#top">
          {t.nav.home}
        </a>
        <a className="nav-link" href="#how">
          {t.nav.how}
        </a>
        <a className="nav-link" href="#platforms">
          {t.nav.platforms}
          <svg className="caret" viewBox="0 0 10 10" fill="none">
            <path
              d="M2 3.5L5 6.5L8 3.5"
              stroke="currentColor"
              strokeWidth="1.4"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </a>
        <a className="nav-link" href="#features">
          {t.nav.features}
        </a>
        <a className="nav-link" href={pricingHref}>
          {t.nav.pricing}
        </a>
        <a className="nav-link" href="#faq">
          {t.nav.faq}
        </a>
      </div>
      <div className="nav-actions">
        <a
          className="lang-switch"
          href={t.langSwitch.otherHref}
          aria-label={`Switch to ${t.langSwitch.other}`}
        >
          <span className="lang-current">{t.langSwitch.current}</span>
          <span className="lang-sep">/</span>
          <span className="lang-other">{t.langSwitch.other}</span>
        </a>
        <a className="btn btn-ghost" href={urls.login}>
          {t.nav.login}
        </a>
        <button type="button" className="btn btn-primary" onClick={onDemoClick}>
          <LogoBadge size={36} />
          {ctaLabel}
        </button>
      </div>
    </nav>
  );
}

/* Map 0–100 to red→amber→green per real AeoV2Hero rateToColor */
function rateToColor(rate) {
  const r = Math.max(0, Math.min(100, rate));
  if (r <= 50) {
    const t = r / 50;
    const h = 15 + t * 10,
      s = 70 + t * 5,
      l = 65 + t * 5;
    return `hsl(${h} ${s}% ${l}%)`;
  }
  const t = (r - 50) / 50;
  const h = 25 + t * 125,
    s = 75 - t * 35,
    l = 70 - t * 10;
  return `hsl(${h} ${s}% ${l}%)`;
}
function statusBadge(v, t) {
  if (v >= 70) return { label: t.dash.strong, cls: "ok" };
  if (v >= 40) return { label: t.dash.developing, cls: "warn" };
  return { label: t.dash.weak, cls: "bad" };
}

function ProviderBar({ name, rate, kind }) {
  const color = rateToColor(rate);
  return (
    <div className="prov-row">
      <span className="prov-name">
        <span className="prov-glyph" data-name={name[0]}>
          {kind ? <PlatformLogo kind={kind} size={14} alt={name} /> : name[0]}
        </span>
        {name}
      </span>
      <div className="prov-track">
        <div className="prov-fill" style={{ width: `${rate}%`, background: color }}></div>
      </div>
      <span className="prov-pct" style={{ color }}>
        {rate.toFixed(1)}%
      </span>
    </div>
  );
}

function Hero({ ctaLabel, t, urls, onDemoClick }) {
  const status = statusBadge(58.4, t);
  const visColor = rateToColor(58.4);

  return (
    <section className="hero" id="top">
      <div className="hero-tokens">
        <div className="token t1">SEO</div>
        <div className="token t2">GEO</div>
        <div className="token t3">AI</div>
        <div className="token t4">↑</div>
        <div className="token t5">∞</div>
      </div>

      <div className="hero-inner">
        <span className="eyebrow frost">
          <span className="dot"></span>
          {t.hero.eyebrow}
        </span>
        <h1 className="hero-headline">
          <span className="l1">{t.hero.h1a}</span>
          <span className="l2">
            {t.hero.h1b} <span className="accent">{t.hero.h1bAccent}</span>
          </span>
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-cta-row">
          <button type="button" className="btn btn-primary btn-lg" onClick={onDemoClick}>
            <LogoBadge size={46} />
            {ctaLabel}
          </button>
          <a className="btn btn-ghost btn-lg" style={{ padding: "0 26px" }} href="#how">
            {t.hero.seeHow}
          </a>
        </div>
        <div className="hero-also">{t.hero.also}</div>
      </div>

      {/* Real EOMA dashboard mock */}
      <div className="hero-dashboard">
        <div className="mac-chrome">
          <span className="mac-dot r"></span>
          <span className="mac-dot y"></span>
          <span className="mac-dot g"></span>
          <span className="mac-url">eoma.ai/dashboard</span>
        </div>
        <div className="dash">
          <aside className="dash-side">
            <div className="brand-row">
              <span className="brand-avatar">E</span>
              <span className="brand-name">EOMA</span>
            </div>
            {[
              { l: "Dashboard", g: "▦", a: true },
              { l: "GA4 Analytics", g: "▥" },
              { l: "Social Management", g: "◇" },
            ].map((n, i) => (
              <div key={i} className={`dash-nav ${n.a ? "active" : ""}`}>
                <span className="ic">{n.g}</span>
                {n.l}
              </div>
            ))}
            <div className="dash-side-foot">
              <div className="dash-nav">
                <span className="ic">⚙</span>Settings
              </div>
              <div className="dash-nav">
                <span className="ic">☾</span>Dark mode
              </div>
            </div>
          </aside>
          <div className="dash-main">
            <div className="dash-topbar">
              <span className="dash-title">Dashboard</span>
              <span className="dash-r2d2" title="AI Agent">
                ◉
              </span>
            </div>

            <div className="dash-content">
              {/* AeoV2Hero — real dashboard hero card */}
              <div className="aeo-card">
                <div className="aeo-left">
                  <div className="aeo-big">
                    <div className="aeo-kicker">{t.dash.visibility}</div>
                    <div className="aeo-pct-row">
                      <span className="aeo-pct" style={{ color: visColor }}>
                        58.4
                      </span>
                      <span className="aeo-pct-sym">%</span>
                    </div>
                    <span className={`aeo-status ${status.cls}`}>{status.label}</span>
                  </div>
                  <div className="aeo-stats">
                    <div className="aeo-stat">
                      <div className="ic">✉</div>
                      <div className="aeo-stat-body">
                        <div className="l">{t.dash.aiAnswers}</div>
                        <div className="v">241 / 412</div>
                        <div className="s">{t.dash.aiAnswersSub}</div>
                      </div>
                    </div>
                    <div className="aeo-stat">
                      <div className="ic">♛</div>
                      <div className="aeo-stat-body">
                        <div className="l">{t.dash.overallRank}</div>
                        <div className="v">#3 / 12</div>
                        <div className="s">{t.dash.overallRankSub}</div>
                      </div>
                    </div>
                    <div className="aeo-stat">
                      <div className="ic">↗</div>
                      <div className="aeo-stat-body">
                        <div className="l">{t.dash.training}</div>
                        <div className="v">42.1 → 58.4%</div>
                        <div className="delta-pill ok">↑ +16.3 pt</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="aeo-right">
                  <div className="aeo-kicker">{t.dash.providerBreakdown}</div>
                  <div className="prov-list">
                    <ProviderBar kind="chatgpt" name="ChatGPT" rate={68.2} />
                    <ProviderBar kind="claude" name="Claude" rate={61.4} />
                    <ProviderBar kind="gemini" name="Gemini" rate={52.7} />
                    <ProviderBar kind="perplexity" name="Perplexity" rate={47.9} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Intro, Nav, Hero, __rateToColor: rateToColor });