/* Pages · group 1 — Approach, Partners, Investors.
   All copy lives in site/content.js (window.solasContent.approach / .partners
   / .investors). This file is layout only. */

const C1 = window.solasContent;

// ============================================================================
// /approach — the thesis page
// ============================================================================

const ApproachPage = ({ onNav }) => {
  const c = C1.approach;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
        actions={
          <React.Fragment>
            <a href="#/quote" className="btn btn--primary" onClick={(e) => { e.preventDefault(); onNav("/quote"); }}>{c.hero.ctaPrimary}</a>
            <a href="#/faq" className="page-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/faq"); }}>{c.hero.ctaSecondary}</a>
          </React.Fragment>
        }
        meta={c.hero.meta.map(([dt, dd], i) => (
          <div key={i}><dt>{dt}</dt><dd>{dd}</dd></div>
        ))}
      />

      <Section eyebrow={c.argument.eyebrow} title={c.argument.title} standfirst={c.argument.standfirst}>
        {c.argument.points.map((pt) => (
          <div className="argument" key={pt.n}>
            <div className="argument__n">{pt.n}</div>
            <div className="argument__body">
              <h3 className="argument__t">{pt.t}</h3>
              <p className="argument__p">{pt.p}</p>
              {pt.aside && <p className="argument__aside">{pt.aside}</p>}
            </div>
          </div>
        ))}
      </Section>

      <Section eyebrow={c.promises.eyebrow} title={c.promises.title} standfirst={c.promises.standfirst}>
        {c.promises.points.map((pt) => (
          <div className="argument" key={pt.n}>
            <div className="argument__n">{pt.n}</div>
            <div className="argument__body">
              <h3 className="argument__t">{pt.t}</h3>
              <p className="argument__p">{pt.p}</p>
            </div>
          </div>
        ))}
      </Section>

      <Section eyebrow={c.cover.eyebrow} title={c.cover.title} standfirst={c.cover.standfirst}>
        <MetaList items={c.cover.left} />
        <MetaList items={c.cover.right} />
        <Stub label={c.cover.stubLabel} note={c.cover.stubNote} />
      </Section>

      <WaitlistCTA variant="argument" onNav={onNav} />
    </React.Fragment>
  );
};

// ============================================================================
// /partners — for brokers and fronting carriers
// ============================================================================

const PartnersPage = ({ onNav }) => {
  const c = C1.partners;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
        actions={
          <React.Fragment>
            <a href="#partners-form" className="btn btn--primary">{c.hero.ctaPrimary}</a>
            <a href="#/contact" className="page-hero__secondary" onClick={(e) => { e.preventDefault(); onNav("/contact"); }}>{c.hero.ctaSecondary}</a>
          </React.Fragment>
        }
        meta={c.hero.meta.map(([dt, dd], i) => (
          <div key={i}><dt>{dt}</dt><dd>{dd}</dd></div>
        ))}
      />

      <Section eyebrow={c.appetite.eyebrow} title={c.appetite.title} standfirst={c.appetite.standfirst}>
        <MetaList items={c.appetite.meta} />
        <p className="argument__p" style={{ maxWidth: "60ch" }}>{c.appetite.body}</p>
      </Section>

      <Section eyebrow={c.model.eyebrow} title={c.model.title} standfirst={c.model.standfirst}>
        {c.model.points.map((pt) => (
          <div className="argument" key={pt.n}>
            <div className="argument__n">{pt.n}</div>
            <div className="argument__body">
              <h3 className="argument__t">{pt.t}</h3>
              <p className="argument__p">{pt.p}</p>
            </div>
          </div>
        ))}
      </Section>

      <Section eyebrow={c.form.eyebrow} title={c.form.title} standfirst={c.form.standfirst} flat>
        <form
          id="partners-form"
          className="partner-form contact-form"
          onSubmit={stubFormSubmit("partners-signup")}
          data-form="partners-signup"
        >
          <div className="quote-form__row">
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="p-name">{c.form.nameLabel}</label>
              <input id="p-name" name="name" type="text" placeholder={c.form.namePlaceholder} required />
            </div>
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="p-firm">{c.form.firmLabel}</label>
              <input id="p-firm" name="firm" type="text" placeholder={c.form.firmPlaceholder} required />
            </div>
          </div>
          <div className="quote-form__row">
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="p-email">{c.form.emailLabel}</label>
              <input id="p-email" name="email" type="email" placeholder={c.form.emailPlaceholder} required />
            </div>
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="p-role">{c.form.roleLabel}</label>
              <select id="p-role" name="role">
                {c.form.roleOptions.map((o, i) => <option key={i}>{o}</option>)}
              </select>
            </div>
          </div>
          <div className="quote-field">
            <label className="quote-field__lbl" htmlFor="p-book">{c.form.bookLabel}</label>
            <textarea
              id="p-book"
              name="book"
              rows={5}
              placeholder={c.form.bookPlaceholder}
              style={{
                fontFamily: "inherit", fontSize: 15, background: "var(--solas-paper)",
                color: "var(--fg)", border: "1px solid var(--rule-strong)",
                borderRadius: "var(--radius-2)", padding: "12px 14px", outline: "none", resize: "vertical"
              }}
            />
          </div>
          <div className="quote-form__check">
            <input id="p-consent" type="checkbox" required />
            <label htmlFor="p-consent">{c.form.consent}</label>
          </div>
          <button type="submit" className="btn btn--primary" style={{ alignSelf: "flex-start" }}>{c.form.submit}</button>
          <p className="form-note">
            <strong>Wiring · production:</strong> POST to <code>/api/leads/partner</code> →
            Hubspot CRM, contact assigned to the named partnerships underwriter on rota.
          </p>
        </form>
      </Section>
    </React.Fragment>
  );
};

// ============================================================================
// /investors — public landing only
// ----------------------------------------------------------------------------
// Per CCO+CLO joint review (investors-page-joint-review.md), the substantive
// content of the /investors page sits behind a Financial Promotion Order
// certification gate (FPO Arts 19, 48, 50, 50A), with each piece separately
// approved by a s.21 authorised intermediary. The public landing below is
// non-promotional, within PERG 8 "image advertising" boundaries. Reinstating
// any substantive content requires the certification gate live, the s.21
// approver engaged, and the parallel CEP clusters resolved.

const InvestorsPage = ({ onNav }) => {
  const c = C1.investors;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
        actions={
          <div className="investor-actions">
            <a href="#/investors#qualify" className="btn btn--primary" onClick={(e) => e.preventDefault()}>{c.hero.ctaPrimary}</a>
            <a href="#/quote" className="btn btn--ghost" onClick={(e) => { e.preventDefault(); onNav("/quote"); }}>{c.hero.ctaSecondary}</a>
          </div>
        }
      />

      <Section eyebrow={c.qualify.eyebrow} title={c.qualify.title} standfirst={c.qualify.standfirst} id="qualify">
        <Stub label={c.qualify.stubLabel} note={c.qualify.stubNote} />
        <p className="argument__p" style={{ maxWidth: "60ch", color: "var(--fg-muted)", marginTop: 24 }}>
          {c.qualify.disclosure}
        </p>
      </Section>
    </React.Fragment>
  );
};

Object.assign(window, { ApproachPage, PartnersPage, InvestorsPage });