// Direction A — Editorial
// Vibe: agency / fashion publication. Warm off-white, deep ink, Didone display serif
// (Playfair for display, Inter for body, JetBrains Mono for tags/numbers).
// Generous whitespace, editorial grid, striped placeholders with mono captions.

function DirectionEditorial({ accent = "oklch(52% 0.18 25)" }) {
  const C = window.CONTENT;
  const APPLY_EMAIL = "apply@galois.studio";

  const SUPABASE_URL = "https://rhrzshizleptqxndzyzq.supabase.co";
  const SUPABASE_KEY = "sb_publishable_8mw87WVyJ1jDnIz3TXZHpw_NrnvNzmW";

  const [form, setForm] = React.useState(
    Object.fromEntries(C.form.fields.map(f => [f.k, ""]))
  );
  const [honeypot, setHoneypot] = React.useState("");
  const mountedAt = React.useRef(Date.now());
  const [submitState, setSubmitState] = React.useState("idle");

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const navTargets = { "Roster": "roster", "Method": "method", "Case study": "case-study", "FAQ": "faq" };
  const footerTargets = { "Roster": "roster", "How it works": "method", "Case study": "case-study", "Apply": "apply" };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitState === "sending" || submitState === "sent") return;

    if (honeypot.trim() !== "") { setSubmitState("sent"); return; }
    if (Date.now() - mountedAt.current < 1500) { setSubmitState("sent"); return; }

    const required = ["name", "contact"];
    if (required.some(k => !form[k].trim())) {
      setSubmitState("missing");
      return;
    }

    setSubmitState("sending");
    try {
      const payload = {
        name: form.name.trim().slice(0, 120),
        handle: (form.handle || "").trim().slice(0, 120) || null,
        niche: (form.niche || "").trim().slice(0, 200) || null,
        revenue: (form.revenue || "").trim().slice(0, 120) || null,
        contact: form.contact.trim().slice(0, 200),
        referrer: (document.referrer || "").slice(0, 500) || null,
        user_agent: (navigator.userAgent || "").slice(0, 500) || null,
      };
      const res = await fetch(`${SUPABASE_URL}/rest/v1/galois_applications`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "apikey": SUPABASE_KEY,
          "Authorization": `Bearer ${SUPABASE_KEY}`,
          "Prefer": "return=minimal",
        },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setSubmitState("sent");
    } catch (err) {
      console.error("Application submit failed:", err);
      setSubmitState("error");
    }
  };

  return (
    <div style={{
      fontFamily: "'Inter', system-ui, sans-serif",
      background: "#f5f1ea",
      color: "#14110c",
      minHeight: "100%",
    }}>
      <style>{`
        .ed-serif { font-family: 'Playfair Display', 'Didot', 'Bodoni 72', serif; font-weight: 400; letter-spacing: -0.02em; }
        .ed-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
        .ed-ital { font-style: italic; }
        .ed-rule { height: 1px; background: #14110c; opacity: 0.18; }
        .ed-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; }
        .ed-num { font-family: 'Playfair Display', serif; font-variant-numeric: tabular-nums; }
        .ed-cta-primary { background: #14110c; color: #f5f1ea; padding: 18px 28px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: none; cursor: pointer; transition: transform 120ms, background 120ms; }
        .ed-cta-primary:hover { background: ${accent}; }
        .ed-cta-ghost { border: 1px solid #14110c; color: #14110c; padding: 18px 28px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; background: transparent; cursor: pointer; transition: background 120ms, color 120ms; }
        .ed-cta-ghost:hover { background: #14110c; color: #f5f1ea; }
        .ed-placeholder { background: repeating-linear-gradient(135deg, #e9e3d7 0 14px, #ddd5c4 14px 28px); display: flex; align-items: flex-end; justify-content: flex-start; padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6254; }
        .ed-link-underline { position: relative; display: inline-block; }
        .ed-link-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform 200ms ease; }
        .ed-link-underline:hover::after { transform: scaleX(0); transform-origin: left; }
        .ed-faq-item summary { list-style: none; cursor: pointer; }
        .ed-faq-item summary::-webkit-details-marker { display: none; }
        .ed-faq-item[open] .ed-faq-plus { transform: rotate(45deg); }
        .ed-input { background: transparent; border: none; border-bottom: 1px solid #14110c33; padding: 16px 0; font-family: 'Inter', sans-serif; font-size: 16px; color: #14110c; width: 100%; outline: none; transition: border-color 180ms; }
        .ed-input:focus { border-bottom-color: #14110c; }
        .ed-input::placeholder { color: #14110c55; }
      `}</style>

      {/* ─── NAV ─── */}
      <nav style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "28px 64px", borderBottom: "1px solid #14110c22",
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
          <div className="ed-serif" style={{ fontSize: 26, letterSpacing: "-0.03em" }}>
            Galois <span className="ed-ital">Studio</span>
          </div>
          <div className="ed-mono" style={{ fontSize: 10, opacity: 0.5, letterSpacing: "0.18em", textTransform: "uppercase" }}>
            vol. i · 2026
          </div>
        </div>
        <div style={{ display: "flex", gap: 36, fontSize: 13 }}>
          {["Roster", "Method", "Case study", "FAQ"].map(x => (
            <a key={x} href={`#${navTargets[x]}`} onClick={scrollTo(navTargets[x])} className="ed-link-underline" style={{ color: "#14110c", textDecoration: "none" }}>{x}</a>
          ))}
        </div>
        <button onClick={scrollTo("apply")} className="ed-cta-primary" style={{ padding: "12px 22px", fontSize: 12 }}>
          Apply
        </button>
      </nav>

      {/* ─── HERO ─── */}
      <section style={{ padding: "80px 64px 100px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="ed-kicker" style={{ marginBottom: 40 }}>{C.hero.kicker}</div>
          <h1 className="ed-serif" style={{ fontSize: 92, lineHeight: 0.96, margin: 0, textWrap: "balance" }}>
            Your face.<br/>
            <span className="ed-ital" style={{ color: accent }}>A hundred</span> accounts.<br/>
            One revenue line<br/>
            <span className="ed-ital">going up.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, marginTop: 40, maxWidth: 580, color: "#14110ccc", textWrap: "pretty" }}>
            {C.hero.sub}
          </p>
          <div style={{ display: "flex", gap: 16, marginTop: 48 }}>
            <button onClick={scrollTo("apply")} className="ed-cta-primary">{C.hero.primaryCTA}</button>
            <button onClick={scrollTo("method")} className="ed-cta-ghost">{C.hero.secondaryCTA}</button>
          </div>
          <div style={{ display: "flex", gap: 28, marginTop: 56 }}>
            {C.hero.trustRow.map((t, i) => (
              <div key={i} className="ed-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.55 }}>
                <span style={{ color: accent, marginRight: 8 }}>◆</span>{t}
              </div>
            ))}
          </div>
        </div>
        {/* Hero portrait frame */}
        <div style={{ position: "relative", aspectRatio: "3/4", width: "100%" }}>
          <div className="ed-placeholder" style={{ position: "absolute", inset: 0 }}>
            Drop creator portrait · 3:4
          </div>
          <div className="ed-mono" style={{
            position: "absolute", bottom: -28, right: 0, fontSize: 10,
            letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.5,
          }}>
            Fig. 01 — Creator B, active roster
          </div>
          <div className="ed-serif ed-ital" style={{
            position: "absolute", top: -16, left: -32,
            background: accent, color: "#f5f1ea", padding: "10px 20px",
            fontSize: 18,
          }}>
            editorial n°01
          </div>
        </div>
      </section>

      {/* ─── STATS STRIP ─── */}
      <section style={{ borderTop: "1px solid #14110c22", borderBottom: "1px solid #14110c22", padding: "56px 64px" }}>
        <div className="ed-kicker" style={{ marginBottom: 40 }}>The numbers, softened</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48 }}>
          {C.stats.map((s, i) => (
            <div key={i} style={{ borderLeft: i > 0 ? "1px solid #14110c22" : "none", paddingLeft: i > 0 ? 32 : 0 }}>
              <div className="ed-num" style={{ fontSize: 72, lineHeight: 1, letterSpacing: "-0.03em" }}>{s.v}</div>
              <div className="ed-serif ed-ital" style={{ fontSize: 20, marginTop: 12 }}>{s.l}</div>
              <div className="ed-mono" style={{ fontSize: 10, marginTop: 10, opacity: 0.5, letterSpacing: "0.08em", textTransform: "uppercase" }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ─── METHOD / PIPELINE ─── */}
      <section id="method" style={{ padding: "120px 64px", scrollMarginTop: 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, marginBottom: 64 }}>
          <div>
            <div className="ed-kicker" style={{ marginBottom: 24 }}>02 · Method</div>
            <h2 className="ed-serif" style={{ fontSize: 56, lineHeight: 1, margin: 0 }}>
              The <span className="ed-ital">five steps</span> from photoshoot to MRR.
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "#14110ccc", alignSelf: "end", textWrap: "pretty" }}>
            The entire engine sits behind a single afternoon of your time. Everything downstream runs on our infrastructure, our team, our accounts. You see the dashboards. You get paid.
          </p>
        </div>

        <div style={{ borderTop: "1px solid #14110c22" }}>
          {C.pipeline.map((p, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "80px 1fr 2fr 1fr", gap: 48,
              padding: "40px 0", borderBottom: "1px solid #14110c22", alignItems: "baseline",
            }}>
              <div className="ed-num" style={{ fontSize: 44, color: accent }}>{p.n}</div>
              <div className="ed-serif" style={{ fontSize: 32 }}>{p.t}</div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: "#14110ccc", margin: 0, textWrap: "pretty" }}>{p.d}</p>
              <div className="ed-mono" style={{ fontSize: 10, textAlign: "right", opacity: 0.5, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                step {p.n} / {String(C.pipeline.length).padStart(2,"0")}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ─── ROSTER ─── */}
      <section id="roster" style={{ background: "#14110c", color: "#f5f1ea", padding: "120px 64px", scrollMarginTop: 32 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 56 }}>
          <div>
            <div className="ed-kicker" style={{ marginBottom: 20, opacity: 0.6 }}>03 · Roster</div>
            <h2 className="ed-serif" style={{ fontSize: 56, margin: 0, lineHeight: 1 }}>
              Who we <span className="ed-ital">quietly</span> work with.
            </h2>
          </div>
          <div className="ed-mono" style={{ fontSize: 11, opacity: 0.5, letterSpacing: "0.14em", textTransform: "uppercase" }}>
            Anonymized by contract
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
          {C.roster.map((r, i) => (
            <div key={i} style={{ borderTop: "1px solid #f5f1ea33", paddingTop: 24 }}>
              <div style={{ aspectRatio: "3/4", background: "repeating-linear-gradient(135deg, #2a241b 0 14px, #3a3124 14px 28px)", marginBottom: 20, position: "relative" }}>
                <div className="ed-mono" style={{ position: "absolute", bottom: 12, left: 12, fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.6 }}>
                  creator {r.id}
                </div>
              </div>
              <div className="ed-serif" style={{ fontSize: 24 }}>Creator {r.id}</div>
              <div className="ed-serif ed-ital" style={{ fontSize: 14, opacity: 0.7, marginTop: 4 }}>{r.niche}</div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 20, fontSize: 11 }} className="ed-mono">
                <span style={{ color: r.status === "Active" ? "oklch(75% 0.15 145)" : r.status === "Onboarding" ? "oklch(80% 0.14 85)" : "#f5f1ea88", letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  {r.status}
                </span>
                <span style={{ opacity: 0.5 }}>{r.months}mo · {r.note}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ─── CASE STUDY ─── */}
      <section id="case-study" style={{ padding: "120px 64px", scrollMarginTop: 32 }}>
        <div className="ed-kicker" style={{ marginBottom: 24 }}>04 · {C.caseStudy.label}</div>
        <h2 className="ed-serif" style={{ fontSize: 64, margin: 0, lineHeight: 1, maxWidth: 900, textWrap: "balance" }}>
          From <span className="ed-num" style={{ color: accent }}>410</span> subs to{" "}
          <span className="ed-num" style={{ color: accent }}>11,900</span>. <span className="ed-ital">Same creator. Same photoset.</span>
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 48, alignItems: "center", marginTop: 80 }}>
          {/* Before */}
          <div style={{ border: "1px solid #14110c33", padding: 40 }}>
            <div className="ed-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.5, marginBottom: 24 }}>Before · Month 0</div>
            <div style={{ display: "grid", gap: 20 }}>
              {Object.entries(C.caseStudy.before).map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px dashed #14110c33", paddingBottom: 10 }}>
                  <span className="ed-serif ed-ital" style={{ fontSize: 16, opacity: 0.7 }}>{k}</span>
                  <span className="ed-num" style={{ fontSize: 32 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="ed-serif ed-ital" style={{ fontSize: 48, color: accent }}>→</div>

          {/* After */}
          <div style={{ border: `2px solid ${accent}`, padding: 40, background: "#14110c", color: "#f5f1ea" }}>
            <div className="ed-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.7, marginBottom: 24, color: accent }}>After · Month 7</div>
            <div style={{ display: "grid", gap: 20 }}>
              {Object.entries(C.caseStudy.after).map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px dashed #f5f1ea33", paddingBottom: 10 }}>
                  <span className="ed-serif ed-ital" style={{ fontSize: 16, opacity: 0.7 }}>{k}</span>
                  <span className="ed-num" style={{ fontSize: 32 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <p className="ed-serif ed-ital" style={{ fontSize: 22, marginTop: 56, maxWidth: 720, lineHeight: 1.5, textWrap: "pretty" }}>
          "{C.caseStudy.note}"
        </p>
      </section>

      {/* ─── SERVICES ─── */}
      <section style={{ padding: "120px 64px", background: "#ece5d6" }}>
        <div className="ed-kicker" style={{ marginBottom: 24 }}>05 · Services</div>
        <h2 className="ed-serif" style={{ fontSize: 56, margin: 0, marginBottom: 64, lineHeight: 1 }}>
          Everything <span className="ed-ital">downstream</span> of your photoshoot.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
          {C.services.map((s, i) => (
            <div key={i} style={{
              padding: 32,
              borderTop: "1px solid #14110c33",
              borderLeft: i % 3 !== 0 ? "1px solid #14110c33" : "none",
              borderBottom: i >= C.services.length - 3 ? "1px solid #14110c33" : "none",
            }}>
              <div className="ed-num" style={{ fontSize: 22, color: accent }}>0{i+1}</div>
              <div className="ed-serif" style={{ fontSize: 26, marginTop: 12 }}>{s.t}</div>
              <p style={{ fontSize: 14, lineHeight: 1.55, marginTop: 12, color: "#14110ccc", textWrap: "pretty" }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ─── TESTIMONIALS ─── */}
      <section style={{ padding: "120px 64px" }}>
        <div className="ed-kicker" style={{ marginBottom: 56 }}>06 · Voices from the roster</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
          {C.testimonials.map((t, i) => (
            <div key={i}>
              <div className="ed-serif" style={{ fontSize: 64, lineHeight: 0.8, color: accent, marginBottom: 12 }}>"</div>
              <p className="ed-serif" style={{ fontSize: 22, lineHeight: 1.4, margin: 0, textWrap: "pretty" }}>{t.q}</p>
              <div className="ed-mono" style={{ fontSize: 10, marginTop: 24, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.55 }}>— {t.who}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ─── FAQ ─── */}
      <section id="faq" style={{ padding: "120px 64px", background: "#ece5d6", scrollMarginTop: 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
          <div>
            <div className="ed-kicker" style={{ marginBottom: 24 }}>07 · FAQ</div>
            <h2 className="ed-serif" style={{ fontSize: 56, lineHeight: 1, margin: 0 }}>
              Questions <span className="ed-ital">we get</span> in the first call.
            </h2>
          </div>
          <div>
            {C.faq.map((f, i) => (
              <details key={i} className="ed-faq-item" style={{ borderTop: "1px solid #14110c33", padding: "28px 0" }}>
                <summary style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24 }}>
                  <span className="ed-serif" style={{ fontSize: 24, flex: 1, textWrap: "pretty" }}>{f.q}</span>
                  <span className="ed-faq-plus" style={{ fontSize: 22, transition: "transform 200ms", color: accent }}>+</span>
                </summary>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: "#14110ccc", marginTop: 16, maxWidth: 720, textWrap: "pretty" }}>{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* ─── APPLY ─── */}
      <section id="apply" style={{ padding: "120px 64px", background: "#14110c", color: "#f5f1ea", scrollMarginTop: 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 100 }}>
          <div>
            <div className="ed-kicker" style={{ marginBottom: 24, opacity: 0.5 }}>08 · Apply</div>
            <h2 className="ed-serif" style={{ fontSize: 72, lineHeight: 0.95, margin: 0, textWrap: "balance" }}>
              We take <span className="ed-ital" style={{ color: accent }}>two or three</span> creators a month.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, marginTop: 40, opacity: 0.75, maxWidth: 440, textWrap: "pretty" }}>
              {C.form.disclaimer} If it's a fit, we book a call within 72 hours and send a contract the same week.
            </p>
          </div>

          <form style={{ display: "grid", gap: 0 }} onSubmit={onSubmit} noValidate>
            {/* Honeypot — hidden from humans, bots fill it */}
            <div aria-hidden="true" style={{ position: "absolute", left: "-10000px", top: "auto", width: 1, height: 1, overflow: "hidden" }}>
              <label>
                Company website
                <input type="text" tabIndex={-1} autoComplete="off" value={honeypot} onChange={(e) => setHoneypot(e.target.value)} />
              </label>
            </div>
            {C.form.fields.map((f) => {
              const required = f.k === "name" || f.k === "contact";
              return (
                <label key={f.k} style={{ display: "block", marginBottom: 28 }}>
                  <div className="ed-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.6, marginBottom: 8 }}>
                    {f.l}{required && <span style={{ color: accent, marginLeft: 6 }}>*</span>}
                  </div>
                  <input
                    className="ed-input"
                    style={{ borderBottomColor: "#f5f1ea33", color: "#f5f1ea" }}
                    placeholder={f.placeholder}
                    name={f.k}
                    type={f.k === "contact" ? "text" : "text"}
                    value={form[f.k]}
                    onChange={(e) => { setForm(s => ({ ...s, [f.k]: e.target.value })); if (submitState !== "idle") setSubmitState("idle"); }}
                    required={required}
                  />
                </label>
              );
            })}
            <button type="submit" disabled={submitState === "sending" || submitState === "sent"} className="ed-cta-primary" style={{ background: "#f5f1ea", color: "#14110c", marginTop: 16, justifySelf: "start", opacity: submitState === "sending" ? 0.6 : 1, cursor: submitState === "sent" ? "default" : "pointer" }}>
              {submitState === "sending" ? "Sending…" :
               submitState === "sent"    ? "Application received ✓" :
                                           "Submit application →"}
            </button>
            {submitState === "missing" && (
              <div className="ed-mono" style={{ marginTop: 16, fontSize: 11, color: accent, letterSpacing: "0.12em", textTransform: "uppercase" }}>
                Name and contact are required.
              </div>
            )}
            {submitState === "sent" && (
              <div className="ed-mono" style={{ marginTop: 16, fontSize: 11, opacity: 0.7, letterSpacing: "0.12em", textTransform: "uppercase" }}>
                We reply within 72 hours.
              </div>
            )}
            {submitState === "error" && (
              <div className="ed-mono" style={{ marginTop: 16, fontSize: 11, color: accent, letterSpacing: "0.12em", textTransform: "uppercase" }}>
                Something went wrong. Email {APPLY_EMAIL} directly.
              </div>
            )}
          </form>
        </div>
      </section>

      {/* ─── FOOTER ─── */}
      <footer style={{ padding: "48px 64px", borderTop: "1px solid #14110c22", display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "baseline", gap: 32 }}>
        <div className="ed-serif" style={{ fontSize: 24 }}>Galois <span className="ed-ital">Studio</span></div>
        <div style={{ display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap" }}>
          {C.footer.links.map((l) => {
            const id = footerTargets[l];
            return (
              <a key={l} href={`#${id}`} onClick={scrollTo(id)} className="ed-link-underline ed-mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "#14110c", textDecoration: "none", opacity: 0.75 }}>
                {l}
              </a>
            );
          })}
          <a href={`mailto:${APPLY_EMAIL}`} className="ed-link-underline ed-mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "#14110c", textDecoration: "none", opacity: 0.75 }}>
            Contact
          </a>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="ed-mono" style={{ fontSize: 11, opacity: 0.5, letterSpacing: "0.12em", textTransform: "uppercase" }}>{C.footer.copy}</div>
        </div>
      </footer>
    </div>
  );
}

window.DirectionEditorial = DirectionEditorial;
