// layouts.jsx — three black, deck-spirited compositions + shared pieces + success

function Check() {
  return (
    <svg className="tick" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 7.5L5.5 11L12 3.5" stroke="#b8b5b5" strokeWidth="1.4" />
    </svg>
  );
}

function pad(n) { return String(n).padStart(2, '0'); }
function today() {
  const d = new Date();
  return [pad(d.getMonth() + 1), pad(d.getDate()), String(d.getFullYear()).slice(2)].join('.');
}

function NavButtons({ onBack, onNext, canBack, isLast, isSending }) {
  return (
    <div className="nav-row">
      {canBack ? <button className="btn-back" onClick={onBack} disabled={isSending}>Back</button> : <span></span>}
      <button className="btn-next" onClick={onNext} disabled={isSending}>
        {isLast ? (isSending ? 'Submitting...' : 'Submit project') : 'Continue'}
      </button>
    </div>
  );
}

function StepContent({ step, values, errors, onChange, onEditStep }) {
  return (
    <div className="step-fade" key={step.id}>
      <div className="step-head">
        <div className="step-eyebrow">{step.eyebrow}</div>
        <h1 className="step-title">{step.title}</h1>
        <p className="step-intro">{step.intro}</p>
      </div>
      {step.review
        ? <ReviewBody values={values} onEditStep={onEditStep} />
        : <StepBody step={step} values={values} errors={errors} onChange={onChange} />}
    </div>
  );
}

// ============ A · SPREAD ============
function SpreadLayout(p) {
  const total = window.FF_STEPS.length;
  const pct = ((p.index + 1) / total) * 100;
  return (
    <div className="app">
      <div className="run-head">
        <Lockup height={24} />
        <div className="run-right">
          <span>{today()}</span>
          <span>Project Intake</span>
          <span className="ledger">{pad(p.index + 1)} <span className="of">/ {pad(total)}</span></span>
        </div>
      </div>
      <div className="run-progress"><div className="bar" style={{ width: pct + '%' }}></div></div>
      <div className="spread-scroll" ref={p.scrollRef}>
        <div className="spread-col">
          <StepContent {...p} />
          <div className="spread-nav">
            <NavButtons onBack={p.onBack} onNext={p.onNext} canBack={p.index > 0} isLast={p.step.review} isSending={p.isSending} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ B · INDEX ============
function IndexLayout(p) {
  const steps = window.FF_STEPS;
  const horizontal = p.markStyle !== 'Stacked serif';
  return (
    <div className="index-frame">
      <aside className="index-aside">
        {horizontal ? (
          <div className="index-mark index-mark-h"><Lockup height={26} /></div>
        ) : (
          <React.Fragment>
            <div className="index-mark"><Eyecon height={40} /></div>
            <div className="index-tag">The Future<br />Forward</div>
          </React.Fragment>
        )}
        <div className="index-sub">A short discovery questionnaire — so we can understand the work and respond with intent.</div>
        <div className="index-mobile-ledger">{pad(p.index + 1)} / {pad(steps.length)}</div>
        <ol className="index-steps">
          {steps.map((s, i) => (
            <li
              key={s.id}
              className={'index-step' + (i === p.index ? ' active' : '') + (i < p.index ? ' done' : '')}
              onClick={() => p.onJump(i)}
            >
              <span className="idx">{pad(i + 1)}</span>
              <span className="nm">{s.title}</span>
              <Check />
            </li>
          ))}
        </ol>
        <div className="index-foot">The Future Forward — {new Date().getFullYear()}<br />hello@thefutureforward.com</div>
      </aside>
      <main className="index-main" ref={p.scrollRef}>
        <div className="index-col">
          <StepContent {...p} />
          <div className="index-nav">
            <NavButtons onBack={p.onBack} onNext={p.onNext} canBack={p.index > 0} isLast={p.step.review} isSending={p.isSending} />
          </div>
        </div>
      </main>
    </div>
  );
}

// ============ C · DOCUMENT ============
function DocumentLayout(p) {
  const total = window.FF_STEPS.length;
  return (
    <div className="doc-frame">
      <div className="doc-head">
        <span className="rule"></span>
        <span><b>The Future Forward</b> · Project Intake · {pad(p.index + 1)} / {pad(total)}</span>
        <span className="rule"></span>
      </div>
      <div className="doc-scroll" ref={p.scrollRef}>
        <div className="doc-col">
          <StepContent {...p} />
          <div className="doc-nav">
            <NavButtons onBack={p.onBack} onNext={p.onNext} canBack={p.index > 0} isLast={p.step.review} isSending={p.isSending} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ SUCCESS ============
function SuccessScreen({ values, onReset }) {
  return (
    <div className="success-wrap">
      <div className="success-inner">
        <div className="success-mark">
          <Eyecon height={26} />
          <span className="lbl">Received · The Future Forward</span>
        </div>
        <h1 className="success-h">Thank you{values.company ? `, ${values.company}` : ''}.</h1>
        <p className="success-p">
          Your project details are in. We review every submission personally and will be
          in touch at {values.email || 'your email'} within two business days to begin the discovery conversation.
        </p>
        <div className="success-meta">
          <div>
            <div className="mk">Reference</div>
            <div className="mv">FF-{String(Math.abs(hashStr(values.email || 'x')) % 9000 + 1000)}</div>
          </div>
          <div>
            <div className="mk">Submitted</div>
            <div className="mv">{new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</div>
          </div>
        </div>
        <div style={{ marginTop: '40px' }}>
          <button className="btn-back" onClick={onReset}>Start another submission</button>
        </div>
      </div>
    </div>
  );
}

function hashStr(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++) { h = (h << 5) - h + s.charCodeAt(i); h |= 0; }
  return h;
}

Object.assign(window, { SpreadLayout, IndexLayout, DocumentLayout, SuccessScreen, StepContent, NavButtons });