// tr-sections.jsx — extra, fully-CMS-driven sections shared by every skin.
// Each renders generic class names; each skin styles them under its own scope
// (.trs / .trc) and registers a thin wrapper. Load AFTER React + tr-icons.js,
// BEFORE the skin files. Exposes window.TR{Testimonials,Process,Faq,About,Support}.

function TRSecHead({ eyebrow, heading, sub }) {
  return (
    <div className="center">
      {eyebrow ? <span className="eyebrow">{eyebrow}</span> : null}
      {heading ? <h2>{heading}</h2> : null}
      {sub ? <p>{sub}</p> : null}
    </div>
  );
}

function TRStars({ n }) {
  var r = Math.max(0, Math.min(5, parseInt(n, 10) || 5));
  var s = [];
  for (var i = 0; i < 5; i++) s.push(React.createElement("span", { key: i, className: i < r ? "on" : "" }, "\u2605"));
  return <div className="x-stars" aria-label={r + " out of 5"}>{s}</div>;
}

function TRTestimonials({ content }) {
  return (
    <section id="testimonials" className={content.tint === "yes" ? "x-tint" : null}><div className="wrap">
      <TRSecHead eyebrow={content.eyebrow} heading={content.heading} sub={content.sub} />
      <div className="x-tgrid">
        {(content.items || []).map((t, i) => (
          <figure className="x-tcard" key={i}>
            <TRStars n={t.rating} />
            <blockquote>{t.quote}</blockquote>
            <figcaption><b>{t.name}</b>{t.location ? <span>{t.location}</span> : null}</figcaption>
          </figure>
        ))}
      </div>
    </div></section>
  );
}

function TRProcess({ content }) {
  return (
    <section id="process" className={content.tint === "yes" ? "x-tint" : null}><div className="wrap">
      <TRSecHead eyebrow={content.eyebrow} heading={content.heading} sub={content.sub} />
      <div className="x-steps">
        {(content.steps || []).map((s, i) => (
          <div className="x-step" key={i}>
            <span className="x-stepnum">{i + 1}</span>
            <span className="x-stepic">{window.TRIcon(s.icon, { size: 28, sw: 2.2, className: "ico" })}</span>
            <h3>{s.title}</h3>
            {s.body ? <p>{s.body}</p> : null}
          </div>
        ))}
      </div>
    </div></section>
  );
}

function TRFaq({ content }) {
  var open = React.useState(-1);
  var openIdx = open[0], setOpen = open[1];
  return (
    <section id="faq" className={content.tint === "yes" ? "x-tint" : null}><div className="wrap x-narrow">
      <TRSecHead eyebrow={content.eyebrow} heading={content.heading} sub={content.sub} />
      <div className="x-faq">
        {(content.items || []).map((f, i) => (
          <div className={"x-faqitem" + (openIdx === i ? " open" : "")} key={i}>
            <button className="x-faqq" type="button" aria-expanded={openIdx === i} onClick={() => setOpen(openIdx === i ? -1 : i)}>
              <span>{f.q}</span><span className="x-faqplus" aria-hidden="true" />
            </button>
            <div className="x-faqa"><div className="x-faqa-in"><p>{f.a}</p></div></div>
          </div>
        ))}
      </div>
    </div></section>
  );
}

function TRAbout({ content }) {
  var initials = function (name) {
    return String(name || "").trim().split(/\s+/).map(function (w) { return w.charAt(0); }).slice(0, 2).join("").toUpperCase();
  };
  return (
    <section id="about" className={content.tint === "yes" ? "x-tint" : null}><div className="wrap">
      <TRSecHead eyebrow={content.eyebrow} heading={content.heading} sub={content.lead} />
      <div className="x-team">
        {(content.members || []).map((m, i) => (
          <div className="x-tm" key={i}>
            <span className="x-av" data-i={i % 4}>{initials(m.name)}</span>
            <b>{m.name}</b>
            {m.role ? <span className="x-role">{m.role}</span> : null}
            {m.bio ? <p>{m.bio}</p> : null}
          </div>
        ))}
      </div>
    </div></section>
  );
}

