/* sections.jsx — all page sections for АНАШ landing */

const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Hooks ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.18 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---------- Nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [drawer, setDrawer] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = drawer ? 'hidden' : '';
  }, [drawer]);
  const close = () => setDrawer(false);
  const links = [
    { href: '#manifest',  label: 'Манифест' },
    { href: '#residents', label: 'Резиденты' },
    { href: '#calendar',  label: 'Календарь' },
    { href: '#archive',   label: 'Архив' },
    { href: '#patron',    label: 'Патронат' },
  ];
  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#top" className="nav__brand" onClick={close}>
          <img src="assets/logo-anash.png" alt="АНАШ" />
          <span className="wordmark">АНАШ</span>
        </a>
        <div className="nav__links">
          {links.map(l => (
            <a key={l.href} href={l.href} className="uline">{l.label}</a>
          ))}
        </div>
        <a href="#join" className="nav__cta">Подать заявку</a>
        <button className={`nav__burger ${drawer?'open':''}`} aria-label="Меню" onClick={()=>setDrawer(d=>!d)}>
          <span/><span/><span/>
        </button>
      </nav>
      <div className={`nav__drawer ${drawer?'open':''}`}>
        {links.map(l => (
          <a key={l.href} href={l.href} onClick={close}>{l.label}</a>
        ))}
        <a href="#join" onClick={close}><em>Подать заявку →</em></a>
        <div className="ftn">При патронате · Дэрех Эрец</div>
      </div>
    </React.Fragment>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <header className="hero vignette" id="top" data-screen-label="01 Hero">
      <div className="hero__bg" />
      <div className="hero__grid" />
      <div className="hero__star" />
      <div className="container hero__inner">
        <div className="hero__meta">
          <div className="hero__location">
            <span className="lat">32.0853° N · 34.7818° E</span>
            <span className="city">Тель-Авив · Герцлия · Иерусалим</span>
          </div>
          <div className="hero__patron">
            <div className="lbl">При патронате</div>
            <div className="nm">Дэрех Эрец</div>
          </div>
        </div>

        <h1 className="display">
          <span className="line"><span>Закрытый круг</span></span>
          <span className="line"><span>тех, кто выбрал</span></span>
          <span className="line"><span><em>Израиль</em> точкой опоры.</span></span>
        </h1>

        <div className="hero__bottom">
          <p className="hero__sub">
            АНАШ — частный бизнес‑клуб для предпринимателей и&nbsp;инвесторов, объединённых русским языком, еврейской культурой и&nbsp;ставкой <em>на&nbsp;Землю Обетованную</em>.
          </p>
          <div className="hero__stat">
            <div className="num">187</div>
            <div className="lbl">Резидентов · 14 стран</div>
          </div>
          <div className="hero__cta">
            <HeroCTA />
          </div>
        </div>
      </div>

      <div className="scroll-hint">
        <span>SCROLL</span>
        <div className="bar" />
      </div>
    </header>
  );
}

function HeroCTA(){
  const ref = useMagnetic(14);
  return (
    <a href="#join" className="btn btn-primary" ref={ref} style={{ transition:'transform .4s cubic-bezier(.2,.7,.2,1), color .5s, border-color .5s'}}>
      <span>Подать заявку</span>
      <span className="arrow" />
    </a>
  );
}

/* ---------- Marquee ---------- */
function Marquee() {
  const words = [
    'Networking', 'Капитал', 'Алия 2.0', 'Резиденции', 'Менторство',
    'Hi‑Tech', 'Недвижимость', 'Filantropia', 'Tikkun Olam', 'Закрытые ужины'
  ];
  const line = [...words, ...words, ...words];
  const [paused, setPaused] = useState(false);
  return (
    <div className="marquee" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
      <div className="marquee__track" style={{ animationPlayState: paused?'paused':'running' }}>
        {line.map((w, i) => <span key={i}>{w}</span>)}
      </div>
    </div>
  );
}

