// Shared bits: form placeholder, stats data, service data, page-title label helper.

const COFORMA_STATS = [
  { value: "25+", label: "Years operating in Brazil" },
  { value: "100s", label: "Companies formed" },
  { value: "EN", label: "English-language service" },
  { value: "SP", label: "São Paulo-based team" },
];

const COFORMA_CORE_SERVICES = [
  {
    key: "formation",
    num: "01",
    title: "Incorporation package",
    brief: "A defined incorporation service for international clients: legal structuring, CNPJ registration, required state and municipal registrations, and practical guidance for opening the business in Brazil."
  },
];

const COFORMA_ONGOING_SERVICES = [
  {
    key: "accounting",
    num: "03",
    title: "Accounting & Tax Compliance",
    brief: "Ongoing monthly tax filings, book-keeping, financial statements, and regulatory reporting for foreign-owned entities.",
    href: "accounting-compliance.html"
  },
  {
    key: "trademarks",
    num: "04",
    title: "Trademarks & IP Protection",
    brief: "Trademark searching, applications, brand defense, and ongoing monitoring against infringement in Brazil.",
    href: "ip-services.html"
  },
  {
    key: "compliance",
    num: "05",
    title: "Corporate Governance & Housekeeping",
    brief: "Annual filings, legal representation of foreign shareholders, license renewals, and corporate record keeping.",
    href: "accounting-compliance.html"
  },
];

const COFORMA_SERVICES = [...COFORMA_CORE_SERVICES, ...COFORMA_ONGOING_SERVICES];

// Interactive Contact Form — styled to match broadsheet, integrated with Bootstrap Studio form handler
function ContactBlock({ variant = "light" }) {
  const dark = variant === "dark";
  const bg = dark ? "transparent" : "transparent";
  const fg = dark ? "#f4f1ea" : "#141311";
  const muted = dark ? "rgba(244,241,234,.6)" : "rgba(20,19,17,.55)";
  const rule = dark ? "rgba(244,241,234,.18)" : "rgba(20,19,17,.14)";

  return (
    <div id="contact" style={{ background: bg, color: fg, padding: "80px 0", borderTop: `1px solid ${rule}` }}>
      <div className="contact-grid" style={{ maxWidth: 1100, margin: "0 auto", padding: "0 40px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <div className="caps mono" style={{ fontSize: 11, color: muted, marginBottom: 24 }}>— Incorporation enquiry</div>
          <h2 className="serif" style={{ fontSize: "clamp(34px, 4vw, 64px)", lineHeight: 1.02, margin: 0, letterSpacing: "-0.02em" }}>
            Start with incorporation.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, marginTop: 24, color: muted, maxWidth: 420 }}>
            This form is for international clients actively considering the incorporation of a company in Brazil. Send a short note about your intended business and we will reply personally, usually within one business day.
          </p>
        </div>

        <div>
          <form
            data-bss-recipient="f22813588f111c1963b355ae83c8e878"
            data-bss-subject="CoForma Company Incorporation Enquiry"
            data-bss-redirect-url="confirmation.html"
            style={{ border: `1px solid ${rule}`, padding: "32px", background: dark ? "rgba(255,255,255,.02)" : "rgba(0,0,0,.015)" }}
          >
            <div className="caps mono" style={{ fontSize: 10, color: muted, marginBottom: 24 }}>Company incorporation</div>

            {/* Name */}
            <div style={{ marginBottom: 20 }}>
              <label className="mono caps" style={{ display: "block", fontSize: 10, color: muted, marginBottom: 6 }}>Full Name *</label>
              <input
                type="text"
                name="name"
                required
                placeholder="Jane Doe"
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  borderBottom: `1px solid ${rule}`,
                  padding: "8px 0",
                  color: fg,
                  fontSize: 14,
                  outline: "none",
                  fontFamily: "Inter"
                }}
              />
            </div>

            {/* Company */}
            <div style={{ marginBottom: 20 }}>
              <label className="mono caps" style={{ display: "block", fontSize: 10, color: muted, marginBottom: 6 }}>Company / Organization</label>
              <input
                type="text"
                name="company"
                placeholder="Acme Corp"
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  borderBottom: `1px solid ${rule}`,
                  padding: "8px 0",
                  color: fg,
                  fontSize: 14,
                  outline: "none",
                  fontFamily: "Inter"
                }}
              />
            </div>

            {/* Email */}
            <div style={{ marginBottom: 20 }}>
              <label className="mono caps" style={{ display: "block", fontSize: 10, color: muted, marginBottom: 6 }}>Email Address *</label>
              <input
                type="email"
                name="email"
                required
                placeholder="jane@company.com"
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  borderBottom: `1px solid ${rule}`,
                  padding: "8px 0",
                  color: fg,
                  fontSize: 14,
                  outline: "none",
                  fontFamily: "Inter"
                }}
              />
            </div>

            {/* Phone */}
            <div style={{ marginBottom: 20 }}>
              <label className="mono caps" style={{ display: "block", fontSize: 10, color: muted, marginBottom: 6 }}>Phone Number</label>
              <input
                type="tel"
                name="phone"
                placeholder="+1 555 000 0000"
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  borderBottom: `1px solid ${rule}`,
                  padding: "8px 0",
                  color: fg,
                  fontSize: 14,
                  outline: "none",
                  fontFamily: "Inter"
                }}
              />
            </div>

            {/* Subject */}
            <div style={{ marginBottom: 20 }}>
              <label className="mono caps" style={{ display: "block", fontSize: 10, color: muted, marginBottom: 6 }}>Subject</label>
              <input
                type="text"
                name="subject"
                placeholder="Company incorporation in Brazil"
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  borderBottom: `1px solid ${rule}`,
                  padding: "8px 0",
                  color: fg,
                  fontSize: 14,
                  outline: "none",
                  fontFamily: "Inter"
                }}
              />
            </div>

            {/* Message */}
            <div style={{ marginBottom: 28 }}>
              <label className="mono caps" style={{ display: "block", fontSize: 10, color: muted, marginBottom: 6 }}>What are you setting up in Brazil? *</label>
              <textarea
                name="message"
                rows="3"
                required
                placeholder="Brief summary of your project..."
                style={{
                  width: "100%",
                  background: "transparent",
                  border: 0,
                  borderBottom: `1px solid ${rule}`,
                  padding: "8px 0",
                  color: fg,
                  fontSize: 14,
                  outline: "none",
                  fontFamily: "Inter",
                  resize: "vertical"
                }}
              />
            </div>

            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, paddingTop: 8 }}>
              <span className="mono" style={{ fontSize: 11, color: muted }}>No newsletter. Just a reply.</span>
              <button
                type="submit"
                style={{
                  background: fg,
                  color: dark ? "#141311" : "#f4f1ea",
                  border: 0,
                  padding: "12px 24px",
                  fontFamily: "Inter",
                  fontSize: 13,
                  letterSpacing: ".04em",
                  cursor: "pointer"
                }}
              >
                Send message →
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { COFORMA_STATS, COFORMA_SERVICES, COFORMA_CORE_SERVICES, COFORMA_ONGOING_SERVICES, ContactBlock });