/* ===== Icon.jsx ===== */
/* Inline-SVG icon set for TOP TRADE.
   Lucide-style: 1.75 stroke, round caps/joins, currentColor.
   Plus the Telegram paper-plane from the source. */

const Icon = ({ name, size = 20, className = "", style }) => {
  const props = {
    width:size, height:size, viewBox:"0 0 24 24",
    fill:"none", stroke:"currentColor",
    strokeWidth:1.75, strokeLinecap:"round", strokeLinejoin:"round",
    className, style,
  };
  switch(name){
    case "check":      return <svg {...props}><polyline points="20 6 9 17 4 12"/></svg>;
    case "chevron":    return <svg {...props}><polyline points="9 18 15 12 9 6"/></svg>;
    case "chevron-down": return <svg {...props}><polyline points="6 9 12 15 18 9"/></svg>;
    case "arrow":      return <svg {...props}><path d="M5 12h14M12 5l7 7-7 7"/></svg>;
    case "spark":      return <svg {...props}><path d="M12 2l2.39 5.34L20 8.27l-4 3.96.95 5.77L12 15.5l-4.95 2.5L8 12.23l-4-3.96 5.61-.93L12 2z"/></svg>;
    case "shield":     return <svg {...props}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/></svg>;
    case "clock":      return <svg {...props}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
    case "message":    return <svg {...props}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>;
    case "trend":      return <svg {...props}><polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/></svg>;
    case "bolt":       return <svg {...props}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>;
    case "users":      return <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case "graduation":return <svg {...props}><path d="M22 10L12 5 2 10l10 5 10-5z"/><path d="M6 12v5c3 2 9 2 12 0v-5"/></svg>;
    case "wallet":     return <svg {...props}><path d="M20 12V8H6a2 2 0 0 1 0-4h12v4"/><path d="M4 6v12a2 2 0 0 0 2 2h14v-4"/><circle cx="18" cy="14" r="2"/></svg>;
    case "lock":       return <svg {...props}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;
    case "menu":       return <svg {...props}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>;
    case "close":      return <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
    case "plus":       return <svg {...props}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>;
    case "globe":      return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>;
    case "telegram":
      // brand mark — filled glyph, NOT stroke
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} style={style}>
        <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/>
      </svg>;
    default: return null;
  }
};

window.Icon = Icon;

/* TOP TRADE wordmark — matches the new brand logo:
   - Montserrat 900 uppercase, slightly wider tracking
   - First T green (#5AB657), second T blue (#2473B6)
   - Optional small tagline below: TRADING · ANALYTICS · EDUCATION
*/

const Wordmark = ({ size = 18, tagline = false, color = "var(--tt-text)" }) => {
  const t = {
    wrap:    { display:"inline-flex", flexDirection:"column", lineHeight:1 },
    line:    {
      fontWeight:900,
      fontSize: size,
      letterSpacing:"0.05em",
      color,
      whiteSpace:"nowrap",
      lineHeight:1,
    },
    green:   { color:"#5AB657" },
    blue:    { color:"#2473B6" },
    tagline: {
      fontSize: Math.max(7, size * 0.36),
      fontWeight:700,
      color:"var(--tt-text-muted)",
      letterSpacing:"0.16em",
      textTransform:"uppercase",
      marginTop: Math.max(2, size * 0.18),
      whiteSpace:"nowrap",
    },
  };
  return (
    <span style={t.wrap}>
      <span style={t.line}>
        <span style={t.green}>T</span>OP&nbsp;
        <span style={t.blue}>T</span>RADE
      </span>
      {tagline && (
        <span style={t.tagline}>
          Trading <span style={{ opacity:.4 }}>·</span> Analytics <span style={{ opacity:.4 }}>·</span> Education
        </span>
      )}
    </span>
  );
};

window.Wordmark = Wordmark;


/* ===== TickerTape.jsx ===== */
/* TickerTape — top-of-page running strip with real-time prices.
   Uses TradingView's "Ticker Tape" widget (free, no API key). */

const TICKER_SYMBOLS = [
  { proName:"OANDA:XAUUSD", title:"XAU/USD" },
  { proName:"OANDA:XAGUSD", title:"XAG/USD" },
  { proName:"FX:EURUSD",    title:"EUR/USD" },
  { proName:"FX:GBPUSD",    title:"GBP/USD" },
  { proName:"FX:AUDUSD",    title:"AUD/USD" },
  { proName:"FX:USDJPY",    title:"USD/JPY" },
];

const TICKER_CONFIG = {
  symbols:        TICKER_SYMBOLS,
  showSymbolLogo: false,
  isTransparent:  true,
  displayMode:    "regular",
  colorTheme:     "light",
  locale:         "ru",
};

const TickerTape = () => {
  const hostRef = React.useRef(null);

  React.useEffect(() => {
    const host = hostRef.current;
    if (!host) return;
    host.innerHTML = "";

    const container = document.createElement("div");
    container.className = "tradingview-widget-container";
    container.style.width = "100%";

    const inner = document.createElement("div");
    inner.className = "tradingview-widget-container__widget";
    inner.style.width = "100%";
    container.appendChild(inner);

    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js";
    script.innerHTML = JSON.stringify(TICKER_CONFIG);
    container.appendChild(script);

    host.appendChild(container);
    return () => { host.innerHTML = ""; };
  }, []);

  return (
    <div className="tt-ticker">
      <div className="tt-ticker-label">
        <span className="tt-ticker-dot"/> LIVE
      </div>
      <div ref={hostRef} className="tt-ticker-tape"/>
      <style>{`
        .tt-ticker{
          display:flex; align-items:center;
          background: linear-gradient(180deg, var(--tt-surface-1), var(--tt-surface-2));
          border-bottom: 1px solid var(--tt-border);
          height: 42px;
          width:100%;
          position:sticky; top: var(--tt-nav-h); z-index: 40;
          overflow:hidden;
        }
        .tt-ticker-label{
          flex-shrink:0;
          display:flex; align-items:center; gap:6px;
          padding: 0 14px;
          height:100%;
          background: var(--tt-gradient);
          color:#fff;
          font-size:10px; font-weight:800;
          letter-spacing:0.18em; text-transform:uppercase;
        }
        .tt-ticker-dot{
          width:6px; height:6px; border-radius:50%;
          background:#fff;
          box-shadow: 0 0 8px rgba(255,255,255,0.9);
          animation: tt-pulse 1.4s ease-in-out infinite;
        }
        .tt-ticker-tape{ flex:1; min-width:0; height:100%; }
        .tt-ticker-tape iframe{ background:transparent !important; }
        .tt-ticker .tradingview-widget-copyright,
        .tt-ticker-tape .tradingview-widget-copyright { display:none !important; }
        @keyframes tt-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
      `}</style>
    </div>
  );
};

window.TickerTape = TickerTape;


/* ===== Header.jsx ===== */
/* Header — sticky navigation with brand mark, anchor links, Telegram CTA, mobile burger. */

