// Shared building blocks for the service pages and the industry pages.

// Internal link that works with the SPA router and still opens in a new tab on cmd-click.
function PageLink({ route, param, setRoute, className, children }) {
  const onClick = (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
    e.preventDefault();
    setRoute(route, param);
  };
  return <a className={className} href={pathFor(route, param)} onClick={onClick}>{children}</a>;
}

// Image slot. Looks for assets/pages/<name>.jpg and renders nothing until the file exists.
function PageImage({ name, alt = '' }) {
  const [ok, setOk] = React.useState(null);
  if (ok === false) return null;
  return (
    <figure className="q-page-image" data-ok={ok ? '1' : '0'}>
      <img src={`assets/pages/${name}.jpg`} alt={alt} onLoad={() => setOk(true)} onError={() => setOk(false)} />
    </figure>
  );
}

function PageHero({ routeName, setRoute, eyebrow, title, lede, image, meta }) {
  return (
    <section className="q-svc-hero2 q-page-hero">
      <SiteNav route={routeName} setRoute={setRoute} theme="dark" />
      <div className="q-wrap q-svc-hero2-inner">
        <div className="q-page-hero-grid">
          <div>
            <div className="q-eyebrow q-eyebrow--dark">{eyebrow}</div>
            <h1>{title}</h1>
            <p className="lede">{lede}</p>
            <div className="q-page-hero-actions">
              <a className="qbtn qbtn--paper" href="mailto:info@quarterdeck.io">Email us to book a call <Arrow /></a>
            </div>
          </div>
          {image && <PageImage name={`hero-${image}`} />}
        </div>
        {meta && (
          <dl className="q-svc-hero2-meta">
            {meta.map(m => <div key={m.dt}><dt>{m.dt}</dt><dd>{m.dd}</dd></div>)}
          </dl>
        )}
      </div>
    </section>
  );
}

// The same three steps on every page. Each page supplies its own wording for step one and a closing note.
function EngagementSteps({ intro, note, first }) {
  const steps = [
    { h: 'A twenty-minute conversation', p: first },
    { h: 'A look at your data, if it helps', p: 'Sometimes we work through a sample of your spreadsheets, quotes, or records before we propose anything. We only ask for one when it would change what we recommend.' },
    { h: 'A proposal that fits the work', p: 'A fixed-scope project or ongoing monthly support, whichever suits the work. You see the scope and the price in writing, and billing starts only after you approve it.' },
  ];
  return (
    <section className="q-start">
      <div className="q-wrap">
        <div className="q-start-grid">
          <div className="q-section-head">
            <div className="q-eyebrow q-eyebrow--dark">What an engagement looks like</div>
            <h2>{intro}</h2>
            {note && <p>{note}</p>}
          </div>
          <ol className="q-steps">
            {steps.map((s, i) => (
              <li key={s.h}>
                <span className="n">{i + 1}</span>
                <div>
                  <h3>{s.h}</h3>
                  <p>{s.p}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// Numbered editorial list (01, 02, ...), same markup as the practice areas on the higher-ed page.
function NumberedList({ items }) {
  return (
    <div className="q-entry-list">
      {items.map((it, i) => (
        <div key={it.title} className="q-entry-item">
          <div className="q-entry-num">{String(i + 1).padStart(2, '0')}</div>
          <div className="q-entry-title">
            {it.label && <span className="label">{it.label}</span>}
            {it.title}
            {it.link}
          </div>
          <div className="q-entry-body"><p>{it.body}</p></div>
        </div>
      ))}
    </div>
  );
}

function ExampleList({ examples, alt = true }) {
  return (
    <section className={`q-page-section${alt ? ' q-page-section--alt' : ''}`}>
      <div className="q-wrap">
        <div className="q-section-head" style={{ marginBottom: 40 }}>
          <div className="q-eyebrow">What this looks like</div>
          <h2>A few things we build.</h2>
        </div>
        <div className="q-page-examples">
          {examples.map((x, i) => <p key={i} className="q-page-example">{x}</p>)}
        </div>
      </div>
    </section>
  );
}

// "What the first project produces": a short plain list of deliverables.
function FirstProject({ items, alt = true }) {
  return (
    <section className={`q-page-section${alt ? ' q-page-section--alt' : ''}`}>
      <div className="q-wrap">
        <div className="q-page-split">
          <div className="q-section-head" style={{ marginBottom: 0 }}>
            <div className="q-eyebrow">The first project</div>
            <h2>What the first project produces.</h2>
          </div>
          <ul className="q-offer-includes" style={{ marginBottom: 0 }}>
            {items.map(t => <li key={t}>{t}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

// Questions and answers. Same look as the FAQ on the higher-ed page, but each answer opens and closes.
function FaqSection({ items, idPrefix = 'faq' }) {
  const [open, setOpen] = React.useState(-1);
  return (
    <section className="q-faq q-faq--acc">
      <div className="q-wrap">
        <div className="q-section-head" style={{ marginBottom: 24 }}>
          <div className="q-eyebrow">Questions we get</div>
          <h2>Common questions.</h2>
        </div>
        <div className="q-faq-list">
          {items.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className="q-faq-item" key={f.q} data-open={isOpen ? '1' : '0'}>
                <h3 className="q">
                  <button type="button" id={`${idPrefix}-q${i}`} aria-expanded={isOpen} aria-controls={`${idPrefix}-a${i}`} onClick={() => setOpen(isOpen ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="q-faq-mark" aria-hidden="true" />
                  </button>
                </h3>
                <div className="a" id={`${idPrefix}-a${i}`} role="region" aria-labelledby={`${idPrefix}-q${i}`} hidden={!isOpen}>{f.a}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// A case card, same markup as the cards on the work page.
function RelatedCase({ c, setRoute, eyebrow = 'Related work', heading = 'Work in this area.' }) {
  const go = () => setRoute('case', c.id);
  return (
    <section className="q-work-cases" style={{ background: 'var(--qd-paper-100)', padding: '80px 0' }}>
      <div className="q-wrap">
        <div className="q-section-head">
          <div className="q-eyebrow">{eyebrow}</div>
          <h2>{heading}</h2>
        </div>
        <div className="q-work-grid" style={{ gridTemplateColumns: 'minmax(0, 560px)' }}>
          <div className="q-work-card" role="link" tabIndex={0} onClick={go} onKeyDown={(e) => { if (e.key === 'Enter') go(); }}>
            <div className="q-work-card-image" style={{ backgroundImage: `url(${c.image})` }}>
              <div className="q-work-card-tag">{c.tag}</div>
            </div>
            <div className="q-work-card-body">
              <h3 className="q-work-card-client">{c.client}</h3>
              <p className="q-work-card-desc">{c.desc}</p>
              <div className="q-work-card-footer">
                <div className="q-work-card-services">
                  {c.services.map(s => <span key={s} className="q-work-card-svc">{s}</span>)}
                </div>
                <span className="q-work-card-link">Read the case <Arrow /></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Closing band, same as the higher-ed page: dark band, heading, one supporting sentence, mailto button.
function PageCloser({ heading, text }) {
  return (
    <section className="q-svc-cta">
      <div className="q-wrap">
        <div className="q-svc-cta-inner">
          <div>
            <div className="q-eyebrow q-eyebrow--dark">Next step</div>
            <h2>{heading}</h2>
          </div>
          <div>
            <p>{text}</p>
            <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a className="qbtn qbtn--paper" href="mailto:info@quarterdeck.io">Email us to book a call <Arrow /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NumberedList, PageImage, PageLink, PageHero, EngagementSteps, ExampleList, FirstProject, FaqSection, RelatedCase, PageCloser });