// RSVP page

function PageRSVP({ content }) {
  const rsvp = content.rsvp;
  const [step, setStep] = React.useState('form');
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [attending, setAttending] = React.useState(null); // 'yes' | 'no'
  const [plusOne, setPlusOne] = React.useState(null); // 'yes' | 'no'
  const [diet, setDiet] = React.useState('');
  const [song, setSong] = React.useState('');
  const [note, setNote] = React.useState('');

  const submit = (e) => {
    e.preventDefault();
    if (!name || attending === null) return;
    setStep('done');
  };

  if (step === 'done') {
    return (
      <main className="page-enter">
        <div className="container">
          <div className="rsvp-confirm">
            <span className="eyebrow">{rsvp.confirmEyebrow}</span>
            <h1 className="h2" style={{ marginTop: 22 }}>
              {attending === 'yes' ? <>Thank you,<br/><i>{name.split(' ')[0]}.</i></> : <>We'll<br/><i>miss you.</i></>}
            </h1>
            <div className="body-lg" style={{ marginTop: 28, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
              {attending === 'yes'
                ? rsvp.confirmYesBody
                : rsvp.confirmNoBody}
            </div>
            <button className="btn" style={{ marginTop: 36 }} onClick={() => setStep('form')}>{rsvp.confirmEditLabel}</button>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="page-enter">
      <header className="page-head">
        <window.FernFrond size={240} color="var(--fern)" animated style={{ position: 'absolute', top: -40, left: -80, transform: 'rotate(-10deg)', opacity: 0.4 }} />
        <window.MonsteraLeaf size={180} color="var(--fern-deep)" animated style={{ position: 'absolute', top: -20, right: -40, transform: 'rotate(15deg)', opacity: 0.45 }} />
        <window.Butterfly size={32} color="var(--bloom)" animated style={{ position: 'absolute', top: '45%', right: '20%', zIndex: 5 }} />
        <div className="container">
          <span className="eyebrow">{rsvp.eyebrow}</span>
          <h1 className="h2" style={{ marginTop: 22 }}>{rsvp.titleLine}<br/><i>{rsvp.titleEmphasis}</i></h1>
        </div>
        <window.MonsteraLeaf size={180} color="var(--fern)" style={{ position: 'absolute', top: 20, right: 80, opacity: 0.5 }} />
      </header>

      <section className="container">
        <div className="rsvp-wrap">
          <div>
            <p className="body-lg" style={{ marginBottom: 24 }}>
              {rsvp.intro}
            </p>
            <p className="body" style={{ fontSize: 14 }}>
              {rsvp.travelNote}
            </p>
          </div>

          <form className="rsvp-form" onSubmit={submit}>
            <div className="field">
              <label className="label">{rsvp.nameLabel}</label>
              <input type="text" placeholder={rsvp.namePlaceholder} value={name} onChange={e => setName(e.target.value)} required />
            </div>
            <div className="field">
              <label className="label">{rsvp.emailLabel}</label>
              <input type="email" placeholder={rsvp.emailPlaceholder} value={email} onChange={e => setEmail(e.target.value)} />
            </div>

            <div className="field">
              <label className="label">{rsvp.attendingLabel}</label>
              <div className="choice-row" style={{ marginTop: 8 }}>
                <button type="button" className={"choice" + (attending === 'yes' ? ' selected fern' : '')} onClick={() => setAttending('yes')}>
                  <span className="c-title">{rsvp.yesTitle}</span>
                  <span className="c-sub">{rsvp.yesSub}</span>
                </button>
                <button type="button" className={"choice" + (attending === 'no' ? ' selected' : '')} onClick={() => setAttending('no')}>
                  <span className="c-title">{rsvp.noTitle}</span>
                  <span className="c-sub">{rsvp.noSub}</span>
                </button>
              </div>
            </div>

            {attending === 'yes' && (
              <>
                <div className="field">
                  <label className="label">{rsvp.plusOneLabel}</label>
                  <div className="choice-row" style={{ marginTop: 8 }}>
                    <button type="button" className={"choice" + (plusOne === 'yes' ? ' selected' : '')} onClick={() => setPlusOne('yes')}>
                      <span className="c-title">{rsvp.plusOneYes}</span>
                    </button>
                    <button type="button" className={"choice" + (plusOne === 'no' ? ' selected' : '')} onClick={() => setPlusOne('no')}>
                      <span className="c-title">{rsvp.plusOneNo}</span>
                    </button>
                  </div>
                </div>

                <div className="field">
                  <label className="label">{rsvp.dietLabel}</label>
                  <input type="text" placeholder={rsvp.dietPlaceholder} value={diet} onChange={e => setDiet(e.target.value)} />
                </div>

                <div className="field">
                  <label className="label">{rsvp.songLabel}</label>
                  <input type="text" placeholder={rsvp.songPlaceholder} value={song} onChange={e => setSong(e.target.value)} />
                </div>
              </>
            )}

            <div className="field">
              <label className="label">{rsvp.noteLabel}</label>
              <textarea placeholder={rsvp.notePlaceholder} value={note} onChange={e => setNote(e.target.value)} />
            </div>

            <div>
              <button className="btn fern" type="submit">{rsvp.submitLabel} <span className="arrow">→</span></button>
            </div>
          </form>
        </div>
      </section>
    </main>
  );
}

window.PageRSVP = PageRSVP;