const NAV_LINKS = [
  { href: "#start",     label: "Старт"      },
  { href: "#brokers",   label: "Брокеры"    },
  { href: "#projects",  label: "Каналы"     },
  { href: "#benefits",  label: "Что внутри" },
  { href: "#plans",     label: "Тарифы"     },
  { href: "#traders",   label: "Трейдеры"   },
  { href: "#faq",       label: "FAQ"        },
];

const Header = () => {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const close = () => setOpen(false);

  return (
    <React.Fragment>
      <nav className="tt-nav">
        <div className="tt-container tt-nav__inner">
          <a href="#top" className="tt-nav__brand" onClick={close}>
            <div className="tt-nav__logo"><img src="./assets/logo-mark.png" alt="" /></div>
            <div>
              <div className="tt-nav__name">
                <span className="tt-w-g">T</span>OP <span className="tt-w-b">T</span>RADE
              </div>
              <div className="tt-nav__sub">Trading · Analytics · Education</div>
            </div>
          </a>

          <div className="tt-nav__links">
            {NAV_LINKS.map(l => (
              <a key={l.href} className="tt-nav__link" href={l.href}>{l.label}</a>
            ))}
          </div>

          <a
            className="tt-btn tt-btn--primary tt-nav__cta"
            href="https://t.me/toptrade_support"
            target="_blank" rel="noreferrer"
          >
            <span className="tt-tg-bubble"><Icon name="telegram" /></span>
            Telegram
          </a>

          <button className="tt-nav__burger" onClick={() => setOpen(o => !o)} aria-label="menu">
            <Icon name={open ? "close" : "menu"} />
          </button>
        </div>
      </nav>

      <div className={"tt-mobile-menu" + (open ? " is-open" : "")}>
        {NAV_LINKS.map(l => (
          <a key={l.href} href={l.href} onClick={close}>
            {l.label}
            <Icon name="chevron" />
          </a>
        ))}
        <a
          href="https://t.me/toptrade_support"
          target="_blank" rel="noreferrer"
          style={{
            background:"var(--tt-gradient)", border:"none", color:"#fff",
            justifyContent:"center", marginTop:8, boxShadow:"var(--tt-glow-green)",
          }}
        >
          <span className="tt-tg-bubble" style={{ marginRight: 8 }}><Icon name="telegram" /></span>
          Написать в Telegram
        </a>
      </div>
    </React.Fragment>
  );
};

window.Header = Header;


/* ===== Hero.jsx ===== */
/* Hero — clean centered headline + CTAs. No stat cards, no chart panel. */

const heroStyles = {
  section: {
    position:"relative",
    paddingTop: "clamp(64px, 9vw, 120px)",
    paddingBottom: "clamp(56px, 8vw, 100px)",
    overflow:"hidden",
    background:
      "radial-gradient(circle at 18% 8%, rgba(90,182,87,0.18), transparent 55%)," +
      "radial-gradient(circle at 90% 30%, rgba(43,142,196,0.22), transparent 55%)," +
      "radial-gradient(circle at 70% 100%, rgba(36,115,182,0.20), transparent 60%)," +
      "var(--tt-bg)",
  },
  inner: {
    maxWidth: 900,
    margin:"0 auto",
    textAlign:"center",
    display:"flex", flexDirection:"column", alignItems:"center",
  },
  badge: {
    display:"inline-flex", alignItems:"center", gap:8,
    padding:"7px 16px", borderRadius:999,
    background:"rgba(91,182,87,0.10)",
    border:"1px solid rgba(91,182,87,0.28)",
    color:"#5AB657",
    fontSize:11, fontWeight:800, letterSpacing:"0.16em", textTransform:"uppercase",
    marginBottom:28,
  },
  title: {
    fontSize:"clamp(38px, 6.5vw, 80px)",
    fontWeight:900, lineHeight:0.98, letterSpacing:"-0.025em",
    marginBottom:24,
    color:"var(--tt-text)",
  },
  lead: {
    fontSize:"clamp(15px, 1.6vw, 19px)",
    color:"var(--tt-text-muted)", lineHeight:1.55, maxWidth:620,
    fontWeight:500, marginBottom:36,
  },
  ctas: {
    display:"flex", gap:12, flexWrap:"wrap", justifyContent:"center",
  },
  trustRow: {
    marginTop:36,
    display:"flex", alignItems:"center", justifyContent:"center", gap:24,
    flexWrap:"wrap",
    color:"var(--tt-text-muted)",
    fontSize:13, fontWeight:600,
  },
  trustItem: { display:"flex", alignItems:"center", gap:8 },
  trustDot: {
    width:6, height:6, borderRadius:"50%",
    background:"#5AB657",
    boxShadow:"0 0 8px rgba(91,182,87,0.7)",
  },
};

