// V1 — BROADSHEET
// Warm off-white paper. Deep ink. Editorial serif dominant. Hairline rules.
// Feels like the front page of a serious financial broadsheet.

function HomeBroadsheet({ tweaks }) {
  const paper = "#f4f1ea";
  const ink = "#141311";
  const muted = "rgba(20,19,17,.55)";
  const rule = "rgba(20,19,17,.18)";
  const accent = tweaks.showAccent ? "#8a4a2b" : ink; // muted burnt sienna, safe across CVD types

  return (
    <div style={{ background: paper, color: ink, minHeight: "100vh", fontFamily: "Inter" }}>
      {/* NAV */}
      <BroadsheetNav ink={ink} muted={muted} rule={rule} />

      {/* MASTHEAD DATE STRIP */}
      <div style={{ borderTop: `1px solid ${rule}`, borderBottom: `1px solid ${rule}` }}>
        <div className="masthead-strip mono caps" style={{ color: muted }}>
          <span>São Paulo · Founded 2001</span>
          <span className="hide-mobile">Vol. XXV — Company Formations in Brazil</span>
          <span>English-language service</span>
        </div>
      </div>

      {/* HERO */}
      <section style={{ maxWidth: 1360, margin: "0 auto", padding: "120px 40px 100px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 0 }}>
          <div className="caps mono" style={{ fontSize: 11, color: muted, marginBottom: 32, display: "flex", flexWrap: "wrap", gap: "8px 16px" }}>
            <span style={{ color: accent }}>№ 001</span>
            <span>Incorporation package for international clients</span>
          </div>
          {tweaks.headline === "incorporate" ? (
            <h1 className="serif" style={{
              fontSize: "clamp(48px, 11vw, 200px)",
              lineHeight: 0.92,
              letterSpacing: "-0.035em",
              margin: 0,
              maxWidth: "12ch",
            }}>
              Company Formation<br />Brazil
            </h1>
          ) : (
            <h1 className="serif" style={{
              fontSize: "clamp(44px, 9vw, 148px)",
              lineHeight: 0.95,
              letterSpacing: "-0.03em",
              margin: 0,
              maxWidth: "16ch",
            }}>
              Company Formation<br />Brazil
            </h1>
          )}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, marginTop: 60, alignItems: "start" }}>
            <div>
              <p className="news" style={{ fontSize: 22, lineHeight: 1.45, margin: 0, fontWeight: 400 }}>
                CoForma provides a straightforward incorporation package for international clients establishing a business in Brazil. We focus first on getting the company properly formed, with clear communication and practical guidance throughout the process.
              </p>
              <div className="hero-cta-group" style={{ marginTop: 40, display: "flex", gap: 24, alignItems: "center" }}>
                <a href="#contact" style={{ background: ink, color: paper, padding: "16px 28px", textDecoration: "none", fontSize: 14, letterSpacing: ".04em" }}>Start a conversation →</a>
                <a href="#services" style={{ color: ink, textDecoration: "underline", textUnderlineOffset: 6, fontSize: 14 }}>See how we work</a>
              </div>
            </div>
            <div>
              <div className="record-stats" style={{ paddingLeft: 32, borderLeft: `1px solid ${rule}` }}>
                <div className="caps mono" style={{ fontSize: 10, color: muted, marginBottom: 12 }}>The record</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "32px 40px" }}>
                  {COFORMA_STATS.map((s, i) => (
                    <div key={i}>
                      <div className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em" }}>{s.value}</div>
                      <div style={{ fontSize: 12, marginTop: 8, color: muted, lineHeight: 1.35 }}>{s.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* LEDE IMAGE */}
      <section style={{ maxWidth: 1360, margin: "0 auto", padding: "0 40px" }}>
        <figure style={{ margin: 0 }}>
          <div style={{ aspectRatio: "16/7", background: `url(assets/sp-aerial.jpg) center/cover`, filter: "grayscale(1) contrast(1.05)", position: "relative" }}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(20,19,17,.1), transparent 40%)" }} />
          </div>
          <figcaption className="mono caps" style={{ fontSize: 11, color: muted, padding: "14px 0", display: "flex", justifyContent: "space-between", borderBottom: `1px solid ${rule}` }}>
            <span>Fig. 01 — São Paulo, seat of business</span>
            <span>Avenida Paulista</span>
          </figcaption>
        </figure>
      </section>

      {/* POSITIONING — three-column editorial */}
      <section style={{ maxWidth: 1360, margin: "0 auto", padding: "120px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 80 }}>
          <div>
            <div className="caps mono" style={{ fontSize: 11, color: muted }}>What we are</div>
          </div>
          <div>
            <h2 className="serif" style={{ fontSize: "clamp(36px, 4vw, 68px)", lineHeight: 1.02, margin: 0, letterSpacing: "-0.02em", maxWidth: "18ch" }}>
              Clear guidance for company formation in Brazil.
            </h2>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 48, marginTop: 72 }}>
              {[
                { h: "International clients.", b: "We work with counsels, agencies, founders, investors, and operators from the United States, China, India, and other markets who need practical guidance to set up a business in Brazil." },
                { h: "Formation first.", b: "Company formation remains the core of our work. Once the business is established, we can support the next phase of compliance, accounting, and operational needs." },
                { h: "Practical experience.", b: "Our approach is grounded in long experience with Brazilian institutions, filings, and day-to-day business realities — not just a checklist." },
              ].map((c, i) => (
                <div key={i} style={{ borderTop: `1px solid ${ink}`, paddingTop: 20 }}>
                  <div className="mono" style={{ fontSize: 11, color: muted, marginBottom: 24 }}>0{i + 1}</div>
                  <h3 className="serif" style={{ fontSize: 28, lineHeight: 1.1, margin: 0, letterSpacing: "-0.01em" }}>{c.h}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: "rgba(20,19,17,.72)", marginTop: 18 }}>{c.b}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES — Tiered structure: Core vs Ongoing */}
      <section id="services" style={{ background: ink, color: paper, padding: "120px 0" }}>
        <div style={{ maxWidth: 1360, margin: "0 auto", padding: "0 40px" }}>

          {/* CORE SERVICES */}
          <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 80, marginBottom: 60 }}>
            <div>
              <div className="caps mono" style={{ fontSize: 11, color: "rgba(244,241,234,.55)" }}>Core Focus</div>
              <div style={{ fontSize: 13, color: "rgba(244,241,234,.4)", marginTop: 12, lineHeight: 1.4 }}>
                Primary services for international businesses launching in Brazil.
              </div>
            </div>
            <div>
              <h2 className="serif" style={{ fontSize: "clamp(34px, 3.5vw, 60px)", lineHeight: 1.05, margin: 0, letterSpacing: "-0.02em", maxWidth: "20ch" }}>
                One incorporation package.
              </h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, marginTop: 48 }}>
                {COFORMA_CORE_SERVICES.map((s) => (
                  <div key={s.key} style={{ borderTop: `1px solid rgba(244,241,234,.25)`, paddingTop: 28 }}>
                    <div className="mono" style={{ fontSize: 12, color: accent, marginBottom: 12 }}>{s.num} — Core Practice</div>
                    <h3 className="serif" style={{ fontSize: 34, lineHeight: 1.1, margin: 0, letterSpacing: "-0.01em" }}>{s.title}</h3>
                    <p style={{ fontSize: 15, lineHeight: 1.55, color: "rgba(244,241,234,.75)", marginTop: 16 }}>{s.brief}</p>
                    <a href="#contact" style={{ display: "inline-block", marginTop: 20, color: paper, fontSize: 13, textDecoration: "underline", textUnderlineOffset: 4 }}>Enquire about {s.title.toLowerCase()} →</a>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* SECONDARY / ONGOING SERVICES */}
          <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 80, marginTop: 100, borderTop: `1px solid rgba(244,241,234,.15)`, paddingTop: 80 }}>
            <div>
              <div className="caps mono" style={{ fontSize: 11, color: "rgba(244,241,234,.55)" }}>After incorporation</div>
              <div style={{ fontSize: 13, color: "rgba(244,241,234,.4)", marginTop: 12, lineHeight: 1.4 }}>
                These services are considered only after the incorporation stage is complete.
              </div>
            </div>
            <div>
              <h3 className="serif" style={{ fontSize: 32, margin: 0, letterSpacing: "-0.01em", opacity: .9 }}>
                Further corporate support
              </h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "40px 0 0 0" }}>
                {COFORMA_ONGOING_SERVICES.map((s) => (
                  <li key={s.key} className="service-row" style={{ borderTop: `1px solid rgba(244,241,234,.12)`, padding: "28px 0", display: "grid", gridTemplateColumns: "60px 240px 1fr 140px", gap: 30, alignItems: "baseline" }}>
                    <div className="mono" style={{ fontSize: 12, color: "rgba(244,241,234,.4)" }}>{s.num}</div>
                    <div className="serif" style={{ fontSize: 24, lineHeight: 1.1, letterSpacing: "-0.01em" }}>{s.title}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.5, color: "rgba(244,241,234,.65)" }}>{s.brief}</div>
                    {s.href && s.href !== "#" ? (
                      <a href={s.href} style={{ color: "#d2906b", fontSize: 12, textDecoration: "none", justifySelf: "end" }} className="mono caps service-link">Practice Info →</a>
                    ) : (
                      <span style={{ color: "rgba(244,241,234,.3)", fontSize: 12, justifySelf: "end" }} className="mono caps service-link">On Demand</span>
                    )}
                  </li>
                ))}
                <li style={{ borderTop: `1px solid rgba(244,241,234,.12)` }} />
              </ul>
            </div>
          </div>

        </div>
      </section>

      {/* PROCESS TIMELINE — grafted from Ledger, restyled to Broadsheet warmth */}
      <section style={{ maxWidth: 1360, margin: "0 auto", padding: "120px 40px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 80 }}>
          <div className="caps mono" style={{ fontSize: 11, color: muted }}>How this goes</div>
          <div>
            <h2 className="serif" style={{ fontSize: "clamp(36px, 4vw, 68px)", lineHeight: 1.02, margin: 0, letterSpacing: "-0.02em", maxWidth: "20ch" }}>
              From first email to a working business, with time built in for care and follow-through.
            </h2>
            <div className="timeline-grid" style={{ marginTop: 72, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", position: "relative" }}>
              {[
                { w: "Week 0", h: "Enquiry", b: "A short written exchange to understand what you are setting up." },
                { w: "Week 1", h: "Documents", b: "We gather the information and corporate documents needed to prepare the structure and filings accurately." },
                { w: "Week 2–3", h: "Filing", b: "Registration and filing steps are progressed with room for follow-up, corrections, and practical adjustments." },
                { w: "Week 3–5+", h: "Setup complete", b: "Once incorporated, we transition into ongoing operational support: accounting, tax compliance, HR, and governance.", link: true },
              ].map((s, i) => (
                <div key={i} className="timeline-item" style={{
                  padding: "24px 20px 0 0",
                  borderTop: `1px solid ${ink}`,
                  position: "relative",
                  marginRight: 12,
                }}>
                  <div className="timeline-dot" style={{ position: "absolute", top: -6, left: 0, width: 11, height: 11, background: paper, border: `1px solid ${ink}`, borderRadius: "50%" }} />
                  <div className="mono caps" style={{ fontSize: 10, color: accent, letterSpacing: ".14em" }}>{s.w}</div>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1.15, marginTop: 10, letterSpacing: "-0.01em" }}>{s.h}</div>
                  <p style={{ fontSize: 13, lineHeight: 1.55, color: "rgba(20,19,17,.65)", marginTop: 12 }}>{s.b}</p>
                  {s.link && (
                    <a href="accounting-compliance.html" style={{ fontSize: 11, color: accent, textDecoration: "underline", textUnderlineOffset: 3, display: "inline-block", marginTop: 8 }} className="mono caps">
                      Accounting & Compliance →
                    </a>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 1360, margin: "0 auto", padding: "120px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ aspectRatio: "4/5", background: `url(assets/building-monotone.jpg) center/cover`, filter: "grayscale(1) contrast(1.02)" }} />
          <div>
            <div className="caps mono" style={{ fontSize: 11, color: muted, marginBottom: 24 }}>— Company Formations in Brazil</div>
            <blockquote className="serif" style={{ fontSize: "clamp(28px, 3vw, 52px)", lineHeight: 1.12, margin: 0, letterSpacing: "-0.015em" }}>
              "Foreign clients rarely want more paperwork. They want to know that someone competent is handling it and reporting back. That is what we do. We make sure the filings are correct, the deadlines are met, and the business is set up to operate in Brazil."
            </blockquote>
            <div style={{ marginTop: 40, fontSize: 14, color: muted }}>
            </div>
          </div>
        </div>
      </section>

      <ContactBlock variant="light" />
      <BroadsheetFooter ink={ink} paper={paper} muted={muted} rule={rule} />
    </div>
  );
}

function BroadsheetNav({ ink, muted, rule, contactHref = "#contact" }) {
  return (
    <nav style={{ padding: "22px 40px", display: "flex", alignItems: "center", justifyContent: "space-between", maxWidth: 1360, margin: "0 auto" }}>
      <a href="index.html" style={{ textDecoration: "none", color: ink, display: "flex", alignItems: "center", gap: 12 }}>
        <img src="assets/favicon.png" alt="CoForma Logo" style={{ width: 28, height: 28, borderRadius: 4, objectFit: "contain" }} />
        <span className="serif" style={{ fontSize: 28, letterSpacing: "-0.02em" }}>CoForma</span>
        <span className="mono caps" style={{ fontSize: 10, color: muted, alignSelf: "flex-end", marginBottom: 3 }}>est. 2001</span>
      </a>
      <div className="nav-links" style={{ display: "flex", gap: 36, alignItems: "center" }}>
        <a href="index.html#services" style={{ textDecoration: "none", color: ink, fontSize: 14 }}>Services</a>
        <a href="accounting-compliance.html" style={{ textDecoration: "none", color: ink, fontSize: 14 }}>Accounting & Compliance</a>
        <a href={contactHref} style={{ textDecoration: "none", color: ink, fontSize: 13, borderBottom: `1px solid ${ink}`, paddingBottom: 2 }}>Contact →</a>
      </div>
    </nav>
  );
}

function BroadsheetFooter({ ink, paper, muted, rule }) {
  const practiceLinks = [
    { label: "Company Formation", href: "index.html#services" },
    { label: "Trademarks & IP", href: "ip-services.html" },
    { label: "Accounting", href: "accounting-compliance.html" },
    { label: "Compliance & Governance", href: "accounting-compliance.html" },
  ];

  const contactItems = [
    { label: "formations@coforma.com.br", href: "mailto:formations@coforma.com.br" },
    { label: "São Paulo, SP" },
    { label: "Response < 1 business day" },
  ];

  return (
    <footer style={{ background: paper, color: ink, borderTop: `1px solid ${rule}`, padding: "60px 40px 40px" }}>
      <div style={{ maxWidth: 1360, margin: "0 auto", display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 60 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src="assets/favicon.png" alt="CoForma Logo" style={{ width: 26, height: 26, borderRadius: 4, objectFit: "contain" }} />
            <div className="serif" style={{ fontSize: 32, letterSpacing: "-0.02em" }}>CoForma</div>
          </div>
          <div style={{ fontSize: 13, color: muted, marginTop: 12, maxWidth: 320, lineHeight: 1.5 }}>
            Company Formations in Brazil. São Paulo since 2001.
          </div>
        </div>

        <div>
          <div className="caps mono" style={{ fontSize: 10, color: muted, marginBottom: 16 }}>Practice</div>
          {practiceLinks.map((it) => (
            <div key={it.label} style={{ fontSize: 13, lineHeight: 2 }}>
              <a
                href={it.href}
                style={{ color: ink, textDecoration: "none", opacity: 0.85 }}
                onMouseEnter={(e) => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.textDecoration = "underline"; }}
                onMouseLeave={(e) => { e.currentTarget.style.opacity = "0.85"; e.currentTarget.style.textDecoration = "none"; }}
              >
                {it.label}
              </a>
            </div>
          ))}
        </div>

        <div>
          <div className="caps mono" style={{ fontSize: 10, color: muted, marginBottom: 16 }}>Contact</div>
          {contactItems.map((it, i) => (
            <div key={i} style={{ fontSize: 13, lineHeight: 2, color: ink }}>
              {it.href ? (
                <a
                  href={it.href}
                  style={{ color: ink, textDecoration: "none", opacity: 0.85 }}
                  onMouseEnter={(e) => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.textDecoration = "underline"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.opacity = "0.85"; e.currentTarget.style.textDecoration = "none"; }}
                >
                  {it.label}
                </a>
              ) : (
                <span style={{ opacity: 0.85 }}>{it.label}</span>
              )}
            </div>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 1360, margin: "60px auto 0", display: "flex", justifyContent: "space-between", fontSize: 11, color: muted }} className="mono caps footer-bottom">
        <span>© 2001 to 2026 CoForma Company Formations</span>
        <a href="index.html" style={{ color: muted, textDecoration: "none" }}>coforma.com.br</a>
      </div>
    </footer>
  );
}

Object.assign(window, { HomeBroadsheet, BroadsheetNav, BroadsheetFooter });