function TRSupport({ content }) {
  var pcS = React.useState(""); var pc = pcS[0], setPc = pcS[1];
  var rS = React.useState(null); var res = rS[0], setRes = rS[1];
  var approved = (content.approvedPostcodes || []).map(function (p) { return String(p).trim(); });
  var hasChecker = !!content.checkHeading || approved.length > 0;
  var check = function (e) {
    e.preventDefault();
    var v = String(pc).trim();
    if (!/^\d{3,4}$/.test(v)) { setRes("invalid"); return; }
    setRes(approved.indexOf(v) >= 0 ? "onsite" : "remote");
  };
  return (
    <section id="support" className={content.tint === "yes" ? "x-tint" : null}><div className="wrap">
      <TRSecHead eyebrow={content.eyebrow} heading={content.heading} sub={content.sub} />
      <div className="x-sup">
        {(content.options || []).map((o, i) => (
          <div className="x-sup-card" key={i}>
            <div className="x-sup-top">
              <span className="x-sup-ic">{window.TRIcon(o.icon, { size: 30, sw: 2.1, className: "ico" })}</span>
              <div className="x-sup-ht">
                <h3>{o.title}</h3>
                {o.tagline ? <span className="x-sup-tag">{o.tagline}</span> : null}
              </div>
            </div>
            {o.body ? <p className="x-sup-body">{o.body}</p> : null}
            {(o.points || []).length > 0 && (
              <ul className="x-sup-points">
                {o.points.map((pt, j) => (
                  <li key={j}>{window.TRIcon("check", { size: 16, sw: 2.8, className: "ico" })}<span>{pt.text}</span></li>
                ))}
              </ul>
            )}
          </div>
        ))}
      </div>
      {hasChecker && (
        <div className="x-sup-where">
          <span className="x-sup-where-bg" aria-hidden="true">{window.TRIcon("mapPin", { size: 240, sw: 1, className: "ico" })}</span>
          <div className="x-sup-where-grid">
            <div className="x-sup-where-intro">
              {content.checkHeading ? <h3>{content.checkHeading}</h3> : null}
              {content.checkSub ? <p>{content.checkSub}</p> : null}
            </div>
            <div className={"x-sup-checker" + (res ? " is-" + res : "")}>
              <form className="pc-form" onSubmit={check}>
                <input className="pc-input" value={pc} inputMode="numeric" aria-label="Postcode" placeholder="Your postcode" maxLength={4}
                  onChange={(e) => { setPc(e.target.value.replace(/\D/g, "").slice(0, 4)); setRes(null); }} />
                <button className="pc-btn" type="submit">Check</button>
              </form>
              <div className={"pc-reveal" + (res ? " open" : "")}>
                <div className="pc-reveal-in">
                  {res === "invalid" && <div className="pc-result invalid">Please enter a valid 4-digit postcode.</div>}
                  {res === "onsite" && (
                    <div className="pc-result onsite">
                      <div className="pc-badges">
                        <span className="pc-badge ok">{window.TRIcon("home", { size: 16, sw: 2.2, className: "ico" })}On-site visits</span>
                        <span className="pc-badge ok">{window.TRIcon("laptop", { size: 16, sw: 2.2, className: "ico" })}Remote support</span>
                      </div>
                      {content.onsiteMsg ? <p>{content.onsiteMsg}</p> : null}
                    </div>
                  )}
                  {res === "remote" && (
                    <div className="pc-result remote">
                      <div className="pc-badges"><span className="pc-badge">{window.TRIcon("laptop", { size: 16, sw: 2.2, className: "ico" })}Remote support</span></div>
                      {content.remoteMsg ? <p>{content.remoteMsg}</p> : null}
                      {content.outsideNote ? <p className="pc-fine">{content.outsideNote}</p> : null}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div></section>
  );
}

Object.assign(window, { TRTestimonials, TRProcess, TRFaq, TRAbout, TRSupport });