/* ============================================================
   Agency BRN — Process, Multilingual, Final CTA, Footer
   ============================================================ */

/* ---------- Process ---------- */
function Process() {
  const { t } = React.useContext(window.LanguageContext);
  return (
    <section className="section section--light" id="process">
      <div className="container">
        <div className="section__header section__header--center reveal">
          <span className="eyebrow"><span className="dot" /> {t.process.eyebrow}</span>
          <h2>
            {t.process.h2A}
            <span className="text-grad">{t.process.h2Grad}</span>
            {t.process.h2B}
          </h2>
          <p className="lede" style={{ margin: "22px auto 0" }}>{t.process.lede}</p>
        </div>

        <div className="process-grid">
          {t.process.steps.map((s, i) => (
            <div key={i} className="process-step reveal" data-delay={i + 1}>
              <span className="process-step__num">0{i + 1}</span>
              <div className="process-step__label">{s.label}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Multilingual ---------- */
function Multilingual() {
  const { t } = React.useContext(window.LanguageContext);
  const flCities = ["Orlando", "Kissimmee", "Miami", "Doral", "Hialeah", "Pompano Beach", "Deerfield Beach", "Boca Raton", "Tampa"];
  return (
    <section className="section section--dark" id="multilingual">
      <div className="grid-overlay" />
      <div className="container">
        <div className="section__header reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow"><span className="dot" /> {t.multi.eyebrow}</span>
          <h2>
            {t.multi.h2A}
            <span className="text-grad">{t.multi.h2Grad}</span>
            {t.multi.h2B}
          </h2>
          <p className="lede">{t.multi.body}</p>
          <p style={{ marginTop: 18, fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.55)" }}>
            {t.multi.body2}
          </p>
        </div>

        <div className="lang-showcase">
          {t.multi.langs.map((l, i) => (
            <div key={l.code} className="lang-card reveal" data-delay={i + 1}>
              <div className="lang-card__flag">
                <span className="badge">{l.code}</span>
                <span>{l.name}</span>
              </div>
              <div className="sample-h">{l.sampleH}</div>
              <div className="sample-b">{l.sampleB}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.08)" }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.12em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase", marginBottom: 14 }}>
            {t.multi.citiesLabel}
          </div>
          <div className="cities-row">
            {flCities.map((c) => (
              <span key={c} className="city-pill">{c}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA + Contact Form ---------- */
function FinalCTA() {
  const { t } = React.useContext(window.LanguageContext);
  const [form, setForm] = React.useState({
    name: "", business: "", email: "", phone: "", website: "", industry: "", service: "", message: "",
  });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const onChange = (e) => {
    setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
    setErrors((p) => ({ ...p, [e.target.name]: null }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = "Required";
    if (!form.email.trim() || !/^\S+@\S+\.\S+$/.test(form.email)) errs.email = "Valid email required";
    if (!form.phone.trim()) errs.phone = "Required";
    if (!form.industry || form.industry === t.finalCta.form.industryOptions[0]) errs.industry = "Select one";
    if (!form.service || form.service === t.finalCta.form.serviceOptions[0]) errs.service = "Select one";
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setSent(true);
  };

  const infoIcons = [<Icon.Phone />, <Icon.Pin width="20" height="20" />, <Icon.Clock />];

  return (
    <section className="section section--light" id="contact" style={{ background: "linear-gradient(180deg, #FAFBFC 0%, #F0F4FB 100%)" }}>
      <div className="container">
        <div className="section__header reveal" style={{ maxWidth: 760 }}>
          <span className="eyebrow"><span className="dot" /> {t.finalCta.eyebrow}</span>
          <h2>
            {t.finalCta.h2A}
            <span className="text-grad">{t.finalCta.h2Grad}</span>
            {t.finalCta.h2B}
          </h2>
          <p className="lede">{t.finalCta.body}</p>
        </div>

        <div className="cta-grid">
          <form className="contact-form reveal" onSubmit={onSubmit} noValidate>
            {sent ? (
              <div className="form-success">
                <div className="icon"><Icon.Check width="28" height="28" /></div>
                <h3>{t.finalCta.success.title}</h3>
                <p>{t.finalCta.success.body}</p>
              </div>
            ) : (
              <React.Fragment>
                <div className="form-row form-row--2">
                  <div className="field">
                    <label>{t.finalCta.form.name} <span className="req">*</span></label>
                    <input name="name" value={form.name} onChange={onChange} type="text" autoComplete="name" />
                    {errors.name && <span className="err">{errors.name}</span>}
                  </div>
                  <div className="field">
                    <label>{t.finalCta.form.business}</label>
                    <input name="business" value={form.business} onChange={onChange} type="text" autoComplete="organization" />
                  </div>
                </div>
                <div className="form-row form-row--2" style={{ marginTop: 16 }}>
                  <div className="field">
                    <label>{t.finalCta.form.email} <span className="req">*</span></label>
                    <input name="email" value={form.email} onChange={onChange} type="email" autoComplete="email" />
                    {errors.email && <span className="err">{errors.email}</span>}
                  </div>
                  <div className="field">
                    <label>{t.finalCta.form.phone} <span className="req">*</span></label>
                    <input name="phone" value={form.phone} onChange={onChange} type="tel" autoComplete="tel" />
                    {errors.phone && <span className="err">{errors.phone}</span>}
                  </div>
                </div>
                <div className="form-row" style={{ marginTop: 16 }}>
                  <div className="field">
                    <label>{t.finalCta.form.website}</label>
                    <input name="website" value={form.website} onChange={onChange} type="url" placeholder="https://" />
                  </div>
                </div>
                <div className="form-row form-row--2" style={{ marginTop: 16 }}>
                  <div className="field">
                    <label>{t.finalCta.form.industry} <span className="req">*</span></label>
                    <select name="industry" value={form.industry} onChange={onChange}>
                      {t.finalCta.form.industryOptions.map((opt, i) => (
                        <option key={i} value={i === 0 ? "" : opt}>{opt}</option>
                      ))}
                    </select>
                    {errors.industry && <span className="err">{errors.industry}</span>}
                  </div>
                  <div className="field">
                    <label>{t.finalCta.form.service} <span className="req">*</span></label>
                    <select name="service" value={form.service} onChange={onChange}>
                      {t.finalCta.form.serviceOptions.map((opt, i) => (
                        <option key={i} value={i === 0 ? "" : opt}>{opt}</option>
                      ))}
                    </select>
                    {errors.service && <span className="err">{errors.service}</span>}
                  </div>
                </div>
                <div className="form-row" style={{ marginTop: 16 }}>
                  <div className="field">
                    <label>{t.finalCta.form.message}</label>
                    <textarea
                      name="message"
                      value={form.message}
                      onChange={onChange}
                      placeholder={t.finalCta.form.messagePh}
                    />
                  </div>
                </div>
                <button type="submit" className="btn btn--primary btn--lg" style={{ width: "100%", marginTop: 22 }}>
                  {t.finalCta.form.submit}
                  <Icon.ArrowRight className="arrow" />
                </button>
                <p className="form-disclaimer">{t.finalCta.form.disclaimer}</p>
              </React.Fragment>
            )}
          </form>

          <div className="cta-info reveal" data-delay="1">
            {t.finalCta.info.map((info, i) => (
              <div key={i} className="info-block">
                <div className="info-block__icon">{infoIcons[i]}</div>
                <div>
                  <div className="info-block__label">{info.label}</div>
                  <div className="info-block__value">
                    {info.label === "Phone" || info.label === "Telefone" || info.label === "Teléfono"
                      ? <a href="tel:3102901824">{info.value}</a>
                      : info.value}
                    <span className="meta">{info.meta}</span>
                  </div>
                </div>
              </div>
            ))}

            <div style={{
              background: "linear-gradient(135deg, #0A1628 0%, #152844 100%)",
              borderRadius: "var(--r-xl)",
              padding: 24,
              color: "#fff",
              border: "1px solid rgba(255,255,255,0.05)",
              boxShadow: "var(--shadow-md)",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                <Icon.Sparkle style={{ color: "#22D3EE", width: 18, height: 18 }} />
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "#22D3EE" }}>
                  Multilingual support
                </span>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}>
                Atendimento em português, inglês e español.
              </div>
              <div style={{ fontSize: 13, color: "rgba(255,255,255,0.55)", marginTop: 8 }}>
                Speak with us in whichever language fits your business.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const { t } = React.useContext(window.LanguageContext);
  return (
    <footer className="footer" id="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <a href="#home" className="logo">
              <span className="logo__mark">BRN</span>
              <span>Agency BRN</span>
            </a>
            <p className="footer__about">{t.footer.about}</p>
            <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
              <a href="tel:3102901824" className="btn btn--ghost-dark btn--sm">
                <Icon.Phone width="14" height="14" />
                310-290-1824
              </a>
            </div>
          </div>

          <div className="footer__col">
            <h4>{t.footer.cols.company.title}</h4>
            <ul>
              {t.footer.cols.company.items.map((it, i) => (
                <li key={i}><a href={["#home", "#about", "#services", "#industries", "#blog", "#contact"][i] || "#"}>{it}</a></li>
              ))}
            </ul>
          </div>

          <div className="footer__col">
            <h4>{t.footer.cols.services.title}</h4>
            <ul>
              {t.footer.cols.services.items.map((it, i) => (
                <li key={i}><a href="#services">{it}</a></li>
              ))}
            </ul>
          </div>

          <div className="footer__col">
            <h4>{t.footer.cols.locations.title}</h4>
            <ul>
              {t.footer.cols.locations.items.map((it, i) => (
                <li key={i}><a href="#orlando">{it}, FL</a></li>
              ))}
              <li><a href="orlando-internet-marketing-service.html">Orlando Marketing Service →</a></li>
            </ul>
          </div>

          <div className="footer__col">
            <h4>{t.footer.cols.contact.title}</h4>
            <ul>
              <li><a href="tel:3102901824">{t.footer.cols.contact.phone}</a></li>
              <li style={{ color: "rgba(255,255,255,0.55)" }}>{t.footer.cols.contact.hours}</li>
              <li style={{ color: "rgba(255,255,255,0.55)" }}>{t.footer.cols.contact.address}</li>
            </ul>
          </div>
        </div>

        <div className="footer__seo">
          <strong>Agency BRN — Internet Marketing Service in Orlando, FL.</strong>{" "}
          {t.footer.seoCopy}
        </div>

        <div className="footer__bottom">
          <div>{t.footer.copyright}</div>
          <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
            {t.footer.legal.map((l, i) => (
              <a key={i} href="#" style={{ color: "rgba(255,255,255,0.5)" }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Process = Process;
window.Multilingual = Multilingual;
window.FinalCTA = FinalCTA;
window.Footer = Footer;