/* =====================================================================
   Future Consulting — Tematikus landing renderer (Fusion vertikumok)
   ---------------------------------------------------------------------
   Bemenet: window.FCS_LANDING (scripts/landing/<id>.js) — id, demoUrl,
   contactEmail, és nyelvenként (hu/en) meta + nav + sticky + sections[].
   Szekció-típusok: hero · pains · flow · video · rows · compare · faq ·
   about · references · demo · contact. A sorrend és a készlet a tartalom-fájlban dől el, a
   renderer nem tartalmaz vertikum-specifikus szöveget.
   Közös elemek a shell.jsx-ből: I18nProvider, useI18n, LogoLockup,
   LanguageToggle, Footer, CookieBanner, ikonok, fcsAdsConversion.
   ===================================================================== */

const { useState: lUseState, useEffect: lUseEffect, useRef: lUseRef } = React;
const LD = window.FCS_LANDING;

/* ---------- Segédek ---------- */
function ldHref(href) {
  return href === 'demo' ? '#demo' : href; // a demó-kártyához görget; a belépést e-mailben küldjük
}
function LdLink({ href, className, children, event }) {
  return <a href={ldHref(href)} className={className} data-fcs-event={event || (href === 'demo' ? 'demo_jump' : undefined)}>{children}</a>;
}
const Play = (p) => <Icon {...p}><path d="M8 5v14l11-7z" fill="currentColor" stroke="none"/></Icon>;

/* ---------- Nav (minimál) ---------- */
function LandingNav({ L }) {
  const [scrolled, setScrolled] = lUseState(false);
  lUseEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = L.nav.links || [];
  return (
    <header className={'ld-nav ' + (scrolled ? 'scrolled' : '')}>
      {links.length > 0 && (
        <div className="ld-topbar">
          <div className="container ld-topbar-inner">
            {links.map((l, i) => (
              <a href={l.href} key={i} data-fcs-event={'topbar_' + i}>{l.label} <ArrowUpRight size={12}/></a>
            ))}
          </div>
        </div>
      )}
      <div className="container ld-nav-inner">
        <LogoLockup markSize={26}/>
        <div className="ld-nav-right">
          <LanguageToggle/>
          <LdLink href="demo" className="btn btn-ghost btn-sm" event="nav_demo">{L.nav.demo} <ArrowRight size={14}/></LdLink>
          <a href="#kapcsolat" className="btn btn-primary btn-sm" data-fcs-event="nav_contact">{L.nav.cta} <ArrowRight size={14}/></a>
        </div>
      </div>
    </header>
  );
}

