// ff-rest.jsx — Blog, Testimonials, FAQ, Contact, Footer

const { useState: __r_useState, useEffect: __r_useEffect, useRef: __r_useRef } = React;

// ─────────── BLOG ───────────

const POST_TONES = ["ocean", "violet", "lime"];

function Blog({ s }) {
  return (
    <section id="blog" data-screen-label="06 Blog" className="section section-blog">
      <div className="wrap">
        <Reveal className="section-head" as="div">
          <div>
            <SectionEyebrow index={6} label={s.blog.eyebrow} />
            <h2>{s.blog.title}</h2>
          </div>
          <a href="#" className="btn btn-ghost btn-sm">
            {s.blog.allBtn} <span className="arrow">→</span>
          </a>
        </Reveal>

        <div className="blog-grid">
          {s.blog.posts.map((p, i) => (
            <Reveal key={p.title} as="article" delay={i + 1} className="post-card card">
              <div className="post-cover">
                <PostCover tone={POST_TONES[i % POST_TONES.length]} />
                <span className="post-cat">{p.cat}</span>
              </div>
              <div className="post-body">
                <h3 className="post-title">{p.title}</h3>
                <p className="post-desc">{p.desc}</p>
                <div className="post-meta">
                  <span>{p.date}</span>
                  <span className="post-dot" />
                  <span>{p.read}{s.blog.readSuffix}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PostCover({ tone }) {
  const tones = {
    ocean:  ["#0c1830", "#3b82f6"],
    violet: ["#1d0a3a", "#8b5cf6"],
    lime:   ["#0d1a04", "#84cc16"],
  };
  const [c1, c2] = tones[tone] || tones.ocean;
  return (
    <svg viewBox="0 0 320 160" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id={`pc-${tone}`} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor={c1} />
          <stop offset="100%" stopColor={c2} stopOpacity="0.5" />
        </linearGradient>
      </defs>
      <rect width="320" height="160" fill={`url(#pc-${tone})`} />
      {[...Array(14)].map((_, i) => (
        <path key={i}
          d={`M 0 ${20 + i * 12} Q 80 ${10 + i * 12} 160 ${20 + i * 12} T 320 ${20 + i * 12}`}
          stroke={c2} strokeOpacity={0.15 + (i % 4) * 0.05} strokeWidth="1" fill="none"
        />
      ))}
    </svg>
  );
}

// ─────────── TESTIMONIALS ───────────

const TEST_META = [
  { name: "Mira Holvik",     company: "Northbound Logistics", initials: "MH", tone: "ocean" },
  { name: "Daniyar Aitov",   company: "Steplane",             initials: "DA", tone: "amber" },
  { name: "Léa Tremblay",    company: "Cargon Group",         initials: "LT", tone: "rose" },
  { name: "Ben Asare",       company: "Lumen Health",         initials: "BA", tone: "teal" },
];

function Testimonials({ s }) {
  const [i, setI] = __r_useState(0);
  const hover = __r_useRef(false);
  const total = s.test.items.length;
  __r_useEffect(() => {
    const id = setInterval(() => {
      if (!hover.current) setI((v) => (v + 1) % total);
    }, 6500);
    return () => clearInterval(id);
  }, [total]);
  const all = s.test.items.map((it, idx) => ({ ...it, ...TEST_META[idx] }));
  const t = all[i];
  const dropCap = (t.quote || "").trim().charAt(0);
  const restOfQuote = (t.quote || "").trim().slice(1);
  return (
    <section
      id="testimonials" data-screen-label="07 Testimonials"
      className="section section-test"
      onMouseEnter={() => (hover.current = true)}
      onMouseLeave={() => (hover.current = false)}
    >
      <div className="wrap">
        <Reveal className="section-head" as="div">
          <div>
            <SectionEyebrow index={7} label={s.test.eyebrow} />
            <h2>{s.test.title}</h2>
          </div>
        </Reveal>

        <figure className="test-page" aria-live="polite">
          <div className="test-page-rule test-page-rule-l" aria-hidden="true" />
          <div className="test-page-rule test-page-rule-r" aria-hidden="true" />

          <div className="test-page-index" aria-hidden="true">
            <span className="test-page-index-n">{String(i + 1).padStart(2, "0")}</span>
            <span className="test-page-index-s">/</span>
            <span className="test-page-index-t">{String(total).padStart(2, "0")}</span>
          </div>

          <div key={`body-${i}`} className="test-page-body">
            <blockquote className="test-quote">
              <span className={`test-dropcap test-dropcap-${t.tone}`} aria-hidden="true">{dropCap}</span>
              <span className="test-quote-text">{restOfQuote}</span>
            </blockquote>

            <figcaption className="test-sign">
              <span className="test-sign-rule" aria-hidden="true" />
              <span className={`test-avatar test-avatar-${t.tone}`} aria-hidden="true">{t.initials}</span>
              <span className="test-sign-name">{t.name}</span>
              <span className="test-sign-role">{t.role}, {t.company}</span>
            </figcaption>
          </div>
        </figure>

        <div className="test-tabs" role="tablist" aria-label="Testimonials">
          {all.map((_, k) => (
            <button
              key={k}
              type="button"
              role="tab"
              aria-selected={i === k}
              aria-label={`Testimonial ${k + 1} of ${total}`}
              className={`test-tab ${i === k ? "on" : ""}`}
              onClick={() => setI(k)}
            >
              <span className="test-tab-fill" />
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}


// ─────────── FAQ ───────────

function FAQ({ s }) {
  const [open, setOpen] = __r_useState(0);
  return (
    <section id="faq" data-screen-label="08 FAQ" className="section section-faq">
      <div className="wrap faq-wrap">
        <Reveal className="faq-head" as="div">
          <SectionEyebrow index={8} label={s.faq.eyebrow} />
          <h2>{s.faq.title}</h2>
        </Reveal>

        <div className="faq-list">
          {s.faq.items.map((f, i) => (
            <Reveal key={f.q} as="div" delay={Math.min(i + 1, 5)} className={`faq-item ${open === i ? "open" : ""}`}>
              <button type="button" className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-n">{String(i + 1).padStart(2, "0")}</span>
                <span className="faq-qt">{f.q}</span>
                <span className="faq-icon" aria-hidden="true">
                  <span /><span />
                </span>
              </button>
              <div className="faq-a-wrap">
                <div className="faq-a">{f.a}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── CONTACT ───────────

function Contact({ s }) {
  const [sent, setSent] = __r_useState(false);
  const [form, setForm] = __r_useState({ name: "", email: "", phone: "", company: "", brief: "", agree: false });
  const [errors, setErrors] = __r_useState({});

  const update = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
    setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = s.contact.errRequired;
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = s.contact.errEmail;
    if (!form.brief.trim()) er.brief = s.contact.errBrief;
    if (!form.agree) er.agree = s.contact.errAgree;
    setErrors(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  const f = s.contact.fields;

  return (
    <section id="contact" data-screen-label="09 Contact" className="section section-contact">
      <div className="wrap contact-wrap">
        <div className="contact-left">
          <Reveal as="div">
            <SectionEyebrow index={9} label={s.contact.eyebrow} />
            <h2 className="contact-title">{s.contact.title[0]}<br />{s.contact.title[1]}</h2>
            <p className="contact-lede">{s.contact.lede}</p>
          </Reveal>

          <Reveal as="div" delay={2} className="contact-channels">
            {s.contact.channels.map((c, i) => (
              <a key={i} href="#" className="contact-channel">
                <span className="contact-channel-l">{c.l}</span>
                <span className="contact-channel-v">{c.v}</span>
              </a>
            ))}
          </Reveal>
        </div>

        <Reveal as="div" delay={2} className="contact-right">
          {sent ? (
            <div className="contact-thanks card">
              <div className="contact-thanks-mark">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                  <circle cx="20" cy="20" r="19" stroke="var(--accent)" strokeWidth="1" />
                  <path d="M12 21l6 6 12-14" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                </svg>
              </div>
              <h3>{s.contact.thanksTitle}{form.name ? `, ${form.name.split(" ")[0]}` : ""}.</h3>
              <p>{s.contact.thanksBody}</p>
              <button type="button" className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", company: "", brief: "", agree: false }); }}>
                {s.contact.thanksAgain}
              </button>
            </div>
          ) : (
            <form className="contact-form card" onSubmit={submit} noValidate>
              <Field label={f.name} error={errors.name}>
                <input type="text" value={form.name} onChange={update("name")} placeholder={f.namePh} />
              </Field>
              <div className="contact-row-2">
                <Field label={f.email} error={errors.email}>
                  <input type="email" value={form.email} onChange={update("email")} placeholder={f.emailPh} />
                </Field>
                <Field label={f.phone}>
                  <input type="tel" value={form.phone} onChange={update("phone")} placeholder={f.phonePh} />
                </Field>
              </div>
              <Field label={f.company}>
                <input type="text" value={form.company} onChange={update("company")} placeholder={f.companyPh} />
              </Field>
              <Field label={f.brief} error={errors.brief}>
                <textarea rows="4" value={form.brief} onChange={update("brief")} placeholder={f.briefPh} />
              </Field>
              <label className={`contact-agree ${errors.agree ? "err" : ""}`}>
                <input type="checkbox" checked={form.agree} onChange={update("agree")} />
                <span>{f.agree}</span>
              </label>
              <button type="submit" className="btn btn-primary btn-lg contact-submit">
                {s.contact.submit} <span className="arrow">→</span>
              </button>
              <div className="contact-fineprint">
                {s.contact.fineprintPre}<strong>11h</strong>{s.contact.fineprintPost}
              </div>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

function Field({ label, error, children }) {
  return (
    <label className={`field ${error ? "err" : ""}`}>
      <span className="field-l">
        <span>{label}</span>
        {error && <span className="field-err">{error}</span>}
      </span>
      {children}
    </label>
  );
}

// ─────────── FOOTER ───────────

// Brand glyphs — Simple Icons paths, monochrome via currentColor.
const BRAND_GLYPHS = {
  linkedin: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z" />
    </svg>
  ),
  x: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z" />
    </svg>
  ),
  youtube: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z" />
    </svg>
  ),
  github: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
    </svg>
  ),
  openai: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M22.282 9.821a6 6 0 0 0-.516-4.91a6.05 6.05 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a6 6 0 0 0-3.998 2.9a6.05 6.05 0 0 0 .743 7.097a5.98 5.98 0 0 0 .51 4.911a6.05 6.05 0 0 0 6.515 2.9A6 6 0 0 0 13.26 24a6.06 6.06 0 0 0 5.772-4.206a6 6 0 0 0 3.997-2.9a6.06 6.06 0 0 0-.747-7.073M13.26 22.43a4.48 4.48 0 0 1-2.876-1.04l.141-.081l4.779-2.758a.8.8 0 0 0 .392-.681v-6.737l2.02 1.168a.07.07 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494M3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085l4.783 2.759a.77.77 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646M2.34 7.896a4.5 4.5 0 0 1 2.366-1.973V11.6a.77.77 0 0 0 .388.677l5.815 3.354l-2.02 1.168a.08.08 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.08.08 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667m2.01-3.023l-.141-.085l-4.774-2.782a.78.78 0 0 0-.785 0L9.409 9.23V6.897a.07.07 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.8.8 0 0 0-.393.681zm1.097-2.365l2.602-1.5l2.607 1.5v2.999l-2.597 1.5l-2.607-1.5Z" />
    </svg>
  ),
  anthropic: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M17.304 3.541h-3.672l6.696 16.918H24Zm-10.608 0L0 20.459h3.744l1.37-3.553h7.005l1.369 3.553h3.744L10.536 3.541Zm-.371 10.223L8.616 7.82l2.291 5.945Z" />
    </svg>
  ),
  perplexity: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M22.398 7.09h-2.31V.068l-7.51 6.354V.158h-1.156v6.196L4.49 0v7.09H1.602v10.397H4.49V24l6.933-6.36v6.201h1.155v-6.047l6.932 6.181v-6.488h2.888zm-3.466-4.531v4.53h-5.355zm-13.286.067l4.869 4.464h-4.87zM2.758 16.332V8.245h7.847L4.49 14.36v1.972zm2.888 5.04v-6.534l5.776-5.776v7.011zm12.708.025l-5.776-5.15V9.061l5.776 5.776zm2.889-5.065H19.51V14.36l-6.115-6.115h7.848z" />
    </svg>
  ),
  gemini: (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68q.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58a12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68q-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96q2.19.93 3.81 2.55t2.55 3.81" />
    </svg>
  ),
};

// Solar Bold Duotone — arrow-right-up + letter (mail).
const SolarArrowUpRight = () => (
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="solar-ico">
    <path fill="currentColor" fillRule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clipRule="evenodd" />
    <path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" />
  </svg>
);
const SolarLetter = () => (
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" className="solar-ico">
    <path fill="currentColor" d="M14.2 3H9.8C5.652 3 3.577 3 2.289 4.318S1 7.758 1 12s0 6.364 1.289 7.682S5.652 21 9.8 21h4.4c4.148 0 6.223 0 7.511-1.318S23 16.242 23 12s0-6.364-1.289-7.682S18.348 3 14.2 3" opacity=".5" />
    <path fill="currentColor" d="M19.128 8.033a.825.825 0 0 0-1.056-1.268l-2.375 1.98c-1.026.855-1.738 1.447-2.34 1.833c-.582.375-.977.5-1.357.5s-.774-.125-1.357-.5c-.601-.386-1.314-.978-2.34-1.834L5.928 6.765a.825.825 0 0 0-1.056 1.268l2.416 2.014c.975.812 1.765 1.47 2.463 1.92c.726.466 1.434.762 2.25.762c.814 0 1.522-.296 2.249-.763c.697-.448 1.487-1.107 2.462-1.92z" />
  </svg>
);

const FOOTER_SOCIALS = [
  { key: "linkedin", label: "LinkedIn", href: "https://www.linkedin.com/company/wayrelay-studio" },
  { key: "x",        label: "X",        href: "https://x.com/wayrelay_team" },
  { key: "youtube",  label: "YouTube",  href: "https://www.youtube.com/@wayrelay" },
  { key: "github",   label: "GitHub",   href: "https://github.com/wayrelay-studio" },
];

const FOOTER_AI_TARGETS = [
  { key: "chatgpt",    glyph: "openai",     label: "ChatGPT",    url: (q) => `https://chatgpt.com/?q=${q}` },
  { key: "claude",     glyph: "anthropic",  label: "Claude",     url: (q) => `https://claude.ai/new?q=${q}` },
  { key: "perplexity", glyph: "perplexity", label: "Perplexity", url: (q) => `https://www.perplexity.ai/?q=${q}` },
  { key: "gemini",     glyph: "gemini",     label: "Gemini",     url: (q) => `https://gemini.google.com/app?q=${q}` },
];

function Footer({ s }) {
  const prompt = s.footer.askPrompt;
  const encoded = encodeURIComponent(prompt);
  const year = new Date().getFullYear();

  return (
    <footer className="footer" data-screen-label="10 Footer">
      <div className="wrap">

        {/* ── ASK AI · prompt console ── */}
        <section className="footer-ai" aria-labelledby="footer-ai-h">
          <header className="footer-ai-head">
            <div className="footer-ai-eyebrow">{s.footer.askEyebrow}</div>
            <h3 id="footer-ai-h" className="footer-ai-title">{s.footer.askTitle}</h3>
            <p className="footer-ai-sub">{s.footer.askSub}</p>
          </header>

          <div className="footer-ai-console">
            <div className="footer-ai-prompt">
              <span className="footer-ai-prompt-caret">{"›"}</span>
              <span className="footer-ai-prompt-text">{prompt}</span>
            </div>
            <div className="footer-ai-chips">
              {FOOTER_AI_TARGETS.map((t) => (
                <a
                  key={t.key}
                  className="footer-ai-chip"
                  href={t.url(encoded)}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={`${s.footer.askVerb} ${t.label}`}
                >
                  <span className="footer-ai-chip-glyph" aria-hidden="true">
                    {BRAND_GLYPHS[t.glyph]}
                  </span>
                  <span className="footer-ai-chip-label">{t.label}</span>
                  <span className="footer-ai-chip-ext" aria-hidden="true">
                    <SolarArrowUpRight />
                  </span>
                </a>
              ))}
            </div>
          </div>
        </section>

        {/* ── hairline divider ── */}
        <div className="footer-rule" />

        {/* ── brand · nav · contact · social ── */}
        <div className="footer-grid">

          <div className="footer-brand">
            <div className="footer-brand-mark">
              <BrandLogo height={26} />
            </div>
            <p className="footer-tagline">{s.footer.tagline}</p>
            <ul className="footer-socials" aria-label={s.footer.colSocial}>
              {FOOTER_SOCIALS.map((soc) => (
                <li key={soc.key}>
                  <a
                    className="footer-social"
                    href={soc.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={soc.label}
                    title={soc.label}
                  >
                    {BRAND_GLYPHS[soc.key]}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <nav className="footer-cols" aria-label="Sitemap">
            <div className="footer-col">
              <div className="footer-col-h">{s.footer.colStudio}</div>
              <a href="#services">{s.nav.services}</a>
              <a href="#subscription">{s.nav.subscription}</a>
              <a href="#cases">{s.nav.cases}</a>
              <a href="#process">{s.nav.process}</a>
            </div>
            <div className="footer-col">
              <div className="footer-col-h">{s.footer.colResources}</div>
              <a href="#blog">{s.nav.blog}</a>
              <a href="#faq">{s.nav.faq}</a>
              <a href="#">{s.footer.privacy}</a>
              <a href="#">{s.footer.terms}</a>
            </div>
            <div className="footer-col">
              <div className="footer-col-h">{s.footer.colContact}</div>
              <a className="footer-contact" href="mailto:hello@wayrelay.studio">
                <span className="footer-contact-ico" aria-hidden="true"><SolarLetter /></span>
                hello@wayrelay.studio
              </a>
              <a href="https://t.me/wayrelay_team" target="_blank" rel="noopener noreferrer">@wayrelay_team</a>
              <a href="https://cal.com/wayrelay" target="_blank" rel="noopener noreferrer">cal.com/wayrelay</a>
            </div>
          </nav>

        </div>

        <div className="footer-base">
          <span className="footer-base-copy">{s.footer.copyright}</span>
        </div>

      </div>
    </footer>
  );
}

Object.assign(window, { Blog, Testimonials, FAQ, Contact, Footer });