/* global React, window */
/* Final proposal slab — templated + AI intro line, matched to the site's slab visual language. */

const { useState } = React;

function DemoProposal({ intro, proposal, answers, onPrefillContact, onClose }) {
  const [emailed, setEmailed] = useState(false);

  const handleEmail = () => {
    setEmailed(true);
    // Real implementation would POST to a backend — this is a hi-fi prototype.
  };

  return (
    <div className="proposal">
      {/* Intro card */}
      <div className="proposal-intro">
        <div className="proposal-tag">
          <span className="proposal-tag-pip"></span>
          ATLAS · PROPOSAL DRAFT
        </div>
        <h3 className="proposal-title">Your AI sprint, sketched.</h3>
        <p className="proposal-lead">{intro}</p>
      </div>

      {/* Recommended sprint card */}
      <div className="proposal-card sprint-card">
        <div className="proposal-card-head">
          <span className="proposal-card-num">01</span>
          <span className="proposal-card-label">Recommended sprint</span>
        </div>
        <div className="sprint-pick">
          <h4 className="sprint-pick-name">{proposal.tier.name}</h4>
          <span className="sprint-pick-duration">{proposal.tier.duration}</span>
        </div>
        <p className="proposal-card-body">{proposal.tier.why}</p>
      </div>

      {/* Six layers — show which ones we'd focus on */}
      <div className="proposal-card layers-card">
        <div className="proposal-card-head">
          <span className="proposal-card-num">02</span>
          <span className="proposal-card-label">Where we'd focus inside the six-layer sprint</span>
        </div>
        <div className="proposal-layers">
          {proposal.layers.map((l) => (
            <div className="proposal-layer" key={l.n}>
              <span className="proposal-layer-num">{l.n}</span>
              <span className="proposal-layer-label">{l.label}</span>
              <span className="proposal-layer-tag">primary focus</span>
            </div>
          ))}
        </div>
        <div className="proposal-layer-faded">
          + the remaining layers get a lighter pass to keep the system coherent
        </div>
      </div>

      {/* Tools we'd plug into */}
      {proposal.tools.length > 0 && (
        <div className="proposal-card tools-card">
          <div className="proposal-card-head">
            <span className="proposal-card-num">03</span>
            <span className="proposal-card-label">Tools we'd plug into</span>
          </div>
          <div className="chip-row" style={{ marginTop: 6 }}>
            {proposal.tools.map((t) => (
              <span className="chip" key={t}>{t}</span>
            ))}
          </div>
          <p className="proposal-card-hint">From what you told me — we'd scope access carefully and only build the custom tooling that earns its weight.</p>
        </div>
      )}

      {/* First wins */}
      <div className="proposal-card wins-card">
        <div className="proposal-card-head">
          <span className="proposal-card-num">04</span>
          <span className="proposal-card-label">First wins we'd aim to ship</span>
        </div>
        <div className="proposal-wins">
          {proposal.wins.map((w, i) => (
            <div className="proposal-win" key={i}>
              <span className="proposal-win-num">/ {String(i + 1).padStart(2, '0')}</span>
              <div>
                <strong className="proposal-win-title">{w.title}</strong>
                <p className="proposal-win-body">{w.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Trust mechanism */}
      <div className="proposal-card trust-card">
        <div className="proposal-card-head">
          <span className="proposal-card-num">05</span>
          <span className="proposal-card-label">How we keep it safe</span>
        </div>
        <div className="proposal-trust-rail">
          {['Inspect', 'Propose', 'Approve', 'Apply', 'Verify'].map((s, i, arr) => (
            <React.Fragment key={s}>
              <span className={`proposal-trust-step ${s === 'Approve' ? 'amber' : s === 'Verify' ? 'green' : ''}`}>
                <span className="pip"></span>{s}
              </span>
              {i < arr.length - 1 && <span className="proposal-trust-arrow">→</span>}
            </React.Fragment>
          ))}
        </div>
        <p className="proposal-card-hint">Every routine we build runs on this loop — your team approves before anything touches a live system.</p>
      </div>

      {/* CTAs */}
      <div className="proposal-cta">
        <div className="proposal-cta-head">Next step?</div>
        <div className="proposal-cta-grid">
          <a
            href="https://calendly.com/bastionai/intro"
            target="_blank" rel="noopener noreferrer"
            className="proposal-cta-btn primary"
          >
            <span className="proposal-cta-btn-title">Book a 20-min intro call</span>
            <span className="proposal-cta-btn-sub">With Matt · calendly.com/bastionai</span>
            <span className="arrow"></span>
          </a>
          <button
            className={`proposal-cta-btn ${emailed ? 'sent' : ''}`}
            onClick={handleEmail}
            disabled={emailed}
          >
            <span className="proposal-cta-btn-title">
              {emailed ? 'Sent — check your inbox' : 'Email me this proposal'}
            </span>
            <span className="proposal-cta-btn-sub">
              {emailed ? 'A copy also goes to matt@bastionai.co' : 'A copy also goes to matt@bastionai.co'}
            </span>
            {!emailed && <span className="arrow"></span>}
          </button>
          <button className="proposal-cta-btn" onClick={onPrefillContact}>
            <span className="proposal-cta-btn-title">Send a longer note instead</span>
            <span className="proposal-cta-btn-sub">Opens the contact form with your answers filled in</span>
            <span className="arrow"></span>
          </button>
        </div>
        <div className="proposal-disclaimer">
          This sketch was generated from what you told Atlas just now. The real sprint scope happens with Matt, in conversation, on the call.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DemoProposal });