const Hero = () => (
  <section id="top" style={heroStyles.section}>
    <div className="tt-container">
      <div style={heroStyles.inner}>
        <div style={heroStyles.badge}>
          <Icon name="bolt" size={14}/> Сообщество трейдеров №1 в Telegram
        </div>

        <h1 style={heroStyles.title}>
          Дисциплина решает.<br/>
          <span className="tt-grad">Торговать вместе&nbsp;— проще.</span>
        </h1>

        <p style={heroStyles.lead}>
          TOP TRADE — закрытое сообщество, где разбирают сделки, делятся стратегиями
          и держат друг друга в&nbsp;тонусе. 3&nbsp;шага — и&nbsp;ты внутри.
        </p>

        <div style={heroStyles.ctas}>
          <a className="tt-btn tt-btn--primary tt-btn--lg" href="#start">
            Начать бесплатно
            <Icon name="arrow" size={16}/>
          </a>
          <a className="tt-btn tt-btn--secondary tt-btn--lg" href="#plans">
            Посмотреть тарифы
          </a>
        </div>

        <div style={heroStyles.trustRow}>
          <div style={heroStyles.trustItem}><span style={heroStyles.trustDot}/> 4 брокера-партнёра</div>
          <div style={heroStyles.trustItem}><span style={heroStyles.trustDot}/> Поддержка 24/7</div>
          <div style={heroStyles.trustItem}><span style={heroStyles.trustDot}/> От $500 депозит</div>
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;


/* ===== ThreeSteps.jsx ===== */
/* ThreeSteps — the "3 шага — и ты внутри" funnel card. */

const stepsStyles = {
  card: {
    background:"var(--tt-surface-1)",
    border:"1px solid var(--tt-border)",
    borderRadius:24,
    overflow:"hidden",
    boxShadow:"0 24px 60px rgba(13,24,32,0.12)",
  },
  head: {
    background:"var(--tt-gradient)",
    padding:"26px 28px",
    position:"relative", overflow:"hidden",
    display:"flex", alignItems:"center", gap:14,
  },
  headBleed: {
    content:"''", position:"absolute",
    width:380, height:380, borderRadius:"50%",
    background:"rgba(255,255,255,0.06)",
    right:-100, top:-130, pointerEvents:"none",
  },
  headIcon: {
    width:44, height:44, borderRadius:12,
    background:"rgba(255,255,255,0.22)",
    border:"1px solid rgba(255,255,255,0.3)",
    display:"flex", alignItems:"center", justifyContent:"center",
    color:"#fff",
  },
  headText: {
    color:"#fff", position:"relative", zIndex:1,
  },
  headSub: {
    fontSize:11, fontWeight:700, color:"rgba(255,255,255,0.7)",
    letterSpacing:"0.2em", textTransform:"uppercase",
  },
  headTitle: {
    fontSize:22, fontWeight:900, marginTop:4, letterSpacing:"-0.01em",
  },
  body: { padding:"32px 28px 28px" },
  grid: {
    display:"grid",
    gridTemplateColumns:"repeat(3, minmax(0,1fr))",
    gap:18,
  },
  step: {
    background:"var(--tt-surface-2)",
    border:"1px solid var(--tt-border)",
    borderRadius:16,
    padding:"24px 22px",
    display:"flex", flexDirection:"column", gap:14,
  },
  stepNum: {
    width:44, height:44, borderRadius:"50%",
    background:"var(--tt-gradient)",
    display:"flex", alignItems:"center", justifyContent:"center",
    color:"#fff", fontWeight:900, fontSize:18,
    boxShadow:"0 8px 22px rgba(58,169,143,0.45)",
  },
  stepTitle: { fontSize:16, fontWeight:800, color:"var(--tt-text)", lineHeight:1.3 },
  stepHint:  { fontSize:13, fontWeight:500, color:"var(--tt-text-muted)", lineHeight:1.5 },
  deposit: {
    marginTop:24,
    padding:"14px 18px",
    background:"rgba(91,182,87,0.07)",
    border:"1px solid rgba(91,182,87,0.25)",
    borderRadius:12,
    display:"flex", alignItems:"center", gap:12,
    color:"#5AB657", fontSize:14, fontWeight:700,
  },
  existing: {
    marginTop:10, padding:"14px 18px",
    border:"1px dashed rgba(255,255,255,0.14)",
    borderRadius:12,
    display:"flex", alignItems:"center", gap:12,
    color:"var(--tt-text-muted)", fontSize:13, fontWeight:500,
  },
};

const Steps = [
  { n:1, title:"Зарегистрируйся у брокера-партнёра", hint:"Выбери удобного брокера ниже. Регистрация — пара минут." },
  { n:2, title:"Введи реферальный код",              hint:"Это твой пропуск в сообщество. Не забудь скопировать." },
  { n:3, title:"Пополни счёт и торгуй",              hint:"Минимум — $500. Мы добавим тебя в закрытый Telegram-чат." },
];

const ThreeSteps = () => (
  <section id="start" className="tt-section">
    <div className="tt-container">
      <div className="tt-section-head">
        <div className="tt-eyebrow">Бесплатный доступ</div>
        <h2 className="tt-h2">3 шага — и&nbsp;<span className="tt-grad">ты внутри</span></h2>
        <p className="tt-lead">
          Самый быстрый путь в сообщество — через брокера-партнёра. Никаких подписок,
          никаких скрытых платежей. Только твой депозит и твоя торговля.
        </p>
      </div>

      <div style={stepsStyles.card}>
        <div style={stepsStyles.head}>
          <div style={stepsStyles.headBleed}/>
          <div style={stepsStyles.headIcon}><Icon name="bolt" size={20}/></div>
          <div style={stepsStyles.headText}>
            <div style={stepsStyles.headSub}>Free Access</div>
            <div style={stepsStyles.headTitle}>3 шага — и ты внутри</div>
          </div>
        </div>

        <div style={stepsStyles.body}>
          <div style={stepsStyles.grid} className="steps-grid">
            {Steps.map(s => (
              <div key={s.n} style={stepsStyles.step}>
                <div style={stepsStyles.stepNum}>{s.n}</div>
                <div style={stepsStyles.stepTitle}>{s.title}</div>
                <div style={stepsStyles.stepHint}>{s.hint}</div>
              </div>
            ))}
          </div>

          <div style={stepsStyles.deposit}>
            <Icon name="check" size={18}/>
            Минимальный депозит — от $500
          </div>
          <div style={stepsStyles.existing}>
            <Icon name="wallet" size={18}/>
            Уже есть счёт у одного из брокеров? Переведём под нашу партнёрку.
          </div>
        </div>
      </div>
    </div>

    <style>{`
      @media (max-width: 760px){
        .steps-grid{ grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

window.ThreeSteps = ThreeSteps;


/* ===== Brokers.jsx ===== */
/* Brokers — referral broker grid with logo, ref code, brand tagline. */

const BROKERS = [
  { name:"RoboForex", code:"yhvx",
    url:"https://my.roboforex.com/en/?a=yhvx",
    tag:"FX · Stocks · Indices",
    logo:"./assets/brokers/roboforex.png",
    bg:"#FFFFFF" },
  { name:"AMarkets",  code:"5H4BEI",
    url:"https://profit-market.info/sign-up/real/?g=5H4BEI",
    tag:"FX · CFD · Metals",
    logo:"./assets/brokers/amarkets.png",
    bg:"#1F2027" },
  { name:"Exness",    code:"3dijjab2hx",
    url:"https://one.exnessonelink.com/a/3dijjab2hx",
    tag:"FX · Crypto · Gold",
    logo:"./assets/brokers/exness.png",
    bg:"#FBDA28" },
  { name:"XM",        code:"TOPTRADE",
    url:"https://affs.click/RDe3n",
    tag:"FX · Indices · Stocks",
    logo:"./assets/brokers/xm.png",
    bg:"#0A0A0A" },
];

const brokerStyles = {
  grid: {
    display:"grid",
    gridTemplateColumns:"repeat(4, minmax(0,1fr))",
    gap:14,
  },
  card: {
    display:"flex", flexDirection:"column",
    background:"var(--tt-surface-1)",
    border:"1px solid var(--tt-border)",
    borderRadius:18,
    overflow:"hidden",
    transition:"transform .18s var(--tt-ease), border-color .18s var(--tt-ease), box-shadow .18s var(--tt-ease)",
    textDecoration:"none",
    position:"relative",
  },
  logoTile: {
    aspectRatio:"5 / 3",
    width:"100%",
    display:"flex", alignItems:"center", justifyContent:"center",
    overflow:"hidden",
    position:"relative",
  },
  logoImg: {
    maxWidth:"55%",
    maxHeight:"70%",
    objectFit:"contain",
  },
  body: {
    padding:"18px 20px 20px",
    display:"flex", flexDirection:"column", gap:4,
  },
  tag: {
    fontSize:10, fontWeight:700, color:"var(--tt-text-muted)",
    letterSpacing:"0.1em", textTransform:"uppercase",
  },
  name: {
    fontSize:19, fontWeight:900, color:"var(--tt-text)", letterSpacing:"-0.01em",
    marginTop:4,
  },
  codeBox: {
    marginTop:14,
    padding:"10px 12px",
    background:"var(--tt-surface-2)",
    border:"1px solid var(--tt-border)",
    borderRadius:10,
    display:"flex", alignItems:"center", justifyContent:"space-between", gap:10,
  },
  codeLabel: {
    fontSize:9, fontWeight:700, color:"var(--tt-text-muted)",
    letterSpacing:"0.15em", textTransform:"uppercase",
  },
  codeVal: {
    fontSize:14, fontWeight:800,
    fontFamily:"'SF Mono', ui-monospace, Menlo, monospace",
    background:"var(--tt-gradient)",
    WebkitBackgroundClip:"text", backgroundClip:"text",
    WebkitTextFillColor:"transparent",
    letterSpacing:"0.02em",
  },
  cta: {
    marginTop:12,
    display:"flex", alignItems:"center", justifyContent:"space-between", gap:8,
    fontSize:12, fontWeight:800, color:"#5AB657",
    letterSpacing:"0.05em", textTransform:"uppercase",
    padding:"10px 0 2px",
  },
};

const Brokers = () => (
  <section id="brokers" className="tt-section">
    <div className="tt-container">
      <div className="tt-section-head">
        <div className="tt-eyebrow">Брокеры-партнёры</div>
        <h2 className="tt-h2">Выбери своего <span className="tt-grad">брокера</span></h2>
        <p className="tt-lead">
          Зарегистрируйся по реферальному коду — и получишь доступ
          в&nbsp;закрытое сообщество автоматически.
        </p>
      </div>

      <div style={brokerStyles.grid} className="broker-grid">
        {BROKERS.map(b => (
          <a key={b.name}
             href={b.url} target="_blank" rel="noreferrer"
             style={brokerStyles.card}
             className="broker-card">
            <div style={{ ...brokerStyles.logoTile, background:b.bg }}>
              <img src={b.logo} alt={b.name} style={brokerStyles.logoImg}/>
            </div>
            <div style={brokerStyles.body}>
              <div style={brokerStyles.tag}>{b.tag}</div>
              <div style={brokerStyles.name}>{b.name}</div>

              <div style={brokerStyles.codeBox}>
                <span style={brokerStyles.codeLabel}>Реф. код</span>
                <span style={brokerStyles.codeVal}>{b.code}</span>
              </div>

              <div style={brokerStyles.cta}>
                Открыть счёт
                <Icon name="arrow" size={14}/>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>

    <style>{`
      .broker-card:hover{
        transform: translateY(-3px);
        border-color: rgba(91,182,87,0.5);
        box-shadow: 0 14px 32px rgba(13,24,32,0.10);
      }
      .broker-card:active{ transform: scale(.985); }
      @media (max-width: 900px){
        .broker-grid{ grid-template-columns: repeat(2, 1fr) !important; }
      }
      @media (max-width: 480px){
        .broker-grid{ gap: 10px !important; }
      }
    `}</style>
  </section>
);

window.Brokers = Brokers;


/* ===== Projects.jsx ===== */
/* Projects — public Telegram channels run by TOP TRADE.
   Two cards: TOP TRADE CHANNEL (analytics) + INVESTING CHAT (open chat). */

const PROJECTS = [
  {
    handle:"@toptradechan",
    name:"TOP TRADE CHANNEL",
    url:"https://t.me/toptradechan",
    type:"Канал · Аналитика",
    desc:"Открытый канал команды. Аналитика рынка 2 раза в неделю, все важные новости, прямые эфиры с разборами сделок. Подписывайся, чтобы быть в курсе.",
    bullets:[
      "Аналитика 2 раза в неделю",
      "Срочные новости рынка",
      "Прямые эфиры с командой",
    ],
    accent:"#5AB657", // green
  },
  {
    handle:"@forexinvestingchat",
    name:"INVESTING CHAT",
    url:"https://t.me/forexinvestingchat",
    type:"Открытый чат · Сообщество",
    desc:"Открытый чат трейдеров: задавай вопросы, делись идеями, обсуждай сделки и стратегии. Здесь живёт сообщество — присоединяйся бесплатно.",
    bullets:[
      "Общение трейдеров 24/7",
      "Обсуждение идей и сделок",
      "Без подписки и платы",
    ],
    accent:"#2B8EC4", // blue
  },
];

const projStyles = {
  grid: {
    display:"grid",
    gridTemplateColumns:"repeat(2, minmax(0,1fr))",
    gap:18,
  },
  card: {
    position:"relative",
    background:"var(--tt-surface-1)",
    border:"1px solid var(--tt-border)",
    borderRadius:20,
    padding:"28px 28px 26px",
    overflow:"hidden",
    transition:"transform .2s var(--tt-ease), border-color .2s var(--tt-ease), box-shadow .2s var(--tt-ease)",
    textDecoration:"none",
    display:"flex", flexDirection:"column", gap:18,
  },
  glow: (color) => ({
    position:"absolute",
    top:-80, right:-80,
    width:240, height:240,
    background:`radial-gradient(circle, ${color}40, transparent 70%)`,
    borderRadius:"50%",
    pointerEvents:"none",
  }),
  topRow: { display:"flex", alignItems:"flex-start", gap:14, position:"relative", zIndex:1 },
  iconTile: (color) => ({
    width:54, height:54, borderRadius:14, flexShrink:0,
    background:`linear-gradient(135deg, ${color}, ${color}cc)`,
    display:"flex", alignItems:"center", justifyContent:"center",
    color:"#fff",
    boxShadow:`0 10px 22px ${color}55`,
  }),
  type: { fontSize:10, fontWeight:800, color:"var(--tt-text-muted)",
          letterSpacing:"0.18em", textTransform:"uppercase" },
  name: { fontSize:22, fontWeight:900, color:"var(--tt-text)",
          letterSpacing:"-0.02em", marginTop:4, lineHeight:1.1 },
  handle: { fontSize:13, fontWeight:700, color:"var(--tt-text-muted)",
            marginTop:6, fontFamily:"'SF Mono', ui-monospace, Menlo, monospace" },
  desc: { fontSize:14, color:"var(--tt-text)", lineHeight:1.55, fontWeight:500,
          position:"relative", zIndex:1 },
  bullets: { display:"flex", flexDirection:"column", gap:8, position:"relative", zIndex:1 },
  bullet: { display:"flex", alignItems:"center", gap:10,
            fontSize:13, color:"var(--tt-text-muted)", fontWeight:600 },
  bulletDot: (color) => ({
    width:6, height:6, borderRadius:"50%", background:color, flexShrink:0,
    boxShadow:`0 0 8px ${color}88`,
  }),
  cta: {
    marginTop:"auto",
    display:"inline-flex", alignItems:"center", gap:10,
    padding:"12px 20px",
    background:"var(--tt-surface-2)",
    border:"1px solid var(--tt-border)",
    borderRadius:12,
    fontSize:13, fontWeight:800, color:"var(--tt-text)",
    letterSpacing:"0.04em", textTransform:"uppercase",
    alignSelf:"flex-start",
    transition:"all .15s var(--tt-ease)",
    position:"relative", zIndex:1,
  },
};

const Projects = () => (
  <section id="projects" className="tt-section">
    <div className="tt-container">
      <div className="tt-section-head">
        <div className="tt-eyebrow">Наши проекты</div>
        <h2 className="tt-h2">
          Открытые <span className="tt-grad">каналы команды</span>
        </h2>
        <p className="tt-lead">
          Два публичных Telegram-проекта TOP TRADE: канал с&nbsp;аналитикой
          и&nbsp;открытый чат для общения трейдеров. Подписаться — бесплатно.
        </p>
      </div>

      <div style={projStyles.grid} className="proj-grid">
        {PROJECTS.map(p => (
          <a key={p.name} href={p.url} target="_blank" rel="noreferrer"
             style={projStyles.card} className="proj-card">
            <div style={projStyles.glow(p.accent)}/>
            <div style={projStyles.topRow}>
              <div style={projStyles.iconTile(p.accent)}>
                <Icon name="telegram" size={26}/>
              </div>
              <div style={{ flex:1 }}>
                <div style={projStyles.type}>{p.type}</div>
                <div style={projStyles.name}>{p.name}</div>
                <div style={projStyles.handle}>{p.handle}</div>
              </div>
            </div>
            <div style={projStyles.desc}>{p.desc}</div>
            <div style={projStyles.bullets}>
              {p.bullets.map(b => (
                <div key={b} style={projStyles.bullet}>
                  <span style={projStyles.bulletDot(p.accent)}/>
                  {b}
                </div>
              ))}
            </div>
            <div style={projStyles.cta} className="proj-cta">
              Открыть в Telegram
              <Icon name="arrow" size={14}/>
            </div>
          </a>
        ))}
      </div>
    </div>

    <style>{`
      .proj-card:hover{
        transform: translateY(-3px);
        border-color: rgba(91,182,87,0.4);
        box-shadow: 0 16px 36px rgba(13,24,32,0.10);
      }
      .proj-card:hover .proj-cta{
        background: var(--tt-gradient);
        color: #fff;
        border-color: transparent;
      }
      @media (max-width: 760px){
        .proj-grid{ grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

window.Projects = Projects;


/* ===== Benefits.jsx ===== */
/* Benefits — 4 core perks (down from 6). */

const BENEFITS = [
  { icon:"signal",   title:"Сигналы в реальном времени",
    text:"Точки входа, SL и TP по каждому инструменту. Получаешь сигнал — торгуешь сразу. Изменения по позициям публикуются мгновенно." },
  { icon:"chart",    title:"Ежедневная аналитика",
    text:"Разбор рынка каждое утро. Куда движется цена и почему. Без воды." },
  { icon:"users",    title:"Чат + обучение через практику",
    text:"Живое обсуждение идей в закрытом чате. Учишься, наблюдая за реальными сделками команды." },
  { icon:"target",   title:"4 стиля торговли",
    text:"Скальп, интрадей ×2, среднесрок. Выбираешь сетапы под свой график и темперамент." },
];

const benefitStyles = {
  grid: {
    display:"grid",
    gridTemplateColumns:"repeat(2, minmax(0,1fr))",
    gap:16,
  },
  card: {
    background:"var(--tt-surface-1)",
    border:"1px solid var(--tt-border)",
    borderRadius:18,
    padding:"28px 28px",
    transition:"transform .18s var(--tt-ease), border-color .18s var(--tt-ease), box-shadow .18s var(--tt-ease)",
    display:"flex", flexDirection:"column", gap:14,
  },
  topRow: { display:"flex", alignItems:"center", gap:14 },
  iconWrap: {
    width:48, height:48, borderRadius:14, flexShrink:0,
    background:"linear-gradient(135deg, rgba(91,182,87,0.16), rgba(43,142,196,0.16))",
    border:"1px solid rgba(91,182,87,0.25)",
    display:"flex", alignItems:"center", justifyContent:"center",
    color:"#3BA88F",
  },
  title: { fontSize:18, fontWeight:800, color:"var(--tt-text)", lineHeight:1.2, letterSpacing:"-0.01em" },
  text:  { fontSize:14, color:"var(--tt-text-muted)", lineHeight:1.6, fontWeight:500 },
};

const BenefitIcon = ({ name, size=24 }) => {
  const p = { width:size, height:size, viewBox:"0 0 24 24",
              fill:"none", stroke:"currentColor",
              strokeWidth:1.75, strokeLinecap:"round", strokeLinejoin:"round" };
  switch(name){
    case "signal":
      return <svg {...p}><path d="M5 12a7 7 0 0 1 14 0"/><path d="M8.5 12a3.5 3.5 0 0 1 7 0"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/></svg>;
    case "chart":
      return <svg {...p}><polyline points="3 17 9 11 13 15 21 7"/><polyline points="14 7 21 7 21 14"/></svg>;
    case "users":
      return <svg {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case "target":
      return <svg {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>;
    default: return null;
  }
};

const Benefits = () => (
  <section id="benefits" className="tt-section">
    <div className="tt-container">
      <div className="tt-section-head">
        <div className="tt-eyebrow">Что внутри сообщества</div>
        <h2 className="tt-h2">
          4 причины <span className="tt-grad">быть с нами</span>
        </h2>
      </div>

      <div style={benefitStyles.grid} className="benefit-grid">
        {BENEFITS.map(b => (
          <div key={b.title} style={benefitStyles.card} className="benefit-card">
            <div style={benefitStyles.topRow}>
              <div style={benefitStyles.iconWrap}><BenefitIcon name={b.icon}/></div>
              <div style={benefitStyles.title}>{b.title}</div>
            </div>
            <div style={benefitStyles.text}>{b.text}</div>
          </div>
        ))}
      </div>
    </div>

    <style>{`
      .benefit-card:hover{
        transform: translateY(-2px);
        border-color: rgba(91,182,87,0.4);
        box-shadow: 0 10px 24px rgba(13,24,32,0.06);
      }
      @media (max-width: 720px){
        .benefit-grid{ grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

window.Benefits = Benefits;


/* ===== Plans.jsx ===== */
/* Plans — paid subscription tiers, 3 cards with the middle ВЫГОДА flag. */

const tgURL = (msg) =>
  "https://t.me/toptrade_support?text=" + encodeURIComponent(msg);

const PLANS = [
  { per:"1 месяц",  price:"$120", hint:"/ мес",      feat:false, msg:"Хочу приобрести подписку на 1 месяц — $120" },
  { per:"3 месяца", price:"$250", hint:"≈ $83/мес",  feat:true,  msg:"Хочу приобрести подписку на 3 месяца — $250" },
  { per:"1 год",    price:"$850", hint:"≈ $71/мес",  feat:false, msg:"Хочу приобрести подписку на 1 год — $850" },
];

const PERKS = [
  "Закрытый Telegram-чат сообщества",
  "Эксклюзивные торговые идеи и стратегии",
  "Поддержка наставников 24/7",
  "Разборы сделок и обучающие материалы",
];

const plansStyles = {
  cards: {
    display:"grid",
    gridTemplateColumns:"repeat(3, minmax(0,1fr))",
    gap:16,
  },
  card: {
    position:"relative",
    background:"var(--tt-surface-1)",
    border:"1px solid var(--tt-border)",
    borderRadius:20,
    padding:"36px 28px 28px",
    display:"flex", flexDirection:"column", gap:18,
    transition:"transform .2s var(--tt-ease), border-color .2s var(--tt-ease), box-shadow .2s var(--tt-ease)",
    textDecoration:"none",
  },
  cardFeat: {
    border:"1px solid rgba(91,182,87,0.35)",
    background:"linear-gradient(180deg, rgba(91,182,87,0.08), var(--tt-surface-1) 60%)",
    boxShadow:"0 24px 60px rgba(58,169,143,0.15)",
  },
  flag: {
    position:"absolute", top:0, left:"50%", transform:"translate(-50%, -50%)",
    background:"var(--tt-gradient)", color:"#fff",
    fontSize:10, fontWeight:800, letterSpacing:"0.18em", textTransform:"uppercase",
    padding:"5px 14px", borderRadius:999,
    boxShadow:"0 6px 18px rgba(58,169,143,0.45)",
    whiteSpace:"nowrap",
  },
  per: {
    fontSize:12, fontWeight:700, color:"var(--tt-text-muted)",
    letterSpacing:"0.18em", textTransform:"uppercase",
  },
  price: {
    fontSize:60, fontWeight:900, lineHeight:1, letterSpacing:"-0.03em",
    background:"var(--tt-gradient)",
    WebkitBackgroundClip:"text", backgroundClip:"text",
    WebkitTextFillColor:"transparent",
  },
  hint: { fontSize:13, color:"var(--tt-text-muted)", fontWeight:600 },
  perks: { display:"flex", flexDirection:"column", gap:10, marginTop:6 },
  perk: { display:"flex", gap:10, alignItems:"flex-start", fontSize:13, color:"var(--tt-text)", lineHeight:1.45, fontWeight:500 },
  perkIcon: { color:"#5AB657", flexShrink:0, marginTop:3 },
  cta: { marginTop:"auto" },
};

const PlanCard = ({ plan }) => (
  <a href={tgURL(plan.msg)} target="_blank" rel="noreferrer"
     style={{ ...plansStyles.card, ...(plan.feat ? plansStyles.cardFeat : {}) }}
     className="plan-card">
    {plan.feat && <div style={plansStyles.flag}>★ Выгода</div>}
    <div>
      <div style={plansStyles.per}>{plan.per}</div>
      <div style={{ display:"flex", alignItems:"baseline", gap:10, marginTop:14 }}>
        <div style={plansStyles.price}>{plan.price}</div>
      </div>
      <div style={plansStyles.hint}>{plan.hint}</div>
    </div>
    <div style={plansStyles.perks}>
      {PERKS.map(p => (
        <div key={p} style={plansStyles.perk}>
          <Icon name="check" size={16} style={plansStyles.perkIcon}/>
          <span>{p}</span>
        </div>
      ))}
    </div>
    <div style={plansStyles.cta}>
      <span className={"tt-btn " + (plan.feat ? "tt-btn--primary" : "tt-btn--secondary")} style={{ width:"100%" }}>
        Выбрать тариф
        <Icon name="arrow" size={14}/>
      </span>
    </div>
  </a>
);

const Plans = () => (
  <section id="plans" className="tt-section">
    <div className="tt-container">
      <div className="tt-section-head">
        <div className="tt-eyebrow">Платная подписка</div>
        <h2 className="tt-h2">Хочешь напрямую? <span className="tt-grad">Выбери тариф.</span></h2>
        <p className="tt-lead">
          Если не хочешь регистрироваться через брокера — подключайся напрямую.
          Один платёж — и ты в&nbsp;команде.
        </p>
      </div>

      <div style={plansStyles.cards} className="plan-grid">
        {PLANS.map(p => <PlanCard key={p.per} plan={p}/>)}
      </div>
    </div>

    <style>{`
      .plan-card:hover{ transform: translateY(-4px); border-color: rgba(91,182,87,0.5); }
      .plan-card:active{ transform: scale(.99); }
      @media (max-width: 880px){
        .plan-grid{ grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

window.Plans = Plans;


/* ===== Traders.jsx ===== */
/* Traders — compact 4-up grid with round avatars.
   Replaces the previous carousel; faster, smaller, lighter. */

const TRADERS = [
  {
    name: "МАКСИМ Т.",
    role: "Внутридневной",
    tf:   "M15–H1",
    text: "Свечной анализ, тренд и ключевые уровни S/R.",
    photo:"./assets/traders/maxim.png",
    initials:"МТ",
  },
  {
    name: "ИЛЬЯ М.",
    role: "Скальп-трейдер",
    tf:   "M1–M15",
    text: "Сверхбыстрые сделки на ключевых уровнях. Жёсткий риск-менеджмент.",
    photo:"./assets/traders/ilya.png",
    initials:"ИМ",
  },
  {
    name: "ДЕНИС Л.",
    role: "Внутридневной",
    tf:   "M15–H1",
    text: "Лондон + NY сессии. Опционный анализ и профиль объёма.",
    photo:"./assets/traders/denis.png",
    initials:"ДЛ",
  },
  {
    name: "ИМРАН В.",
    role: "Среднесрок",
    tf:   "H1–D1",
    text: "Кластерный анализ объёмов. Горизонт — дни и недели.",
    photo:null,
    initials:"ИВ",
  },
];

const tStyles = {
  grid: {
    display:"grid",
    gridTemplateColumns:"repeat(4, minmax(0,1fr))",
    gap:24,
  },
  card: {
    display:"flex", flexDirection:"column", alignItems:"center",
    textAlign:"center",
    gap:10,
  },
  ring: {
    position:"relative",
    width:"clamp(120px, 13vw, 160px)",
    aspectRatio:"1 / 1",
    borderRadius:"50%",
    padding:3,
    background:"var(--tt-gradient)",
    boxShadow:"0 12px 28px rgba(58,169,143,0.20)",
    marginBottom:6,
  },
  avatar: {
    width:"100%", height:"100%",
    borderRadius:"50%",
    overflow:"hidden",
    background:"var(--tt-surface-2)",
    position:"relative",
  },
  photoImg: {
    width:"100%", height:"100%", objectFit:"cover",
    objectPosition:"50% 22%",
    filter:"grayscale(1) contrast(1.05)",
    transition:"filter .35s var(--tt-ease)",
  },
  initialsTile: {
    width:"100%", height:"100%",
    display:"flex", alignItems:"center", justifyContent:"center",
    fontSize:"clamp(36px, 4vw, 44px)", fontWeight:900,
    color:"var(--tt-text-muted)",
    letterSpacing:"-0.02em",
    background:"linear-gradient(135deg, var(--tt-surface-2), var(--tt-surface-3))",
  },
  tfBadge: {
    position:"absolute", bottom:-2, left:"50%", transform:"translateX(-50%)",
    background:"var(--tt-bg)",
    border:"1px solid var(--tt-border-strong)",
    color:"var(--tt-text)",
    padding:"3px 10px", borderRadius:999,
    fontSize:9, fontWeight:800,
    letterSpacing:"0.12em", textTransform:"uppercase",
    whiteSpace:"nowrap",
    fontFamily:"'SF Mono', ui-monospace, Menlo, monospace",
    boxShadow:"0 3px 8px rgba(13,24,32,0.06)",
  },
  name: { fontSize:14, fontWeight:900, letterSpacing:"0.08em", color:"var(--tt-text)", marginTop:6 },
  role: {
    fontSize:11, fontWeight:800,
    background:"var(--tt-gradient)",
    WebkitBackgroundClip:"text", backgroundClip:"text",
    WebkitTextFillColor:"transparent",
    letterSpacing:"0.08em", textTransform:"uppercase",
  },
  text: { fontSize:13, color:"var(--tt-text-muted)", lineHeight:1.5, fontWeight:500, maxWidth:220 },
};

const Traders = () => (
  <section id="traders" className="tt-section">
    <div className="tt-container">
      <div className="tt-section-head" style={{ alignItems:"center", textAlign:"center", margin:"0 auto 36px" }}>
        <div className="tt-eyebrow" style={{ alignSelf:"center" }}>Наши трейдеры</div>
        <h2 className="tt-h2">
          4 профессионала ·&nbsp;<span className="tt-grad">реальный опыт</span>
        </h2>
      </div>

      <div style={tStyles.grid} className="traders-grid">
        {TRADERS.map(t => (
          <div key={t.name} style={tStyles.card} className="trader-card">
            <div style={tStyles.ring}>
              <div style={tStyles.avatar}>
                {t.photo
                  ? <img src={t.photo} alt={t.name} style={tStyles.photoImg} className="trader-photo" loading="lazy"/>
                  : <div style={tStyles.initialsTile}>{t.initials}</div>}
              </div>
              <div style={tStyles.tfBadge}>{t.tf}</div>
            </div>
            <div style={tStyles.name}>{t.name}</div>
            <div style={tStyles.role}>{t.role}</div>
            <div style={tStyles.text}>{t.text}</div>
          </div>
        ))}
      </div>
    </div>

    <style>{`
      .trader-card:hover .trader-photo{
        filter: grayscale(0) contrast(1.05);
      }
      @media (max-width: 880px){
        .traders-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 32px 16px !important; }
      }
      @media (max-width: 380px){
        .traders-grid{ grid-template-columns: 1fr 1fr !important; gap: 28px 12px !important; }
      }
    `}</style>
  </section>
);

window.Traders = Traders;


/* ===== Faq.jsx ===== */
/* FAQ — accordion */

const FAQ_ITEMS = [
  { q:"Это курс или сигнальный канал?",
    a:"Ни то, ни другое. TOP TRADE — это закрытое Telegram-сообщество, где трейдеры обмениваются идеями, разбирают сделки и поддерживают друг друга. Сигналы появляются, но это не основной формат." },
  { q:"Как попасть бесплатно?",
    a:"Зарегистрируйся у одного из 4-х брокеров-партнёров по нашему реферальному коду, пополни счёт минимум на $500 — и мы добавим тебя в закрытый чат. Никаких подписок." },
  { q:"Можно ли подключиться без брокера?",
    a:"Да. Купи подписку напрямую: 1 месяц — $120, 3 месяца — $250, год — $850. Оплата через Telegram-поддержку." },
  { q:"Что если у меня уже есть счёт у этих брокеров?",
    a:"Напиши нам — переведём счёт под нашу партнёрку без открытия нового. Условия для тебя не поменяются." },
  { q:"Какой минимальный депозит?",
    a:"$500 — это минимум для бесплатного доступа через брокера. Меньшая сумма не покрывает партнёрские условия." },
  { q:"Как связаться с поддержкой?",
    a:"Только Telegram: @toptrade_support. Отвечаем 24/7, обычно в течение нескольких минут." },
];

const FaqItem = ({ q, a, open, onToggle }) => (
  <div
    onClick={onToggle}
    style={{
      background:"var(--tt-surface-1)",
      border:"1px solid " + (open ? "rgba(91,182,87,0.35)" : "var(--tt-border)"),
      borderRadius:14,
      padding:"20px 22px",
      cursor:"pointer",
      transition:"border-color .2s var(--tt-ease), background .2s var(--tt-ease)",
    }}
  >
    <div style={{ display:"flex", alignItems:"center", gap:14 }}>
      <div style={{
        fontSize:15, fontWeight:700, color:"var(--tt-text)", lineHeight:1.4, flex:1,
      }}>{q}</div>
      <div style={{
        width:32, height:32, borderRadius:10,
        background: open ? "var(--tt-gradient)" : "var(--tt-surface-3)",
        display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0,
        color: open ? "#fff" : "var(--tt-text-muted)",
        transform: open ? "rotate(45deg)" : "rotate(0deg)",
        transition: "all .2s var(--tt-ease)",
      }}>
        <Icon name="plus" size={16}/>
      </div>
    </div>
    <div style={{
      maxHeight: open ? 200 : 0,
      overflow:"hidden",
      transition:"max-height .3s var(--tt-ease), margin .3s var(--tt-ease)",
      marginTop: open ? 14 : 0,
    }}>
      <div style={{
        fontSize:14, color:"var(--tt-text-muted)", lineHeight:1.6, fontWeight:500,
      }}>{a}</div>
    </div>
  </div>
);

const Faq = () => {
  const [openIdx, setOpenIdx] = React.useState(-1);

  return (
    <section id="faq" className="tt-section">
      <div className="tt-container" style={{ maxWidth:880 }}>
        <div className="tt-section-head" style={{ marginBottom:36 }}>
          <div className="tt-eyebrow">Частые вопросы</div>
          <h2 className="tt-h2">Коротко о&nbsp;<span className="tt-grad">главном</span></h2>
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
          {FAQ_ITEMS.map((item, i) => (
            <FaqItem
              key={item.q} {...item}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

window.Faq = Faq;


/* ===== Footer.jsx ===== */
/* Footer — final CTA + brand + links */

const footerStyles = {
  cta: {
    margin:"0 auto",
    maxWidth:980,
    background:
      "radial-gradient(circle at 20% 10%, rgba(90,182,87,0.18), transparent 60%)," +
      "radial-gradient(circle at 80% 80%, rgba(43,142,196,0.18), transparent 60%)," +
      "var(--tt-surface-1)",
    border:"1px solid rgba(91,182,87,0.3)",
    borderRadius:24,
    padding:"clamp(36px, 6vw, 56px) clamp(20px, 5vw, 48px)",
    textAlign:"center",
    position:"relative",
    overflow:"hidden",
    marginBottom:96,
    boxShadow:"var(--tt-shadow-card)",
  },
  title: {
    fontSize:"clamp(26px, 4vw, 42px)",
    fontWeight:900, lineHeight:1.05, letterSpacing:"-0.02em",
    marginBottom:16,
    color:"var(--tt-text)",
  },
  sub: {
    fontSize:"clamp(14px, 1.4vw, 17px)",
    color:"var(--tt-text-muted)", marginBottom:28, lineHeight:1.55, fontWeight:500,
    maxWidth:560, marginLeft:"auto", marginRight:"auto",
  },
  ctaRow: {
    display:"flex",
    flexWrap:"wrap",
    gap:12,
    justifyContent:"center",
    alignItems:"center",
  },
  cols: {
    display:"grid",
    gridTemplateColumns:"1.6fr 1fr 1fr",
    gap:48,
    paddingTop:48,
    borderTop:"1px solid var(--tt-border)",
  },
  brand: { display:"flex", alignItems:"center", gap:14, marginBottom:18 },
  brandLogo: { width:56, height:56, padding:0 },
  brandName: { fontSize:22, fontWeight:900, letterSpacing:"0.05em", color:"var(--tt-text)", lineHeight:1 },
  brandSub:  { fontSize:10, color:"var(--tt-text-muted)", letterSpacing:"0.18em", textTransform:"uppercase", marginTop:6, fontWeight:700 },
  about: { fontSize:13, color:"var(--tt-text-muted)", lineHeight:1.6, fontWeight:500, maxWidth:340 },
  colTitle: { fontSize:11, fontWeight:700, color:"var(--tt-text-muted)", letterSpacing:"0.15em", textTransform:"uppercase", marginBottom:18 },
  link: { display:"flex", alignItems:"center", gap:8, fontSize:14, color:"var(--tt-text)", marginBottom:12, fontWeight:600, transition:"color .15s" },
  bottom: {
    marginTop:48,
    paddingTop:24,
    borderTop:"1px solid var(--tt-border)",
    display:"flex", alignItems:"center", justifyContent:"space-between",
    fontSize:12, color:"var(--tt-text-dim)", fontWeight:500,
    flexWrap:"wrap", gap:14,
  },
  risk: {
    background:"rgba(229,166,70,0.08)",
    border:"1px solid rgba(229,166,70,0.25)",
    borderRadius:12,
    padding:"14px 18px",
    fontSize:12, color:"#A87420", fontWeight:500, lineHeight:1.5,
    display:"flex", alignItems:"flex-start", gap:10,
    marginTop:32,
  },
};

const Footer = () => (
  <React.Fragment>
    <section className="tt-section tt-section--tight">
      <div className="tt-container">
        <div style={footerStyles.cta}>
          <h2 style={footerStyles.title}>
            Готов начать?<br/>
            <span className="tt-grad">Напиши в Telegram.</span>
          </h2>
          <p style={footerStyles.sub}>
            Команда подскажет лучший вариант под твою ситуацию.
            Ответим в течение нескольких минут.
          </p>
          <div style={footerStyles.ctaRow}>
            <a
              href="https://t.me/toptrade_support"
              target="_blank" rel="noreferrer"
              className="tt-btn tt-btn--primary tt-btn--lg"
            >
              <span className="tt-tg-bubble"><Icon name="telegram"/></span>
              Написать в поддержку
            </a>
            <a
              href="https://t.me/toptradeotziv"
              target="_blank" rel="noreferrer"
              className="tt-btn tt-btn--secondary tt-btn--lg"
            >
              <Icon name="users" size={16}/>
              Что говорят участники
            </a>
          </div>
          <div style={{ marginTop:18, fontSize:12, color:"var(--tt-text-muted)", letterSpacing:"0.05em" }}>
            @toptrade_support · @toptradeotziv
          </div>
        </div>
      </div>
    </section>

    <footer className="tt-footer">
      <div className="tt-container">
        <div style={footerStyles.cols} className="footer-cols">
          <div>
            <div style={footerStyles.brand}>
              <div style={footerStyles.brandLogo}><img src="./assets/logo-mark.png" alt="" style={{ width:"100%", height:"100%", objectFit:"contain" }}/></div>
              <div>
                <div style={footerStyles.brandName}>
                  <span style={{ color:"#5AB657" }}>T</span>OP <span style={{ color:"#2473B6" }}>T</span>RADE
                </div>
                <div style={footerStyles.brandSub}>Trading · Analytics · Education</div>
              </div>
            </div>
            <p style={footerStyles.about}>
              Закрытое сообщество трейдеров с поддержкой 24/7, разборами сделок
              и проверенными брокерами-партнёрами.
            </p>
            <div style={footerStyles.risk}>
              <Icon name="shield" size={16} style={{ marginTop:2, flexShrink:0 }}/>
              <span>Торговля на финансовых рынках связана с риском. Не является инвестиционной рекомендацией.</span>
            </div>
          </div>

          <div>
            <div style={footerStyles.colTitle}>Разделы</div>
            <a href="#start"    style={footerStyles.link}>3 шага</a>
            <a href="#brokers"  style={footerStyles.link}>Брокеры</a>
            <a href="#plans"    style={footerStyles.link}>Тарифы</a>
            <a href="#benefits" style={footerStyles.link}>Что внутри</a>
            <a href="#traders"  style={footerStyles.link}>Трейдеры</a>
            <a href="#faq"      style={footerStyles.link}>FAQ</a>
          </div>

          <div>
            <div style={footerStyles.colTitle}>Связь</div>
            <a href="https://t.me/toptrade_support" target="_blank" rel="noreferrer" style={footerStyles.link}>
              <Icon name="telegram" size={14}/> @toptrade_support
            </a>
            <a href="https://t.me/toptradeotziv" target="_blank" rel="noreferrer" style={footerStyles.link}>
              <Icon name="users" size={14}/> Отзывы участников
            </a>
          </div>
        </div>

        <div style={footerStyles.bottom}>
          <div>© 2026 TOP TRADE. Все права защищены.</div>
          <div>Сделано с дисциплиной</div>
        </div>
      </div>
    </footer>

    <style>{`
      @media (max-width: 760px){
        .footer-cols{
          grid-template-columns: 1fr !important;
          gap: 32px !important;
        }
      }
      @media (max-width: 480px){
        .tt-btn.tt-btn--lg{
          width: 100%;
          padding: 14px 16px !important;
          font-size: 12px !important;
          letter-spacing: 0.04em !important;
        }
      }
    `}</style>
  </React.Fragment>
);

window.Footer = Footer;



const App = () => (
  <React.Fragment>
    <Header />
    <TickerTape />
    <main>
      <Hero />
      <ThreeSteps />
      <Brokers />
      <Projects />
      <Benefits />
      <Plans />
      <Traders />
      <Faq />
    </main>
    <Footer />
  </React.Fragment>
);
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
document.documentElement.classList.add("tt-ready");