/* ---------- Mobil ragadós CTA ---------- */
function StickyBar({ L }) {
  const [show, setShow] = lUseState(false);
  lUseEffect(() => {
    const onScroll = () => {
      const contact = document.getElementById('kapcsolat');
      const pastHero = window.scrollY > window.innerHeight * 0.7;
      const atContact = contact && contact.getBoundingClientRect().top < window.innerHeight * 0.6;
      setShow(pastHero && !atContact);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={'ld-sticky ' + (show ? 'show' : '')} aria-hidden={!show}>
      <LdLink href="demo" className="btn btn-ghost" event="sticky_demo">{L.sticky.demo} <ArrowRight size={14}/></LdLink>
      <a href="#kapcsolat" className="btn btn-primary" data-fcs-event="sticky_contact">{L.sticky.cta} <ArrowRight size={14}/></a>
    </div>
  );
}

/* ---------- Szekció-fej ---------- */
function Head({ s, left }) {
  return (
    <div className={'ld-head' + (left ? ' left' : '')}>
      {s.eyebrow && <span className="eyebrow">{s.eyebrow}</span>}
      <h2 className="h-2">{s.h2}</h2>
      {s.lead && <p className="lead">{s.lead}</p>}
    </div>
  );
}

/* ---------- 1. Hero ---------- */
function Hero({ s }) {
  const ref = useReveal();
  return (
    <section className="ld-hero">
      <div className="ambient-glow"/>
      <div className="container">
        <div className="ld-hero-grid reveal in" ref={ref}>
          <div>
            <span className="eyebrow">{s.eyebrow}</span>
            <h1>{s.h1[0]}<em>{s.h1[1]}</em>{s.h1[2]}</h1>
            <p className="ld-hero-lead">{s.lead}</p>
            <div className="ld-hero-ctas">
              <LdLink href={s.ctaPrimary.href} className="btn btn-primary btn-lg" event="hero_primary">{s.ctaPrimary.label} <ArrowRight size={16}/></LdLink>
              <LdLink href={s.ctaSecondary.href} className="btn btn-ghost btn-lg" event="hero_secondary">{s.ctaSecondary.label} <ArrowRight size={16}/></LdLink>
            </div>
            {s.note && <p className="ld-hero-note">{s.note}</p>}
            <div className="ld-trust">
              {s.trust.map((tr, i) => <span key={i}><Check size={14}/>{tr}</span>)}
            </div>
          </div>
          <figure className="ld-hero-photo">
            <img src={s.image.src} alt={s.image.alt} width="1800" height="1200" fetchpriority="high"/>
            {s.image.caption && <figcaption className="ld-hero-caption">{s.image.caption}</figcaption>}
          </figure>
        </div>
      </div>
    </section>
  );
}

/* ---------- 2. Fájdalompontok ---------- */
function Pains({ s }) {
  const ref = useReveal();
  return (
    <section className="ld-section alt">
      <div className="container">
        <Head s={s}/>
        <div className="ld-pains reveal-stagger" ref={ref}>
          {s.items.map((it, i) => (
            <article className="ld-pain" key={i}>
              <span className="ld-pain-num">{String(i + 1).padStart(2, '0')}</span>
              <h3>{it.title}</h3>
              <p>{it.text}</p>
              {it.fix && <div className="ld-pain-fix"><Check size={14}/><span>{it.fix}</span></div>}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 3. Folyamat ---------- */
function Flow({ s }) {
  const ref = useReveal();
  return (
    <section className="ld-section">
      <div className="container">
        <Head s={s}/>
        <ol className="ld-flow reveal-stagger" ref={ref} style={{listStyle: 'none', padding: 0, margin: 0}}>
          {s.steps.map(([n, title, text]) => (
            <li className="ld-step" key={n}>
              <span className="ld-step-num">{n}</span>
              <h3>{title}</h3>
              <p>{text}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------- 4. Videó (YouTube click-to-load vagy saját mp4) ---------- */
function VideoPlayer({ s }) {
  const [active, setActive] = lUseState(false);
  if (!s.youtubeId && !s.src) {
    // Helyőrző: a videó még készül — a tartalom-fájlban elég a youtubeId/src + poster megadása később
    return (
      <div className="ld-video ld-video-soon" role="img" aria-label={s.alt}>
        {s.poster && <img src={s.poster} alt="" loading="lazy"/>}
        <div className="ld-video-soon-inner">
          <span className="ld-video-play" aria-hidden="true"><Play size={30}/></span>
          <strong>{s.soonTitle || 'Videó hamarosan'}</strong>
          {s.soonText && <span>{s.soonText}</span>}
        </div>
        {s.badge && <span className="ld-video-badge">{s.badge}</span>}
      </div>
    );
  }
  const vref = lUseRef(null);
  const start = () => {
    setActive(true);
    if (window.fcsTrack) window.fcsTrack('click', 'video_play', { href: s.youtubeId ? ('youtube:' + s.youtubeId) : s.src });
  };
  lUseEffect(() => {
    if (active && vref.current && !s.youtubeId) { vref.current.play().catch(() => {}); }
  }, [active]);
  return (
    <div className="ld-video">
      {!active && (
        <button type="button" className="ld-video-poster" onClick={start} aria-label={s.alt}>
          <img src={s.poster} alt="" loading="lazy"/>
          <span className="ld-video-play" aria-hidden="true"><Play size={30}/></span>
          {s.badge && <span className="ld-video-badge">{s.badge}</span>}
        </button>
      )}
      {active && s.youtubeId && (
        <iframe
          src={'https://www.youtube-nocookie.com/embed/' + s.youtubeId + '?autoplay=1&rel=0&modestbranding=1'}
          title={s.alt}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
        />
      )}
      {active && !s.youtubeId && (
        <video ref={vref} src={s.src} poster={s.poster} controls playsInline preload="metadata" aria-label={s.alt}/>
      )}
    </div>
  );
}
function Video({ s }) {
  const ref = useReveal();
  return (
    <section className={'ld-section' + (s.reverse ? ' alt' : '')}>
      <div className="container">
        <div className={'ld-video-wrap reveal' + (s.reverse ? ' rev' : '')} ref={ref}>
          <VideoPlayer s={s}/>
          <div className="ld-video-side">
            <span className="eyebrow">{s.eyebrow}</span>
            <h2 className="h-2">{s.h2}</h2>
            {s.lead && <p className="lead">{s.lead}</p>}
            {s.bullets && (
              <ul>
                {s.bullets.map((b, i) => <li key={i}><Check size={14}/><span>{b}</span></li>)}
              </ul>
            )}
            {s.cta && <div className="ld-video-cta"><LdLink href={s.cta.href} className="btn btn-primary" event="video_cta">{s.cta.label} <ArrowRight size={14}/></LdLink></div>}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 5. Kép + szöveg sorok ---------- */
function Rows({ s }) {
  return (
    <section className="ld-section">
      <div className="container">
        <Head s={s}/>
        <div className="ld-rows">
          {s.rows.map((r, i) => <Row r={r} key={i}/>)}
        </div>
      </div>
    </section>
  );
}
function Row({ r }) {
  const ref = useReveal();
  return (
    <article className="ld-row reveal" ref={ref}>
      <div className="ld-row-media">
        <img src={r.image.src} alt={r.image.alt} loading="lazy" width="1800" height="1200"/>
      </div>
      <div className="ld-row-body">
        {r.eyebrow && <span className="eyebrow">{r.eyebrow}</span>}
        <h3>{r.title}</h3>
        <p>{r.text}</p>
        {r.bullets && <ul>{r.bullets.map((b, i) => <li key={i}><Check size={14}/><span>{b}</span></li>)}</ul>}
      </div>
    </article>
  );
}

/* ---------- 6. Összehasonlítás ---------- */
function Compare({ s }) {
  const ref = useReveal();
  return (
    <section className="ld-section alt">
      <div className="container" style={{maxWidth: 1040}}>
        <Head s={s}/>
        <div className="reveal" ref={ref}>
          <table className="ld-compare">
            <thead>
              <tr>{s.cols.map((c, i) => <th key={i} scope="col">{c}</th>)}</tr>
            </thead>
            <tbody>
              {s.rows.map((row, i) => (
                <tr key={i}>
                  <td>{row[0]}</td>
                  <td data-label={s.cols[1]}>{row[1]}</td>
                  <td data-label={s.cols[2]}>{row[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ---------- 7. FAQ ---------- */
function Faq({ s }) {
  const [open, setOpen] = lUseState(0);
  return (
    <section className="ld-section">
      <div className="container" style={{maxWidth: 880}}>
        <Head s={s}/>
        <div className="fs-faq">
          {s.items.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div className={'fs-faq-item ' + (isOpen ? 'open' : '')} key={i}>
                <button className="fs-faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} aria-controls={'ld-faq-' + i} id={'ld-faq-q-' + i}>
                  <span>{q}</span>
                  <span className="fs-faq-q-icon"><Plus size={14}/></span>
                </button>
                <div className="fs-faq-a" id={'ld-faq-' + i} role="region" aria-labelledby={'ld-faq-q-' + i}><p>{a}</p></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- 8. Demó (e-mail kapus belépés-kérés → demo-access.php) ---------- */
function Demo({ s }) {
  const ref = useReveal();
  const { lang, t } = useI18n();
  const f = s.form;
  const [email, setEmail] = lUseState('');
  const [consent, setConsent] = lUseState(false);
  const [err, setErr] = lUseState(null);
  const [status, setStatus] = lUseState('idle'); // idle | sending | sent
  const mountedAt = lUseRef(Date.now());

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim()) return setErr(f.errorRequired);
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) return setErr(f.errorInvalid);
    if (!consent) return setErr(f.errorConsent);
    setErr(null); setStatus('sending');
    try {
      const res = await fetch('/demo-access.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: email.trim(), consent, source: LD.id, lang,
          _e: Date.now() - mountedAt.current, // kitöltési idő (botvédelem)
          _gotcha: '',                         // honeypot
        }),
      });
      const json = await res.json().catch(() => ({ ok: false }));
      if (json.ok) {
        setStatus('sent');
        if (window.fcsAdsConversion) window.fcsAdsConversion('demo');
      } else {
        setStatus('idle');
        if (json.error === 'rate_limited') setErr(f.errorRate);
        else if (json.errors && json.errors.email) setErr(f.errorInvalid);
        else if (json.errors && json.errors.consent) setErr(f.errorConsent);
        else setErr(f.errorGeneric);
      }
    } catch (ex) { setStatus('idle'); setErr(f.errorGeneric); }
  };

  return (
    <section className="ld-demo" id="demo">
      <div className="container">
        <div className="ld-demo-card reveal" ref={ref}>
          <div>
            <span className="eyebrow">{s.eyebrow}</span>
            <h2 className="h-2">{s.h2}</h2>
            <p className="lead">{s.lead}</p>
            {s.checklist && (
              <>
                <div className="ld-demo-access-title">{s.checklistTitle}</div>
                <ul className="ld-demo-list">
                  {s.checklist.map((c, i) => <li key={i}><Check size={14}/><span>{c}</span></li>)}
                </ul>
              </>
            )}
          </div>
          <div className="ld-demo-access">
            <div className="ld-demo-access-title">{s.accessTitle}</div>
            {status === 'sent' ? (
              <div className="ld-demo-sent" role="status">
                <div className="form-success-icon"><Check size={28}/></div>
                <h3>{f.successTitle}</h3>
                <p>{f.successDesc}</p>
              </div>
            ) : (
              <form className="ld-demo-form" onSubmit={onSubmit} noValidate data-fcs-form={LD.id + '-demo'}>
                <label className="form-field">
                  <span className="form-label">{f.emailLabel}</span>
                  <input type="email" value={email} onChange={(e) => { setEmail(e.target.value); setErr(null); }}
                    placeholder={f.emailPlaceholder} className={err ? 'form-input has-error' : 'form-input'} required autoComplete="email" maxLength={200}/>
                </label>
                {/* honeypot — valós felhasználó nem látja, bot kitölti */}
                <div className="ld-hp" aria-hidden="true"><label>Website<input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" onChange={() => {}}/></label></div>
                <label className="form-checkbox">
                  <input type="checkbox" checked={consent} onChange={(e) => { setConsent(e.target.checked); setErr(null); }} required/>
                  <span className="form-checkbox-text">{f.consent} <a href={t.form.gdprLink.href} target="_blank" rel="noopener">{t.form.gdprLink.label}</a></span>
                </label>
                {err && <p className="form-error" role="alert">{err}</p>}
                <button type="submit" className="btn btn-primary btn-lg" disabled={status === 'sending'} data-fcs-event="demo_request">
                  {status === 'sending' ? f.sending : f.submit}{status !== 'sending' && <ArrowRight size={16}/>}
                </button>
              </form>
            )}
            {s.note && <p className="ld-demo-access-note">{s.note}</p>}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 8b. Rólunk (cég-bemutató, tények) ---------- */
function About({ s }) {
  const ref = useReveal();
  return (
    <section className="ld-section alt" id="rolunk">
      <div className="container">
        <div className="ld-about reveal" ref={ref}>
          <div>
            <span className="eyebrow">{s.eyebrow}</span>
            <h2 className="h-2">{s.h2}</h2>
            {s.paragraphs.map((p, i) => <p className="ld-about-p" key={i}>{p}</p>)}
            {s.cta && <a href={s.cta.href} className="btn btn-ghost" data-fcs-event="about_cta">{s.cta.label} <ArrowRight size={14}/></a>}
          </div>
          <div className="ld-about-facts">
            {s.facts.map(([n, l], i) => (
              <div className="ld-fact" key={i}><div className="ld-fact-num">{n}</div><div className="ld-fact-label">{l}</div></div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 8c. Partnerek és referenciák (logó-sáv a references-data.js-ből) ---------- */
function References({ s }) {
  const ref = useReveal();
  const refs = (window.FCS_REFERENCES || []).filter((r) => r.logo);
  const track = refs.concat(refs);
  return (
    <section className="ld-section" id="referenciak">
      <div className="container">
        <div className="ld-head reveal" ref={ref}>
          <span className="eyebrow">{s.eyebrow}</span>
          <h2 className="h-2">{s.h2}</h2>
          {s.lead && <p className="lead">{s.lead}</p>}
        </div>
        {s.sectors && <div className="ref-sectors">{s.sectors.map((x, i) => <span key={i}>{x}</span>)}</div>}
      </div>
      {refs.length > 0 && (
        <div className="ref-marquee" aria-hidden="true">
          <div className="ref-marquee-track">
            {track.map((r, i) => (
              <div className={'ref-tile' + (r.dark ? ' light' : '')} key={r.id + i} title={r.full}>
                <img src={r.logo} alt="" loading="lazy"/>
              </div>
            ))}
          </div>
        </div>
      )}
      <div className="container">
        <div className="ld-refs-foot">
          {s.cta && <a href={s.cta.href} className="btn btn-ghost" data-fcs-event="references_cta">{s.cta.label} <ArrowUpRight size={14}/></a>}
          {s.note && <p className="ref-note" style={{margin: 0, textAlign: 'left'}}>{s.note}</p>}
        </div>
      </div>
    </section>
  );
}

/* ---------- 8d. Más szakmáknak is (közös nyilvántartásból: landing/registry.js) ---------- */
function Verticals({ s }) {
  const ref = useReveal();
  const { lang } = useI18n();
  const all = window.FCS_LANDINGS || [];
  return (
    <section className="ld-section alt" id="szakmak">
      <div className="container">
        <div className="ld-head">
          <span className="eyebrow">{s.eyebrow}</span>
          <h2 className="h-2">{s.h2}</h2>
          {s.lead && <p className="lead">{s.lead}</p>}
        </div>
        <div className="ld-verticals reveal-stagger" ref={ref}>
          {all.map((v) => {
            const L = v[lang] || v.hu; const current = v.id === LD.id;
            return (
              <a href={current ? '#top' : v.href} className={'ld-vertical' + (current ? ' current' : '')} key={v.id} aria-current={current ? 'page' : undefined}>
                <div className="ld-vertical-img"><img src={v.image} alt="" loading="lazy"/></div>
                <div className="ld-vertical-body">
                  <strong>{L.label}</strong>
                  <span>{L.desc}</span>
                  <em>{current ? s.currentLabel : s.openLabel} {!current && <ArrowRight size={12}/>}</em>
                </div>
              </a>
            );
          })}
        </div>
        {s.more && (
          <p className="ld-verticals-more">
            {s.more.text} <a href={s.more.href}>{s.more.label} <ArrowUpRight size={12}/></a>
          </p>
        )}
      </div>
    </section>
  );
}

/* ---------- 9. Kapcsolat (űrlap → send.php, source-szal) ---------- */
function Contact({ s }) {
  const { t } = useI18n();
  const f = t.form; // közös űrlap-szövegek (GDPR, hibák, küldés) az i18n.js-ből
  const [form, setForm] = lUseState({ name: '', email: '', company: '', phone: '', message: '', gdpr: false });
  const [errors, setErrors] = lUseState({});
  const [status, setStatus] = lUseState('idle');

  const onChange = (key) => (e) => {
    const val = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((st) => ({ ...st, [key]: val }));
    if (errors[key]) setErrors((er) => ({ ...er, [key]: null }));
  };
  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = f.required;
    if (!form.email.trim()) er.email = f.required;
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = f.invalidEmail;
    if (!form.message.trim()) er.message = f.required;
    if (!form.gdpr) er.gdpr = f.required;
    setErrors(er);
    return Object.keys(er).length === 0;
  };
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setStatus('sending');
    try {
      const res = await fetch('/send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name, email: form.email, company: form.company, phone: form.phone,
          message: form.message, gdpr: form.gdpr,
          source: LD.id,   // szerver-oldalon dönti el a címzettet (hello@)
          _gotcha: '',     // honeypot
        }),
      });
      const json = await res.json().catch(() => ({ ok: false, error: 'parse_error' }));
      if (json.ok) {
        setStatus('sent');
        if (window.fcsAdsConversion) window.fcsAdsConversion('contact');
      } else if (json.errors) { setErrors(json.errors); setStatus('idle'); }
      else setStatus('error');
    } catch (err) { setStatus('error'); }
  };

  const fl = s.fields;
  return (
    <section className="ld-contact" id="kapcsolat">
      <div className="container">
        <div className="ld-contact-grid">
          <div className="ld-contact-side">
            <span className="eyebrow">{s.eyebrow}</span>
            <h2 className="h-2">{s.h2}</h2>
            <p className="lead">{s.lead}</p>
            <div className="ld-contact-meta">
              {s.meta.map(([k, v], i) => <div className="row" key={i}><span>{k}</span><span>{v}</span></div>)}
            </div>
            <p className="ld-contact-email">{s.emailLabel} <a href={'mailto:' + LD.contactEmail}>{LD.contactEmail}</a></p>
          </div>

          {status === 'sent' ? (
            <div className="cta-card form-success">
              <div className="form-success-icon"><Check size={36}/></div>
              <h2 className="cta-title">{s.successTitle}</h2>
              <p className="cta-desc">{s.successDesc}</p>
            </div>
          ) : (
            <div className="cta-card form-card">
              <form className="contact-form" onSubmit={onSubmit} noValidate data-fcs-form={LD.id}>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">{fl.name.label}</span>
                    <input type="text" value={form.name} onChange={onChange('name')} placeholder={fl.name.placeholder} className={errors.name ? 'form-input has-error' : 'form-input'} required maxLength={200} autoComplete="name"/>
                    {errors.name && <span className="form-error">{errors.name}</span>}
                  </label>
                  <label className="form-field">
                    <span className="form-label">{fl.email.label}</span>
                    <input type="email" value={form.email} onChange={onChange('email')} placeholder={fl.email.placeholder} className={errors.email ? 'form-input has-error' : 'form-input'} required autoComplete="email"/>
                    {errors.email && <span className="form-error">{errors.email}</span>}
                  </label>
                </div>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">{fl.company.label} <span className="form-optional">{fl.company.optional}</span></span>
                    <input type="text" value={form.company} onChange={onChange('company')} placeholder={fl.company.placeholder} className="form-input" autoComplete="organization"/>
                  </label>
                  <label className="form-field">
                    <span className="form-label">{fl.phone.label} <span className="form-optional">{fl.phone.optional}</span></span>
                    <input type="tel" value={form.phone} onChange={onChange('phone')} placeholder={fl.phone.placeholder} className={errors.phone ? 'form-input has-error' : 'form-input'} maxLength={60} autoComplete="tel"/>
                    {errors.phone && <span className="form-error">{errors.phone}</span>}
                  </label>
                </div>
                <label className="form-field">
                  <span className="form-label">{fl.message.label}</span>
                  <textarea value={form.message} onChange={onChange('message')} placeholder={fl.message.placeholder} className={errors.message ? 'form-input form-textarea has-error' : 'form-input form-textarea'} rows={4} required maxLength={5000}/>
                  {errors.message && <span className="form-error">{errors.message}</span>}
                </label>
                <label className={'form-checkbox ' + (errors.gdpr ? 'has-error' : '')}>
                  <input type="checkbox" checked={form.gdpr} onChange={onChange('gdpr')} required/>
                  <span className="form-checkbox-text">{f.gdpr} <a href={f.gdprLink.href} target="_blank" rel="noopener">{f.gdprLink.label}</a></span>
                </label>
                <div className="form-submit-wrap">
                  <button type="submit" className="btn btn-primary btn-lg" disabled={status === 'sending'}>
                    {status === 'sending' ? f.sending : s.submit}
                    {status !== 'sending' && <ArrowRight size={16}/>}
                  </button>
                </div>
                {status === 'error' && <p className="form-error-banner">{f.error}</p>}
              </form>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------- Összeállítás ---------- */
const LD_SECTIONS = { hero: Hero, pains: Pains, flow: Flow, video: Video, rows: Rows, compare: Compare, faq: Faq, about: About, references: References, verticals: Verticals, demo: Demo, contact: Contact };

function LandingBody() {
  const { lang } = useI18n();
  const L = LD[lang] || LD.hu;
  lUseEffect(() => {
    document.title = L.meta.title;
    const m = document.querySelector('meta[name="description"]');
    if (m) m.setAttribute('content', L.meta.description);
  }, [lang]);
  return (
    <>
      <LandingNav L={L}/>
      <main>
        {L.sections.map((s, i) => {
          const C = LD_SECTIONS[s.type];
          return C ? <C s={s} key={s.type + i}/> : null;
        })}
      </main>
      <Footer/>
      <StickyBar L={L}/>
      <CookieBanner/>
    </>
  );
}
function LandingPage() {
  return <I18nProvider><LandingBody/></I18nProvider>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<LandingPage/>);