/* SETTI — trade page (architects, designers, hospitality).
   Deliberately a separate destination, not a numbered chapter of the
   private-client story: reuses the real Nav/Footer (exported by site.jsx)
   for full chrome and EN/FR parity, but renders its own content below. */
const { useState: useSPro } = React;

function ProHero({ tr }) {
  return (
    <section className="a-pro-hero">
      <div className="section-num a-pro-kicker">{tr.pro.kicker}</div>
      <h1 className="display a-pro-title">
        {tr.pro.title[0]}<br /><em>{tr.pro.titleEm}</em>
      </h1>
      <p className="body-text a-pro-lede">{tr.pro.lede}</p>
    </section>);
}

function ProImage() {
  return (
    <div className="a-pro-image plate">
      <img className="plate-img" src="assets/shoot/kitchen-sink.jpg" alt="Kitchen detail, red lacquer and marble — sourced and directed by Setti" loading="lazy" />
    </div>);
}

function ProPoints({ tr }) {
  return (
    <section className="a-pro-points">
      {tr.pro.points.map((p) => (
        <article className="a-pro-point" key={p.n}>
          <div className="a-service-num">{p.n}</div>
          <h3 className="a-service-title">{p.title}</h3>
          <p className="body-text a-service-body">{p.body}</p>
        </article>
      ))}
    </section>);
}

function ProCta({ tr, hrefBase }) {
  return (
    <section className="a-pro-cta">
      <a href={`${hrefBase}#contact`} className="a-cta-primary">
        <span>{tr.pro.ctaLabel}</span>
        <span className="a-cta-arrow">→</span>
      </a>
      <p className="a-pro-cta-note">{tr.pro.ctaNote}</p>
      <a href={hrefBase || "#top"} className="a-link-arrow a-pro-back">{tr.pro.backLabel}</a>
    </section>);
}

function ProPage({ lang, setLang }) {
  const tr = window.I18N[lang];
  const Nav = window.SettiNav;
  const Footer = window.SettiFooter;
  const hrefBase = "index.html";
  return (
    <div className="site-scope dir-a">
      <Nav tr={tr} lang={lang} setLang={setLang} hrefBase={hrefBase} />
      <div className="a-page">
        <div className="a-pro">
          <ProHero tr={tr} />
          <ProImage />
          <ProPoints tr={tr} />
          <ProCta tr={tr} hrefBase={hrefBase} />
        </div>
        <Footer tr={tr} hrefBase={hrefBase} />
      </div>
    </div>);
}

window.ProPage = ProPage;