/* ============================================================
   EDITORIAL INDEX — bottom sections
   ============================================================ */

function Services({ c }) {
  const s = c.services;
  const card = s.cards[0];
  return (
    <section className="ed-sec shell" id="services" data-screen-label="Services">
      <Reveal as="div" className="sec-head">
        <span className="sec-folio">Nº 04</span>
        <div className="sec-title">
          <p className="kick accent sec-kick">{s.label}</p>
          <h2>{s.h2a} <span className="it">{s.h2bItalic}</span></h2>
        </div>
      </Reveal>

      <div className="feature-solo">
        <Reveal className="fs-media" delay={80}>
          <img src="images/ema-services.jpg" alt="Ema" />
          <span className="fs-cap folio">{card.meta}</span>
        </Reveal>
        <Reveal className="fs-text" delay={150}>
          <span className="fs-tag">{card.tag}</span>
          <h3 className="fs-lead">
            {card.lead.split(/(?<=\.)\s+/).map((ln, i, arr) => (
              <React.Fragment key={i}>{ln}{i < arr.length - 1 && <br />}</React.Fragment>
            ))}
          </h3>
          <p className="fs-copy">{card.body}</p>
          {card.accent && <blockquote className="fs-accent">{card.accent}</blockquote>}
          <div className="fs-actions">
            <a href="#contact" className="cta">{card.cta} <Arw /></a>
            <span className="folio">{c.services.note}</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HowItWorks({ c }) {
  const w = c.how;
  return (
    <section className="ed-sec shell" id="how" data-screen-label="How it works">
      <Reveal as="div" className="sec-head">
        <span className="sec-folio">Nº 03</span>
        <div className="sec-title">
          <p className="kick accent sec-kick">{w.label}</p>
          <h2>{w.h2a} <span className="it">{w.h2b}</span></h2>
          <p className="how-sub">{w.sub}</p>
        </div>
      </Reveal>

      <div className="how-steps">
        {w.steps.map((st, i) => (
          <Reveal key={i} className="how-step" delay={i * 110}>
            <div className="how-num">0{i + 1}</div>
            <h3>{st.title}</h3>
            <p>{st.body}</p>
          </Reveal>
        ))}
      </div>
      <Reveal className="how-foot" delay={120}>
        <a href="#contact" className="cta">{w.cta} <Arw /></a>
        <span className="folio">{w.micro}</span>
      </Reveal>
    </section>
  );
}

function Voices({ c }) {
  const t = c.testimonials;
  return (
    <section className="ed-sec dark" id="voices" data-screen-label="Testimonials">
      <div className="shell">
        <Reveal as="div" className="sec-head">
          <span className="sec-folio">Nº 05</span>
          <div className="sec-title">
            <p className="kick accent sec-kick">{t.label}</p>
            <h2>{t.h2a} <span className="it">{t.h2bItalic}</span></h2>
          </div>
        </Reveal>
        <div className="tst-grid">
          {t.items.map((it, i) => (
            <Reveal key={i} className="tst-card" delay={i * 80}>
              <span className="tst-mark">“</span>
              <p className="tst-q">{it.quote}</p>
              <div className="tst-meta">
                <span className="who">{it.who}</span>
                <span className="what">{it.what}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Investment({ c, lang }) {
  const inv = c.investment;
  return (
    <section className="ed-sec shell" id="investment" data-screen-label="Investment">
      <Reveal as="div" className="sec-head">
        <span className="sec-folio">Nº 06</span>
        <div className="sec-title">
          <p className="kick accent sec-kick">{inv.label}</p>
          <h2>{inv.h2a} <span className="it">{inv.h2bItalic}</span></h2>
        </div>
      </Reveal>

      <div className="inv-cols">
        {inv.blocks.map((bl, i) => (
          <Reveal key={i} className={"inv-col" + (bl.badge ? " feat" : "")} delay={i * 90}>
            {bl.badge && <span className="inv-badge">{bl.badge}</span>}
            <h3 className="inv-title">{bl.title}</h3>
            <div className="inv-price">{bl.price}<span className="unit">{bl.unit}</span></div>
            <ul className="inv-feats">
              {bl.items.map((it, j) => <li key={j} className="inv-feat">{it}</li>)}
            </ul>
            <a href="#contact" className={"cta " + (bl.badge ? "on-dark" : "ghost")}>{bl.cta} <Arw /></a>
          </Reveal>
        ))}
      </div>

      <Reveal className="inv-note" delay={80}>
        <p className="lg">{inv.footer1}</p>
        <p className="sm">{inv.footer2}</p>
      </Reveal>
    </section>
  );
}

function FinalCta({ c, lang }) {
  const f = c.finalCta;
  const [status, setStatus] = useState("idle");
  const [form, setForm] = useState({ name: "", email: "", message: "" });

  const L = (lang === "en") ? {
    name: "Name", email: "Email", msg: "Message (optional)",
    send: "Let's connect", sending: "Sending…",
    ok: "Sent! I'll be in touch soon.", err: "Error — please try again."
  } : {
    name: "Vardas", email: "El. paštas", msg: "Žinutė (neprivaloma)",
    send: "Susitarkime", sending: "Siunčiama…",
    ok: "Išsiųsta! Susisieksiu greitai.", err: "Klaida — bandyk dar kartą."
  };

  const inputStyle = { background: "rgba(241,238,230,0.10)", border: "1px solid rgba(241,238,230,0.25)", color: "var(--paper)", padding: "12px 16px", fontFamily: "var(--sans)", fontSize: "15px", outline: "none", borderRadius: "1px", width: "100%", boxSizing: "border-box" };

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setStatus("sending");
    try {
      const res = await fetch("https://api.v2x.lt/promax/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ slug: "ema-sakalauskaityte", language: lang, name: form.name, email: form.email, message: form.message }),
      });
      if (res.ok) { setStatus("ok"); return; }
    } catch(e) {}
    // fallback
    try {
      await fetch("https://formsubmit.co/ajax/labas@ema.lt", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ name: form.name, email: form.email, message: form.message }),
      });
    } catch(e2) {}
    setStatus("ok");
  };

  return (
    <section className="final-fb" id="contact" data-screen-label="Final CTA">
      <div className="fb-photo"><img src="images/ema-final.jpg" alt="Ema" /></div>
      <div className="ffb-scrim"></div>
      <div className="shell ffb-inner">
        <div className="fb-top">
          <p className="folio">Nº 07 — {c.nav.cta}</p>
          <p className="folio" style={{ textAlign: "right" }}>ema.v2x.lt</p>
        </div>
        <div className="ffb-main">
          <Reveal><h2 className="final-fb-h">{f.h2a}<br /><span className="it">{f.h2bItalic}</span></h2></Reveal>
          <div className="ffb-foot">
            <Reveal className="final-body" delay={120}><Prose text={f.body} /></Reveal>
            <Reveal className="final-actions" delay={200}>
              {status === "ok" ? (
                <p style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: "13px", letterSpacing: "0.06em", textTransform: "uppercase" }}>{L.ok}</p>
              ) : (
                <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: "10px", maxWidth: "420px", width: "100%" }}>
                  <input type="text" required placeholder={L.name} value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} style={inputStyle} />
                  <input type="email" required placeholder={L.email} value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} style={inputStyle} />
                  <textarea rows={3} placeholder={L.msg} value={form.message} onChange={e => setForm(f => ({...f, message: e.target.value}))} style={{...inputStyle, resize: "vertical"}} />
                  <div style={{ display: "flex", alignItems: "center", gap: "20px", flexWrap: "wrap", marginTop: "4px" }}>
                    <button type="submit" disabled={status === "sending"} className="cta on-dark" style={{ opacity: status === "sending" ? 0.6 : 1, border: "none", cursor: status === "sending" ? "wait" : "pointer" }}>
                      {status === "sending" ? L.sending : <>{L.send} <Arw /></>}
                    </button>
                    <span className="final-micro">{f.micro}</span>
                  </div>
                  {status === "error" && <p style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: "12px" }}>{L.err}</p>}
                </form>
              )}
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Colophon({ c, lang, setLang }) {
  const f = c.footer;
  return (
    <footer className="colophon" data-screen-label="Footer">
      <div className="shell">
        <div className="col-grid">
          <div className="col">
            <p className="col-mark">Ema<span className="tld">.live</span></p>
            <p className="folio col-role">
              {f.role.split(" · ").map((r, i, arr) => (
                <React.Fragment key={i}>{r}{i < arr.length - 1 ? <br /> : null}</React.Fragment>
              ))}
            </p>
          </div>
          <div className="col">
            <h4>{lang === "lt" ? "Turinys" : "Index"}</h4>
            <ul>
              <li><a href="#about">{c.nav.about}</a></li>
              <li><a href="#how">{c.nav.how}</a></li>
              <li><a href="#services">{c.nav.workshops}</a></li>
              <li><a href="blog.html">{c.nav.blog}</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>{lang === "lt" ? "Sekti" : "Follow"}</h4>
            <ul>
              {f.social.map((s, i) => <li key={i}><a href="#">{s}</a></li>)}
            </ul>
          </div>
          <div className="col">
            <h4>{lang === "lt" ? "Kalba" : "Language"}</h4>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setLang("lt"); }} style={{ color: lang === "lt" ? "var(--accent)" : undefined }}>Lietuvių</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); setLang("en"); }} style={{ color: lang === "en" ? "var(--accent)" : undefined }}>English</a></li>
            </ul>
          </div>

          <div className="col-news">
            <div className="news-head">
              <span className="news-ico">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14"></rect><path d="M3.5 6.5 12 13l8.5-6.5"></path></svg>
              </span>
              <p className="news-text">{f.newsletter}</p>
            </div>
            <form className="news-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder={f.emailPlaceholder} aria-label="email" />
              <button type="submit">
                {f.subscribe}
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 6l6 6-6 6"></path></svg>
              </button>
            </form>
          </div>
        </div>
        <div className="col-base">
          <span>{f.copy}</span>
          <span>{lang === "lt" ? "Sukurta su dėmesiu · Vilnius" : "Made with care · Vilnius"}</span>
          <a href="#" style={{ textDecoration: "none", color: "inherit" }}>{f.privacy}</a>
        </div>
      </div>
    </footer>
  );
}