/* ---------- Manifesto ---------- */
function Manifesto() {
  const r = useReveal();
  return (
    <section className="section manifesto" id="manifest" data-screen-label="02 Manifesto">
      <div className="container">
        <div className="manifesto__head reveal" ref={r}>
          <span className="eyebrow">§ 01 — Манифест</span>
          <p className="manifesto__body">
            Мы строим <em>среду доверия</em>, где деловые встречи начинаются с&nbsp;разговора о&nbsp;книге, а заканчиваются совместными проектами от&nbsp;Хайфы до&nbsp;Эйлата.
          </p>
        </div>
        <div className="manifesto__cols">
          <div className="manifesto__col">
            <h4>Принцип круга</h4>
            <p>Каждый резидент входит по&nbsp;рекомендации двух действующих членов. Никакой публичности — только закрытые встречи и&nbsp;закрытые сделки.</p>
          </div>
          <div className="manifesto__col">
            <h4>Принцип земли</h4>
            <p>Все активности проходят на&nbsp;территории Израиля: от&nbsp;виноделен Голанских высот до&nbsp;террас Старого Яффо.</p>
          </div>
          <div className="manifesto__col">
            <h4>Принцип взноса</h4>
            <p>10% годовых взносов направляются на&nbsp;проекты «Дэрех Эрец»: образование, репатриация, поддержка ЦАХАЛ‑резервистов.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Pillars ---------- */
function Pillars() {
  const r = useReveal();
  const items = [
    { end: 187, prefix:'',  suffix:'',  lbl: 'Действующих резидентов' },
    { end: 42,  prefix:'',  suffix:'',  lbl: 'Закрытых события в год' },
    { end: 14,  prefix:'',  suffix:'',  lbl: 'Стран репрезентации' },
    { end: 36,  prefix:'₪', suffix:'М', lbl: 'Совместных инвестиций · 2025' },
  ];
  return (
    <div className="container">
      <div className="pillars reveal reveal-stagger" ref={r}>
        {items.map((it, i) => (
          <div key={i}>
            <div className="num"><CountUp end={it.end} prefix={it.prefix} suffix={it.suffix} /></div>
            <div className="lbl">{it.lbl}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Members ---------- */
const MEMBERS = [
  { id: '001', name: 'Михаэль Барух', role: 'Tech founder · Tel‑Aviv', hue: 220, span: 'm-5' },
  { id: '002', name: 'Анна Гольдберг', role: 'VC partner · Herzliya', hue: 230, span: 'm-4' },
  { id: '003', name: 'Давид Каплан', role: 'Real estate · Jerusalem', hue: 215, span: 'm-3' },
  { id: '004', name: 'Лея Шапиро', role: 'Винодельня · Galilee', hue: 205, span: 'm-3' },
  { id: '005', name: 'Игорь Лернер', role: 'Cyber · Be’er Sheva', hue: 240, span: 'm-4' },
  { id: '006', name: 'Эстер Ройтман', role: 'Art collector · Caesarea', hue: 200, span: 'm-5' },
];

function MemberCard({ m }) {
  return (
    <Tilt className={`member ${m.span}`} max={5}>
      <div className="member__index">№ {m.id}</div>
      <div className="member__hover">Открыть профиль →</div>
      <div className="member__portrait">
        <div className="member__placeholder" />
        <div className="member__silhouette" style={{
          filter: `hue-rotate(${m.hue - 220}deg)`
        }} />
        <div className="member__caption">
          <span className="name">{m.name}</span>
          <span className="role">{m.role}</span>
        </div>
      </div>
    </Tilt>
  );
}

function Members() {
  const r = useReveal();
  return (
    <section className="section" id="residents" data-screen-label="03 Residents">
      <div className="container">
        <div className="members__head reveal" ref={r}>
          <div>
            <span className="eyebrow">§ 02 — Резиденты</span>
            <h2 className="display" style={{ marginTop: 18 }}>
              Лица, <em>а не</em><br/>профайлы.
            </h2>
          </div>
          <p className="lead">
            Резиденты АНАШ — основатели технологических компаний, инвесторы, виноделы, коллекционеры. Список закрыт, но каждый месяц мы рассказываем об&nbsp;одной истории — на&nbsp;закрытом ужине, не&nbsp;в&nbsp;интернете.
          </p>
        </div>
        <div className="members__grid">
          {MEMBERS.map(m => <MemberCard key={m.id} m={m} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Activities ---------- */
const ACTIVITIES = [
  { mon: 'ИЮН', day: '14', title: 'Шаббат-ужин в&nbsp;Старом Яффо', desc: 'Закрытый ужин на 18 персон в&nbsp;частной резиденции с&nbsp;видом на&nbsp;порт. Шеф Йоси Шитрит, разговор о&nbsp;будущем Hi‑Tech‑индустрии.', loc: 'Тель‑Авив‑Яффо' },
  { mon: 'ИЮЛ', day: '02', title: 'Винный салон · Голанские высоты', desc: 'Три винодельни, три поколения, дегустация резервных коллекций и&nbsp;разговор с&nbsp;Авирамом Кацем о&nbsp;терруаре севера.', loc: 'Кацрин' },
  { mon: 'ИЮЛ', day: '18', title: 'Утро в&nbsp;кнессете · разговор с&nbsp;министром', desc: 'Закрытая встреча в&nbsp;Иерусалиме: экономическая политика, инвестиционные коридоры, прямой диалог.', loc: 'Иерусалим' },
  { mon: 'АВГ', day: '07', title: 'Регата · Хайфский залив', desc: 'Три яхты, два дня. Команды формируются жеребьёвкой — лучший способ узнать партнёра по&nbsp;сделке.', loc: 'Хайфа' },
  { mon: 'СЕН', day: '21', title: 'Архив Бен‑Гуриона · приватный тур', desc: 'Сде‑Бокер. Хранитель архива читает неопубликованные письма Первого премьера о&nbsp;предпринимательстве в&nbsp;пустыне.', loc: 'Негев' },
];

function Activities() {
  const r = useReveal();
  return (
    <section className="section" id="calendar" data-screen-label="04 Calendar">
      <div className="container">
        <div className="activities__head reveal" ref={r}>
          <div>
            <span className="eyebrow">§ 03 — Календарь</span>
            <h2 className="display" style={{ marginTop: 18 }}>
              Сорок два <em>повода</em><br/>в&nbsp;году.
            </h2>
          </div>
          <p className="lead">
            Ужины, регаты, винные салоны, частные туры по&nbsp;коллекциям и&nbsp;закрытым архивам. Никаких конференц‑залов и&nbsp;презентаций — только формат, в&nbsp;котором рождаются партнёрства.
          </p>
        </div>
        <div className="reveal" ref={useReveal()}>
          {ACTIVITIES.map((a, i) => (
            <div className="activity" key={i}>
              <div className="activity__date">
                {a.mon}<span className="d">{a.day}</span>
              </div>
              <h3 className="activity__title" dangerouslySetInnerHTML={{__html: a.title}} />
              <p className="activity__desc" dangerouslySetInnerHTML={{__html: a.desc}} />
              <span className="activity__loc">{a.loc}</span>
              <span className="activity__cta">RSVP<span className="arr" /></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Patron ---------- */
function Patron() {
  const r = useReveal();
  return (
    <section className="patron" id="patron" data-screen-label="05 Patron">
      <div className="container patron__inner reveal" ref={r}>
        <div className="patron__seal">
          <svg viewBox="0 0 400 400">
            <defs>
              <path id="circ" d="M200,200 m-170,0 a170,170 0 1,1 340,0 a170,170 0 1,1 -340,0" />
            </defs>
            <text fontFamily="JetBrains Mono" fontSize="14" letterSpacing="6" fill="rgba(237,230,214,0.45)">
              <textPath xlinkHref="#circ">  ПОД ПАТРОНАТОМ · ДЭРЕХ ЭРЕЦ · ПУТЬ ЗЕМЛИ · DEREKH ERETZ · המועדון של ארץ ישראל · </textPath>
            </text>
            <circle cx="200" cy="200" r="170" fill="none" stroke="rgba(237,230,214,0.14)" />
            <circle cx="200" cy="200" r="150" fill="none" stroke="rgba(237,230,214,0.08)" />
          </svg>
          <div className="mark">
            <div className="star" />
            <div className="yr">est. 2019</div>
          </div>
        </div>
        <div className="patron__body">
          <span className="eyebrow">§ 05 — Патронат</span>
          <h3 className="display" style={{ marginTop: 14 }}>
            «Дэрех&nbsp;Эрец» — <em>путь земли</em>.
          </h3>
          <p className="lead" style={{ marginTop: 24 }}>
            Общественная инициатива «Дэрех Эрец» поддерживает АНАШ с&nbsp;момента основания. Это не&nbsp;спонсорство — это общая этика: дело должно служить земле, на&nbsp;которой оно ведётся.
          </p>
          <div className="quote">
            Деньги без культуры — пыль на&nbsp;дороге. Культура без дела — пыль в&nbsp;книге. Мы&nbsp;собираем людей, у&nbsp;которых есть и&nbsp;то&nbsp;и&nbsp;другое.
          </div>
          <div className="sig">— Совет старейшин клуба</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Join / Form ---------- */
const INTERESTS = ['Hi‑Tech', 'Real Estate', 'Венчур', 'Виноделие', 'Искусство', 'Филантропия', 'Гостеприимство', 'Промышленность'];
const TICKETS = ['до $1М', '$1–5М', '$5–25М', '$25М+'];

function ApplicationForm() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    name: '', last: '',
    email: '', phone: '',
    city: '', company: '',
    sector: '',
    interests: [],
    ticket: '',
    referrer: '',
    why: '',
  });
  const [sent, setSent] = useState(false);
  const steps = [
    { n: '01', t: 'Личные данные' },
    { n: '02', t: 'Дело и&nbsp;капитал' },
    { n: '03', t: 'Рекомендация' },
  ];

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData(d => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x=>x!==v) : [...d[k], v] }));

  const canNext = () => {
    if (step === 0) return data.name && data.last && data.email && data.phone;
    if (step === 1) return data.company && data.sector && data.ticket;
    if (step === 2) return data.referrer && data.why.length > 20;
    return false;
  };

  if (sent) {
    return (
      <div className="form">
        <div className="submitted">
          <div className="seal">✦</div>
          <h3 className="display">Заявка принята</h3>
          <p className="lead" style={{margin:'18px auto 0'}}>
            Совет резидентов рассмотрит её в&nbsp;течение 14&nbsp;дней. Мы&nbsp;напишем на&nbsp;{data.email} — независимо от&nbsp;решения.
          </p>
          <div style={{marginTop: 32, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.22em', color:'var(--champagne)'}}>
            ID · ANSH‑{Math.floor(Math.random()*9000+1000)}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="form">
      <div className="form__progress">
        {steps.map((s,i) => (
          <div key={i} className={`step ${i<step?'done':''} ${i===step?'active':''}`} />
        ))}
      </div>
      <div className="form__stepmeta">
        <div>
          <div className="form__step-n">Шаг {steps[step].n}</div>
          <h3 className="form__step-title" dangerouslySetInnerHTML={{__html: steps[step].t}} />
        </div>
        <div className="form__step-of">{step+1} / {steps.length}</div>
      </div>

      {step === 0 && (
        <div>
          <div className="field-row">
            <div className="field">
              <label>Имя</label>
              <input value={data.name} onChange={e=>update('name', e.target.value)} placeholder="Михаэль" />
            </div>
            <div className="field">
              <label>Фамилия</label>
              <input value={data.last} onChange={e=>update('last', e.target.value)} placeholder="Барух" />
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>Email</label>
              <input type="email" value={data.email} onChange={e=>update('email', e.target.value)} placeholder="you@domain.com" />
            </div>
            <div className="field">
              <label>Телефон</label>
              <input value={data.phone} onChange={e=>update('phone', e.target.value)} placeholder="+972 50 000 0000" />
            </div>
          </div>
          <div className="field">
            <label>Город резиденции</label>
            <input value={data.city} onChange={e=>update('city', e.target.value)} placeholder="Тель‑Авив" />
          </div>
        </div>
      )}

      {step === 1 && (
        <div>
          <div className="field-row">
            <div className="field">
              <label>Компания</label>
              <input value={data.company} onChange={e=>update('company', e.target.value)} placeholder="Название" />
            </div>
            <div className="field">
              <label>Роль</label>
              <input value={data.sector} onChange={e=>update('sector', e.target.value)} placeholder="Founder · Partner · CEO" />
            </div>
          </div>
          <div className="field">
            <label>Сфера интересов · можно несколько</label>
            <div className="chips">
              {INTERESTS.map(i => (
                <span key={i} className={`chip ${data.interests.includes(i)?'on':''}`} onClick={()=>toggle('interests', i)}>{i}</span>
              ))}
            </div>
          </div>
          <div className="field" style={{marginTop: 28}}>
            <label>Инвестиционный объём — за&nbsp;последние 24&nbsp;месяца</label>
            <div className="chips">
              {TICKETS.map(t => (
                <span key={t} className={`chip ${data.ticket===t?'on':''}`} onClick={()=>update('ticket', t)}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      )}

      {step === 2 && (
        <div>
          <div className="field">
            <label>Имя резидента‑рекомендателя</label>
            <input value={data.referrer} onChange={e=>update('referrer', e.target.value)} placeholder="Двое действующих резидентов" />
          </div>
          <div className="field">
            <label>Зачем вам АНАШ — в&nbsp;двух абзацах</label>
            <textarea value={data.why} onChange={e=>update('why', e.target.value)} placeholder="Расскажите о&nbsp;связи с&nbsp;Израилем, о&nbsp;круге, который вы&nbsp;ищете, и&nbsp;о&nbsp;том, что готовы привнести." />
            <div style={{marginTop:8, fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.2em', color:'var(--ink-faint)', textTransform:'uppercase'}}>
              {data.why.length} символов · минимум 20
            </div>
          </div>
        </div>
      )}

      <div className="form__nav">
        <button className="form__back" disabled={step===0} onClick={()=>setStep(s=>Math.max(0,s-1))}>
          ← Назад
        </button>
        {step < steps.length-1 ? (
          <button
            className="btn btn-primary"
            onClick={()=>canNext() && setStep(s=>s+1)}
            style={{ opacity: canNext()?1:.45, cursor: canNext()?'pointer':'not-allowed' }}
          >
            <span>Далее</span><span className="arrow" />
          </button>
        ) : (
          <button
            className="btn btn-primary"
            onClick={()=>canNext() && setSent(true)}
            style={{ opacity: canNext()?1:.45, cursor: canNext()?'pointer':'not-allowed' }}
          >
            <span>Отправить заявку</span><span className="arrow" />
          </button>
        )}
      </div>
    </div>
  );
}

function Join() {
  const r = useReveal();
  return (
    <section className="join" id="join" data-screen-label="06 Join">
      <div className="container">
        <div className="join__inner reveal" ref={r}>
          <div className="join__lead">
            <span className="eyebrow">§ 06 — Вступление</span>
            <h2 className="display" style={{marginTop: 18}}>
              Вступление <em>по&nbsp;двум</em><br/>рекомендациям.
            </h2>
            <p className="lead" style={{marginTop: 28}}>
              Совет рассматривает заявку 14&nbsp;дней. Решение — единогласное. Годовой взнос — закрытая информация для финалистов отбора.
            </p>
            <ul className="join__criteria">
              <li><span className="n">01</span><span className="t">Резидентство либо устойчивая связь с&nbsp;Израилем</span></li>
              <li><span className="n">02</span><span className="t">Деловая репутация без публичных конфликтов</span></li>
              <li><span className="n">03</span><span className="t">Готовность к&nbsp;закрытому, не‑публичному формату</span></li>
              <li><span className="n">04</span><span className="t">Согласие с&nbsp;этическим кодексом «Дэрех Эрец»</span></li>
            </ul>
            <div className="ftnote">Все данные обрабатываются конфиденциально</div>
          </div>
          <div>
            <ApplicationForm />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer" data-screen-label="07 Footer">
      <div className="container">
        <div className="foot">
          <div className="foot__brand">
            <img src="assets/logo-anash.png" alt="АНАШ" />
            <div className="nm">АНАШ</div>
            <p>Частный бизнес‑клуб для тех, кто&nbsp;связал свою&nbsp;жизнь и&nbsp;дело с&nbsp;Израилем. При патронате общественной&nbsp;инициативы «Дэрех Эрец».</p>
          </div>
          <div className="foot__col">
            <h5>Клуб</h5>
            <a href="#manifest">Манифест</a>
            <a href="#residents">Резиденты</a>
            <a href="#calendar">Календарь</a>
            <a href="#patron">Патронат</a>
          </div>
          <div className="foot__col">
            <h5>Контакты</h5>
            <a href="mailto:secretariat@anash.club">secretariat@anash.club</a>
            <a href="#">+972 3 000 0000</a>
            <a href="#">Ротшильд 33, Тель‑Авив</a>
          </div>
          <div className="foot__col">
            <h5>Связь</h5>
            <a href="#">Telegram · резиденты</a>
            <a href="#">Пресс‑служба</a>
            <a href="#">Партнёрство</a>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2019 — 2026 · ANASH CLUB</span>
          <span>Tel Aviv · Jerusalem · Herzliya · Haifa</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Manifesto, Pillars, Members, Activities, Patron, Join, Footer });