// Layout for Request Access — atelier-desk two-column (portrait plate left, form right).

const AtelierLayout = ({data, update, onSubmit, errors, sending, submitError}) => (
  <main>
    <section style={{padding:"140px 0 0",
      background:"radial-gradient(ellipse at 30% 20%, #2A1C0E 0%, #0F0A06 65%, #0B0703 100%)"}}>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1.15fr",
        gap:0, minHeight:"90vh", borderBottom:"1px solid rgba(170,135,87,.18)"}}>
        {/* Portrait plate */}
        <div style={{position:"relative", padding:"100px 80px 80px",
          borderRight:"1px solid rgba(170,135,87,.18)",
          background:"linear-gradient(180deg, #14100A 0%, #0B0703 100%)"}}>
          <div style={{position:"sticky", top:100}}>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:30}}>— The atelier desk</div>
            <h1 style={{font:"400 92px/1 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 32px"}}>
              A letter,<br/><em style={{color:"var(--epa-champagne)"}}>read by a founder.</em>
            </h1>
            <Arabesque w={120}/>
            <p style={{font:"italic 300 18px/1.55 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"36px 0 36px", maxWidth:420}}>
              The desk is small, and our attention is complete. Write to us below;
              a founder reads every application and replies within twenty-four hours.
            </p>

            {/* mock portrait plate */}
            <div style={{marginTop:48, maxWidth:440}}>
              <Photo tone="desk" h={320} src="assets/paris-atelier-desk.webp" alt="The atelier desk · Paris 8ème" caption="The atelier desk · Paris 8ème"/>
            </div>

            <div style={{marginTop:40, paddingTop:32,
              borderTop:"1px solid rgba(170,135,87,.2)",
              display:"grid", gridTemplateColumns:"1fr 1fr", gap:20, maxWidth:440}}>
              {[
                ["48h", "Reply window"],
                ["200", "Founding members"],
                ["3",   "Cities, for now"],
                ["—",   "No public waitlist"]
              ].map(([n,l]) => (
                <div key={l}>
                  <div style={{font:"300 32px/1 var(--font-display)",
                    color:"var(--epa-champagne)"}}>{n}</div>
                  <div style={{font:"500 10px/1.3 var(--font-ui)", color:"var(--epa-gold)",
                    letterSpacing:".26em", textTransform:"uppercase", marginTop:8}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Form column */}
        <div style={{padding:"100px 80px 120px",
          background:"var(--epa-charcoal)"}}>
          <div style={{font:"400 10px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".4em", textTransform:"uppercase", marginBottom:18}}>— Application</div>
          <h2 style={{font:"400 48px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 14px"}}>Tell the atelier about you.</h2>
          <p style={{font:"italic 300 15px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 0 48px", maxWidth:440}}>
            Required fields are marked with a fine point. Everything else — if it matters to you, it matters to us.
          </p>

          <form
            onSubmit={onSubmit}
            name="request-access"
            method="POST"
            data-netlify="true"
            netlify-honeypot="bot-field"
            style={{display:"grid", gap:28, maxWidth:520}}>
            {/* Netlify identifiers — invisible to the user */}
            <input type="hidden" name="form-name" value="request-access"/>
            <p hidden><label>Leave blank if human: <input name="bot-field"/></label></p>

            <UnderlineField label="Full name"          name="name"  value={data.name}  onChange={update("name")}  error={errors.name}  placeholder="Given and family name"/>
            <UnderlineField label="E-mail"             name="email" value={data.email} onChange={update("email")} error={errors.email} placeholder="where we may reach you" type="email"/>
            <PhoneField dial={data.dial} phone={data.phone}
              onDial={update("dial")} onPhone={update("phone")} error={errors.phone}/>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}}>
              <UnderlineField label="City"   name="city"  value={data.city}  onChange={update("city")}  error={errors.city}  placeholder="e.g. Paris"/>
              <UnderlineField label="Language" name="lang" value={data.lang} onChange={update("lang")} as="select" required={false}>
                {LANGS.map(l => <option key={l} value={l}>{l}</option>)}
              </UnderlineField>
            </div>
            <UnderlineField label="Introduced by" name="intro" value={data.intro} onChange={update("intro")}
              placeholder="A member's name, if one sent you" required={false}/>
            <UnderlineField label="A word about yourself" name="message" value={data.message} onChange={update("message")}
              as="textarea" required={false}
              placeholder="What you travel for · what you expect of an atelier · anything worth noting."/>

            <div style={{marginTop:20, display:"flex",
              alignItems:"center", justifyContent:"space-between", gap:20}}>
              <div style={{font:"italic 300 12px/1.5 var(--font-editorial)",
                color: submitError ? "#C4715A" : "var(--epa-text-secondary)", maxWidth:280}}>
                {submitError || "Held in confidence — within the atelier, and no further."}
              </div>
              <button type="submit" disabled={sending} style={{
                background: sending ? "transparent" : "var(--epa-gold)",
                color: sending ? "var(--epa-champagne)" : "var(--epa-charcoal)",
                border:"1px solid var(--epa-gold)",
                padding:"16px 30px",
                font:"500 12px/1 var(--font-ui)",
                letterSpacing:".28em", textTransform:"uppercase",
                cursor: sending ? "wait" : "pointer",
                opacity: sending ? .7 : 1,
                transition:"all .22s"}}
                onMouseEnter={e=>{if(sending) return; e.currentTarget.style.background="transparent";e.currentTarget.style.color="var(--epa-champagne)"}}
                onMouseLeave={e=>{if(sending) return; e.currentTarget.style.background="var(--epa-gold)";e.currentTarget.style.color="var(--epa-charcoal)"}}>
                {sending ? "Sending…" : "Apply"}
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  </main>
);

Object.assign(window, {AtelierLayout});