const {Button}=window.VedutaDesignSystem_f6874f;
const INVITE_ENDPOINT='/.netlify/functions/invite';
function InvitePage({onNavigate}){
  const init={fromName:'',fromEmail:'',toName:'',toEmail:'',note:'',website:''};
  const [f,setF]=React.useState(init);
  const [status,setStatus]=React.useState('idle');
  const [error,setError]=React.useState('');
  const set=k=>v=>setF(x=>({...x,[k]:v}));
  const submit=async e=>{
    e.preventDefault();
    if(status==='sending')return;
    setStatus('sending');setError('');
    try{
      const r=await fetch(INVITE_ENDPOINT,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(f)});
      const j=await r.json().catch(()=>({}));
      if(r.ok&&j.ok){setStatus('sent');window.scrollTo({top:0,behavior:'smooth'});}
      else{setStatus('error');setError(j.error||"We couldn't send that just now. Please try again in a moment.");}
    }catch(err){setStatus('error');setError("We couldn't send that just now. Please try again in a moment.");}
  };
  const another=()=>{setF(x=>({...init,fromName:x.fromName,fromEmail:x.fromEmail}));setStatus('idle');};
  const previewIntro=f.note.trim()||((f.fromName.trim()||'Your friend')+' thought of you for this. Veduta Travel Club is a curated travel club launching Spring 2027: fifteen cities, personally vetted apartments, restaurants, and experiences, and a concierge if you want the trip planned for you.');
  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'}}>Invite a Friend</div>
      <h1 style={{margin:0,fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'var(--text-h1)',color:'var(--text-on-dark)'}}>Know someone who should be here?</h1>
      <p style={{margin:'22px auto 0',maxWidth:'540px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'17px',lineHeight:'var(--leading-body)',color:'rgba(245,241,232,.72)'}}>We'll send them an invitation to pre-register, from the club, with your name on it and a link that takes ten seconds.</p>
    </div>
    <VSection narrow style={{paddingTop:'72px'}}>
      {status==='sent'
        ?<div style={{textAlign:'center',padding:'10px 0 30px'}}>
          <div style={{fontFamily:'var(--font-serif)',fontWeight:300,fontSize:'36px',color:'var(--navy)',lineHeight:1.2}}>Invitation sent.</div>
          <p style={{margin:'16px auto 28px',maxWidth:'480px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'16px',lineHeight:'var(--leading-body)',color:'var(--text-body)'}}>{f.toName||f.toEmail} will get an email from Veduta Travel Club in the next few minutes. If they reply, it goes straight to you.</p>
          <div style={{display:'flex',gap:'14px',justifyContent:'center',flexWrap:'wrap'}}>
            <Button onClick={another}>Invite Someone Else</Button>
            <Button variant="outlineDark" onClick={()=>onNavigate&&onNavigate('Destinations')}>Browse the Portfolio</Button>
          </div>
        </div>
        :<form onSubmit={submit} style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:'22px 20px'}}>
          <VField half label="Your name" name="fromName" value={f.fromName} onChange={set('fromName')} required/>
          <VField half label="Your email" name="fromEmail" type="email" value={f.fromEmail} onChange={set('fromEmail')} required hint="Replies go to you."/>
          <VField half label="Friend's name" name="toName" value={f.toName} onChange={set('toName')} placeholder="Optional"/>
          <VField half label="Friend's email" name="toEmail" type="email" value={f.toEmail} onChange={set('toEmail')} required/>
          <VField label="Personal note" name="note" as="textarea" rows={5} value={f.note} onChange={set('note')} placeholder="Optional. Leave blank and we'll include a short description of the club." hint="The pre-registration link is added for you."/>
          <input type="text" name="website" value={f.website} onChange={e=>set('website')(e.target.value)} tabIndex={-1} autoComplete="off" aria-hidden="true" style={{position:'absolute',left:'-9999px',width:'1px',height:'1px',opacity:0}}/>
          <div style={{gridColumn:'1 / -1'}}>
            <Button size="lg">{status==='sending'?'Sending…':'Send Invitation'}</Button>
            {status==='error'&&<div role="alert" style={{fontFamily:'var(--font-sans)',fontSize:'14px',color:'var(--terracotta)',marginTop:'14px'}}>{error}</div>}
            <div style={{marginTop:'14px',fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'12.5px',color:'var(--text-muted)'}}>One email, from Veduta Travel Club, with your name and email as the reply address. We don't add anyone to a list or send anything else.</div>
          </div>
        </form>}
    </VSection>
    {status!=='sent'&&<VSection bg="var(--cream-warm)" narrow label="Preview" headline="What they'll receive">
      <div style={{background:'var(--surface-card)',border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-md)',padding:'26px 30px',boxShadow:'var(--shadow-card)'}}>
        <div style={{fontFamily:'var(--font-sans)',fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:500,color:'var(--gold)',marginBottom:'10px'}}>Subject</div>
        <div style={{fontFamily:'var(--font-serif)',fontSize:'21px',color:'var(--navy)',marginBottom:'22px'}}>{(f.fromName.trim()||'Your friend')} invited you to pre-register for Veduta Travel Club</div>
        <div style={{fontFamily:'var(--font-sans)',fontWeight:300,fontSize:'15px',lineHeight:1.7,color:'var(--text-body)',display:'flex',flexDirection:'column',gap:'14px'}}>
          <p style={{margin:0}}>{f.toName.trim()?'Hi '+f.toName.trim()+',':'Hi,'}</p>
          <p style={{margin:0}}>{previewIntro}</p>
          <p style={{margin:0}}>You can pre-register here. It takes ten seconds and puts you on the founding-member waitlist.</p>
          <div><span style={{display:'inline-block',background:'var(--gold)',color:'var(--navy)',fontSize:'11px',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:500,padding:'11px 22px',borderRadius:'var(--radius-sm)'}}>Pre-register</span></div>
          <p style={{margin:0}}>{f.fromName.trim()||'Your friend'}</p>
        </div>
      </div>
    </VSection>}
  </div>;
}
window.InvitePage=InvitePage;