// PricingWaitlist.jsx — pre-launch waitlist + the sparse "pricing" treatment
const PlumbPricingWaitlist = ({ formRef }) => {
  const { useState } = React;
  const [data, setData] = useState({
    email: '', name: '', company: '', role: '', cad: '', team: ''
  });
  const [submitted, setSubmitted] = useState(false);

  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    if (!data.email) return;
    setSubmitted(true);
  };

  return (
    <>
      {/* Pricing strip */}
      <section id="pricing" className="section pricing reveal-fx" data-screen-label="pricing">
        <div className="section-corner">
          <span>06 · pricing</span>
          <span>per seat · teams of 5 to 50</span>
        </div>
        <div className="page">
          <p className="eyebrow">06 · pricing</p>
          <div className="pr-grid">
            <div>
              <h2 className="section-h" style={{ maxWidth: '20ch' }}>
                No prices yet. <em>By design.</em>
              </h2>
            </div>
            <div className="pr-body">
              <p className="lead" style={{ margin: 0 }}>
                Plumb is sold per seat, on month-to-month or annual terms,
                to teams of five to fifty engineers.
                We are not pricing publicly while we are still onboarding the first ten companies.
                When you join the waitlist, we'll quote you against your team and your shops.
              </p>
              <ul className="pr-list">
                <li><span className="pr-k readout">team size</span><span className="pr-v">5 – 50 engineers</span></li>
                <li><span className="pr-k readout">terms</span><span className="pr-v">month-to-month or annual</span></li>
                <li><span className="pr-k readout">moq</span><span className="pr-v">three engineers · one shop tracked</span></li>
              </ul>
            </div>
          </div>
        </div>
        <style>{`
          .pr-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
          @media (min-width: 900px) { .pr-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
          .pr-list { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--border-default); }
          .pr-list li {
            display: grid;
            grid-template-columns: 120px 1fr;
            gap: 16px;
            padding: 14px 0;
            border-bottom: 1px solid var(--border-default);
            align-items: baseline;
          }
          .pr-k { font-size: 10px; letter-spacing: 0.12em; color: rgba(26,26,26,0.52); text-transform: lowercase; }
          .pr-v { font-size: 14px; color: var(--color-graphite); }
        `}</style>
      </section>

      {/* Waitlist form */}
      <section id="waitlist" className="section waitlist reveal-fx" data-screen-label="waitlist" ref={formRef}>
        <div className="section-corner">
          <span>07 · request access</span>
          <span>five questions</span>
        </div>
        <div className="page">
          <div className="wl-grid">
            <div className="wl-left">
              <p className="eyebrow">07 · request access</p>
              <h2 className="section-h" style={{ maxWidth: '14ch' }}>
                Tell us what got scrapped last.
              </h2>
              <p className="lead" style={{ marginTop: 24 }}>
                We're onboarding ten companies before broader release.
                The fields are intentional. We don't ask for what we won't read.
              </p>
              <div className="wl-meta">
                <div className="wl-meta-row">
                  <span className="wl-mk readout">queue position</span>
                  <span className="wl-mv readout"></span>
                </div>
                <div className="wl-meta-row">
                  <span className="wl-mk readout">avg response</span>
                  <span className="wl-mv readout">3 business days</span>
                </div>
                <div className="wl-meta-row">
                  <span className="wl-mk readout">read by</span>
                  <span className="wl-mv readout">a founder · always</span>
                </div>
              </div>
            </div>

            <form className="wl-form" onSubmit={submit} noValidate>
              {!submitted ?
              <>
                  <div className="wl-form-corner">
                    <span className="readout">form 07-a · revision 1 of 1</span>
                    <span className="readout">{Object.values(data).filter(Boolean).length}/6 fields</span>
                  </div>

                  <div className="wl-row two">
                    <div>
                      <label className="field-label">name</label>
                      <input className="input" placeholder="given name, surname" value={data.name} onChange={set('name')} />
                    </div>
                    <div>
                      <label className="field-label">email</label>
                      <input className="input" type="email" placeholder="you@company" value={data.email} onChange={set('email')} required />
                    </div>
                  </div>

                  <div>
                    <label className="field-label">company</label>
                    <input className="input" placeholder="where you ship hardware" value={data.company} onChange={set('company')} />
                  </div>

                  <div className="wl-row two">
                    <div>
                      <label className="field-label">role</label>
                      <select className="select" value={data.role} onChange={set('role')}>
                        <option value="">choose one</option>
                        <option value="design">design engineer</option>
                        <option value="mfg">manufacturing engineer</option>
                        <option value="vp">VP / head of engineering</option>
                        <option value="other">other</option>
                      </select>
                    </div>
                    <div>
                      <label className="field-label">CAD tool</label>
                      <select className="select" value={data.cad} onChange={set('cad')}>
                        <option value="">choose one</option>
                        <option value="fusion">Fusion 360</option>
                        <option value="solidworks">Solidworks</option>
                        <option value="onshape">Onshape</option>
                        <option value="other">other</option>
                      </select>
                    </div>
                  </div>

                  <div>
                    <label className="field-label">team size</label>
                    <select className="select" value={data.team} onChange={set('team')}>
                      <option value="">choose one</option>
                      <option value="1-4">1 – 4 engineers</option>
                      <option value="5-15">5 – 15 engineers</option>
                      <option value="16-50">16 – 50 engineers</option>
                      <option value="50+">more than 50</option>
                    </select>
                  </div>

                  <button type="submit" className="btn" onMouseDown={(e) => window.attachRipple && window.attachRipple(e)}>
                    <span>Request access</span>
                    <span className="arrow">→</span>
                  </button>

                  <p className="wl-fine readout">
                    we read every submission. we reply to most within 3 business days.
                  </p>
                </> :

              <div className="wl-success">
                  <div className="wl-stamp">
                    <span className="wl-stamp-line">received</span>
                    <span className="wl-stamp-num readout">no. 0143</span>
                    <span className="wl-stamp-date readout">2026-05-03 · 14:22</span>
                  </div>
                  <h3 className="wl-success-h">On the list.</h3>
                  <p className="lead" style={{ margin: 0 }}>
                    A founder will reply within 3 business days from a real address.
                    If you don't hear back, write to <a href="mailto:hello@plumb.eng">hello@plumb.eng</a>.
                    We do not auto-respond.
                  </p>
                  <div className="wl-success-meta">
                    <span className="readout">{data.name || 'engineer'} · {data.company || 'company'} · {data.role || 'role'}</span>
                  </div>
                </div>
              }
            </form>
          </div>
        </div>

        <style>{`
          .wl-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
          @media (min-width: 900px) { .wl-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
          .wl-left .lead { max-width: 38ch; }
          .wl-meta {
            margin-top: 40px;
            border-top: 1px solid var(--border-default);
          }
          .wl-meta-row {
            display: flex; justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-default);
          }
          .wl-mk { font-size: 10px; letter-spacing: 0.12em; color: rgba(26,26,26,0.52); }
          .wl-mv { font-size: 12px; color: var(--color-graphite); }

          .wl-form {
            background: var(--color-surface-white);
            border: 1px solid var(--border-default);
            border-radius: 3px;
            padding: 28px;
            display: flex; flex-direction: column;
            gap: 18px;
            position: relative;
          }
          .wl-form-corner {
            display: flex; justify-content: space-between;
            font-size: 9px; color: rgba(26,26,26,0.4);
            letter-spacing: 0.1em;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border-default);
            margin-bottom: 4px;
          }
          .wl-row.two { display: grid; grid-template-columns: 1fr; gap: 18px; }
          @media (min-width: 600px) { .wl-row.two { grid-template-columns: 1fr 1fr; } }
          .wl-fine { font-size: 10px; color: rgba(26,26,26,0.5); letter-spacing: 0.04em; margin-top: 4px; }

          .wl-success { padding: 20px 8px; }
          .wl-stamp {
            display: inline-flex; flex-direction: column;
            align-items: flex-start; gap: 4px;
            padding: 12px 16px;
            border: 1px solid var(--color-prussian);
            border-radius: 2px;
            margin-bottom: 24px;
            transform: rotate(-1.5deg);
            background: rgba(27,58,92,0.04);
          }
          .wl-stamp-line {
            font-family: var(--font-mono);
            font-size: 11px; letter-spacing: 0.18em;
            color: var(--color-prussian); text-transform: uppercase;
          }
          .wl-stamp-num { font-size: 18px; color: var(--color-prussian); font-weight: 500; }
          .wl-stamp-date { font-size: 9px; color: rgba(27,58,92,0.6); letter-spacing: 0.06em; }
          .wl-success-h {
            font-family: var(--font-grotesk);
            font-size: 32px; font-weight: 400; letter-spacing: -0.02em;
            margin: 0 0 16px;
          }
          .wl-success-meta {
            margin-top: 24px; padding-top: 16px;
            border-top: 1px solid var(--border-default);
            font-size: 10px; color: rgba(26,26,26,0.55); letter-spacing: 0.06em;
          }
        `}</style>
      </section>
    </>);

};

window.PlumbPricingWaitlist = PlumbPricingWaitlist;