/* Pages · group 3 — Careers, Contact, FAQ, Legal, Quote.
   All copy lives in site/content.js (window.solasContent.careers / .contact
   / .faq / .legal / .quote). This file is layout only. */

const C3 = window.solasContent;

// ============================================================================
// /careers
// ============================================================================

const ROLES = C3.careers.roles;

const CareersPage = ({ onNav }) => {
  const c = C3.careers;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
        meta={c.hero.meta.map(([dt, dd], i) => (
          <div key={i}><dt>{dt}</dt><dd>{dd}</dd></div>
        ))}
      />

      <Section eyebrow={c.rolesSection.eyebrow} title={c.rolesSection.title} standfirst={c.rolesSection.standfirst}>
        <div className="page-entrylist">
          {ROLES.map((r, i) => (
            <div key={i} className="page-entry">
              <div className="page-entry__d">{r.where}</div>
              <div>
                <h3 className="page-entry__t">{r.n}</h3>
                <p className="page-entry__s">{r.summary}</p>
              </div>
              <a href="#/contact" className="page-entry__l" onClick={(e) => { e.preventDefault(); onNav("/contact"); }}>Apply →</a>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow={c.hiresSection.eyebrow} title={c.hiresSection.title} standfirst={c.hiresSection.standfirst}>
        {c.hiresSection.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>
    </React.Fragment>
  );
};

// ============================================================================
// /contact
// ============================================================================

const ContactPage = ({ onNav }) => {
  const c = C3.contact;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
      />

      <Section eyebrow={c.doorsSection.eyebrow} title={c.doorsSection.title} standfirst={c.doorsSection.standfirst}>
        <div className="page-contactgrid">
          {c.doors.map((d, i) => (
            <div className="page-contact" key={i}>
              <span className="page-contact__lbl">{d.label}</span>
              <h3 className="page-contact__n">{d.name}</h3>
              <p className="page-contact__d">{d.blurb}</p>
              <span className="page-contact__v">
                {d.kind === "email"
                  ? <a href={"mailto:" + d.value}>{d.value}</a>
                  : <a href={"#" + d.value} onClick={(e) => { e.preventDefault(); onNav(d.value); }}>{d.valueLabel}</a>}
              </span>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow={c.form.eyebrow} title={c.form.title} standfirst={c.form.standfirst} flat>
        <form
          className="contact-form"
          onSubmit={stubFormSubmit("contact-general")}
          data-form="contact-general"
        >
          <div className="quote-form__row">
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="c-name">{c.form.nameLabel}</label>
              <input id="c-name" name="name" type="text" placeholder={c.form.namePlaceholder} required />
            </div>
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="c-email">{c.form.emailLabel}</label>
              <input id="c-email" name="email" type="email" placeholder={c.form.emailPlaceholder} required />
            </div>
          </div>
          <div className="quote-field">
            <label className="quote-field__lbl" htmlFor="c-which">{c.form.roomLabel}</label>
            <select id="c-which" name="room">
              {c.form.roomOptions.map((o, i) => <option key={i}>{o}</option>)}
            </select>
          </div>
          <div className="quote-field">
            <label className="quote-field__lbl" htmlFor="c-note">{c.form.noteLabel}</label>
            <textarea
              id="c-note" name="note" rows={5}
              placeholder={c.form.notePlaceholder}
              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>
          <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/contact</code> →
            Hubspot CRM, contact routed by the <code>room</code> field to the
            named owner. Out-of-band enquiries fall to <code>hello@solasinsurance.co.uk</code>.
          </p>
        </form>
      </Section>
    </React.Fragment>
  );
};

// ============================================================================
// /faq
// ============================================================================

const FAQ = C3.faq.items;

const FaqPage = ({ onNav }) => {
  const c = C3.faq;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
      />

      <Section eyebrow={c.section.eyebrow} title={c.section.title} standfirst={c.section.standfirst} flat>
        <div className="page-faq">
          {FAQ.map((f, i) => (
            <details key={i} open={i === 0}>
              <summary>{f.q}</summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>
      </Section>

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

// ============================================================================
// /legal
// ============================================================================

const LegalPage = ({ onNav }) => {
  const c = C3.legal;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={c.hero.eyebrow}
        title={c.hero.title}
        standfirst={c.hero.standfirst}
      />

      <Section eyebrow={c.section.eyebrow} title={c.section.title} standfirst={c.section.standfirst} flat>
        <div className="legal-doc">
          <h2 id="privacy">{c.privacy.heading}</h2>
          <p>{c.privacy.intro}</p>
          <ul>
            {c.privacy.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
          <p><a href="#" onClick={(e) => e.preventDefault()}>{c.privacy.link}</a></p>

          <h2 id="cookies">{c.cookies.heading}</h2>
          <p>{c.cookies.body}</p>
          <p><a href="#" onClick={(e) => e.preventDefault()}>{c.cookies.link}</a></p>

          <h2 id="complaints">{c.complaints.heading}</h2>
          <p>{c.complaints.body}</p>
          <ul>
            {c.complaints.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>

          <h2 id="regulatory">{c.regulatory.heading}</h2>
          <p>{c.regulatory.body}</p>

          <h2 id="terms">{c.terms.heading}</h2>
          <p>{c.terms.body}</p>
        </div>
      </Section>
    </React.Fragment>
  );
};

// ============================================================================
// /quote — homeowner interest-capture form
// ----------------------------------------------------------------------------
// Waitlist (today) vs Socotra-live (switch-day) copy both live in
// content.js (quote.waitlist / quote.live / quote.common). The Tweaks panel
// flips socotraLive to preview the switch-day form.

const QuotePage = ({ onNav, socotraLive = false }) => {
  const cm = C3.quote.common;
  const v = socotraLive ? C3.quote.live : C3.quote.waitlist;
  return (
    <React.Fragment>
      <PageHero
        eyebrow={v.heroEyebrow}
        title={v.heroTitle}
        standfirst={v.heroStandfirst}
        actions={
          !socotraLive && (
            <span className="coming-soon">{C3.quote.waitlist.badge}</span>
          )
        }
      />

      <div className="quote-shell">
        <div className="quote-shell__col">
          <header className="page-section__head" style={{ position: "static", marginBottom: 0 }}>
            <div className="page-section__eyebrow">{v.colEyebrow}</div>
            <h2 className="page-section__title">{v.colTitle}</h2>
          </header>

          <form
            className="quote-form"
            onSubmit={stubFormSubmit(socotraLive ? "quote-intake" : "quote-waitlist")}
            data-form={socotraLive ? "quote-intake" : "quote-waitlist"}
          >
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="q-email">{cm.emailLabel}</label>
              <input id="q-email" name="email" type="email" placeholder={cm.emailPlaceholder} required />
            </div>
            <div className="quote-field">
              <label className="quote-field__lbl" htmlFor="q-postcode">{cm.postcodeLabel}</label>
              <input id="q-postcode" name="postcode" type="text" placeholder={cm.postcodePlaceholder} required style={{ textTransform: "uppercase" }} />
              <span className="quote-field__hint">{cm.postcodeHint}</span>
            </div>

            {socotraLive && (
              <React.Fragment>
                <div className="quote-form__row">
                  <div className="quote-field">
                    <label className="quote-field__lbl" htmlFor="q-value">{cm.valueLabel}</label>
                    <select id="q-value" name="value">
                      {cm.valueOptions.map((o, i) => <option key={i}>{o}</option>)}
                    </select>
                  </div>
                  <div className="quote-field">
                    <label className="quote-field__lbl" htmlFor="q-type">{cm.typeLabel}</label>
                    <select id="q-type" name="type">
                      {cm.typeOptions.map((o, i) => <option key={i}>{o}</option>)}
                    </select>
                  </div>
                </div>
                <div className="quote-field">
                  <label className="quote-field__lbl" htmlFor="q-name">{cm.nameLabel}</label>
                  <input id="q-name" name="name" type="text" placeholder={cm.namePlaceholder} />
                </div>
              </React.Fragment>
            )}

            <div className="quote-form__check">
              <input id="q-consent" type="checkbox" required />
              <label htmlFor="q-consent">
                {cm.consentPrefix}<a href="#/legal" onClick={(e) => { e.preventDefault(); onNav("/legal"); }}>{cm.consentLink}</a>{cm.consentSuffix}
              </label>
            </div>

            <button type="submit" className="btn btn--primary" style={{ alignSelf: "flex-start" }}>{v.submit}</button>

            <p className="form-note">
              <strong>Wiring · production:</strong>{" "}
              {socotraLive
                ? <span>POST to <code>/api/quote/intake</code> → Socotra PAS quote-create, with the connected-home data API enriching the underwriting context inline. Customer record mirrored to the policyholder CRM (TBC; <em>not</em> Hubspot — Hubspot is the investor CRM only).</span>
                : <span>POST to <code>/api/leads/waitlist</code> → Hubspot CRM, contact list <code>homeowner-waitlist</code>. On Socotra-switch day, the same URL points at <code>/api/quote/intake</code> and the form expands. Existing waitlist contacts are migrated to the policyholder CRM at that time.</span>
              }
            </p>
          </form>
        </div>

        <aside className="quote-shell__col quote-shell__col--aside">
          <div className="quote-shell__waitlist">
            <div style={{ width: 64, borderTop: "2px solid var(--accent)" }} />
            <span className="page-section__eyebrow">{cm.asideEyebrow}</span>
            <h2 className="page-section__title" style={{ fontSize: 28 }}>{v.asideTitle}</h2>
            <p className="page-section__standfirst">{v.asideStandfirst}</p>
            <div className="quote-shell__waitnote">{v.asideNote}</div>
            <p className="argument__p" style={{ fontStyle: "italic", maxWidth: "60ch", marginTop: 16 }}>
              {cm.asideQuote}
            </p>
          </div>
        </aside>
      </div>
    </React.Fragment>
  );
};

Object.assign(window, { CareersPage, ContactPage, FaqPage, LegalPage, QuotePage, FAQ, ROLES });