function Reflections({ c, lang }) {
  const b = c.blog;
  return (
    <section className="ed-sec shell dark" id="mintys" data-screen-label="Reflections">
      <Reveal as="div" className="sec-head">
        <span className="sec-folio">Nº 02</span>
        <div className="sec-title">
          <p className="kick accent sec-kick">{b.label}</p>
          <h2>{b.h2a} <span className="it">{b.h2b}</span></h2>
        </div>
      </Reveal>

      <div className="mintys-grid">
        {b.posts.map((p, i) => (
          <Reveal key={i} as="a" href={"/mintys/" + p.id} className="mintys-card" delay={i * 80}>
            <div className="mintys-media">
              {p.img
                ? <img src={p.img} alt={p.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                : <Placeholder label={lang === "lt" ? "Instagram įrašas" : "Instagram post"} style={{ position: "absolute", inset: 0 }} />
              }
              <span className="mintys-cat">{p.cat}</span>
            </div>
            <div className="mintys-body">
              <span className="mintys-date">{p.date}</span>
              <h3 className="mintys-title">{p.title}</h3>
              <p className="mintys-intro">{p.intro}</p>
              <span className="ulink"><span className="bar"></span> {lang === "lt" ? "Skaityti" : "Read"} <Arw /></span>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal className="mintys-foot" delay={120}>
        <a href="blog.html" className="cta ghost">{b.cta} <Arw /></a>
      </Reveal>
    </section>
  );
}

Object.assign(window, { Services, HowItWorks, Voices, Investment, Reflections, FinalCta, Colophon });