const {Button}=window.VedutaDesignSystem_f6874f;
const TIER_OPTIONS=[
  ['database','01 · Curated Database'],
  ['concie-agent','02 · The Concie-agent'],
  ['scout','03 · The Scout'],
  ['owner','04 · The Owner'],
  ['unsure','Not sure yet']
];
/* Form field styled to match the design-system Input. `as` = input | textarea | select */
function VField({label,name,type='text',as='input',value,onChange,required,placeholder,options,rows=4,hint,half}){
  const id='f-'+name;
  const common={id,name,value,onChange:e=>onChange(e.target.value),required,placeholder,className:'vfield'};
  return <label htmlFor={id} style={{display:'flex',flexDirection:'column',gap:'8px',gridColumn:half?'span 1':'1 / -1'}}>
    <span style={{fontFamily:'var(--font-sans)',fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:500,color:'var(--navy)'}}>{label}{required&&<span style={{color:'var(--gold)'}}> *</span>}</span>
    {as==='textarea'?<textarea {...common} rows={rows}/>
     :as==='select'?<select {...common}>{options.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>
     :<input {...common} type={type}/>}
    {hint&&<span style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'12.5px',color:'var(--text-muted)'}}>{hint}</span>}
  </label>;
}
function VFormStatus({status,error}){
  if(status==='error')return <div role="alert" style={{fontFamily:'var(--font-sans)',fontSize:'14px',color:'var(--terracotta)',marginTop:'14px'}}>{error||'Something went wrong sending that. Please try again in a moment.'}</div>;
  return null;
}
function ApplyPage({tier='',onNavigate}){
  const init={firstName:'',lastName:'',email:'',phone:'',city:'',tier:TIER_OPTIONS.some(([v])=>v===tier)?tier:'unsure',travel:'',love:'',happiest:'',accredited:''};
  const [f,setF]=React.useState(init);
  const [status,setStatus]=React.useState('idle');
  const set=k=>v=>setF(x=>({...x,[k]:v}));
  React.useEffect(()=>{if(TIER_OPTIONS.some(([v])=>v===tier))setF(x=>({...x,tier}));},[tier]);
  const submit=async e=>{
    e.preventDefault();
    if(status==='sending')return;
    setStatus('sending');
    const ok=await window.vedutaSubmitForm('membership-application',{...f,page:window.location.hash});
    setStatus(ok?'sent':'error');
    if(ok)window.scrollTo({top:0,behavior:'smooth'});
  };
  return <div>
    <div className="page-hero" style={{background:'var(--grad-hero)',padding:'170px 48px 70px',textAlign:'center'}}>
      <div style={{fontSize:'12px',letterSpacing:'0.28em',textTransform:'uppercase',color:'var(--gold)',fontWeight:500,marginBottom:'18px'}}>Request an Invitation</div>
      <h1 style={{margin:0,fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'var(--text-h1)',color:'var(--text-on-dark)'}}>Tell us how you travel</h1>
      <p style={{margin:'22px auto 0',maxWidth:'560px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'17px',lineHeight:'var(--leading-body)',color:'rgba(245,241,232,.72)'}}>A short introduction, read by a person. Founding members are invited from the waitlist first when we launch in Spring 2027.</p>
    </div>
    <VSection narrow style={{paddingTop:'72px'}}>
      {status==='sent'
        ?<div style={{textAlign:'center',padding:'20px 0 40px'}}>
          <div style={{fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'38px',color:'var(--navy)',lineHeight:1.2}}>Request received.</div>
          <p style={{margin:'18px auto 30px',maxWidth:'480px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'16px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>Thank you, {f.firstName}. We read every request ourselves and will be in touch at {f.email}.</p>
          <Button variant="outlineDark" onClick={()=>onNavigate&&onNavigate('Destinations')}>Browse the portfolio</Button>
        </div>
        :<form onSubmit={submit} noValidate={false} style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:'22px 20px'}}>
          <VField half label="First name" name="firstName" value={f.firstName} onChange={set('firstName')} required/>
          <VField half label="Last name" name="lastName" value={f.lastName} onChange={set('lastName')} required/>
          <VField half label="Email" name="email" type="email" value={f.email} onChange={set('email')} required/>
          <VField half label="Phone" name="phone" type="tel" value={f.phone} onChange={set('phone')} placeholder="Optional"/>
          <VField half label="Home city" name="city" value={f.city} onChange={set('city')} required/>
          <VField half label="Tier of interest" name="tier" as="select" value={f.tier} onChange={set('tier')} options={TIER_OPTIONS}/>
          <VField label="How do you travel?" name="travel" as="textarea" value={f.travel} onChange={set('travel')} required placeholder="Solo, with a partner, with friends? A long weekend or three weeks? Planned to the hour or figured out over coffee?"/>
          <VField label="What do you love?" name="love" as="textarea" value={f.love} onChange={set('love')} required placeholder="Architecture, food, music, art, the sea, the mountains — what makes a trip for you?"/>
          <VField label="Where have you been happiest?" name="happiest" as="textarea" value={f.happiest} onChange={set('happiest')} required placeholder="One place, and why."/>
          {f.tier==='owner'&&<VField label="Accredited investor status" name="accredited" as="select" value={f.accredited} onChange={set('accredited')} options={[['','Select one'],['yes','I am an accredited investor'],['no','I am not'],['unsure','Not sure']]} hint="Ownership is limited to accredited investors under local regulations."/>}
          <div style={{gridColumn:'1 / -1',marginTop:'8px'}}>
            <Button size="lg" onClick={undefined}>{status==='sending'?'Sending…':'Request an Invitation'}</Button>
            <VFormStatus status={status}/>
            <div style={{marginTop:'14px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'12.5px',color:'var(--text-muted)'}}>No commitment, no card. We'll only use this to review your request and contact you about membership.</div>
          </div>
        </form>}
    </VSection>
  </div>;
}
/* Contact form used on the About page. */
function VContactForm(){
  const [f,setF]=React.useState({name:'',email:'',message:''});
  const [status,setStatus]=React.useState('idle');
  const set=k=>v=>setF(x=>({...x,[k]:v}));
  const submit=async e=>{
    e.preventDefault();
    if(status==='sending')return;
    setStatus('sending');
    const ok=await window.vedutaSubmitForm('contact',{...f,page:window.location.hash});
    setStatus(ok?'sent':'error');
  };
  if(status==='sent')return <div style={{fontFamily:'var(--font-serif)',fontSize:'24px',fontStyle:'italic',color:'var(--navy)'}}>Thank you, {f.name}. We'll write back soon.</div>;
  return <form onSubmit={submit} style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:'22px 20px'}}>
    <VField half label="Name" name="name" value={f.name} onChange={set('name')} required/>
    <VField half label="Email" name="email" type="email" value={f.email} onChange={set('email')} required/>
    <VField label="Message" name="message" as="textarea" rows={5} value={f.message} onChange={set('message')} required/>
    <div style={{gridColumn:'1 / -1'}}>
      <Button variant="outlineDark">{status==='sending'?'Sending…':'Send Message'}</Button>
      <VFormStatus status={status}/>
    </div>
  </form>;
}
Object.assign(window,{ApplyPage,VContactForm,VField});