// Detail page for one of the two service pillars: "selling" or "dd".
// Toggle via scope prop — selling.html bootstraps with scope="sell",
// diligence.html with scope="dd". Sell-side includes the tender story,
// process flow, and BDO co-delivery block.
const DyServices = ({ scope = "sell" }) => {
  const C = window.dyContent;
  const [lang, setLang] = window.useDyLang ? window.useDyLang() : React.useState("en");
  const tt = (en, sk) => (lang === "sk" ? sk : en);
  const pk = (v) => window.dyPick(v, lang);

  const isSell = scope === "sell";
  const isDD = scope === "dd";
  const isVal = scope === "val";
  const navId = isSell ? "selling" : isVal ? "val" : "dd";

  // Anchor + cross-page routing per service number.
  const routeFor = (n) => ({
    "01": { page: "selling", anchor: "mna" },
    "02": { page: "diligence", anchor: "vdd" },
    "03": { page: "diligence", anchor: "buyside" },
    "04": { page: "valuations", anchor: "val" },
  })[n] || { page: "selling", anchor: "" };

  const services = C.primaryServices.filter(s => {
    if (isSell) return s.n === "01";
    if (isVal) return s.n === "04";
    return s.n === "02" || s.n === "03";
  });

  const head = isSell ? {
    eyebrow: tt("Selling companies", "Predaj firiem"),
    h1head: tt("What we do when we ", "Čo robíme, keď "),
    h1em: tt("sell your company.", "predávame vašu firmu."),
    lead: tt(
      "Sell-side M&A is the core of the practice. A partner runs every stage — investor universe, tailored outreach, term sheets, data room, binding bids, SPA negotiation and earn-out collection.",
      "Predajné M&A je jadrom našej praxe. Každú fázu vedie partner — investorská skupina, adresný prístup, term sheets, data room, záväzné ponuky, vyjednávanie SPA a inkaso earn-out."
    ),
  } : isVal ? {
    eyebrow: tt("Valuations", "Oceňovania"),
    h1head: tt("Business, real estate and ", "Oceňovanie firiem, nehnuteľností "),
    h1em: tt("asset valuations.", "a majetku."),
    lead: tt(
      "Independent valuations for transactions, internal and tax planning, and management decisions — in particular purchase-price allocation as required by IFRS. Multiple methodologies, partner sign-off, defendable assumptions. Statutory expert reports (znalecké posudky) delivered in cooperation with registered expert organisations.",
      "Nezávislé oceňovania pre transakcie, interné a daňové plánovanie a manažérske rozhodnutia — najmä alokácia kúpnej ceny podľa IFRS. Viacero metodológií, podpis partnera, obhájiteľné predpoklady. Znalecké posudky dodávame v spolupráci s registrovanými znaleckými organizáciami."
    ),
  } : {
    eyebrow: tt("Due diligence", "Due diligence"),
    h1head: tt("Two independent ", "Dva nezávislé "),
    h1em: tt("diligence products.", "produkty due diligence."),
    lead: tt(
      "When we are not running the sale, we run the diligence. Financial vendor due diligence on the seller side, and financial due diligence for acquirers — strategic and financial sponsors.",
      "Keď neriadime samotný predaj, riadime due diligence. Finančné vendor due diligence na strane predávajúceho a finančné due diligence pre kupujúcich — strategických aj finančných."
    ),
  };

  return (
    <>
      <DyHeader current={navId} lang={lang} setLang={setLang} />

      {/* Page head */}
      <section className="svc-page-head" data-screen-label="01 Page head">
        <div className="shell-wide">
          <div className="eyebrow">{head.eyebrow}</div>
          <h1>{head.h1head}<em>{head.h1em}</em></h1>
          <p className="lead">{head.lead}</p>
        </div>
      </section>

      {/* Service detail entries */}
      <section data-screen-label="02 Service detail">
        <div className="shell-wide">
          {services.map((s, i) => {
            const r = routeFor(s.n);
            const displayNum = String(i + 1).padStart(2, "0");
            return (
              <React.Fragment key={s.n}>
                <div className="svc-entry" id={r.anchor}>
                  <div className="label">
                    <div className="num">— {displayNum}</div>
                    <div className="ttl">{pk(s.tag)}</div>
                  </div>
                  <div>
                    <h3><span className="nonitalic">{pk(s.t)}</span></h3>
                    <p className="desc">{pk(s.d)}</p>
                    {s.n === "01" && (
                      <a className="btn-link btn-link--ext" href="https://www.startitup.sk/videa/lets-talk-business-alex-srank/" target="_blank" rel="noreferrer">
                        {tt("Watch the Startitup interview with Alex Šrank", "Pozrite si rozhovor so Alexom Šrankom na Startitup")}
                        <span className="arrow">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M7 17 17 7M9 7h8v8"/>
                          </svg>
                        </span>
                      </a>
                    )}
                    <a className="btn-link" href="index.html#contact">
                      {tt("Talk to the partner who runs this", "Hovorte s partnerom, ktorý to vedie")}
                      <span className="arrow">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                      </span>
                    </a>
                  </div>
                  <div>
                    <ul className="deet-list">
                      {s.detail.map((d, j) => (
                        <li key={j}><strong>{pk(d.k)}</strong>{pk(d.v)}</li>
                      ))}
                    </ul>
                  </div>
                </div>
                {isSell && s.n === "01" && <DyTenderStory lang={lang} tt={tt} pk={pk} />}
                {isSell && s.n === "01" && <DyProcessFlow lang={lang} tt={tt} pk={pk} />}
                {isSell && s.n === "01" && (() => {
                  const A = C.accessNote;
                  return (
                    <section className="access-note" id="access" data-screen-label="02d Access note">
                      <div className="shell-wide">
                        <div className="an-grid">
                          <div className="an-head">
                            <div className="an-eyebrow eyebrow">{pk(A.eyebrow)}</div>
                            <h2 className="an-h">
                              {A.h[lang].map((chunk, i) =>
                                typeof chunk === "string"
                                  ? <React.Fragment key={i}>{chunk}</React.Fragment>
                                  : <em key={i}>{chunk.em}</em>
                              )}
                            </h2>
                          </div>
                          <div className="an-body">
                            {A.body[lang].map((p, i) => (
                              <p key={i} className={i === 0 ? "an-lede" : ""}>{p}</p>
                            ))}
                          </div>
                        </div>
                      </div>
                    </section>
                  );
                })()}
              </React.Fragment>
            );
          })}
        </div>
      </section>

      {/* BDO section — only on selling page */}
      {isSell && (
        <section className="bdo-block" id="bdo" data-screen-label="03 BDO services">
          <div className="shell-wide">
            <div className="bdo-inner">
              <div className="lock-stack">
                <div className="eyebrow">{tt("With BDO Slovakia", "S BDO Slovakia")}</div>
                <div className="bdo-lock">
                  <span className="dy"><img src="assets/logo.svg" alt="doubleYou Partners" /></span>
                  <span className="x">×</span>
                  <span className="bdo"><img src="assets/bdo-logo.png" alt="BDO" /></span>
                </div>
                <p style={{ fontSize: 14, color: "var(--c-slate)", lineHeight: 1.6, maxWidth: "32ch", margin: 0 }}>
                  {tt(
                    "Tax and legal M&A workstreams that are part of almost every transaction — delivered by BDO Slovakia under a single coordinated engagement.",
                    "Daňové a právne M&A služby, ktoré sú súčasťou takmer každej transakcie — dodávané BDO Slovakia v rámci jednej koordinovanej zákazky."
                  )}
                </p>
              </div>
              <div>
                <h2>{tt("Two more streams. ", "Dve ďalšie služby. ")}<em>{tt("One engagement.", "Jedna zákazka.")}</em></h2>
                <p className="lead">
                  {tt(
                    "We don't run the tax and legal streams in-house. BDO Slovakia does, with senior partners we have worked alongside for years. The deal lead from doubleYou coordinates the whole engagement so the client deals with one team.",
                    "Daňové a právne služby neriadime interne. Robí to BDO Slovakia so senior partnermi, s ktorými spolupracujeme roky. Vedúci zákazky z doubleYou koordinuje celú zákazku, aby klient komunikoval s jedným tímom."
                  )}
                </p>
                <div className="bdo-streams">
                  {C.bdoStreams.map(s => (
                    <div className="bdo-stream" key={s.label}>
                      <div className="label">{s.label}</div>
                      <h4>{pk(s.t)}</h4>
                      <p>{pk(s.d)}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* CTA strip */}
      <section className="block" data-screen-label="04 CTA strip">
        <div className="shell-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end", paddingBottom: 32, borderBottom: "1px solid var(--c-dust)" }}>
            <div>
              <div className="eyebrow">{tt("Next step", "Ďalší krok")}</div>
              <h2 style={{ fontSize: "clamp(36px, 4.6vw, 64px)", fontWeight: 300, lineHeight: 1.05, letterSpacing: "-0.02em", margin: 0, maxWidth: "18ch" }}>
                <em style={{ color: "var(--c-accent-deep)" }}>{tt("Get in touch", "Ozvite sa")}</em>
                {tt(" for a discussion specific to your circumstances.", " pre diskusiu prispôsobenú vašej situácii.")}
              </h2>
            </div>
            <div style={{ display: "flex", gap: 16 }}>
              <a className="btn btn-primary" href="index.html#contact">
                {tt("Talk to a partner", "Hovorte s partnerom")}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
              <a className="btn btn-ghost" href={isSell ? "diligence.html" : "selling.html"}>
                {isSell
                  ? tt("See our diligence products", "Naše due diligence produkty")
                  : isVal
                    ? tt("See how we sell companies", "Ako predávame firmy")
                    : tt("See how we sell companies", "Ako predávame firmy")}
              </a>
            </div>
          </div>
        </div>
      </section>

      <DyFooter lang={lang} />
    </>
  );
};

window.DyServices = DyServices;