// Services page — Custom Educational & Training Videos

function ServicesApp() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" } /*EDITMODE-END*/);
  const [status, setStatus] = React.useState("");
  useLucideIcons([tweaks]);
  useTweakBodyClasses(tweaks);

  async function handleIntake(e) {
    e.preventDefault();
    const f = e.target;
    setStatus("sending");
    try {
      const res = await fetch("contact.php", { method: "POST", body: new FormData(f) });
      const data = await res.json();
      if (data.ok) { setStatus("sent"); f.reset(); }
      else setStatus("error");
    } catch (err) {
      setStatus("error");
    }
  }

  const videoTypes = [
    { icon: "graduation-cap", k: "vt1" },
    { icon: "file-video",     k: "vt2" },
    { icon: "presentation",   k: "vt3" },
    { icon: "languages",      k: "vt4" },
  ];
  const steps = ["how1", "how2", "how3", "how4"];
  const options = [
    { icon: "square-play", k: "opt1" },
    { icon: "layers",      k: "opt2" },
    { icon: "languages",   k: "opt3" },
  ];
  const questions = ["q1","q2","q3","q4","q5","q6","q7","q8","q9","q10","q11","q12"];

  return (
    <>
      <SiteNav active="services" />

      <header className="page-header">
        <div className="container" style={{ textAlign: "center" }}>
          <div className="services-hero-image">
            <img src="assets/services-hero.jpg" alt="Professional educational and training video production for teams" />
          </div>
          <span className="eyebrow">{t("services.eyebrow")}</span>
          <h1 style={{ fontSize: "35px" }}>{t("services.title")}</h1>
          <p style={{ maxWidth: "680px", margin: "0 auto", fontWeight: "500" }}>{t("services.sub")}</p>
        </div>
      </header>

      <section className="section services-section">
        <div className="container">
          <div className="services-intro" style={{ maxWidth: "760px" }}>
            <p className="services-lede">{t("services.heroBody1")}</p>
            <p className="services-lede">{t("services.heroBody2")}</p>
          </div>

          {/* What you can commission */}
          <div className="services-block">
            <div className="services-block-head">
              <span className="services-block-num">01</span>
              <h3>{t("services.commissionTitle")}</h3>
              <p>{t("services.commissionSub")}</p>
            </div>
            <div className="video-types">
              {videoTypes.map((v) => (
                <div key={v.k} className="video-type">
                  <span className="video-type-icon"><i data-lucide={v.icon}></i></span>
                  <h4>{t("services." + v.k + "Title")}</h4>
                  <p className="video-type-tag">{t("services." + v.k + "Tag")}</p>
                  <p className="video-type-desc">{t("services." + v.k + "Desc")}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Why work with me */}
          <div className="services-block">
            <div className="services-block-head">
              <span className="services-block-num">02</span>
              <h3>{t("services.whyTitle")}</h3>
            </div>
            <div className="why-work">
              <p className="why-bio">{t("services.whyBio")}</p>
              <p className="why-intro">{t("services.whyIntro")}</p>
              <ul className="why-points">
                <li><i data-lucide="check-circle-2"></i> <span>{t("services.why1")}</span></li>
                <li><i data-lucide="check-circle-2"></i> <span>{t("services.why2")}</span></li>
                <li><i data-lucide="check-circle-2"></i> <span>{t("services.why3")}</span></li>
              </ul>
            </div>
          </div>

          {/* How it works */}
          <div className="services-block">
            <div className="services-block-head">
              <span className="services-block-num">03</span>
              <h3>{t("services.howTitle")}</h3>
              <p>{t("services.howSub")}</p>
            </div>
            <div className="how-steps">
              {steps.map((s, i) => (
                <div key={s} className="how-step">
                  <span className="how-step-num">{i + 1}</span>
                  <p>{t("services." + s)}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Service options */}
          <div className="services-block">
            <div className="services-block-head">
              <span className="services-block-num">04</span>
              <h3>{t("services.optTitle")}</h3>
              <p>{t("services.optSub")}</p>
            </div>
            <div className="advantages">
              {options.map((o) => (
                <div key={o.k} className="advantage">
                  <span className="advantage-icon"><i data-lucide={o.icon}></i></span>
                  <h4>{t("services." + o.k + "Title")}</h4>
                  <p>{t("services." + o.k + "Desc")}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Start a project */}
          <div className="services-start">
            <h3>{t("services.startTitle")}</h3>
            <p>{t("services.startBody")}</p>
            <a href="#intake" className="btn btn--primary btn--lg">{t("services.startCta")} <i data-lucide="arrow-right"></i></a>
          </div>
        </div>
      </section>

      {/* Client intake form */}
      <section id="intake" className="section contact-section">
        <div className="container">
          <div className="contact-card">
            <div className="contact-head">
              <span className="eyebrow">{t("services.eyebrow")}</span>
              <h2>{t("services.intakeTitle")}</h2>
              <p>{t("services.intakeSub")}</p>
            </div>
            <form className="contact-form" onSubmit={handleIntake}>
              <input type="hidden" name="subject" value="Video service intake" />
              <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
              {questions.map((q, i) => (
                <label key={q} className="contact-field">
                  <span>{i + 1}. {t("services." + q)}</span>
                  {i === 0
                    ? <input name={q} type="text" required />
                    : <textarea name={q} rows={i === 1 || i === 11 ? 3 : 2}></textarea>}
                </label>
              ))}
              <button type="submit" className="btn btn--primary btn--lg" disabled={status === "sending"}>
                {status === "sending" ? t("services.intakeSending") : t("services.intakeSubmit")} <i data-lucide="send"></i>
              </button>
              {status === "sent" && <p className="contact-note">{t("services.intakeSuccess")}</p>}
              {status === "error" && <p className="contact-note contact-note--err">{t("services.intakeError")}</p>}
              <p className="intake-closing">{t("services.intakeClosing")}</p>
            </form>
          </div>
        </div>
      </section>

      <section className="section--tight" style={{ background: "var(--color-surface-alt)" }}>
        <div className="container">
          <div className="channel-banner">
            <span className="channel-banner-icon"><YouTubeGlyph size={28} /></span>
            <div>
              <h3>{t("services.ytTitle")}</h3>
              <p>{t("services.ytBody")}</p>
            </div>
            <a href={SITE.ytChannel()} target="_blank" rel="noopener noreferrer" className="btn btn--lg">
              {t("services.ytButton")} <i data-lucide="external-link"></i>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
        value={tweaks.themeColor}
        onChange={(v) => setTweak("themeColor", v)}
        options={[
        { value: "navy", label: "Navy" },
        { value: "graphite", label: "Graphite" },
        { value: "emerald", label: "Emerald" },
        { value: "gold", label: "Gold" }]
        } />
      </TweaksPanel>
    </>);

}

window.ServicesApp = ServicesApp;