const TINTS={navy:'var(--navy-100)',gold:'var(--gold-100)',sage:'var(--sage-100)',terracotta:'var(--terracotta-100)'};
const INKS={navy:'var(--navy-700)',gold:'var(--gold-600)',sage:'var(--sage-600)',terracotta:'var(--terracotta-600)'};
function IconCircleLocal({tone='navy',icon,size=56}){
return <div style={{width:size,height:size,borderRadius:'var(--radius-full)',background:TINTS[tone],color:INKS[tone],display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><i data-lucide={icon} style={{width:size*0.42,height:size*0.42}}></i></div>;
}
const btnPrimary={background:'var(--navy-900)',color:'#fff',border:'none',padding:'14px 28px',borderRadius:'var(--radius-sm)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:15,textDecoration:'none',display:'inline-flex',alignItems:'center',gap:8};
const btnAccent={background:'var(--gold-500)',color:'var(--ink)',border:'none',padding:'14px 28px',borderRadius:'var(--radius-sm)',fontFamily:'var(--font-body)',fontWeight:600,fontSize:15,textDecoration:'none',display:'inline-flex',alignItems:'center',gap:8};
function Breadcrumb({crumbs}){
return <div style={{display:'flex',gap:8,alignItems:'center',fontSize:13,color:'var(--muted)',flexWrap:'wrap'}}>
{crumbs.map((c,i)=>(<React.Fragment key={i}>{i>0&&<i data-lucide="chevron-right" style={{width:12,height:12}}></i>}{c.href?<a href={c.href} style={{color:'var(--muted)',textDecoration:'none'}}>{c.label}</a>:<span style={{color:'var(--ink)',fontWeight:600}}>{c.label}</span>}</React.Fragment>))}
</div>;
}
function PageHero({crumbs,icon,tone,title,subtitle}){
return (<div style={{background:'var(--surface)',padding:'40px 24px 56px'}}>
<div style={{maxWidth:'var(--max-content-width)',margin:'0 auto'}}>
<Breadcrumb crumbs={crumbs}/>
<div style={{display:'flex',alignItems:'center',gap:20,marginTop:24,flexWrap:'wrap'}}>
{icon&&<IconCircleLocal tone={tone} icon={icon} size={64}/>}
<div>
<h1 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-display-lg-size)',color:'var(--ink)',margin:0}}>{title}</h1>
<p style={{fontSize:'var(--text-body-md-size)',color:'var(--body)',marginTop:10,maxWidth:640}}>{subtitle}</p>
</div>
</div>
<div style={{display:'flex',gap:12,marginTop:28,flexWrap:'wrap'}}>
<a href="contact.html" style={btnPrimary}>Enquire Now</a>
<a href="tel:9814161376" style={btnAccent}><i data-lucide="phone" style={{width:16,height:16}}></i>Call 98141-61376</a>
</div>
</div>
</div>);
}
function Section({title,eyebrow,bg,children,center}){
return (<div style={{background:bg||'var(--canvas)',padding:'var(--space-section) 24px'}}>
<div style={{maxWidth:'var(--max-content-width)',margin:'0 auto',textAlign:center?'center':'left'}}>
{eyebrow&&<div style={{fontSize:13,fontWeight:700,color:'var(--gold-600)',textTransform:'uppercase',letterSpacing:'.5px',marginBottom:10}}>{eyebrow}</div>}
{title&&<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-display-lg-size)',color:'var(--ink)',margin:'0 0 32px'}}>{title}</h2>}
{children}
</div>
</div>);
}
function BenefitsGrid({items}){
return <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:20}}>
{items.map((b,i)=><div key={i} style={{background:'#fff',border:'1px solid var(--hairline)',borderRadius:'var(--radius-md)',padding:24,display:'flex',flexDirection:'column',gap:12}}>
<IconCircleLocal tone={b.tone||'navy'} icon={b.icon} size={48}/>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-title-md-size)',color:'var(--ink)'}}>{b.title}</div>
<div style={{fontSize:'var(--text-body-sm-size)',color:'var(--body)',lineHeight:1.6}}>{b.desc}</div>
</div>)}
</div>;
}
const STEP_TONES=['navy','gold','sage','terracotta'];
function ProcessSteps({steps}){
return <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:24}}>
{steps.map((s,i)=><div key={i} style={{display:'flex',flexDirection:'column',gap:10}}>
<div style={{width:40,height:40,borderRadius:'var(--radius-full)',background:TINTS[STEP_TONES[i%4]],color:INKS[STEP_TONES[i%4]],display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontWeight:700}}>{i+1}</div>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:15,color:'var(--ink)'}}>{s.title}</div>
<div style={{fontSize:14,color:'var(--body)',lineHeight:1.6}}>{s.desc}</div>
</div>)}
</div>;
}
function DocumentsList({items}){
return <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:14}}>
{items.map((d,i)=><div key={i} style={{display:'flex',alignItems:'center',gap:10,background:'#fff',border:'1px solid var(--hairline)',borderRadius:'var(--radius-sm)',padding:'14px 16px'}}>
<i data-lucide="file-check" style={{width:18,height:18,color:'var(--sage-600)',flexShrink:0}}></i>
<span style={{fontSize:14,color:'var(--ink)',fontWeight:500}}>{d}</span>
</div>)}
</div>;
}
function FAQAccordion({items}){
const [openIdx,setOpenIdx]=React.useState(0);
React.useEffect(()=>{window.lucide&&window.lucide.createIcons();});
return <div>{items.map((f,i)=>(<div key={i} style={{borderBottom:'1px solid var(--hairline)'}}>
<div onClick={()=>setOpenIdx(openIdx===i?-1:i)} style={{cursor:'pointer',padding:'18px 4px',display:'flex',justifyContent:'space-between',alignItems:'center',gap:16,fontWeight:700,color:'var(--ink)',fontFamily:'var(--font-display)',fontSize:15}}>
{f.q}<i data-lucide={openIdx===i?'minus':'plus'} style={{width:18,height:18,flexShrink:0,color:'var(--gold-600)'}}></i>
</div>
{openIdx===i&&<div style={{padding:'0 4px 18px',color:'var(--body)',fontSize:14,lineHeight:1.7}}>{f.a}</div>}
</div>))}</div>;
}
function CTABand({title,subtitle}){
return <div style={{background:'var(--navy-900)',padding:'56px 24px'}}>
<div style={{maxWidth:'var(--max-content-width)',margin:'0 auto',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:24}}>
<div>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-display-md-size)',color:'#fff'}}>{title||'Ready to get started?'}</div>
<div style={{color:'#c9d2de',marginTop:8,fontSize:15}}>{subtitle||"Talk to our team today \u2014 we'll guide you through every step."}</div>
</div>
<div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
<a href="contact.html" style={btnAccent}>Send an Enquiry</a>
<a href="tel:9814161376" style={{background:'transparent',color:'#fff',border:'1px solid #3a5f89',padding:'14px 28px',borderRadius:'var(--radius-sm)',fontWeight:600,fontSize:15,textDecoration:'none',display:'inline-flex',alignItems:'center',gap:8}}><i data-lucide="phone" style={{width:16,height:16}}></i>98141-61376</a>
</div>
</div>
</div>;
}
function Field({label,name,placeholder,type}){
return <label style={{display:'flex',flexDirection:'column',gap:6}}>
<span style={{fontSize:13,fontWeight:600,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.3px'}}>{label}</span>
<input name={name} type={type||'text'} required placeholder={placeholder} style={{height:48,padding:'0 14px',borderRadius:'var(--radius-sm)',border:'1px solid var(--hairline)',fontSize:15,fontFamily:'var(--font-body)'}}/>
</label>;
}
const CONTACT_EMAIL='admin@allyinstitute.in';
function ContactFormCard({service}){
const sentParam=typeof window!=='undefined'&&new URLSearchParams(window.location.search).get('sent')==='1';
const serviceParam=typeof window!=='undefined'?new URLSearchParams(window.location.search).get('service'):null;
const serviceLabel=service||(serviceParam&&window.SERVICES&&(window.SERVICES.find(s=>s.slug===serviceParam)||{}).title)||null;
const [sent]=React.useState(sentParam);
const nextUrl=typeof window!=='undefined'?window.location.origin+window.location.pathname+'?sent=1':'';
return <div style={{background:'#fff',border:'1px solid var(--hairline)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-card)',padding:32,maxWidth:460,width:'100%'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'var(--text-title-md-size)',color:'var(--ink)',marginBottom:16}}>Send an Enquiry</div>
{sent?<div style={{fontSize:14,color:'var(--sage-600)',fontWeight:600}}>Thanks \u2014 we've received your enquiry and will get back to you shortly.</div>:
<form action={'https://formsubmit.co/'+CONTACT_EMAIL} method="POST" style={{display:'flex',flexDirection:'column',gap:14}}>
<input type="hidden" name="_subject" value="New Enquiry \u2014 Ally Institute of Education"/>
<input type="hidden" name="_captcha" value="false"/>
<input type="hidden" name="_template" value="table"/>
<input type="hidden" name="_next" value={nextUrl}/>
<Field label="Full Name" name="full_name" placeholder="Jasleen Kaur"/>
<Field label="Phone Number" name="phone" placeholder="98xxxxxxxx"/>
<Field label="Email" name="email" type="email" placeholder="you@example.com"/>
<Field label="Service" name="service" placeholder={serviceLabel||'Which service can we help with?'}/>
<button type="submit" style={{background:'var(--navy-900)',color:'#fff',border:'none',height:48,borderRadius:'var(--radius-sm)',fontWeight:600,fontSize:15,cursor:'pointer'}}>Submit Enquiry</button>
</form>}
</div>;
}
function ContactRow({icon,text,href}){
const inner=<React.Fragment><IconCircleLocal tone="navy" icon={icon} size={40}/><span style={{fontSize:15,color:'var(--ink)',fontWeight:500}}>{text}</span></React.Fragment>;
return href?<a href={href} style={{display:'flex',alignItems:'center',gap:14,textDecoration:'none'}}>{inner}</a>:<div style={{display:'flex',alignItems:'center',gap:14}}>{inner}</div>;
}
function ContactAndMap(){
return <div style={{padding:'var(--space-section) 24px',background:'var(--surface)'}}>
<div className="grid-2" style={{maxWidth:'var(--max-content-width)',margin:'0 auto',display:'grid',gridTemplateColumns:'1fr 1fr',gap:40,alignItems:'start'}}>
<div>
<h2 style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-display-lg-size)',color:'var(--ink)',margin:'0 0 20px'}}>Visit or Call Us</h2>
<div style={{display:'flex',flexDirection:'column',gap:18}}>
<ContactRow icon="map-pin" text="Opp. National Insurance Company, Mohalla Amarpura, Ahmedgarh"/>
<ContactRow icon="phone" text="98141-61376" href="tel:9814161376"/>
<ContactRow icon="mail" text="allyinstituteofeducation@gmail.com" href="mailto:allyinstituteofeducation@gmail.com"/>
<ContactRow icon="mail" text="admin@allyinstitute.in" href="mailto:admin@allyinstitute.in"/>
</div>
<div style={{borderRadius:'var(--radius-lg)',overflow:'hidden',marginTop:28,border:'1px solid var(--hairline)'}}>
<iframe title="map" src="https://www.google.com/maps?q=Amarpura+Ahmedgarh+Punjab&output=embed" style={{width:'100%',height:280,border:0}} loading="lazy"></iframe>
</div>
</div>
<ContactFormCard/>
</div>
</div>;
}
function TestimonialStrip(){
const T=[
{name:'Simranjit K.',role:'Study Visa Student',quote:'They handled my CA report and passport renewal together \u2014 saved weeks of running around.'},
{name:'Harpreet S.',role:'Working Professional',quote:'Sent money home the same day, and the rate was better than my bank.'},
{name:'Manpreet Family',role:'PR Applicants',quote:'From PCC to property evaluation, everything was explained clearly, step by step.'},
];
return <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:20}}>
{T.map((t,i)=><div key={i} style={{background:'#fff',border:'1px solid var(--hairline)',borderRadius:'var(--radius-md)',padding:24,display:'flex',flexDirection:'column',gap:14}}>
<i data-lucide="quote" style={{width:22,height:22,color:'var(--gold-500)'}}></i>
<div style={{fontSize:15,color:'var(--ink)',lineHeight:1.6}}>"{t.quote}"</div>
<div style={{fontSize:13,color:'var(--muted)',fontWeight:600}}>{t.name} · {t.role}</div>
</div>)}
</div>;
}
function StickyCallBar(){
return <div className="sticky-cta">
<a href="tel:9814161376" style={{flex:1,color:'#fff',textDecoration:'none',fontWeight:700,fontSize:15,display:'flex',alignItems:'center',justifyContent:'center',gap:8,padding:'14px 0'}}><i data-lucide="phone" style={{width:16,height:16}}></i>Call Now</a>
<a href="contact.html" style={{flex:1,background:'var(--gold-500)',color:'var(--ink)',textDecoration:'none',fontWeight:700,fontSize:15,display:'flex',alignItems:'center',justifyContent:'center',gap:8,padding:'14px 0'}}>Enquire</a>
</div>;
}
Object.assign(window,{Breadcrumb,PageHero,IconCircleLocal,Section,BenefitsGrid,ProcessSteps,DocumentsList,FAQAccordion,CTABand,ContactFormCard,ContactAndMap,TestimonialStrip,StickyCallBar,btnPrimary,btnAccent});